checkout.html

<!doctype html>
<html lang="en">

<head>
    <title>Thanh toán</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/carousel/flickity.css">
    <link rel="stylesheet" href="assets/box/jquery.fancybox.min.css">
    <link rel="stylesheet" href="assets/select2/select2.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>

    <main class="checkout-page">
        <div class="checkout-logo d-flex d-lg-none align-items-center justify-content-center my-5">
            <a href="index.html">
                <img width="180" height="42" src="assets/images/logo.png">
            </a>
        </div>
        <form action="">
            <div class="container">
                <div class="row g-5">
                    <div class="col-lg-8 order-2 order-lg-0">
                        <section class="checkout-info">
                            <div class="checkout-logo d-none d-lg-flex align-items-center justify-content-center mb-5">
                                <a href="index.html">
                                    <img width="180" height="42" src="assets/images/logo.png">
                                </a>
                            </div>
                            <div class="row g-5">
                                <div class="col-md-6">
                                    <div class="checkout-info__item">
                                        <div class="checkout-info__item-head mb-4 d-flex justify-content-between align-items-center">
                                            <h2 class="section__title">Thông tin nhận hàng</h2>
                                            <div class="checkout-info__account">
                                                <a class="checkout-info__account-login d-flex align-items-center" href="">Đăng nhập</a>
                                                <!-- <a class="checkout-info__account-logout d-flex align-items-center" href="">Đăng xuất</a> -->
                                            </div>
                                        </div>
                                        <div class="checkout-info__field">
                                            <div class="checkout-info__field-group input-has-animation position-relative mb-3">
                                                <input class="form-control" type="email">
                                                <label>Email</label>
                                            </div>
                                            <div class="checkout-info__field-group input-has-animation position-relative mb-3">
                                                <input class="form-control" type="text">
                                                <label>Họ và tên</label>
                                            </div>
                                            <div class="checkout-info__field-group input-has-animation position-relative mb-3">
                                                <input class="form-control" type="number">
                                                <label>Số điện thoại(tuỳ chọn)</label>
                                            </div>
                                            <div class="checkout-info__field-group input-has-animation position-relative mb-3">
                                                <input class="form-control" type="text">
                                                <label>Địa chỉ</label>
                                            </div>
                                            <div class="checkout-info__field-group checkout-info__field-select2 input-has-animation position-relative mb-3">
                                                <select class="js-select2 form-control">
                                                    <option>--</option>
                                                    <option value="">Hà Nội</option>
                                                    <option value="">TP.Hồ Chí Minh</option>
                                                    <option value="">Đà Nẵng</option>
                                                </select>
                                                <label>Tỉnh thành</label>
                                            </div>
                                            <div class="checkout-info__field-group checkout-info__field-select2 input-has-animation position-relative mb-3">
                                                <select class="js-select2 form-control">
                                                    <option>--</option>
                                                    <option value="">Quận huyện 1</option>
                                                    <option value="">Quận huyện 2</option>
                                                    <option value="">Quận huyện 3</option>
                                                </select>
                                                <label>Quận huyện</label>
                                            </div>
                                            <div class="checkout-info__field-group checkout-info__field-select2 input-has-animation position-relative mb-3">
                                                <select class="js-select2 form-control">
                                                    <option>--</option>
                                                    <option value="">Phường xã 1</option>
                                                    <option value="">Phường xã 2</option>
                                                    <option value="">Phường xã 3</option>
                                                </select>
                                                <label>Phường xã</label>
                                            </div>
                                            <div class="checkout-info__field-group input-has-animation position-relative mb-3">
                                                <textarea class="form-control" name="" id="" cols="30" rows="10"></textarea>
                                                <label>Ghi chú</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="checkout-info__item">
                                        <h2 class="section__title mb-4">Vận chuyển</h2>
                                        <div class="checkout-info__method mb-4">
                                            <label>
                                                <input type="radio" class="checkout-method-input" name="shipping-method" id="shipping-method">
                                                <span class="checkmark"></span>
                                                <span class="checkout-method-name">Giao hàng tận nơi</span>
                                                <span class="checkout-method-price">40.000đ</span>
                                            </label>
                                        </div>

                                        <h2 class="section__title mb-3">Thanh toán</h2>
                                        <div class="checkout-info__method mb-5">
                                            <label>
                                                <input type="radio" class="checkout-method-input" name="payment-method" id="payment-method">
                                                <span class="checkmark"></span>
                                                <span class="checkout-method-name">Thanh toán khi giao hàng(COD)</span>
                                                <span class="checkout-method-price"></span>
                                            </label>
                                            <p class="checkout-method-noti">
                                                Bạn chỉ phải thanh toán khi nhận được hàng
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="checkout-main__bottom ps-4 pe-4 ps-lg-5 pe-lg-0 py-4 d-flex d-lg-none align-items-center flex-wrap justify-content-between">
                                <a class="checkout-main__bottom-link" href="">Quay về giỏ hàng</a>
                                <button type="submit">Đặt hàng</button>
                            </div>
                        </section>
                    </div>
                    <div class="col-lg-4 p-0 px-lg-4">
                        <section class="checkout-main position-relative">
                            <div class="checkout-main__head d-flex justify-content-between">
                                <h2 class="section__title">Đơn hàng (1 sản phẩm)</h2>
                                <p class="checkout__total-number">540.000đ</p>
                            </div>
                            <div class="checkout-main__body ps-4 pe-4 ps-lg-5 pe-lg-0">
                                <div class="checkout-main__item toggle-on-mobile checkout-main__product py-3">
                                    <div class=" d-flex align-items-center flex-wrap ">
                                        <div class="checkout-main__product-image position-relative">
                                            <img src="assets/images/prod-1.jpg" alt="">
                                            <span class="checkout-main__product-quantity position-absolute d-flex align-items-center justify-content-center rounded-circle">1</span>
                                        </div>
                                        <div class="checkout-main__product-info">
                                            <p>Đầm linen 2 dây </p>
                                            <span>Đen / S</span>
                                        </div>
                                        <div class="checkout-main__product-price">
                                            500.000đ
                                        </div>
                                    </div>
                                </div>
                                <div class="checkout-main__item checkout-main__voucher d-flex flex-wrap py-4">
                                    <div class="checkout-info__field-group input-has-animation position-relative mb-3">
                                        <input class="form-control" type="text">
                                        <label>Nhập mã giảm giá</label>
                                    </div>
                                    <button>Áp dụng</button>
                                </div>
                                <div class="checkout-main__item toggle-on-mobile py-4 checkout-main__price">
                                    <div class="checkout-main__price-item d-flex flex-wrap mb-3">
                                        <p class="col-6">Tạm tính</p>
                                        <p class="item__number col-6">500.000đ</p>
                                    </div>
                                    <div class="checkout-main__price-item d-flex flex-wrap mb-3">
                                        <p class="col-6">Phí vận chuyển</p>
                                        <p class="item__number col-6">40.000đ</p>
                                    </div>
                                </div>
                                <div class="checkout-main__item toggle-on-mobile py-4 checkout-main__total">
                                    <div class="d-flex flex-wrap">
                                        <p class="col-6">Tổng cộng</p>
                                        <p class="checkout__total-number col-6">540.000đ</p>
                                    </div>
                                </div>
                            </div>
                            <div class="checkout-main__bottom ps-4 pe-4 ps-lg-5 pe-lg-0 py-4 d-none d-lg-flex align-items-center flex-wrap justify-content-between">
                                <a class="checkout-main__bottom-link" href="">Quay về giỏ hàng</a>
                                <button type="submit">Đặt hàng</button>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </form>
    </main>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <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.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src="assets/box/jquery.fancybox.min.js"></script>
    <script src="assets/carousel/flickity.pkgd.min.js"></script>
    <script src="assets/select2/select2.min.js"></script>
    <script src="assets/js/main.js"></script>
</body>

</html>