-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
199 lines (197 loc) · 6.71 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/lightbox.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="icon-bar">
<ul>
<li><a href="#" class="fb-font-color"><i class="icon-facebook-official"></i>粉絲團</a></li>
<li><a href="#" class="twitter-font-color"><i class="icon-twitter"></i>追隨我們</a></li>
</ul>
</div>
<div class="menu">
<a href="#"><img src="./img/logo.png" alt=""></a>
<ul>
<li><a href="">首頁</a></li>
<li class="dropdown"><a href="">產品介紹</a>
<ul class="dropdown-item dropdown-open">
<li><a href="#">HTML&CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="">聯絡我們</a></li>
</ul>
</div>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h2>
六角學院<br>
讓您奠定良好的前端基礎
</h2>
</div>
<div class="swiper-slide">
<h2>
六角學院<br>
讓您奠定良好的前端基礎
</h2>
</div>
<div class="swiper-slide">
<h2>
六角學院<br>
讓您奠定良好的前端基礎
</h2>
</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</header>
<div class="content">
<article class="feature-introduction">
<ul>
<li>
<div class="introduction-img">
<a href="https://picsum.photos/500/500/" data-lightbox="feature-introduction" data-title="Html & CSS"><img src="img/html.png" alt=""></a>
</div>
<h3>HTML 5 基礎教學</h3>
<p>
主流前端網站設定的基礎就在六角學院，在這裡不再是填鴨式教學，而是透過實際的範例，了解正確的網站開發流程，講師均具有業界開發的經驗，讓學員學習業界主流的開發方法
</p>
</li>
<li>
<div class="introduction-img">
<a href="https://picsum.photos/800/600/" data-lightbox="feature-introduction" data-title="RWD"><img src="img/rwd.png" alt=""></a>
</div>
<h3>響應式網站設計</h3>
<p>
響應式網站設計（ Responsive web design ），目前大多使用者均是以手機瀏覽的情況下，響應式網站已經是必備的。六角學院將會提供業界響應式開發方法，讓學生了解行動版開發技巧。
</p>
</li>
<li>
<div class="introduction-img">
<a href="https://picsum.photos/1000/700/" data-lightbox="feature-introduction" data-title="jQuery"><img src="img/jQuery.png" alt=""></a>
</div>
<h3>
jQuery 實戰教學
</h3>
<p>
本課程有以下特色
</p>
<ul>
<li>了解變數的使用方法</li>
<li>學習並操作 DOM</li>
<li>學習基本數學運算方法</li>
<li>套件的操作及運用</li>
</ul>
</li>
</ul>
</article>
<article class="feature-difference">
<h2>
線上及實體課程的差異
</h2>
<table class="feature-difference-table">
<thead>
<tr>
<th>項目</th>
<th>Hex School 線上課程</th>
<th>一般線上課程</th>
<th>實體課程</th>
</tr>
</thead>
<tbody>
<tr>
<td>費用</td>
<td><span>較低</span></td>
<td><span>較低</span></td>
<td>較高</td>
</tr>
<tr>
<td>學習效果</td>
<td>一般</td>
<td><span>較低</span></td>
<td><span>很好</span></td>
</tr>
<tr>
<td>Code review</td>
<td><span>有</span></td>
<td>無</td>
<td>不一定</td>
</tr>
<tr>
<td>課程更新速度</td>
<td><span>普通</span></td>
<td><span>普通</span></td>
<td>較慢</td>
</tr>
<tr>
<td>多次複習</td>
<td><span>可</span></td>
<td>可</td>
<td>不可</td>
</tr>
<tr>
<td>字幕</td>
<td><span>有</span></td>
<td><span>不一定</span></td>
<td>板書</td>
</tr>
</tbody>
</table>
</article>
<article class="contact">
<h2>
對我們的課程有興趣嗎？<br>
歡迎留下您的資料
</h2>
<form action="#" method="post">
<textarea name="" id="">
</textarea>
<div class="info">
<label for="name">姓名</label><br>
<input id="name" type="text" placeholder="請輸入姓名" name="name"><br>
<label for="name">電話</label><br>
<input id="name" type="tel" placeholder="請輸入電話號碼" name="phone"><br>
<label for="name">信箱</label><br>
<input id="name" type="email" placeholder="請輸入電子郵件地址" name="email"><br>
<div class="summit">
<input type="submit" value="送出" name="submit">
</div>
</div>
</form>
</article>
</div>
<footer>
<div class="logo">
<img src="img/footerLogo.png" alt="">
</div>
<address>
<p>聯絡我們：</p><a href="mailto:[email protected]">[email protected]</a><br>
<p>電話：</p><a href="tel:0999123456">(+886) 0999123456</a>
</address>
</footer>
<div class="top">
<a href="#"><i class="icon-up-dir">top</i></a>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/all.js"></script>
</body>
</html>