Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <!--=============== FAVICON ===============--> | |
| <link | |
| rel="shortcut icon" | |
| href="assets/img/favicon.png" | |
| type="image/x-icon" | |
| /> | |
| <!--=============== REMIXICONS ===============--> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css" | |
| /> | |
| <!--=============== SWIPER CSS ===============--> | |
| <link rel="stylesheet" href="assets/css/swiper-bundle.min.css" /> | |
| <!--=============== CSS ===============--> | |
| <link rel="stylesheet" href="assets/css/styles.css" /> | |
| <title>ThuLieu Cosmetics Store</title> | |
| </head> | |
| <body> | |
| <!--==================== HEADER ====================--> | |
| <header class="header" id="header"> | |
| <nav class="nav container"> | |
| <a href="index.html" class="nav__logo"> | |
| <i class="ri-store-2-line"></i> ThuLieu Store | |
| </a> | |
| <div class="nav__menu"> | |
| <ul class="nav__list"> | |
| <li class="nav__item"> | |
| <a href="index.html" class="nav__link active-link"> | |
| <i class="ri-home-line"></i> | |
| <span>Trang chủ</span> | |
| </a> | |
| </li> | |
| <li class="nav__item"> | |
| <a href="#featured" class="nav__link"> | |
| <i class="ri-fire-line"></i> | |
| <span>Bán chạy</span> | |
| </a> | |
| </li> | |
| <li class="nav__item"> | |
| <a href="#discount" class="nav__link"> | |
| <i class="ri-price-tag-3-line"></i> | |
| <span>Khuyến mãi</span> | |
| </a> | |
| </li> | |
| <li class="nav__item"> | |
| <a href="#new" class="nav__link"> | |
| <i class="ri-bookmark-line"></i> | |
| <span>Hàng mới</span> | |
| </a> | |
| </li> | |
| <li class="nav__item"> | |
| <a href="#testimonial" class="nav__link"> | |
| <i class="ri-message-3-line"></i> | |
| <span>Đánh giá</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="nav__actions"> | |
| <!-- Search button --> | |
| <i class="ri-search-line search-button" id="search-button"></i> | |
| <!-- Login button --> | |
| <i class="ri-user-line login-button" id="login-button"></i> | |
| <!-- Shopping bag button --> | |
| <i class="ri-shopping-bag-line bag-button" id="bag-button"></i> | |
| <!-- Theme button --> | |
| <i class="ri-moon-line change-theme" id="theme-button"></i> | |
| </div> | |
| </nav> | |
| </header> | |
| <!--==================== SEARCH ====================--> | |
| <div class="search" id="search-content"> | |
| <form action="" class="search__form"> | |
| <i class="ri-search-line search__icon"></i> | |
| <input | |
| type="search" | |
| placeholder="Nhập tên sản phẩm bạn muốn tìm..." | |
| class="search__input" | |
| /> | |
| </form> | |
| <i class="ri-close-line search__close" id="search-close"></i> | |
| </div> | |
| <!--=============== SHOPPING BAG ===============--> | |
| <div class="bag grid" id="bag-content"> | |
| <form action="" class="bag__form grid"> | |
| <h3 class="bag__title">Giỏ hàng của bạn</h3> | |
| <div class="bag__group grid"> | |
| <div id="cartItemsContainer"></div> | |
| <div id="totalAmountContainer"></div> | |
| <button type="button" class="bag__button button" id="clearCart"> | |
| Reset giỏ hàng | |
| </button> | |
| <div> | |
| <h3>Thông tin người nhận</h3> | |
| <h4>Ngân hàng thụ hưởng: MBBank</h4> | |
| <h4>Người thụ hưởng: DO THU LIEU</h4> | |
| <h4>Tài khoản thụ hưởng: 0947.066.385</h4> | |
| <h4>Nội dung: nguoimuahang_sanpham_ngaymuahang</h4> | |
| </div> | |
| <div class="bag__qr"> | |
| <img src="./assets/img/QR.png" alt="QR" /> | |
| </div> | |
| <button type="submit" class="bag__button button" id="checkOut"> | |
| Thanh toán | |
| </button> | |
| </div> | |
| </form> | |
| <i class="ri-close-line bag__close" id="bag-close"></i> | |
| </div> | |
| <!--==================== LOGIN ====================--> | |
| <div class="login grid" id="login-content"> | |
| <form action="" class="login__form grid"> | |
| <h3 class="login__title">Đăng nhập</h3> | |
| <div class="login__group grid"> | |
| <div> | |
| <label for="login-email" class="login__label">Email</label> | |
| <input | |
| type="email" | |
| placeholder="Email của bạn" | |
| id="login-email" | |
| class="login__input" | |
| /> | |
| </div> | |
| <div> | |
| <label for="login-pass" class="login__label">Mật khẩu</label> | |
| <input | |
| type="password" | |
| placeholder="Mật khẩu của bạn" | |
| id="login-pass" | |
| class="login__input" | |
| /> | |
| </div> | |
| </div> | |
| <div> | |
| <span class="login__signup"> | |
| Bạn chưa có tài khoản? <a href="#">Đăng ký ngay</a> | |
| </span> | |
| <a href="#" class="login__forgot"> Quên mật khẩu </a> | |
| <button type="submit" class="login__button button">Đăng nhập</button> | |
| </div> | |
| </form> | |
| <i class="ri-close-line login__close" id="login-close"></i> | |
| </div> | |
| <!--==================== USER MENU ====================--> | |
| <div class="user-menu grid" id="user-menu-content"> | |
| <div class="user-menu__container"> | |
| <div class="user-menu__header"> | |
| <div class="user-menu__avatar"> | |
| <i class="ri-user-3-fill"></i> | |
| </div> | |
| <div class="user-menu__info"> | |
| <h3 class="user-menu__name" id="user-name">Người dùng</h3> | |
| <p class="user-menu__email" id="user-email">email@example.com</p> | |
| </div> | |
| </div> | |
| <div class="user-menu__actions"> | |
| <button class="user-menu__button" id="view-profile"> | |
| <i class="ri-user-settings-line"></i> | |
| <span>Thông tin cá nhân</span> | |
| </button> | |
| <button class="user-menu__button" id="view-orders"> | |
| <i class="ri-shopping-bag-2-line"></i> | |
| <span>Đơn hàng của tôi</span> | |
| </button> | |
| <button | |
| class="user-menu__button user-menu__button--logout" | |
| id="logout-button" | |
| > | |
| <i class="ri-logout-circle-line"></i> | |
| <span>Đăng xuất</span> | |
| </button> | |
| </div> | |
| </div> | |
| <i class="ri-close-line user-menu__close" id="user-menu-close"></i> | |
| </div> | |
| <!--==================== MAIN ====================--> | |
| <main class="main"> | |
| <!--==================== DETAIL SECTION ====================--> | |
| <section class="product-detail section"> | |
| <div class="container"> | |
| <!-- Product Title --> | |
| <div class="product-detail__header"> | |
| <h1 class="product-detail__title"> | |
| Bigsize - Nước tẩy trang bí đao Cocoon tẩy sạch makeup & giảm dầu | |
| 500ml | |
| </h1> | |
| <!-- <div class="product-detail__breadcrumb"> | |
| <a href="index.html">Trang chủ</a> | |
| <span>/</span> | |
| <a href="#featured">Sản phẩm</a> | |
| <span>/</span> | |
| <span>Chi tiết sản phẩm</span> | |
| </div> --> | |
| </div> | |
| <!-- Product Content --> | |
| <div class="product-detail__content"> | |
| <!-- Product Image --> | |
| <div class="product-detail__image"> | |
| <div class="product-detail__image-main"> | |
| <img | |
| src="./assets/img/home-book-1.png" | |
| alt="Nước tẩy trang bí đao Cocoon" | |
| /> | |
| </div> | |
| <div class="product-detail__image-gallery"> | |
| <img | |
| src="./assets/img/ntt_1_1.png" | |
| alt="Ảnh 1" | |
| class="gallery-thumb active" | |
| /> | |
| <img | |
| src="./assets/img/ntt_1_2.png" | |
| alt="Ảnh 2" | |
| class="gallery-thumb" | |
| /> | |
| <img | |
| src="./assets/img/ntt_1_3.png" | |
| alt="Ảnh 3" | |
| class="gallery-thumb" | |
| /> | |
| <img | |
| src="./assets/img/ntt_1_4.png" | |
| alt="Ảnh 4" | |
| class="gallery-thumb" | |
| /> | |
| </div> | |
| </div> | |
| <!-- Product Info --> | |
| <div class="product-detail__info"> | |
| <div class="product-detail__brand"> | |
| <span class="brand-tag">Cocoon</span> | |
| <span class="product-code">Mã SP: COCOON500ML</span> | |
| </div> | |
| <h2 class="product-detail__name">Nước Tẩy Trang Bí Đao Cocoon</h2> | |
| <div class="product-detail__rating"> | |
| <div class="rating-stars"> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-half-fill"></i> | |
| </div> | |
| <span class="rating-text">(4.5/5 - 127 đánh giá)</span> | |
| </div> | |
| <div class="product-detail__price"> | |
| <span class="price-current">199.000 ₫</span> | |
| <span class="price-original">250.000 ₫</span> | |
| <span class="price-discount">-20%</span> | |
| </div> | |
| <div class="product-detail__description"> | |
| <h3>Mô tả sản phẩm:</h3> | |
| <ul> | |
| <li>Nước tẩy trang từ bí đao tự nhiên</li> | |
| <li>Làm sạch sâu, loại bỏ hoàn toàn makeup</li> | |
| <li>Kiểm soát dầu thừa, se khít lỗ chân lông</li> | |
| <li>Không gây khô da, phù hợp mọi loại da</li> | |
| <li>Dung tích: 500ml</li> | |
| </ul> | |
| </div> | |
| <div class="product-detail__quantity"> | |
| <span class="quantity-label">Số lượng:</span> | |
| <div class="quantity-controls"> | |
| <button class="qty-btn qty-minus">-</button> | |
| <input type="number" value="1" min="1" class="qty-input" /> | |
| <button class="qty-btn qty-plus">+</button> | |
| </div> | |
| <span class="stock-info">Còn 47 sản phẩm</span> | |
| </div> | |
| <div class="product-detail__actions"> | |
| <button class="btn-add-cart button"> | |
| <i class="ri-shopping-cart-line"></i> | |
| Thêm vào giỏ hàng | |
| </button> | |
| <button class="btn-buy-now button button--secondary"> | |
| Mua ngay | |
| </button> | |
| <button class="btn-wishlist"> | |
| <i class="ri-heart-line"></i> | |
| </button> | |
| </div> | |
| <div class="product-detail__features"> | |
| <div class="feature-item"> | |
| <i class="ri-truck-line"></i> | |
| <span>Miễn phí vận chuyển đơn > 500k</span> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="ri-refresh-line"></i> | |
| <span>Đổi trả trong 30 ngày</span> | |
| </div> | |
| <div class="feature-item"> | |
| <i class="ri-verified-badge-line"></i> | |
| <span>Sản phẩm chính hãng 100%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Specifications --> | |
| <div class="product-detail__specs"> | |
| <h3 class="specs-title">Thông số kỹ thuật</h3> | |
| <div class="specs-grid"> | |
| <div class="spec-item"> | |
| <span class="spec-label">Thương hiệu:</span> | |
| <span class="spec-value">Cocoon</span> | |
| </div> | |
| <div class="spec-item"> | |
| <span class="spec-label">Dung tích:</span> | |
| <span class="spec-value">500ml</span> | |
| </div> | |
| <div class="spec-item"> | |
| <span class="spec-label">Xuất xứ:</span> | |
| <span class="spec-value">Việt Nam</span> | |
| </div> | |
| <div class="spec-item"> | |
| <span class="spec-label">Loại da:</span> | |
| <span class="spec-value">Mọi loại da</span> | |
| </div> | |
| <div class="spec-item"> | |
| <span class="spec-label">Hạn sử dụng:</span> | |
| <span class="spec-value">3 năm kể từ ngày sản xuất</span> | |
| </div> | |
| <div class="spec-item"> | |
| <span class="spec-label">Bảo quản:</span> | |
| <span class="spec-value">Nơi khô ráo, thoáng mát</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!--==================== JOIN ====================--> | |
| <section class="join section"> | |
| <div class="join__container"> | |
| <img src="assets/img/join-bg.jpg" alt="image" class="join__bg" /> | |
| <div class="join__data container grid"> | |
| <h2 class="join__title section__title"> | |
| Đăng ký để nhận thông báo <br /> | |
| về sản phẩm mới | |
| </h2> | |
| <form action="" class="join__form"> | |
| <input | |
| type="email" | |
| placeholder="Email của bạn" | |
| class="join__input" | |
| /> | |
| <button type="submit" class="join__button button">Đăng ký</button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!--==================== TESTIMONIAL ====================--> | |
| <section class="testimonial section" id="testimonial"> | |
| <h2 class="section__title">Phản hồi từ khách hàng</h2> | |
| <div class="testimonial__container container"> | |
| <div class="testimonial__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <article class="testimonial__card swiper-slide"> | |
| <img | |
| src="assets/img/testimonial-perfil-1.png" | |
| alt="img" | |
| class="testimonial__img" | |
| /> | |
| <h2 class="testimonial__title">Hồ Ngọc Hà</h2> | |
| <p class="testimonial__description"> | |
| Sản phẩm chính hãng, chất lượng tuyệt vời! Giao hàng nhanh | |
| chóng và đóng gói rất cẩn thận. Sẽ tiếp tục ủng hộ shop. | |
| </p> | |
| <div class="testimonial__stars"> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-half-fill"></i> | |
| </div> | |
| </article> | |
| <article class="testimonial__card swiper-slide"> | |
| <img | |
| src="assets/img/testimonial-perfil-2.png" | |
| alt="img" | |
| class="testimonial__img" | |
| /> | |
| <h2 class="testimonial__title">Sơn Tùng M-TP</h2> | |
| <p class="testimonial__description"> | |
| Tư vấn rất nhiệt tình và chuyên nghiệp. Các cô tư vấn giúp | |
| mình chọn được sản phẩm phù hợp với da. Rất hài lòng! | |
| </p> | |
| <div class="testimonial__stars"> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-half-fill"></i> | |
| </div> | |
| </article> | |
| <article class="testimonial__card swiper-slide"> | |
| <img | |
| src="assets/img/testimonial-perfil-3.png" | |
| alt="img" | |
| class="testimonial__img" | |
| /> | |
| <h2 class="testimonial__title">Châu Bùi</h2> | |
| <p class="testimonial__description"> | |
| Lần đầu mua online nhưng rất an tâm. Tư vấn tận tình, giao | |
| hàng đúng hẹn. Son môi mình mua màu đẹp lắm! | |
| </p> | |
| <div class="testimonial__stars"> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-half-fill"></i> | |
| </div> | |
| </article> | |
| <article class="testimonial__card swiper-slide"> | |
| <img | |
| src="assets/img/testimonial-perfil-4.png" | |
| alt="img" | |
| class="testimonial__img" | |
| /> | |
| <h2 class="testimonial__title">Trấn Thành</h2> | |
| <p class="testimonial__description"> | |
| Shop gói hàng đẹp quá! Mua tặng bạn mà cảm giác như nhận quà | |
| cao cấp. Sản phẩm đúng như mô tả, rất ưng ý. | |
| </p> | |
| <div class="testimonial__stars"> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-fill"></i> | |
| <i class="ri-star-half-fill"></i> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!--==================== FOOTER ====================--> | |
| <footer class="footer"> | |
| <div class="footer__container container grid"> | |
| <div> | |
| <a href="#" class="footer__logo"> | |
| <i class="ri-store-2-line"></i> ThuLieu Store | |
| </a> | |
| <p class="footer__description"> | |
| Đồng hành cùng bạn trên<br /> | |
| hành trình khám phá<br /> | |
| vẻ đẹp tự nhiên<br /> | |
| và tự tin. | |
| </p> | |
| </div> | |
| <div class="footer__data grid"> | |
| <div> | |
| <h3 class="footer__title">Giới thiệu</h3> | |
| <ul class="footer__links"> | |
| <li> | |
| <a href="#" class="footer__link">Giải thưởng</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">FAQs</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Chính sách bảo mật</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Điều khoản dịch vụ</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="footer__title">Về chúng tôi</h3> | |
| <ul class="footer__links"> | |
| <li> | |
| <a href="#" class="footer__link">Tin tức</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Cộng đồng</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Đội ngũ của chúng tôi</a> | |
| </li> | |
| <li> | |
| <a href="#" class="footer__link">Trung tâm hỗ trợ</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="footer__title">Liên hệ</h3> | |
| <ul class="footer__links"> | |
| <li> | |
| <address class="footer__info"> | |
| X. Phương Chiểu<br /> | |
| TP. Hưng Yên, Hưng Yên | |
| </address> | |
| </li> | |
| <li> | |
| <address class="footer__info"> | |
| dothulieu12@gmail.com <br /> | |
| 0947-066-385 | |
| </address> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="footer__title">Social</h3> | |
| <div class="footer__social"> | |
| <a | |
| href="https://www.facebook.com/" | |
| target="_blank" | |
| class="footer__social-link" | |
| > | |
| <i class="ri-facebook-circle-line"></i> | |
| </a> | |
| <a | |
| href="https://www.facebook.com/" | |
| target="_blank" | |
| class="footer__social-link" | |
| > | |
| <i class="ri-instagram-line"></i> | |
| </a> | |
| <a | |
| href="https://twitter.com/" | |
| target="_blank" | |
| class="footer__social-link" | |
| > | |
| <i class="ri-twitter-x-line"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <span class="footer__copy"> | |
| © All Rights Reserved By ThuLieu Do | |
| </span> | |
| </footer> | |
| <!--========== SCROLL UP ==========--> | |
| <a href="#" class="scrollup" id="scroll-up"> | |
| <i class="ri-arrow-up-line"></i> | |
| </a> | |
| <!--=============== SCROLLREVEAL ===============--> | |
| <script src="assets/js/scrollreveal.min.js"></script> | |
| <!--=============== SWIPER JS ===============--> | |
| <script src="assets/js/swiper-bundle.min.js"></script> | |
| <!--=============== MAIN JS ===============--> | |
| <script src="assets/js/main.js"></script> | |
| </body> | |
| </html> | |