-
Notifications
You must be signed in to change notification settings - Fork 0
/
cart.html
216 lines (211 loc) · 9.12 KB
/
cart.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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Hextaurant</title>
<meta name="keywords" content="Hextaurant">
<meta name="description" content="用心製作美味,值得你享受">
<script src="js/vendor/adobeFont.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="css/all.css">
<link rel="shortcut icon" href="favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<meta property="og:url" content="https://kayahino.github.io/hexschool-hw/Hextaurant/">
<meta property="og:type" content="website" />
<meta property="og:image" content="https://raw.githubusercontent.com/kayahino/hexschool-hw/master/Hextaurant/images/Bitmap.png">
<meta property="og:title" content="Hextaurant">
<meta property="og:description" content="一入口就攻佔你的味蕾">
</head>
<body>
<header class="l-header">
<div class="nav">
<div class="d-flex align-items-center">
<img src="images/icon.svg" alt="Hextaurant" class="nav__icon">
</div>
<div class="d-flex align-items-center">
<ul class="nav__menu">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#features">Features</a></li>
<li><a href="index.html#reserve">Reserve</a></li>
</ul>
<a href="login.html" class="btn btn--outlined ml20"><span>Login</span></a>
<div class="menu-trigger"><span class="dash"></span></div>
</div>
</div>
<div class="hero">
<h2 class="hero__title text-align-center"><span>一入口</span>就攻佔你的味蕾</h2>
<div class="subtitle-m hero__caption text-align-center mt15">
<p>絶對無法錯過的好滋味</p>
</div>
</div>
</header>
<main class="l-content shopPage">
<div class="container">
<div class="row">
<div class="col-3 sidebar">
<h4 class="sidebar__title"><i class="fas fa-leaf"></i> 線上訂購美食</h4>
<ul class="sidebar__list">
<li data-id="0"><a href="#">全部 <span>(23)</span></a></li>
<li data-id="1"><a href="#">只愛吃薯條 <span>(18)</span></a></li>
<li data-id="2"><a href="#">加熱就可食 <span>(1)</span></a></li>
<li data-id="3" class="now-here"><a href="#">不敗漢堡系列 <span>(4)</span></a></li>
</ul>
</div>
<div class="col-9 displayContent">
<div class="row">
<div class="col-12 searchBar mb30">
<div class="input search js--search">
<input type="text" id="search" placeholder="search" class="search-input">
<div class="line"></div>
<label for="search" class="search-btn"><i class="fas fa-search"></i></label>
</div>
<div class="cart">
<p class="cart__text">結帳去</p>
<div class="goCart">
<i class="fas fa-shopping-cart"></i>
<span class="goCart__quantity" data-num="0">0</span>
</div>
</div>
</div>
</div>
<div class="row">
<ul class="inner-container productList">
<li class="col-4">
<div class="card js--product">
<div class="card__img"><img src="images/product_1.png" alt=""></div>
<div class="card__content">
<div class="card__title">
<p class="card__title--main">經典漢堡套餐</p>
<p class="card__title--sub">Classic Hamburger Set</p>
</div>
<div class="card__text">
<p>最經典的原味</p>
</div>
<div class="card__bottom cart-btn">
<p class="price" data-price="120">120</p>
<div class="add-quantity"><span class="num">1</span><div class="minus"></div><div class="plus"></div></div>
<button class="btn btn--outlined mt10 add-to-cart"><span>Add to Cart</span></button>
<div class="add-to-fav">
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
</li>
<li class="col-4">
<div class="card js--product">
<div class="card__img"><img src="images/product_2.png" alt=""></div>
<div class="card__content">
<div class="card__title">
<p class="card__title--main">英俊香腸</p>
<p class="card__title--sub">Handsome Sausage</p>
</div>
<div class="card__text">
<p>吃一口就忘不了的滋味</p>
</div>
<div class="card__bottom cart-btn">
<p class="price" data-price="1024">1,024</p>
<div class="add-quantity"><span class="num">1</span><div class="minus"></div><div class="plus"></div></div>
<button class="btn btn--outlined mt10 add-to-cart"><span>Add to Cart</span></button>
<div class="add-to-fav">
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
</li>
<li class="col-4">
<div class="card js--product">
<div class="card__img"><img src="images/product_3.png" alt=""></div>
<div class="card__content">
<div class="card__title">
<p class="card__title--main">漢堡兄弟</p>
<p class="card__title--sub">Hamburg Brothers</p>
</div>
<div class="card__text">
<p>Double吃 達波享受</p>
</div>
<div class="card__bottom cart-btn">
<p class="price" data-price="792">792</p>
<div class="add-quantity"><span class="num">1</span><div class="minus"></div><div class="plus"></div></div>
<button class="btn btn--outlined mt10 add-to-cart"><span>Add to Cart</span></button>
<div class="add-to-fav">
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
</li>
<li class="col-4">
<div class="card js--product">
<div class="card__img"><img src="images/product_4.png" alt=""></div>
<div class="card__content">
<div class="card__title">
<p class="card__title--main">完美願望</p>
<p class="card__title--sub">Dragon Ball Set</p>
</div>
<div class="card__text">
<p>七顆龍珠 願望滿足</p>
</div>
<div class="card__bottom cart-btn">
<p class="price" data-price="999999">999,999</p>
<div class="add-quantity"><span class="num">1</span><div class="minus"></div><div class="plus"></div></div>
<button class="btn btn--outlined mt10 add-to-cart"><span>Add to Cart</span></button>
<div class="add-to-fav">
<i class="far fa-heart"></i>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="floating-cart">
<div class="goCart">
<i class="fas fa-shopping-cart"></i>
<span class="goCart__quantity" data-num="0">0</span>
</div>
<div class="floating-cart-after"></div>
</div>
</div>
</div>
</div>
</main>
<footer class="l-footer" id="footer">
<div class="row">
<div class="col-8 footer__info">
<div class="about mr20">
<h3>關於 Hextaurant</h3>
<p><span style="font-weight: 700">Hextaurant</span> 名字結合了六角形的字首發音與餐廳 <span class="underline">restaurant</span> 的法文發音,期望能有法國餐廳的浪漫優雅。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, dignissimos.</p>
</div>
<div class="contact">
<h3>聯絡方式</h3>
<ul>
<li><i class="fas fa-map-marker-alt pr5"></i> 高雄市中正五路到底</li>
<li><i class="fas fa-phone"></i> +886 012 3456</li>
<li><i class="fas fa-envelope"></i> <a href="mailto:service@hexschool.com">service@hexschool.com</a></li>
</ul>
</div>
</div>
<div class="col-4 footer__sns" style="align-self: stretch">
<div class="d-flex align-items-center justify-content-end" style="height: 100%">
<img src="images/icon.svg" alt="Hextaurant" class="footer__icon">
<span class="footer__sns--gplus"><a href="#"><i class="fab fa-google-plus-square"></i></a></span>
<span class="footer__sns--twitter"><a href="#"><i class="fab fa-twitter-square"></i></a></span>
<span class="footer__sns--facebook"><a href="#"><i class="fab fa-facebook-square"></i></a></span>
</div>
</div>
</div>
<div class="footer__copyright text-align-center">
<p>Made with <i class="fas fa-heart"></i> by <a href="https://github.com/kayahino/hexschool-hw/tree/master/BMI" target="_blank">CLEO</a> in Aug 2019</p>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/cart.js"></script>
</body>
</html>