-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
205 lines (202 loc) · 10.1 KB
/
index.html
File metadata and controls
205 lines (202 loc) · 10.1 KB
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
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>六角學院 Hex School</title>
<meta name="description" content=" 打破影音課程售後不理，我們在線上等著你，帶你體驗最棒的前端線上課程。">
<meta name="keywords" content="線上課程, 網頁設計, 前端, 前端入門, 前端學習, 前端基礎, HTML, 響應式網站設計, jQuery, HexSchool,">
<meta property="og:title" content=" 帶你學到會的線上課程 | 六角學院">
<meta property="og:description" content=" 打破影音課程售後不理，我們在線上等著你。 ">
<meta property="og:image"
content="https://firebasestorage.googleapis.com/v0/b/hexschool-api.appspot.com/o/web%2Fevents%2F2019-js-starter%2Ffb-cover.png?alt=media&token=6d679c21-c0aa-454a-ad16-78c55b91dd50">
<meta property="fb:app_id" content="760173380749493">
<meta property="og:site_name" content="六角學院">
<meta property="og:locale" content="zh_TW">
<meta name="author" content="me">
<link rel="stylesheet" href="CSS/Reset.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="CSS/lightboxCSS/lightbox.min.css">
<link rel="stylesheet" href="css/fontawesome-free-6.1.1-iconCSS/css/all.min.css">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="CSS/style.css">
<script src="JS/jQuery/jquery2.2.3.min.js"></script>
</head>
<body>
<div class="wrap">
<header>
<ul class="share">
<li class="facebook"><a href="#"><img src="IMG/HTML作業圖檔/最終作業_images/facebookIcon.png"
alt="facebookIcon">粉絲團</a>
</li>
<li class="twitter"><a href="#"><img src="IMG/HTML作業圖檔/最終作業_images/twitterIcon.png"
alt="twitterIcon">追隨我們</a>
</li>
</ul>
<div class="logoAndMenu">
<a href="#">
<h1 class="logo">Hex School</h1>
</a>
<ul class="menu">
<li><a href="#">首頁</a></li>
<li>
<a href="#" class="dropdown">產品介紹</a>
<ul class="dropdownMenu">
<li><a href="#">HTML</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">RWD</a></li>
</ul>
</li>
<li><a href="#">聯絡我們</a></li>
</ul>
</div>
<div class="banner">
<div class="swiper">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="IMG/HTML作業圖檔/最終作業_images/banner.png" alt="banner.png">
</div>
<div class="swiper-slide">
<img src="IMG/HTML作業圖檔/多頁式作業＿images/bg_course.png" alt="bg_course.png">
</div>
<div class="swiper-slide">
<img src="IMG/HTML作業圖檔/多頁式作業＿images/bg_index.png" alt="bg_index.png">
</div>
<div class="swiper-slide">
<img src="IMG/HTML作業圖檔/多頁式作業＿images/bg_QA.png" alt="bg_QA.png">
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
</div>
</div>
<h2>
六角學院<br>
讓您奠定良好的前端基礎
</h2>
</div>
</header>
<content>
<section>
<ul class="course">
<li>
<div class="pic"><a class="example-image-link" href="IMG/HTML作業圖檔/最終作業_images/html.png"
data-lightbox="example-1"><img class="example-image"
src="IMG/HTML作業圖檔/最終作業_images/html.png" alt="HTML圖片" /></a></div>
<h3>Html 5 基礎教學</h3>
<p>主流前端網站設計的基礎就在六角學院，在這裡不再是填鴨式教學，而是透過實際的範例，瞭解正確的網站開發流程，講師均具有業界開發經驗，讓學員學習業界主流的開發方法。</p>
</li>
<li>
<div class="pic"><a class="example-image-link" href="IMG/HTML作業圖檔/最終作業_images/rwd.png"
data-lightbox="example-2"><img class="example-image"
src="IMG/HTML作業圖檔/最終作業_images/rwd.png" alt="RWD圖片" /></a></div>
<h3>響應式網站設計</h3>
<p>響 應 式 網 站 設 計 (Responsive web
design)，目前大多使用者均是以手機瀏覽的情況下，響應式網站已經是必備的。六角學院將會提供業界響應式開發方法，讓學生瞭解行動版開發技巧。</p>
</li>
<li>
<div class="pic"><a class="example-image-link" href="IMG/HTML作業圖檔/最終作業_images/jQuery.png"
data-lightbox="example-3"><img class="example-image"
src="IMG/HTML作業圖檔/最終作業_images/jQuery.png" alt="jQuery圖片" /></a></div>
<h3>jQuery實戰教學</h3>
<p>本課程有以下特色</p>
<ul>
<li>瞭解變數的使用方法</li>
<li>學習並操作DOM</li>
<li>學習基本數學運算方法</li>
<li>套件的操作及運用</li>
</ul>
</li>
</ul>
</section>
<h2 class="comparetitle">線上及實體課程的差異</h2>
<table class="compare">
<tr>
<th>項目</th>
<th>Hex School線上課程</th>
<th>一般線上課程</th>
<th>實體課程</th>
</tr>
<tr>
<td>費用</td>
<td class="ponitcolor">較低</td>
<td class="ponitcolor">較低</td>
<td>較高</td>
</tr>
<tr>
<td>學習效果</td>
<td>一般</td>
<td class="ponitcolor">較低</td>
<td class="ponitcolor">很好</td>
</tr>
<tr>
<td>Code review</td>
<td class="ponitcolor">有</td>
<td>無</td>
<td>不一定</td>
</tr>
<tr>
<td>課程更新速度</td>
<td class="ponitcolor">普通</td>
<td class="ponitcolor">普通</td>
<td>較慢</td>
</tr>
<tr>
<td>多次複習</td>
<td class="ponitcolor">可</td>
<td>可</td>
<td>不可</td>
</tr>
<tr>
<td>字幕</td>
<td class="ponitcolor">有</td>
<td>不一定</td>
<td>板書</td>
</tr>
</table>
<div class="form-bg">
<h2>
對我們課程有興趣嗎？<br>
歡迎留下您的資料
</h2>
<form action="index.html" class="formContent">
<textarea name="" id=""></textarea>
<div class="information">
<div class="NPMContent">
<label for="name">姓名</label>
<input type="text" name="studentName" id="name">
<label for="tel">電話</label>
<input type="tel" name="studentPhone" id="tel">
<label for="email">信箱</label>
<input type="email" name="studentMail" id="email">
</div>
<input type="submit" value="送出">
</div>
</form>
</div>
</content>
<footer>
<a href="#">
<h2>Hex School</h2>
</a>
<ul>
<li>聯絡我們：<a href="mailto:hexschool@gmail.com">hexschool@gmail.com</a></li>
<li>電話：<a href="tel:+0999123456">0999123456</a></li>
</ul>
</footer>
</div>
<a href="#" class="top">
<p>按此移動到頁面頂部</p>
<i class="fa-solid fa-arrows-up-to-line"></i>
</a>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="JS/lightboxJS/lightbox-plus-jquery.min.js"></script>
<script src="JS/all.js"></script>
</body>
</html>