-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcheckout.html
205 lines (205 loc) · 10 KB
/
checkout.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="Shortcut Icon" type="image/x-icon" href="https://i.imgur.com/gZL8Icc.png" />
<title>運送 | Sweetaste</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" type="text/css" href="css/hover.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<div class="wrap">
<div class="header flex mx-3">
<div class="mainMenu flex flex-space-between flex-2 ">
<div class="logo flex-1 flex-center" id="logo">
<a href="index.html">Logo</a>
</div>
<div id="mobile-toggle" class="button" ></div>
<ul class="flex-1 flex-center toRight mx-2">
<li><a href='index.html' class="hvr-underline-from-center">首頁</a></li>
<li><a href='sweet.html' class="hvr-underline-from-center">甜點</a></li>
<li><a href='login.html' class="hvr-underline-from-center">登入</a></li>
</ul>
</div>
<a href="cart.html" id="shoppingCartIcon" class="flex flex-justify-content-center flex-align-items-center">
<i class="color-darkGreen fas fa-shopping-cart hvr-bounce-in"></i>
</a>
</div>
<div class="flex flex-row flex-justify-content-center content m-3">
<div class="checkoutPage py-4 flex flex-column w-5 bg-darkGreen">
<div class="checkoutForm px-4 flex flex-column">
<div class="checkoutTitle w-10 flex flex-space-between flex-align-items-center mx-1">
<h2 class="color-lightGreen mx-2">運送</h2>
<div class="flex flex-row mx-2 pos-rel">
<div class="circle border-lG pos-rel mx-3">
<div class="circle-inside pos-abs"></div>
<div class="circle-line pos-abs"></div>
</div>
<div class="circle border-lG pos-rel mx-3">
<div class="circle-line pos-abs"></div>
</div>
<div class="circle border-lG pos-rel mx-3">
</div>
</div>
</div>
<div class="w-10 bg-dG-color-lG flex flex-column flex-align-items-center py-4">
<div class="flex flex-row w-10">
<div class="flex flex-column w-5">
<label for="firstname" class="flex m-1">姓氏</label>
<div class="search h-10 flex flex-align-items-center mx-1">
<input class="f-16 color-darkGreen w-4 h-10 mx-2" placeholder="王">
</div>
</div>
<div class="flex flex-column w-5">
<label for="lastname" class="flex m-1">名字</label>
<div class="search h-10 flex flex-align-items-center mx-1">
<input class="f-16 color-darkGreen w-4 h-10 mx-2" placeholder="小明">
</div>
</div>
</div>
<div class="flex flex-column w-10 mt-2">
<label for="lastname" class="flex m-1">電話</label>
<div class="search h-10 flex flex-align-items-center mx-1">
<input class="f-16 color-darkGreen w-4 h-10 mx-2" placeholder="0912-345-678">
</div>
</div>
<div class="flex flex-row w-10 mt-2">
<div class="flex flex-column w-10">
<label for="firstname" class="flex m-1">地址</label>
<div class="flex flex-row w-10">
<div class="search h-10 w-9 flex flex-align-items-center mx-1">
<select class="f-16 color-darkGreen w-10 h-10 select" style="border-radius: 0px;outline: none;border: 0;">
<option>高雄市 </option>
<option>台中市 </option>
<option>彰化縣 </option>
<option>南投縣 </option>
<option>嘉義市 </option>
<option>台南市 </option>
<option>台中市 </option>
<option>澎湖縣 </option>
</select>
</div>
<div class="search h-10 w-9 flex flex-align-items-center mx-1">
<select class="f-16 color-darkGreen w-10 h-10 select" style="border-radius: 0px;outline: none;border: 0;">
<option>三民區</option>
<option>大樹區</option>
<option>六龜區</option>
<option>小港區</option>
<option>美濃區</option>
<option>內門區</option>
<option>仁武區</option>
<option>左營區</option>
<option>田寮區</option>
<option>永安區</option>
<option>甲仙區</option>
<option>鼓山區</option>
</select>
</div>
</div>
</div>
</div>
<div class="flex flex-column w-10 mt-2">
<div class="search h-10 flex flex-align-items-center mx-1">
<input class="f-16 color-darkGreen w-4 h-10 mx-2" placeholder="幸福路 520 號">
</div>
</div>
</div>
</div>
<div class="checkoutNext px-4">
<button class=" bg-lY-color-dG w-10 p-2 f-24 hvr-ripple-out" onclick="location.href='checkout1.html'">下一步</button>
</div>
</div>
<div class="checkList w-3 flex flex-column flex-align-items-center mx-3">
<div class="cartOrderList w-10 border-lG">
<h2 class="bg-lG-color-G p-2">訂單摘要</h2>
<ul class="cartOrderListitem p-2">
<li class="flex flex-baseline flex-space-between my-2 f-16 color-green font-weight-light">
<p>小計</p>
<p>NT$ 2,550</p>
</li>
<li class="flex flex-baseline flex-space-between my-2 f-16 color-green font-weight-light">
<p>運費</p>
<p>NT$ 300</p>
</li>
<li class="flex flex-baseline flex-space-between my-2 f-20 color-green">
<p>總計</p>
<p>NT$ 2,850</p>
</li>
</ul>
</div>
<div class="cartOrderList w-10 border-lG my-2">
<h2 class="bg-lG-color-G p-2">訂單摘要</h2>
<ul class="cartOrderListitem p-2">
<li class="flex flex-baseline flex-space-between my-2 f-16 color-green font-weight-light">
<div class="cartListItem flex flex-row flex-space-between w-10">
<div class="cartListImg pic3 w-6"></div>
<div class="cartListCount flex flex-column w-4 flex-align-items-center flex-justify-content-center mx-1">
<h2 class="py-1">藍莓奶酪</h2>
<h2 class="f-16">NT$ 450</h2>
</div>
</div>
</li>
<li class="flex flex-baseline flex-space-between my-2 f-16 color-green font-weight-light">
<div class="cartListItem flex flex-row flex-space-between w-10">
<div class="cartListImg pic2 w-6"></div>
<div class="cartListCount flex flex-column w-4 flex-align-items-center flex-justify-content-center mx-1">
<h2 class="py-1">野莓戚風</h2>
<h2 class="f-16">NT$ 640</h2>
</div>
</div>
</li>
<li class="flex flex-baseline flex-space-between my-2 f-16 color-green font-weight-light">
<div class="cartListItem flex flex-row flex-space-between w-10">
<div class="cartListImg pic1 w-6"></div>
<div class="cartListCount flex flex-column w-4 flex-align-items-center flex-justify-content-center mx-1">
<h2 class="py-1">甜甜圈</h2>
<h2 class="f-16">NT$ 280</h2>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="footer flex flex-column">
<div class="subscription w-10 flex flex-align-items-center">
<div class="subscriptionTitle w-6 flex flex-align-items-center">
<img src="asset/img/logo-light.svg" width="40">
<p class="mx-2">訂閱你我的甜蜜郵件</p>
</div>
<div class="search w-4 h-10 flex flex-space-between flex-align-items-center">
<i class="color-darkGreen fas fa-envelope mx-2"></i>
<input class="w-10 h-10">
<button class="px-2 bg-lightYellow h-10 hvr-ripple-out"><i class="fas fa-angle-right"></i></button>
</div>
</div>
<div class="info w-10 flex flex-column">
<div class="flex flex-row">
<div class="flex flex-column flex-space-between">
<img src="asset/img/logotype-lg-dark.svg" width="171" >
<p class="color-darkGreen">
07-1234-5678<br><br>
[email protected] 800<br><br>
高雄市新興區幸福路 520 號
</p>
</div>
<img class="eatToday toRight" src="asset/img/eatToday.svg" width="80" height="200">
</div>
<div class="copyRight flex flex-baseline mt-3">
<p class="flex flex-row">
<img src="asset/img/[email protected]" width="32" height="32">
<img class="mx-2" src="asset/img/ic-facebook.svg" width="32" height="32" >
</p>
<p class="color-darkGreen toRight">© 2018 Sweetaste* All Rights Reserved</p>
</div>
</div>
</div>
</div>
<script src="asset/js/main.js"></script>
</body>
</html>