-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (154 loc) · 5.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>六角學院</title>
<link rel="shortcut icon" href="./img/hex-logo-200.png" />
<meta name="description" content="帶你學到會的線上課程" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/index.css" />
</head>
<!-- https://docs.google.com/document/d/1XWeVvTTgKqYZMKnPF0ZfGInigE2-PDGOjQ0cmU8k938/edit# -->
<body class="wrap">
<ul class="share">
<li><img id="top" src="./img/facebookIcon.png" alt="facebookIcon" /></li>
<li class="spanFace" >粉絲團｜</li>
<li><img src="./img/twitterIcon.png" alt="twitterIcon" /></li>
<li class="spanTwi">追隨我們</li>
</ul>
<nav class="navbar">
<a href="#"><img src="./img/logo.png" alt="logo" /></a>
<div>
<ul class="menu">
<li><a href="#" >首頁</a></li>
<li><a href="#productIntro">產品介紹</a> </li>
<li><a href="#callout">聯絡我們</a> </li>
</ul>
</div>
</nav>
<section class="banner">
<div class="bannerBox"></div>
<div class="bannerInfor">
<h1>六角學院<br> 讓你奠定良好的前端基礎</h1>
</div>
</section>
<ul class="triBox" id="productIntro">
<li class="img_content">
<div>
<img src="./img/html.png" alt="" />
</div>
<div>
<h2>Html 5 基礎教學</h2>
<p>
主流前端網站設計的基礎就在六角學 院,在這裡不在是填鴨式教學,而是透
過實際的範例,瞭解正確的網站開發流 程,講師均具有業界開發經驗,讓學員
學習業界主流的開發方法。
</p>
</div>
</li>
<li class="img_content">
<div>
<img src="./img/rwd.png" alt="" />
</div>
<div>
<h2>響應式網站設計</h2>
<p>
響應式網站設計Responsive web design),目前大多使用者均是以手機
瀏覽的情況下,響應式網站已經是必備 的·六角學院將會提供業界響應式開發
方法,讓學生瞭解行動版開發巧。
</p>
</div>
</li>
<li class="img_content">
<div>
<img src="./img/jQuery.png" alt="" />
</div>
<div>
<h2>jQuery 實戰教學</h2>
<ul>
本課程有以下特色
<li class="tribox_jqlist">瞭解變數的使用方法</li>
<li class="tribox_jqlist">學習並操作DOM</li>
<li class="tribox_jqlist">學習基本數學運算方法</li>
<li class="tribox_jqlist">套件的操作及運用</li>
</ul>
</div>
</li>
</ul>
<section class="table_wrap">
<h3>線上及實體課程的差異</h3>
<table class="table_content">
<tr>
<th>項目</th>
<th>HexSchool線上課程</th>
<th>一般線上課程</th>
<th>實體課程</th>
</tr>
<tr>
<td>費用</td>
<td class="fontColor">較低</td>
<td class="fontColor">較低</td>
<td>較高</td>
</tr>
<tr>
<td>學習效果</td>
<td>一般</td>
<td class="fontColor">較低</td>
<td class="fontColor">很好</td>
</tr>
<tr>
<td>Code review</td>
<td class="fontColor">有</td>
<td>無</td>
<td>不一定</td>
</tr>
<tr>
<td>課程更新速度</td>
<td class="fontColor">普通</td>
<td class="fontColor">普通</td>
<td>較慢</td>
</tr>
<tr>
<td>多次複習</td>
<td class="fontColor">可</td>
<td>可</td>
<td>不可</td>
</tr>
<tr>
<td>字幕</td>
<td class="fontColor">有</td>
<td>不一定</td>
<td>板書</td>
</tr>
</table>
</section>
<section class="greenBox">
<h2>對我們課程有興趣嗎? <br> 歡迎留下您的資料</h2>
<div>
<form class="message" action="index.html">
<textarea name="remark" id="textarea" cols="" rows=""></textarea>
<div class="messageInfor">
<label for="name">姓名</label>
<input type="text" name="name" id="name" placeholder="陳Ｏ良" />
<label for="tel" >電話</label>
<input type="tel" name="tel" id="tel" placeholder="09-xxxx-xxxx" minlength="10"/>
<label for="email">信箱</label>
<input type="email" name="email" id="email" placeholder="[email protected]"/>
<button type="submit" value="送出">送出</button>
</div>
</form>
</div>
</section>
<footer class="footer" id="callout">
<a href="#"><img src="./img/footerLogo.png" alt="footerLogo" /></a>
<ul>
<li>
聯絡我們：<a href="mailto:[email protected]">[email protected]</a>
</li>
<li>電話：<a href="tel:+0912345678">0912345678</a></li>
</ul>
</footer>
<button class="goTop" ><a href="#top">︽</a></button>
</body>
</html>