-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcheckout-1.html
More file actions
135 lines (135 loc) · 7.76 KB
/
checkout-1.html
File metadata and controls
135 lines (135 loc) · 7.76 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Checkout-2</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/all.css" />
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<nav class="navbar navbar-expand-lg navbar-light px-0">
<a class="navbar-brand" href="./index.html">Navbar</a>
<ul class="list-unstyled mb-0 ms-md-auto d-flex align-items-center justify-content-between justify-content-md-end w-100 mt-md-0 mt-4">
<li class="me-md-6 me-3 position-relative custom-step-line"><i class="bi bi-check-circle-fill d-md-inline d-block text-center"></i> <span class="text-nowrap">Lorem ipsum</span></li>
<li class="me-md-6 me-3 position-relative custom-step-line"><i class="bi bi-check-circle-fill d-md-inline d-block text-center"></i> <span class="text-nowrap">Lorem ipsum</span></li>
<li><i class="bi bi-record-circle d-md-inline d-block text-center"></i> <span class="text-nowrap">Lorem ipsum</span></li>
</ul>
</nav>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-10">
<h3 class="fw-bold mb-4 pt-3">Lorem ipsum</h3>
</div>
</div>
<div class="row flex-row-reverse justify-content-center pb-5">
<div class="col-md-4">
<div class="border p-4 mb-4">
<div class="d-flex">
<img src="https://images.unsplash.com/photo-1502743780242-f10d2ce370f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1916&q=80" alt="" class="me-2" style="width: 48px; height: 48px; object-fit: cover">
<div class="w-100">
<div class="d-flex justify-content-between">
<p class="mb-0 fw-bold">Lorem ipsum</p>
<p class="mb-0">NT$12,000</p>
</div>
<p class="mb-0 fw-bold">x1</p>
</div>
</div>
<div class="d-flex mt-2">
<img src="https://images.unsplash.com/photo-1502743780242-f10d2ce370f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1916&q=80" alt="" class="me-2" style="width: 48px; height: 48px; object-fit: cover">
<div class="w-100">
<div class="d-flex justify-content-between">
<p class="mb-0 fw-bold">Lorem ipsum</p>
<p class="mb-0">NT$12,000</p>
</div>
<p class="mb-0 fw-bold">x1</p>
</div>
</div>
<table class="table mt-4 border-top border-bottom text-muted">
<tbody>
<tr>
<th scope="row" class="border-0 px-0 pt-4 font-weight-normal">Subtotal</th>
<td class="text-end border-0 px-0 pt-4">NT$24,000</td>
</tr>
<tr>
<th scope="row" class="border-0 px-0 pt-0 pb-4 font-weight-normal">Payment</th>
<td class="text-end border-0 px-0 pt-0 pb-4">ApplePay</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-between mt-4">
<p class="mb-0 h4 fw-bold">Total</p>
<p class="mb-0 h4 fw-bold">NT$24,000</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="accordion" id="accordionExample">
<div class="card rounded-0">
<div class="card-header bg-white border-0 py-3" id="headingOne" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<p class="mb-0 position-relative custom-checkout-label">Lorem ipsum</p>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="card-body bg-light ps-5 py-4">
<div class="mb-2">
<label for="Lorem ipsum1" class="text-muted mb-0">Lorem ipsum</label>
<input type="text" class="form-control" id="Lorem ipsum1" placeholder="Lorem ipsum">
</div>
<div class="mb-0">
<label for="Lorem ipsum2" class="text-muted mb-0">Lorem ipsum</label>
<input type="text" class="form-control" id="Lorem ipsum2" placeholder="Lorem ipsum">
</div>
</div>
</div>
</div>
<div class="card rounded-0">
<div class="card-header bg-white border-0 py-3 collapsed" id="headingTwo" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<p class="mb-0 position-relative custom-checkout-label">Lorem ipsum</p>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="card-body bg-light ps-5 py-4">
<div class="mb-2">
<label for="Lorem ipsum1" class="text-muted mb-0">Lorem ipsum</label>
<input type="text" class="form-control" id="Lorem ipsum1" placeholder="Lorem ipsum">
</div>
<div class="mb-0">
<label for="Lorem ipsum2" class="text-muted mb-0">Lorem ipsum</label>
<input type="text" class="form-control" id="Lorem ipsum2" placeholder="Lorem ipsum">
</div>
</div>
</div>
</div>
<div class="card rounded-0">
<div class="card-header bg-white border-0 py-3 collapsed" id="headingThree" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<p class="mb-0 position-relative custom-checkout-label">Lorem ipsum</p>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="card-body bg-light ps-5 py-4">
<div class="mb-2">
<label for="Lorem ipsum1" class="text-muted mb-0">Lorem ipsum</label>
<input type="text" class="form-control" id="Lorem ipsum1" placeholder="Lorem ipsum">
</div>
<div class="mb-0">
<label for="Lorem ipsum2" class="text-muted mb-0">Lorem ipsum</label>
<input type="text" class="form-control" id="Lorem ipsum2" placeholder="Lorem ipsum">
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-column-reverse flex-md-row mt-4 justify-content-between align-items-md-center align-items-end w-100">
<a href="./product.html" class="text-dark mt-md-0 mt-3"><i class="bi bi-chevron-left me-2"></i> Lorem ipsum</a>
<a href="./checkout-success.html" class="btn btn-dark py-3 px-7">Lorem ipsum</a>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</html>