-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (138 loc) · 5.88 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="zh-HANG-TW">
<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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<title>六角學院SWEETASTE切版作業</title>
</head>
<body>
<!--header區塊-->
<header>
<div class="logo"><img src="images/logo-all-dark.svg" alt="Sweetaste Logo"></div>
<nav>
<a href="#">首頁</a>
<a href="#">甜點</a>
<a href="#">登入</a>
<a href="#" style="margin-right: 0;"><img src="images/shopping_cart.png" alt="購物車欄"></a>
</nav>
</header>
<!--header區塊 結束-->
<!--banner區塊-->
<div class="banner"><img src="images/banner.png" alt=""></div>
<!--banner區塊 結束-->
<!--wrapper區塊-->
<div class="wrapper">
<div class="sidemenu">
<div>
<div class="title">甜點類別</div>
<div class="menu-1"><a href="#">所有甜點(48)</a></div>
<div class="menu-2"><a href="#">本日精選(10)</a></div>
<div class="menu-2"><a href="#">人氣推薦(26)</a></div>
<div class="menu-2"><a href="#">新品上市(12)</a></div>
</div>
</div>
<main>
<div class="productSet">
<div class="product">
<div class="pic img-1"><div class="recommend">本日推薦</div></div>
<div class="nameAndPrice">
<div class="name">焦糖馬卡龍</div>
<div class="price">NT$ 450</div>
</div>
<div class="addtoCart">加入購物車</div>
</div>
<div class="product">
<div class="pic img-2"><div class="recommend">本日推薦</div></div>
<div class="nameAndPrice">
<div class="name">焦糖馬卡龍</div>
<div class="price">NT$ 450</div>
</div>
<div class="addtoCart">加入購物車</div>
</div>
</div>
<div class="productSet">
<div class="product">
<div class="pic img-3"><div class="recommend">本日推薦</div></div>
<div class="nameAndPrice">
<div class="name">焦糖馬卡龍</div>
<div class="price">NT$ 450</div>
</div>
<div class="addtoCart">加入購物車</div>
</div>
<div class="product">
<div class="pic img-4"><div class="recommend">本日推薦</div></div>
<div class="nameAndPrice">
<div class="name">焦糖馬卡龍</div>
<div class="price">NT$ 450</div>
</div>
<div class="addtoCart">加入購物車</div>
</div>
</div>
<div class="productSet">
<div class="product">
<div class="pic img-5"><div class="recommend">本日推薦</div></div>
<div class="nameAndPrice">
<div class="name">焦糖馬卡龍</div>
<div class="price">NT$ 450</div>
</div>
<div class="addtoCart">加入購物車</div>
</div>
<div class="product">
<div class="pic img-6"><div class="recommend">本日推薦</div></div>
<div class="nameAndPrice">
<div class="name">焦糖馬卡龍</div>
<div class="price">NT$ 450</div>
</div>
<div class="addtoCart">加入購物車</div>
</div>
</div>
<div class="pagesNumber">
<div class="backAndNext"><img src="images/arrow_left.png" alt="back"></div>
<div class="active">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="backAndNext"><img src="images/arrow_right.png" alt="next"></div>
</div>
</main>
</div>
<!--wrapper區塊 結束-->
<!--action區塊-->
<div class="action">
<div class="logoAndTitle">
<div class="logo"><img src="images/logo-light.svg" alt=""></div>
<div class="title">訂閱你我的甜蜜郵件</div>
</div>
<div class="emailAndImg">
<div class="email"><img src="images/mail-24px.png" alt="email"></div>
<div class="forwardimg"><img src="images/arrow_forward-24px.png" alt=""></div>
</div>
</div>
<!--action區塊 結束-->
<!--footer區塊-->
<footer>
<div class="information">
<div class="logo"><img src="images/logotype-sm-dark.svg" alt="logo"></div>
<div class="contact">
<p>07-1234-5678</p>
<p>sweetaste@email.com</p>
<p>800 高雄市新興區幸福路 520 號</p>
</div>
<div class="socialicon">
<img src="images/ic-line@.svg" alt="line">
<img src="images/ic-facebook.svg" alt="facebook">
</div>
</div>
<dic class="slogan">
<div class="sloganContent">
<p class="slogan-1">今天是個</p>
<p class="slogan-2">吃甜點的好日子。</p>
</div>
<div class="copyright">© 2018 Sweetaste<sup>∗</sup> All Rights Reserved</div>
</dic>
</footer>
<!--footer區塊 結束-->
</body>
</html>