-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcheckout-1.html
250 lines (233 loc) · 10.7 KB
/
checkout-1.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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="format-detection" content="telephone=no"> <!-- Close automatic delection of the cellphone. -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Sweetaste | Checkout</title>
<!-- css -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/all.css">
</head>
<body>
<div class="container px-0 px-md-1">
<!-- navbar -->
<nav class="navbar navbar-expand-md align-items-center navbar-light bg-white p-3 px-md-0">
<!-- navbar__menuBtn-->
<button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="material-icons">
menu
</i>
</button>
<!-- navbar__logo-->
<a class="logo logo--sm" href="#" style="background-image: url(img/logotype-lg-dark.svg)">
<h1>Sweetaste</h1>
</a>
<a class="logo logo--lg" href="#" style="background-image: url(img/logo-all-dark.svg)">
Sweetaste
</a>
<!-- navbar__shoppingCart-->
<a class="d-flex order-md-1 ml-md-5" href="cart.html">
<i class="material-icons">
shopping_cart
</i>
</a>
<!-- navbar__menu-->
<div class="collapse navbar-collapse justify-content-end pt-3 pt-md-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link text-primary font-weight-bold px-3" href="index.html">首頁<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-primary font-weight-bold px-3" href="product.html">甜點</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary font-weight-bold px-3" href="login.html">登入</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row mb-md-4 justify-content-center">
<div class="col-md-6 px-0 px-md-1">
<form class="bg-primary pt-3">
<div class="px-3 px-md-4">
<div class="form-row">
<div class="col-6 mb-3">
<h2 class="text-light mb-0">運送</h2>
</div>
<div class="col-6 mb-3 align-items-center">
<div class="step mt-1_6">
<div class="step__progress"></div>
<div class="step__circle step__circle--active">
</div>
<div class="step__circle">
</div>
<div class="step__circle">
</div>
</div>
</div>
<div class="col-6 form-group text-light">
<label class="h5 mb-0_8" for="lastName">姓氏</label>
<input type="text" class="form-control" id="lastName" placeholder="王">
</div>
<div class="col-6 form-group text-light">
<label class="h5 mb-0_8" for="firstName">名字</label>
<input type="text" class="form-control" id="firstName" placeholder="小明">
</div>
<div class="col-12 form-group text-light">
<label class="h5 mb-0_8" for="tel">電話</label>
<input type="tel" class="form-control" id="tel" placeholder="0912-345-678">
</div>
<div class="col-12">
<label class="text-light h5 mb-0_8" for="address">地址</label>
</div>
<div class="col-6 form-group text-light mb-0_8">
<select id="address" class="custom-select">
<option selected disabled>Choose...</option>
<option >高雄市</option>
<option>台中市</option>
<option>台南市</option>
</select>
</div>
<div class="col-6 form-group text-light mb-0_8">
<select class="custom-select">
<option selected disabled>Choose...</option>
<option>新興區</option>
<option>前金區</option>
<option>前鎮區</option>
</select>
</div>
<div class="col-12 form-group text-light mb-3">
<input type="text" class="form-control" placeholder="幸福路 520 號">
</div>
</div>
</div>
<a href="checkout-2.html" class="btn btn-lg btn-secondary w-100 text-primary">
下一步
</a>
</form>
</div>
<div class="col-md-4 d-none d-md-block">
<div class="card text-dark text-center mb-2">
<div class="card-header h4 bg-light">
訂單摘要
</div>
<div class="card-body py-0">
<table style="width: 100%">
<tbody>
<tr>
<th scope="row" class="text-left font-weight-light pt-md-1_6">小計</th>
<td class="text-right font-weight-light">NT$ 2,700</td>
</tr>
<tr>
<th scope="row" class="text-left font-weight-light">運費</th>
<td class="text-right font-weight-light">NT$ 300</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row" class="text-left h5 py-1_6">總計</th>
<td class="text-right h5">NT$ 3,000</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="card text-dark text-center mt-3 mt-md-0">
<div class="card-header h4 bg-light">
購物清單
</div>
<div class="card-body pr-0 py-1_6">
<div class="d-flex flex-column">
<div class="d-flex mb-1_6">
<div class="photoFrame" style="background-image: url(https://bit.ly/2QvsT63); position: static; height: 80px; width: 120px;">
</div>
<div class="d-flex flex-column align-items-start justify-content-center ml-2">
<span class="font-weight-light">焦糖馬卡龍（2）</span>
<span class="h5 mb-0">NT$ 900</span>
</div>
</div>
<div class="d-flex mb-1_6">
<div class="photoFrame" style="background-image: url(https://bit.ly/2zBDAxX); position: static; height: 80px; width: 120px;">
</div>
<div class="d-flex flex-column align-items-start justify-content-center ml-2">
<span class="font-weight-light">焦糖馬卡龍（2）</span>
<span class="h5 mb-0">NT$ 900</span>
</div>
</div>
<div class="d-flex">
<div class="photoFrame" style="background-image: url(https://bit.ly/2zKOP7w); position: static; height: 80px; width: 120px;">
</div>
<div class="d-flex flex-column align-items-start justify-content-center ml-2">
<span class="font-weight-light">焦糖馬卡龍（2）</span>
<span class="h5 mb-0">NT$ 900</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- subscription-->
<div class="bg-primary py-3">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-5 d-flex align-items-center justify-content-center justify-content-md-start mb-3 mb-md-0">
<img src="img/logo-light.svg" width="40" height="40">
<p class="ml-2 mb-0 h4 text-light font-weight-light">訂閱你我的甜蜜郵件</p>
</div>
<div class="col-md-5 px-3 px-md-1">
<form class="inputGroup">
<label for="email" class="inputGroup__label text-primary">
<i class="material-icons">
mail
</i>
</label>
<input class="inputGroup__input border-0" id="email" type="email" name="email" aria-label="email">
<button class="inputGroup__btn bg-secondary text-primary border-0" type="submit">
<i class="material-icons">
arrow_forward
</i>
</button>
</form>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer class="bg-light p-3">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-4 d-flex flex-column mb-3">
<a class="logo mt-1 mb-4 mb-md-auto" style="background-image: url(img/logotype-lg-dark.svg)" href="#">Sweetaste</a>
<a href="tel:+886-7-1234-5678" class="text-primary">07-1234-5678</a>
<a href="mailto:sweetaste@email.com" class="text-primary">sweetaste@email.com</a>
<a href="https://www.google.com/maps/search/?api=1&query=22.631384, 120.301907&query_place_id=ChIJ10T7XIkEbjQRo5UX1nWHLx8" class="text-primary">800 高雄市新興區幸福路 520 號</a>
</div>
<div class="col-md-5"></div>
<div class="d-none d-md-block col-md-1 mb-3">
<div class="imgTitle" style="background-image: url(img/sm-今天是個吃甜點的好日子.svg)">
今天是個──吃甜點的好日子。
</div>
</div>
<div class="col-md-10 d-flex flex-column flex-md-row align-items-md-end">
<div class="d-flex mb-2 mb-md-0">
<a class="mr-0_8" href="#"><img src="img/ic-line@.svg" height="32"></a>
<a href="#"><img src="img/ic-facebook.svg" height="32"></a>
</div>
<span class="ml-md-auto text-primary lineHeight--1" style="font-family: 'Times New Roman', Times, serif">© 2018 Sweetaste* All Rights Reserved</span>
</div>
</div>
</div>
</footer>
<!-- js -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="js/all.js"></script>
</body>
</html>