/
index.html
161 lines (152 loc) · 7.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- our own css and js file -->
<link rel="stylesheet" type="text/css" href="assets/css/home.css"/>
<script src="assets/javascripts/home.js"></script>
<title>OurTube</title>
</head>
<body class="bg-light">
<!-- Navbar -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-fixed-top">
<a class="navbar-brand" href="index.html"><h1>OurTube</h1></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMainMenu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
精選頻道
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMainMenu">
<a class="dropdown-item" href="#">中英文雙字幕影片</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">深度英文演講</a>
<a class="dropdown-item" href="#">知識型動畫</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">看BBC學英文</a>
<a class="dropdown-item" href="#">看CNN學英文</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">TOEIC 多益考試</a>
<a class="dropdown-item" href="#">TOFEL 托福考試</a>
<a class="dropdown-item" href="#">IELTS 雅思 <span class="badge badge-danger">NEW</span></a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">阿滴英文 </a>
<a class="dropdown-item" href="#">主編解析 <span class="badge badge-danger">NEW</span></a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLevels" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
程度分級
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownLevels">
<div class="dropright" href="#">
<a class="dropdown-item dropdown-toggle" href="#" id="levelsDropdownLevel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">初級: TOEIC 250-545</a>
<div class="dropdown-menu" aria-labelledby="levelsDropdownLevel1">
<a class="dropdown-item" href="#">a</a>
</div>
</div>
<div class="dropright" href="#">
<a class="dropdown-item dropdown-toggle" href="#" id="levelsDropdownLevel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">中級: TOEIC 550-780</a>
<div class="dropdown-menu" aria-labelledby="levelsDropdownLevel1">
<a class="dropdown-item" href="#">a</a>
</div>
</div>
<div class="dropright" href="#">
<a class="dropdown-item dropdown-toggle" href="#" id="levelsDropdownLevel1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">高級: TOEIC 785-990</a>
<div class="dropdown-menu" aria-labelledby="levelsDropdownLevel1">
<a class="dropdown-item" href="#">a</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
聽力口說
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">每日口說挑戰</a>
<a class="dropdown-item" href="#">聽力測驗</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
社群
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">激勵牆</a>
<a class="dropdown-item" href="#">翻譯社群</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">VoiceTube Campus</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">匯入影片</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Navbar -->
<!-- The main content -->
<!-- This container contains all the items -->
<div class="container main-content">
<!-- Within the main container, I use one row item to implement RWD -->
<div class="row">
<div class="col-12">
<div class="d-lg-block d-none">
<img src="./assets/images/hero_ad_banner.png" alt="banner_ad" class="img-center">
</div>
</div>
</div>
<div class="row">
<!-- The video part, using "col-sm-9" to keep the spaces between main contents and the sidebar when reading on the screens larger than small ones -->
<div class="col-12 col-md-8 col-lg-9 content ">
<!-- Using another row item to divide title and videos -->
<div class="row section-title__latest">
<h>每日最新影片</h>
</div>
<!-- Latest video menu will be insert into below ('.latest_menu') -->
<!-- Videos here. Using "col-lg-4" class to keep the spaces and using "col-12" class to convert the three-column style to one-column style -->
<div class="row latest_menu"></div>
</div>
<!-- The sidebar part, using "col-12" to move the whole part under the main content(videos) when reading on small devices. The contents inside use the Bootstrap card component -->
<div class="col-12 col-md-4 col-lg-3">
<div class="card sidebar panel">
<img class="card-img-top img-cm" src="https://2.bp.blogspot.com/-6gFTAUHPMxQ/Wxt2YvEiG0I/AAAAAAAAOgU/xdJdvgxzQAI5ELvirno6dHYTD5mXtk1RgCLcBGAs/s1600/0.png" alt="Card image cap">
<div class="card-body panel-body">
<h5 class="card-title panel-heading">
【秋番】2018年10月新番一覽（日本秋季新番列表）</h5>
<p class="card-text">還沒找到這季要追的新番嗎？</p>
<a href="http://justlaughtw.blogspot.com/2018/04/2018-10.html" target="_blank" class="btn btn-primary">去看看</a>
</div>
</div>
<div class="card sidebar">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>