|
|
@@ -34,8 +34,8 @@
|
|
|
|
|
|
|
|
|
<!-- nav header -->
|
|
|
- <section id="header">
|
|
|
-
|
|
|
+ <section id="header" class="header">
|
|
|
+
|
|
|
<!-- offrer -->
|
|
|
<div class="offer bg-pink text-white py-1">
|
|
|
<div class="container">
|
|
|
@@ -47,76 +47,5365 @@
|
|
|
|
|
|
<!-- upper nav -->
|
|
|
<div id="uper-nav" class="bg-white">
|
|
|
- <div class="container py-1">
|
|
|
- <div class="d-flex justify-content-between align-items-center w-100">
|
|
|
+ <div class="container-xl px-2 py-1">
|
|
|
+ <div class="d-flex justify-content-center justify-content-xl-between align-items-center w-100">
|
|
|
+
|
|
|
+ <!-- burger menu logo -->
|
|
|
+ <button class="burger-menu btn me-auto d-block d-xl-none">
|
|
|
+ <img class="h-100 w-100" src="./images/icon/burger-menu.svg" alt="">
|
|
|
+ </button>
|
|
|
|
|
|
<!-- brand logo -->
|
|
|
- <div class="brand-logo">
|
|
|
+ <a class="brand-logo mx-auto mx-xl-0" href="#">
|
|
|
<img src="./images/navbar/brand-logo.svg" alt="">
|
|
|
- </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
|
|
|
<!-- search box -->
|
|
|
- <div class="search flex-fill px-5">
|
|
|
- <div class=" form-group position-relative ">
|
|
|
- <label for="search-box" class="search-icon position-absolute">
|
|
|
- <img src="./images/icon/search.svg" alt="">
|
|
|
- </label>
|
|
|
- <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
|
|
|
- </div>
|
|
|
+ <div class="search flex-fill px-5">
|
|
|
+ <form action="">
|
|
|
+ <div class=" form-group position-relative ">
|
|
|
+ <label for="search-box" class="search-icon position-absolute">
|
|
|
+ <img src="./images/icon/search.svg" alt="">
|
|
|
+ </label>
|
|
|
+ <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
</div>
|
|
|
|
|
|
+
|
|
|
+
|
|
|
<!-- link -->
|
|
|
<div class="link-box d-flex align-items-center">
|
|
|
- <a href="#" class="link d-flex align-items-center px-1 py-1" >
|
|
|
+
|
|
|
+
|
|
|
+ <!-- group -->
|
|
|
+ <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1" >
|
|
|
<img class="link-icon" src="./images/navbar/group.png" alt="">
|
|
|
</a>
|
|
|
- <a href="#" class="link d-flex align-items-center px-1 py-1 text-decoration-none" >
|
|
|
+
|
|
|
+ <!-- vip points -->
|
|
|
+ <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1 text-decoration-none" >
|
|
|
<img class="link-icon" src="./images/navbar/face.png" alt="">
|
|
|
<div>
|
|
|
<h4 class="name fw-bold text-nowrap text-black">Hi Human</h4>
|
|
|
<h5 class="fw-bold text-no-wrap text-black">Vip: 0 points</h5>
|
|
|
</div>
|
|
|
</a>
|
|
|
- <a href="#" class="link d-flex align-items-center px-1 py-1" >
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- link -->
|
|
|
+ <div class="link-box d-flex align-items-center ">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- search btn for mobile -->
|
|
|
+ <button class="btn d-block d-xl-none search-btn-mobile">
|
|
|
+ <img src="./images/icon/search.svg" alt="">
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <!-- message -->
|
|
|
+ <a href="#" class="link d-none d-xl-flex align-items-center mx-0 mx-lg-1" >
|
|
|
<img class="link-icon" src="./images/navbar/message.png" alt="">
|
|
|
</a>
|
|
|
- <a href="#" class="link d-flex align-items-center px-1 py-1" >
|
|
|
+
|
|
|
+ <!-- wishlist -->
|
|
|
+ <a href="#" class="link d-flex align-items-center mx-0 mx-lg-1" >
|
|
|
<img class="link-icon" src="./images/navbar/heart.png" alt="">
|
|
|
</a>
|
|
|
- <a href="#" class="link d-flex align-items-center px-1 py-1" >
|
|
|
+
|
|
|
+ <!-- shoping basket -->
|
|
|
+ <a href="./checkout.html" class="link d-none d-xl-flex align-items-center mx-0 mx-lg-1" >
|
|
|
<img class="link-icon" src="./images/navbar/bascket.png" alt="">
|
|
|
</a>
|
|
|
+
|
|
|
+ <button class="btn user-btn-mobile d-block d-xl-none">
|
|
|
+ <img src="./images/icon/user.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- main navigation -->
|
|
|
- <div class="main-nav bg-black text-white">
|
|
|
- <div class="container py-2">
|
|
|
- <ul class="d-flex align-items-center justify-content-between px-1">
|
|
|
- <li>Makeup</li>
|
|
|
- <li>Skincare</li>
|
|
|
- <li>K beauty</li>
|
|
|
- <li>Heir</li>
|
|
|
- <li>Man</li>
|
|
|
- <li>Baby</li>
|
|
|
- <li>Fragnance</li>
|
|
|
- <li>Healthcare</li>
|
|
|
- <li>Lifestyle</li>
|
|
|
- <li>pet</li>
|
|
|
- <li>Gifts</li>
|
|
|
- <li>Brands</li>
|
|
|
- <li>Makeup</li>
|
|
|
- <li>
|
|
|
- <button class="btn btn-sm btn-pink px-3">Blog</button>
|
|
|
+ <div class="main-nav bg-black text-white">
|
|
|
+
|
|
|
+ <div class="container position-relative py-2">
|
|
|
+
|
|
|
+ <button class="btn d-block d-xl-none ms-auto burger-close-btn">
|
|
|
+ <img src="./images/icon/cross-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <ul class=" d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center ps-1 pe-2 ps-xl-0 pe-xl-0 ">
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
</li>
|
|
|
- <li>
|
|
|
- <button class="btn btn-sm btn-orange-vivid px-3">Buy 1 Get 1</button>
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Skincare
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ K beauty
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Heir
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Man
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
</li>
|
|
|
+
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Baby
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Fragnace
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Healthcare
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ ok
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Lifestyle
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ ok
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Pet
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ ok
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Gifts
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ ok
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Brands
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ ok
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="megamenu-parrent mx-2">
|
|
|
+ <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class=" menu-items w-100 px-0 px-xl-4">
|
|
|
+
|
|
|
+ <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
|
|
|
+
|
|
|
+ <!-- nav-items -->
|
|
|
+ <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ ok
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul >
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="items mb-1 mb-xl-3">
|
|
|
+ <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
|
|
|
+ <span>
|
|
|
+ Makeup
|
|
|
+ </span>
|
|
|
+ <span class="drop-btn d-block d-xl-none ms-auto">
|
|
|
+ <img src="./images/icon/arrow-down-solid.svg" alt="">
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <div class="submenu-items d-none d-xl-block ps-4">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <a href="#">Skincare</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">K beauty</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Heir</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Man</a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#">Baby</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <div class="offer d-none d-xl-block p-3">
|
|
|
+
|
|
|
+ <!-- loyal -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- vip -->
|
|
|
+ <div class="card border-0 mb-3">
|
|
|
+ <div class="mb-3 text-black text-center">Loyal</div>
|
|
|
+ <a href="#">
|
|
|
+ <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li>
|
|
|
+ <button class=" btn btn-sm btn-pink mt-3 mt-xl-0 mx-1 px-2">Blog</button>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li>
|
|
|
+ <button class="btn btn-sm btn-orange-vivid mt-3 mt-xl-0 mx-2 px-2 ">Buy 1 Get 1</button>
|
|
|
+ </li>
|
|
|
+
|
|
|
<li>
|
|
|
- <button class="btn btn-sm btn-orange-vivid px-3">Sale</button>
|
|
|
+ <button class="btn btn-sm btn-orange-vivid mt-3 mt-xl-0 mx-2 px-2">Sale</button>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
@Mostafijur
