js-training-layout-1/checkout.html at master · hexschool/js-training-layout-1 · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkout</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">Checkout</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">
          <form>
            <p>Contact information</p>
            <div class="mb-0">
              <label for="ContactMail" class="text-muted mb-0">Email</label>
              <input type="email" class="form-control" id="ContactMail" aria-describedby="emailHelp" placeholder="example@gmail.com">
            </div>
            <p class="mt-4">Shipping address</p>
            <div class="mb-2">
              <label for="ContactName" class="text-muted mb-0">Name</label>
              <input type="text" class="form-control" id="ContactName" placeholder="Carmen A. Rose">
            </div>
            <div class="mb-2">
              <label for="ContactPhone" class="text-muted mb-0">Phone</label>
              <input type="text" class="form-control" id="ContactPhone" placeholder="Password">
            </div>
            <div class="mb-2">
              <label for="ContactMessage" class="text-muted mb-0">Message</label>
              <textarea class="form-control" rows="3" id="ContactMessage" placeholder="message ... "></textarea>
            </div>
          </form>
          <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-1.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>