/
index.html
143 lines (143 loc) · 5.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name='description' content='html多頁式作業'>
<meta property="og:title" content="html多頁式作業">
<meta property="og:description" content="html多頁式作業">
<meta property="og:type" content="website">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="fontawesome-free-5.14.0-web/css/all.css">
<link rel="stylesheet" href="css/all.css">
<title>首頁</title>
</head>
<body>
<header class="wrap banner">
<nav class="topNav content-padding">
<a href="#" class="logo"><h1>六角學院 - HexSchool</h1></a>
<a href="#" class="menu-toggle"><i class="fas fa-bars"></i></a>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">課程</a></li>
<li><a href="#">問答</a></li>
</ul>
</nav>
<div class="head-content content-padding">
<h2><span>歡迎來到</span>六角學院<br>
<span>帶你一起攻略前端程式</span></h2>
<a href="#" class="btn-normal banner-btn">馬上去註冊<i class="fas fa-arrow-right"></i></a>
</div>
</header>
<main class="wrap content-padding">
<section class="classCard section-gutter">
<nav>
<div class="section-title">
<h3>精選課程<span>幫助你拿到前端工程師的門票</span></h3>
</div>
<a href="#" class="btn-outline classCard-btn">更多課程</a>
</nav>
<ul class="cardBox">
<li class="card">
<a href="#">
<img src="img/html5.png" alt="">
<h4>HTML5 基礎教學</h4>
<p>主流前端網站設計的基礎，透過實際的範例，瞭解正確的網站開發流程。</p>
</a>
</li>
<li class="card">
<a href="#">
<img src="img/rwd.png" alt="">
<h4>響應式網站設計</h4>
<p>六角學院提供業界響應式開發方法，讓學生瞭解完善的行動版開發觀念。</p>
</a>
</li>
<li class="card">
<a href="#">
<img src="img/jQuery.png" alt="">
<h4>jQuery 實戰教學</h4>
<p>分為四大主題：變數的使用、操作DOM、基本數學運算和套件運用。</p>
</a>
</li>
</ul>
</section>
<section class="compare-table section-gutter">
<div class="section-title">
<h3>課程比較<span>線上課程與實體課程的差異</span></h3>
</div>
<div class="table-wrap">
<table>
<tr>
<th>項目</th>
<th>六角學院 線上課程</th>
<th>一般線上課程</th>
<th>一般實體課程</th>
</tr>
<tr>
<td>費用</td>
<td class="primary-color">較低</td>
<td class="primary-color">較低</td>
<td>較高</td>
</tr>
<tr>
<td>學習效果</td>
<td>一般</td>
<td>較低</td>
<td class="primary-color">很好</td>
</tr>
<tr>
<td>Code review</td>
<td class="primary-color">有</td>
<td>無</td>
<td>不一定</td>
</tr>
<tr>
<td>課程更新速度</td>
<td class="primary-color">普通</td>
<td class="primary-color">普通</td>
<td>較慢</td>
</tr>
<tr>
<td>多次複習</td>
<td class="primary-color">可</td>
<td class="primary-color">可</td>
<td>不可</td>
</tr>
<tr>
<td>字幕</td>
<td class="primary-color">有</td>
<td>不一定</td>
<td>板書</td>
</tr>
</table>
</div>
</section>
</main>
<footer class="wrap">
<div class="footer-content">
<div class="col-6">
<h4>你就是六角的下一個學生!<br>
快留下資料讓我們認識你吧
</h4>
</div>
<form class="col-6 index-form">
<input type="text" placeholder="你的名字是?">
<input type="text" placeholder="jordan990301@gmail.com">
<input type="submit" class="btn-normal footer-btn" value="送出">
</form>
</div>
<div class="footer-link content-padding">
<a href="#" class="logo"><h1>六角學院 - HexSchool</h1></a>
<div class="social-link">
<a href="#"><img src="img/fb.png" alt=""></a>
<a href="#"><img src="img/tw.png" alt=""></a>
<a href="#"><img src="img/ig.png" alt=""></a>
</div>
</div>
</footer>
</body>
<script src="js/lightbox-plus-jquery.min.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/all.js"></script>
</html>