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="#" 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="#home" 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"> | |
| <!--==================== HOME ====================--> | |
| <section class="home section" id="home"> | |
| <div class="home__container container grid"> | |
| <div class="home__data"> | |
| <h1 class="home__title"> | |
| Tỏa sáng <br /> | |
| vẻ đẹp tự nhiên | |
| </h1> | |
| <p class="home__description"> | |
| Khám phá vẻ đẹp tự nhiên của bạn với bộ sưu tập mỹ phẩm đa dạng, | |
| từ các thương hiệu uy tín hàng đầu, cùng với những ưu đãi đặc biệt | |
| và trải nghiệm mua sắm tuyệt vời. | |
| </p> | |
| <a href="#" class="button">Khám phá ngay</a> | |
| </div> | |
| <div class="home__images"> | |
| <div class="home__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <article class="home__article swiper-slide"> | |
| <img | |
| src="assets/img/ntt_1.png" | |
| alt="image" | |
| class="home__img" | |
| /> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img | |
| src="assets/img/home-book-2.png" | |
| alt="image" | |
| class="home__img" | |
| /> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img | |
| src="assets/img/home-book-3.png" | |
| alt="image" | |
| class="home__img" | |
| /> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img | |
| src="assets/img/home-book-4.png" | |
| alt="image" | |
| class="home__img" | |
| /> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img | |
| src="assets/img/home-book-5.png" | |
| alt="image" | |
| class="home__img" | |
| /> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img | |
| src="assets/img/kn_5.png" | |
| alt="image" | |
| class="home__img" | |
| /> | |
| </article> | |
| <article class="home__article swiper-slide"> | |
| <img | |
| src="assets/img/ntt_3.png" | |
| alt="image" | |
| class="home__img" | |
| /> | |
| </article> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!--==================== SERVICES ====================--> | |
| <section class="services section"> | |
| <div class="services__container container grid"> | |
| <article class="services__card"> | |
| <i class="ri-truck-line"></i> | |
| <h3 class="services__title">Miễn phí vận chuyển</h3> | |
| <p class="services__description">Cho đơn hàng trên 500.000 ₫</p> | |
| </article> | |
| <article class="services__card"> | |
| <i class="ri-verified-badge-line"></i> | |
| <h3 class="services__title">Sản phẩm chất lượng</h3> | |
| <p class="services__description">Sản phẩm chính hãng 100%</p> | |
| </article> | |
| <article class="services__card"> | |
| <i class="ri-customer-service-2-line"></i> | |
| <h3 class="services__title">Hỗ trợ 24/7</h3> | |
| <p class="services__description">Chăm sóc khách hàng 24/7</p> | |
| </article> | |
| </div> | |
| </section> | |
| <!--==================== FEATURED ====================--> | |
| <section class="featured section" id="featured"> | |
| <h2 class="section__title">Sản phẩm bán chạy</h2> | |
| <div class="featured__container container"> | |
| <div class="container"> | |
| <div class="featured__category-header"> | |
| <h3 class="featured__category-title"> | |
| <i class="ri-drop-line"></i> | |
| Nước Tẩy Trang | |
| </h3> | |
| <p class="featured__category-desc">Làm sạch sâu, loại bỏ hoàn toàn makeup</p> | |
| </div> | |
| </div> | |
| <div class="featured__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/ntt_1.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Bigsize - Nước tẩy trang bí đao Cocoo 500ml | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="295000" | |
| >295.000 ₫</span | |
| > | |
| <span class="featured__price">599.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/ntt_2.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Nước Tẩy Trang B5 Prettyskin Cleansing Water GC Hàn Quốc | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="245000" | |
| >245.000 ₫</span | |
| > | |
| <span class="featured__price">400.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/ntt_3.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Nước tẩy trang Senka All Clear Water Bright 230ml | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="181000" | |
| >181.000 ₫</span | |
| > | |
| <span class="featured__price">238.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/ntt_4.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Nước tẩy trang La Roche-Posay 50ml Minisize | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="45000" | |
| >45.000 ₫</span | |
| > | |
| <span class="featured__price">90.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/ntt_5.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Nước tẩy trang Garnier Micellar Cleansing 400ml | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="160000" | |
| >160.000 ₫</span | |
| > | |
| <span class="featured__price">199.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/ntt_6.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Nước Tẩy Trang L'Oréal Paris 3 In 1 400ml | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="180000" | |
| >180.000 ₫</span | |
| > | |
| <span class="featured__price">240.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="swiper-button-prev"> | |
| <i class="ri-arrow-left-s-line"></i> | |
| </div> | |
| <div class="swiper-button-next"> | |
| <i class="ri-arrow-right-s-line"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="featured__container container"> | |
| <div class="container"> | |
| <div class="featured__category-header"> | |
| <h3 class="featured__category-title"> | |
| <i class="ri-brush-2-line"></i> | |
| Kem Nền | |
| </h3> | |
| <p class="featured__category-desc">Che phủ hoàn hảo, làn da mịn màng tự nhiên</p> | |
| </div> | |
| </div> | |
| <div class="featured__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_1.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Kem nền CARSLAN dạng lỏng kiềm dầu 30g | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="299000" | |
| >299.000 ₫</span | |
| > | |
| <span class="featured__price">580.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_2.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Kem Nền Bắt Sáng Superstay Lumi Matte 35ml | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="244000" | |
| >244.000 ₫</span | |
| > | |
| <span class="featured__price">348.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_3.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Kem Nền Catrice HD Liquid Coverage Foundation 30ml | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="219000" | |
| >219.000 ₫</span | |
| > | |
| <span class="featured__price">390.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_4.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Kem nền dạng lỏng Minijumie Joco trong suốt | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="41900" | |
| >41.900 ₫</span | |
| > | |
| <span class="featured__price">85.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_5.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Kem Nền Colorkey Dạng Lỏng Dưỡng Ẩm Kiểm Soát Dầu | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="250000" | |
| >250.000 ₫</span | |
| > | |
| <span class="featured__price">436.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_6.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Kem Nền Maybelline New York Fit Me Tint Vitamin C & SPF50 | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="190000" | |
| >190.000 ₫</span | |
| > | |
| <span class="featured__price">228.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="swiper-button-prev"> | |
| <i class="ri-arrow-left-s-line"></i> | |
| </div> | |
| <div class="swiper-button-next"> | |
| <i class="ri-arrow-right-s-line"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="featured__container container"> | |
| <div class="container"> | |
| <div class="featured__category-header"> | |
| <h3 class="featured__category-title"> | |
| <i class="ri-heart-3-line"></i> | |
| Son Môi | |
| </h3> | |
| <p class="featured__category-desc">Màu sắc rực rỡ, độ bền cao, không khô môi</p> | |
| </div> | |
| </div> | |
| <div class="featured__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/s_1.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title"> | |
| Son dưỡng Dior Maximizer </br> mẫu mới | |
| </h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="490000" | |
| >490.000 ₫</span | |
| > | |
| <span class="featured__price">700.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/s_2.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title">Son dưỡng MERYTHOD Collagen Melting Lip Balm 5g</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="237900" | |
| >237.900 ₫</span | |
| > | |
| <span class="featured__price">385.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/s_3.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title">Son COLORKEY Watery Matte Lip Tint dạng lỏng</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="258000" | |
| >258.000 ₫</span | |
| > | |
| <span class="featured__price">636.900 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-search-line"></i></button> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/s_4.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title">Son Thỏi Romand New Zero Matte Lipstick 3g</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="165000" | |
| >165.000 ₫</span | |
| > | |
| <span class="featured__price">365.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-search-line"></i></button> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/s_5.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title">Son bóng dưỡng</br> môi 3CE Glazy</br> Lip Glow</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="304000" | |
| >304.000 ₫</span | |
| > | |
| <span class="featured__price">398.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-search-line"></i></button> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| <article class="featured__card swiper-slide"> | |
| <img | |
| src="assets/img/s_6.png" | |
| alt="image" | |
| class="featured__img" | |
| /> | |
| <h2 class="featured__title">Son bóng dưỡng</br> môi 3CE Glazy</br> Lip Glow</h2> | |
| <div class="featured__prices"> | |
| <span class="featured__discount" data-price="304000" | |
| >304.000 ₫</span | |
| > | |
| <span class="featured__price">398.000 ₫</span> | |
| </div> | |
| <button class="button">Thêm vào giỏ hàng</button> | |
| <div class="featured__actions"> | |
| <button><i class="ri-search-line"></i></button> | |
| <button><i class="ri-heart-3-line"></i></button> | |
| <button> | |
| <i class="ri-eye-line" onclick="openDetailPage()"></i> | |
| </button> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="swiper-button-prev"> | |
| <i class="ri-arrow-left-s-line"></i> | |
| </div> | |
| <div class="swiper-button-next"> | |
| <i class="ri-arrow-right-s-line"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!--==================== DISCOUNT ====================--> | |
| <section class="discount section" id="discount"> | |
| <div class="discount__container container grid"> | |
| <div class="discount__data"> | |
| <h2 class="discount__title section__title">Giảm Giá Lên Đến 50%</h2> | |
| <p class="discount__description"> | |
| Đừng bỏ lỡ cơ hội sở hữu những sản phẩm mỹ phẩm yêu thích với mức | |
| giá ưu đãi tuyệt vời. Càng mua nhiều, càng tiết kiệm nhiều hơn. | |
| </p> | |
| <a href="#" class="button">Mua ngay</a> | |
| </div> | |
| <div class="discount__images"> | |
| <img | |
| src="assets/img/home-book-3.png" | |
| alt="" | |
| class="discount__img-1" | |
| /> | |
| <img | |
| src="assets/img/home-book-4.png" | |
| alt="" | |
| class="discount__img-2" | |
| /> | |
| </div> | |
| </div> | |
| </section> | |
| <!--==================== Mỹ phẩm mới về ====================--> | |
| <section class="new section" id="new"> | |
| <h2 class="section__title">Hàng mới về</h2> | |
| <div class="new__container container"> | |
| <div class="new__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/ntt_1.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_1.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/s_1.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/s_3.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_3.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/ntt_3.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="new__swiper swiper"> | |
| <div class="swiper-wrapper"> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/home-book-3.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/home-book-6.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_6.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/ntt_2.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_4.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/s_4.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| <a href="#" class="new__card swiper-slide"> | |
| <img | |
| src="assets/img/kn_1.png" | |
| alt="image" | |
| class="new__img" | |
| /> | |
| <div> | |
| <h2 class="new__title">Mỹ phẩm mới về</h2> | |
| <div class="new__prices"> | |
| <span class="new__discount">999.999</span> | |
| <span class="new__price">1.111.111</span> | |
| </div> | |
| <div class="new__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> | |
| </div> | |
| </a> | |
| </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> | |