|
|
@@ -31,1959 +31,2717 @@
|
|
|
<body>
|
|
|
|
|
|
<!-- nav header -->
|
|
|
+ <section id="header" class="header">
|
|
|
|
|
|
+ <!-- offrer -->
|
|
|
+ <div class="offer bg-pink text-white py-1">
|
|
|
+ <div class="container">
|
|
|
+ <p class="text-center px-2 py-1">
|
|
|
+ free delivery over dhaka over 999 Delivery policy (Inside Dhaka delivery within 24hrs, Outside Dhaka delivery within 72hrs)
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <!-- upper nav -->
|
|
|
+ <div id="uper-nav" class="bg-white">
|
|
|
+ <div class="container-xl px-2 py-1">
|
|
|
+ <div class="d-flex justify-content-center justify-content-xl-between align-items-center w-100">
|
|
|
|
|
|
- <!-- hero sectiion -->
|
|
|
- <section id="hero">
|
|
|
+ <!-- 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>
|
|
|
|
|
|
- <div class="banner-carousel">
|
|
|
- <div class="swiper bannerSlider">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide">
|
|
|
- <img src="./images/home_page/home-banner.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <img src="./images/home_page/home-banner.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <img src="./images/home_page/home-banner.png" alt="">
|
|
|
+ <!-- brand logo -->
|
|
|
+ <a class="brand-logo mx-auto mx-xl-0" href="#">
|
|
|
+ <img src="./images/navbar/brand-logo.svg" alt="">
|
|
|
+ </a>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- search box -->
|
|
|
+ <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>
|
|
|
- <div class="swiper-slide">
|
|
|
- <img src="./images/home_page/home-banner.png" alt="">
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- link -->
|
|
|
+ <div class="link-box d-flex align-items-center">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 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>
|
|
|
+
|
|
|
+ <!-- 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>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <img src="./images/home_page/home-banner.png" alt="">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 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>
|
|
|
+
|
|
|
+ <!-- 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>
|
|
|
+
|
|
|
+ <!-- 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>
|
|
|
</div>
|
|
|
|
|
|
- </section>
|
|
|
+ <!-- main navigation -->
|
|
|
+ <div class="main-nav bg-black text-white">
|
|
|
+ <div class="container-fluid py-2">
|
|
|
|
|
|
+ <button class="btn d-block d-xl-none ms-auto burger-close-btn">
|
|
|
+ <img src="./images/icon/cross-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
|
|
|
- <!-- home category slider -->
|
|
|
- <section id="home-category" class="mt-3 py-3">
|
|
|
- <div class="container">
|
|
|
- <div class="position-relative">
|
|
|
- <div class="swiper categorySlider">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-1.png" alt="">
|
|
|
- </a>
|
|
|
+ <ul class="position-relative d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center px-1">
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class=" 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-2.png" alt="">
|
|
|
- </a>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-3.png" alt="">
|
|
|
- </a>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-4.png" alt="">
|
|
|
- </a>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-5.png" alt="">
|
|
|
- </a>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-6.png" alt="">
|
|
|
- </a>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-1.png" alt="">
|
|
|
- </a>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn align-items-center" >
|
|
|
+ <span>
|
|
|
+ Fragnance
|
|
|
+ </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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
+ </li>
|
|
|
+ <li class="megamenu-parrent">
|
|
|
+ <button class="btn text-white collapse-buton d-flex justify-content-betwee justify-content-lg-startn 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">
|
|
|
+ <ul>
|
|
|
+ <li>Skincare</li>
|
|
|
+ <li>K beauty</li>
|
|
|
+ <li>Heir</li>
|
|
|
+ <li>Man</li>
|
|
|
+ <li>Baby</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <button class=" btn btn-sm btn-pink 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 mt-3 mt-xl-0 mx-2 px-2">Sale</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="position-relative">
|
|
|
+ <!-- hero sectiion -->
|
|
|
+ <section id="hero">
|
|
|
+
|
|
|
+ <div class="banner-carousel">
|
|
|
+ <div class="swiper bannerSlider">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-2.png" alt="">
|
|
|
- </a>
|
|
|
+ <img src="./images/home_page/home-banner.png" alt="">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-3.png" alt="">
|
|
|
- </a>
|
|
|
+ <img src="./images/home_page/home-banner.png" alt="">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-4.png" alt="">
|
|
|
- </a>
|
|
|
+ <img src="./images/home_page/home-banner.png" alt="">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-5.png" alt="">
|
|
|
- </a>
|
|
|
+ <img src="./images/home_page/home-banner.png" alt="">
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/people-6.png" alt="">
|
|
|
- </a>
|
|
|
+ <img src="./images/home_page/home-banner.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="swiper-button-next"></div>
|
|
|
- <div class="swiper-button-prev"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
-
|
|
|
- <!-- skin care -->
|
|
|
- <section id="skin-care" class="mt-5 py-3">
|
|
|
- <div class="container text-center">
|
|
|
-
|
|
|
- <!-- title -->
|
|
|
- <div class="section-title fw-normal">
|
|
|
- START YOUR SKINCARE JOURNEY
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- home category slider -->
|
|
|
+ <section id="home-category" class="mt-3 py-3">
|
|
|
+ <div class="container">
|
|
|
+ <div class="position-relative">
|
|
|
+ <div class="swiper categorySlider">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-1.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-2.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-3.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-4.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-5.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-6.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-1.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-2.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-3.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-4.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-5.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/people-6.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-button-next"></div>
|
|
|
+ <div class="swiper-button-prev"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- subtitle -->
|
|
|
- <p class="mt-3 text-gray fs-4">
|
|
|
- Skincare is an evolving personal journey and we're here
|
|
|
- <br>
|
|
|
- to guide you along the way.
|
|
|
- </p>
|
|
|
-
|
|
|
-
|
|
|
- <!-- shop tabs -->
|
|
|
- <ul id="shop-tabs" class="nav nav-pills mb-3 mt-5 d-flexs justify-content-evenly align-items-start" id="pills-tab" role="tablist">
|
|
|
-
|
|
|
- <!-- SHOP BY BEST SELLERS -->
|
|
|
- <li class="ms-0 nav-item" role="presentation">
|
|
|
- <button class="tabs-btn px-2 pb-2 pb-lg-3 text-gray fw-semibold active" id="shop-by-best-sellers-tab" data-bs-toggle="pill" data-bs-target="#shop-by-best-sellers" type="button" role="tab" aria-controls="shop-by-best-sellers" aria-selected="true">SHOP BY BEST SELLERS
|
|
|
- </button>
|
|
|
- </li>
|
|
|
-
|
|
|
- <!-- SHOP BY SKIN TYPE -->
|
|
|
- <li class="ms-0 ms-md-3 nav-item" role="presentation">
|
|
|
- <button class="tabs-btn px-2 pb-2 pb-lg-3 text-gray fw-semibold " id="shop-by-skin-type-tab" data-bs-toggle="pill" data-bs-target="#shop-by-skin" type="button" role="tab" aria-controls="shop-by-skin" aria-selected="false">
|
|
|
- SHOP BY SKIN TYPE
|
|
|
- </button>
|
|
|
- </li>
|
|
|
-
|
|
|
- <!-- SHOP BY BRAND -->
|
|
|
- <li class="ms-0 ms-md-3 nav-item" role="presentation">
|
|
|
- <button class="tabs-btn px-2 pb-2 pb-lg-3 text-gray fw-semibold " id="shop-by-band-tab" data-bs-toggle="pill" data-bs-target="#shop-by-band" type="button" role="tab" aria-controls="shop-by-band" aria-selected="false">
|
|
|
- SHOP BY BRAND
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- skin care -->
|
|
|
+ <section id="skin-care" class="mt-5 py-3">
|
|
|
+ <div class="container text-center">
|
|
|
+
|
|
|
+ <!-- title -->
|
|
|
+ <div class="section-title fw-normal">
|
|
|
+ START YOUR SKINCARE JOURNEY
|
|
|
+ </div>
|
|
|
+ <!-- subtitle -->
|
|
|
+ <p class="mt-3 text-gray fs-4">
|
|
|
+ Skincare is an evolving personal journey and we're here
|
|
|
+ <br>
|
|
|
+ to guide you along the way.
|
|
|
+ </p>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- shop tabs -->
|
|
|
+ <ul id="shop-tabs" class="nav nav-pills mb-3 mt-5 d-flexs justify-content-evenly align-items-start" id="pills-tab" role="tablist">
|
|
|
+
|
|
|
+ <!-- SHOP BY BEST SELLERS -->
|
|
|
+ <li class="ms-0 nav-item" role="presentation">
|
|
|
+ <button class="tabs-btn px-2 pb-2 pb-lg-3 text-gray fw-semibold active" id="shop-by-best-sellers-tab" data-bs-toggle="pill" data-bs-target="#shop-by-best-sellers" type="button" role="tab" aria-controls="shop-by-best-sellers" aria-selected="true">SHOP BY BEST SELLERS
|
|
|
</button>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
-
|
|
|
- <!-- tab content -->
|
|
|
- <div class="tab-content mt-5" id="pills-tabContent">
|
|
|
-
|
|
|
- <!-- SHOP BY BEST SELLERS -->
|
|
|
- <div class="tab-pane fade show active" id="shop-by-best-sellers" role="tabpanel" aria-labelledby="shop-by-best-sellers-tab">
|
|
|
-
|
|
|
- <!-- product list container -->
|
|
|
- <div class="d-flex flex-wrap">
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+ </li>
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
- </div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+ <!-- SHOP BY SKIN TYPE -->
|
|
|
+ <li class="ms-0 ms-md-3 nav-item" role="presentation">
|
|
|
+ <button class="tabs-btn px-2 pb-2 pb-lg-3 text-gray fw-semibold " id="shop-by-skin-type-tab" data-bs-toggle="pill" data-bs-target="#shop-by-skin" type="button" role="tab" aria-controls="shop-by-skin" aria-selected="false">
|
|
|
+ SHOP BY SKIN TYPE
|
|
|
+ </button>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <!-- SHOP BY BRAND -->
|
|
|
+ <li class="ms-0 ms-md-3 nav-item" role="presentation">
|
|
|
+ <button class="tabs-btn px-2 pb-2 pb-lg-3 text-gray fw-semibold " id="shop-by-band-tab" data-bs-toggle="pill" data-bs-target="#shop-by-band" type="button" role="tab" aria-controls="shop-by-band" aria-selected="false">
|
|
|
+ SHOP BY BRAND
|
|
|
+ </button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <!-- tab content -->
|
|
|
+ <div class="tab-content mt-5" id="pills-tabContent">
|
|
|
+
|
|
|
+ <!-- SHOP BY BEST SELLERS -->
|
|
|
+ <div class="tab-pane fade show active" id="shop-by-best-sellers" role="tabpanel" aria-labelledby="shop-by-best-sellers-tab">
|
|
|
+
|
|
|
+ <!-- product list container -->
|
|
|
+ <div class="d-flex flex-wrap">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
- </div>
|
|
|
- </a>
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
- </div>
|
|
|
- </a>
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
- </div>
|
|
|
- </a>
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 d-none d-xl-block">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
- </div>
|
|
|
- </a>
|
|
|
+ <div class="product-single p-1 p-md-2 d-none d-xl-block">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- SHOP BY SKIN TYPE -->
|
|
|
- <div class="tab-pane fade" id="shop-by-skin" role="tabpanel" aria-labelledby="shop-by-skin-type-tab">
|
|
|
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit suscipit fuga illum ducimus nobis recusandae fugit facere nisi explicabo, modi eius quibusdam animi illo similique aliquid nulla qui quidem. Provident inventore nulla ad, itaque aspernatur odit sapiente officiis saepe maiores fugit, eveniet officia eos veniam! Nulla maxime ut culpa? Rem.
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- SHOP BY BRAND -->
|
|
|
- <div class="tab-pane fade" id="shop-by-band" role="tabpanel" aria-labelledby="shop-by-band-tab">
|
|
|
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam delectus quidem veritatis eligendi. Sequi eum ullam iste praesentium, eius consectetur vitae nihil itaque rem a necessitatibus quidem quam officiis provident error quaerat dolore id iure. Dolore, quis. Ipsam est maxime dolorem, provident libero magnam saepe ullam culpa eum, earum nobis.
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <!-- discover more -->
|
|
|
- <section id="discover-more" class="my-3">
|
|
|
- <div class="container">
|
|
|
- <div class="row align-items-center p-1 p-lg-3 border border-1">
|
|
|
- <div class="col-12 col-lg-5">
|
|
|
- <img class="w-100" src="./images/home_page/looking-for-product.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="col-12 col-lg-7 mt-3 mt-lg-0 px-3">
|
|
|
- <div class="title">
|
|
|
- LOOKING FOR PRODUCTS TO PROTECT YOUR SKIN FROM THE SUN THIS SUMMER?
|
|
|
+
|
|
|
+ <!-- SHOP BY SKIN TYPE -->
|
|
|
+ <div class="tab-pane fade" id="shop-by-skin" role="tabpanel" aria-labelledby="shop-by-skin-type-tab">
|
|
|
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit suscipit fuga illum ducimus nobis recusandae fugit facere nisi explicabo, modi eius quibusdam animi illo similique aliquid nulla qui quidem. Provident inventore nulla ad, itaque aspernatur odit sapiente officiis saepe maiores fugit, eveniet officia eos veniam! Nulla maxime ut culpa? Rem.
|
|
|
</div>
|
|
|
- <div class="mt-2 border-image"></div>
|
|
|
- <p class="details mt-3 text-light-gray">
|
|
|
- We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
|
|
|
- </p>
|
|
|
- <div class="mt-5 text-center pb-4 ">
|
|
|
- <a href="#" class="discover-more btn-black px-4 py-3 px-lg-5 py-lg-3 ">
|
|
|
- DISCOVER MORE
|
|
|
- </a>
|
|
|
+
|
|
|
+ <!-- SHOP BY BRAND -->
|
|
|
+ <div class="tab-pane fade" id="shop-by-band" role="tabpanel" aria-labelledby="shop-by-band-tab">
|
|
|
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam delectus quidem veritatis eligendi. Sequi eum ullam iste praesentium, eius consectetur vitae nihil itaque rem a necessitatibus quidem quam officiis provident error quaerat dolore id iure. Dolore, quis. Ipsam est maxime dolorem, provident libero magnam saepe ullam culpa eum, earum nobis.
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
-
|
|
|
- <!-- new arrivals -->
|
|
|
- <section id="new-arrivals" class="my-5 ">
|
|
|
- <div class="container mt-5 position-relative">
|
|
|
- <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
|
|
|
- <div class="flex-fill">
|
|
|
- <div class="text-center section-title fw-semibold">NEW ARRIVALS</div>
|
|
|
- <div class="mt-2 mx-auto border-image"></div>
|
|
|
- </div>
|
|
|
- <div class="view-more ">
|
|
|
- <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- discover more -->
|
|
|
+ <section id="discover-more" class="my-3">
|
|
|
+ <div class="container">
|
|
|
+ <div class="row align-items-center p-1 p-lg-3 border border-1">
|
|
|
+ <div class="col-12 col-lg-5">
|
|
|
+ <img class="w-100" src="./images/home_page/looking-for-product.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="col-12 col-lg-7 mt-3 mt-lg-0 px-3">
|
|
|
+ <div class="title">
|
|
|
+ LOOKING FOR PRODUCTS TO PROTECT YOUR SKIN FROM THE SUN THIS SUMMER?
|
|
|
+ </div>
|
|
|
+ <div class="mt-2 border-image"></div>
|
|
|
+ <p class="details mt-3 text-light-gray">
|
|
|
+ We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
|
|
|
+ </p>
|
|
|
+ <div class="mt-5 text-center pb-4 ">
|
|
|
+ <a href="#" class="discover-more btn-black px-4 py-3 px-lg-5 py-lg-3 ">
|
|
|
+ DISCOVER MORE
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="d-flex flex-wrap mt-5 pb-5 pb-lg-0">
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- new arrivals -->
|
|
|
+ <section id="new-arrivals" class="my-5 ">
|
|
|
+ <div class="container mt-5 position-relative">
|
|
|
+ <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
|
|
|
+ <div class="flex-fill">
|
|
|
+ <div class="text-center section-title fw-semibold">NEW ARRIVALS</div>
|
|
|
+ <div class="mt-2 mx-auto border-image"></div>
|
|
|
+ </div>
|
|
|
+ <div class="view-more ">
|
|
|
+ <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="d-flex flex-wrap mt-5 pb-5 pb-lg-0">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 d-none d-xl-block">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 d-none d-xl-block">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
-
|
|
|
- <!-- whats happening -->
|
|
|
- <section id="whats-happening" class="mt-5 ">
|
|
|
- <div class="container">
|
|
|
- <div class="section-title fw-semibold text-center mt-5">
|
|
|
- HERE’S WHATS HAPPENING LIVE
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="mt-2 mx-auto border-image"></div>
|
|
|
- <p class="mt-3 section-subtitle text-gray text-center ">
|
|
|
- Our experts and professionals are here to provide you with hot tips and knowledge to keep you on top Of your beauty and self care game.
|
|
|
- </p>
|
|
|
-
|
|
|
-
|
|
|
- <div class="mt-2 mt-lg-5 row justify-content-between">
|
|
|
-
|
|
|
- <div class="col-12 col-lg-6 mt-4 mt-lg-0">
|
|
|
-
|
|
|
- <div class="border border-1 border-light-gray p-3 d-flex">
|
|
|
- <div class="row align-items-center justify-content-center">
|
|
|
- <div class="col-12 col-md-4">
|
|
|
- <div class="picture w-100">
|
|
|
- <img class="w-100" src="./images/home_page/whats-happening-1.png" alt="">
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- whats happening -->
|
|
|
+ <section id="whats-happening" class="mt-5 ">
|
|
|
+ <div class="container">
|
|
|
+ <div class="section-title fw-semibold text-center mt-5">
|
|
|
+ HERE’S WHATS HAPPENING LIVE
|
|
|
+ </div>
|
|
|
+ <div class="mt-2 mx-auto border-image"></div>
|
|
|
+ <p class="mt-3 section-subtitle text-gray text-center ">
|
|
|
+ Our experts and professionals are here to provide you with hot tips and knowledge to keep you on top Of your beauty and self care game.
|
|
|
+ </p>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="mt-2 mt-lg-5 row justify-content-between">
|
|
|
+
|
|
|
+ <div class="col-12 col-lg-6 mt-4 mt-lg-0">
|
|
|
+
|
|
|
+ <div class="border border-1 border-light-gray p-3 d-flex">
|
|
|
+ <div class="row align-items-center justify-content-center">
|
|
|
+ <div class="col-12 col-md-4">
|
|
|
+ <div class="picture w-100">
|
|
|
+ <img class="w-100" src="./images/home_page/whats-happening-1.png" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="col-12 col-md-8">
|
|
|
- <div class="content px-4 py-2">
|
|
|
- <div class="fs-3 fw-semibold text-center">FACEBOOK LIVE</div>
|
|
|
- <div class="mt-2 mx-auto border-image"></div>
|
|
|
- <p class="mt-2 text-center text-gray">
|
|
|
- Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
|
|
|
- </p>
|
|
|
- <div class="mt-5 text-center">
|
|
|
- <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
|
|
|
- DISCOVER MORE
|
|
|
- </a>
|
|
|
+ <div class="col-12 col-md-8">
|
|
|
+ <div class="content px-4 py-2">
|
|
|
+ <div class="fs-3 fw-semibold text-center">FACEBOOK LIVE</div>
|
|
|
+ <div class="mt-2 mx-auto border-image"></div>
|
|
|
+ <p class="mt-2 text-center text-gray">
|
|
|
+ Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
|
|
|
+ </p>
|
|
|
+ <div class="mt-5 text-center">
|
|
|
+ <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
|
|
|
+ DISCOVER MORE
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="col-12 col-lg-6 mt-4 mt-lg-0">
|
|
|
-
|
|
|
- <div class="border border-1 border-light-gray p-3 d-flex">
|
|
|
- <div class="row align-items-center justify-content-center">
|
|
|
- <div class="col-12 col-md-4">
|
|
|
- <div class="picture w-100">
|
|
|
- <img class="w-100" src="./images/home_page/whats-happening-2.png" alt="">
|
|
|
+
|
|
|
+ <div class="col-12 col-lg-6 mt-4 mt-lg-0">
|
|
|
+
|
|
|
+ <div class="border border-1 border-light-gray p-3 d-flex">
|
|
|
+ <div class="row align-items-center justify-content-center">
|
|
|
+ <div class="col-12 col-md-4">
|
|
|
+ <div class="picture w-100">
|
|
|
+ <img class="w-100" src="./images/home_page/whats-happening-2.png" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="col-12 col-md-8">
|
|
|
- <div class="content px-4 py-2">
|
|
|
- <div class="fs-3 fw-semibold text-center">WINTER SALE</div>
|
|
|
- <div class="mt-2 mx-auto border-image"></div>
|
|
|
- <p class="mt-2 text-center text-gray">
|
|
|
- Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
|
|
|
- </p>
|
|
|
- <div class="mt-5 text-center">
|
|
|
- <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
|
|
|
- DISCOVER MORE
|
|
|
- </a>
|
|
|
+ <div class="col-12 col-md-8">
|
|
|
+ <div class="content px-4 py-2">
|
|
|
+ <div class="fs-3 fw-semibold text-center">WINTER SALE</div>
|
|
|
+ <div class="mt-2 mx-auto border-image"></div>
|
|
|
+ <p class="mt-2 text-center text-gray">
|
|
|
+ Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
|
|
|
+ </p>
|
|
|
+ <div class="mt-5 text-center">
|
|
|
+ <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
|
|
|
+ DISCOVER MORE
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- REWARD BAZAAR -->
|
|
|
- <section id="REWARD-BAZAAR" class="my-5 ">
|
|
|
- <div class="container mt-5 pb-5 pb-lg-0 position-relative">
|
|
|
- <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
|
|
|
- <div class="flex-fill">
|
|
|
- <div class="text-center section-title fw-semibold">REWARD BAZAAR</div>
|
|
|
- <div class="mt-2 mx-auto border-image"></div>
|
|
|
- </div>
|
|
|
- <div class="view-more">
|
|
|
- <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- REWARD BAZAAR -->
|
|
|
+ <section id="REWARD-BAZAAR" class="my-5 ">
|
|
|
+ <div class="container mt-5 pb-5 pb-lg-0 position-relative">
|
|
|
+ <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
|
|
|
+ <div class="flex-fill">
|
|
|
+ <div class="text-center section-title fw-semibold">REWARD BAZAAR</div>
|
|
|
+ <div class="mt-2 mx-auto border-image"></div>
|
|
|
+ </div>
|
|
|
+ <div class="view-more">
|
|
|
+ <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="d-flex flex-wrap mt-5">
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+
|
|
|
+ <div class="d-flex flex-wrap mt-5">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+
|
|
|
+ <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <p class="mt-3 text-deep-red small">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class="mt-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text-center mt-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <p class="mt-3 text-deep-red small">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class="mt-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="text-center mt-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+
|
|
|
+ <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <p class="mt-3 text-deep-red small">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class="mt-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text-center mt-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <p class="mt-3 text-deep-red small">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class="mt-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="text-center mt-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+
|
|
|
+ <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <p class="mt-3 text-deep-red small">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class="mt-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text-center mt-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <p class="mt-3 text-deep-red small">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class="mt-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="text-center mt-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+
|
|
|
+ <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <p class="mt-3 text-deep-red small">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class="mt-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text-center mt-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <p class="mt-3 text-deep-red small">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class="mt-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="text-center mt-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="product-single p-1 p-md-2 d-none d-xl-block">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
-
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 d-none d-xl-block">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </a>
|
|
|
-
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
-
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-md-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+
|
|
|
+ <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <p class="mt-3 text-deep-red small">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class="mt-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text-center mt-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <a href="./product-details.html" class="title text-gray fs-6 ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <p class="mt-3 text-deep-red small">
|
|
|
- Buy 2 Get 1 free
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- heir shine -->
|
|
|
+ <section id="heir-shine" class="mt-5 ">
|
|
|
+ <div class="container">
|
|
|
+ <div class="row align-items-center p-1 p-lg-3 pb-3 border border-1">
|
|
|
+ <div class="col-12 col-lg-6 order-1 mt-3 mt-lg-0 order-lg-0">
|
|
|
+ <h2>
|
|
|
+ HAIRCARE PRODUCTS TO MAKE YOUR HAIR SHINE THIS SEASON
|
|
|
+ </h2>
|
|
|
+ <div class="mt-2 border-image"></div>
|
|
|
+ <p class="mt-3 text-light-gray">
|
|
|
+ We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
|
|
|
</p>
|
|
|
-
|
|
|
- <!-- product price -->
|
|
|
- <div class="mt-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- product price in app -->
|
|
|
- <div class="mt-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="text-center mt-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
+ <div class="mt-3 mt-lg-5 text-center">
|
|
|
+ <a href="#" class="discover-more btn-black py-2 px-3 py-lg-3 px-lg-4">
|
|
|
+ DISCOVER MORE
|
|
|
+ </a>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="col-12 col-lg-6 order-0 order-lg-1 px-3">
|
|
|
+ <img class="w-100" src="./images/home_page/heir-shine.png" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- heir shine -->
|
|
|
- <section id="heir-shine" class="mt-5 ">
|
|
|
- <div class="container">
|
|
|
- <div class="row align-items-center p-1 p-lg-3 pb-3 border border-1">
|
|
|
- <div class="col-12 col-lg-6 order-1 mt-3 mt-lg-0 order-lg-0">
|
|
|
- <h2>
|
|
|
- HAIRCARE PRODUCTS TO MAKE YOUR HAIR SHINE THIS SEASON
|
|
|
- </h2>
|
|
|
- <div class="mt-2 border-image"></div>
|
|
|
- <p class="mt-3 text-light-gray">
|
|
|
- We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
|
|
|
- </p>
|
|
|
- <div class="mt-3 mt-lg-5 text-center">
|
|
|
- <a href="#" class="discover-more btn-black py-2 px-3 py-lg-3 px-lg-4">
|
|
|
- DISCOVER MORE
|
|
|
- </a>
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- only for you -->
|
|
|
+ <section id="only-for-you" class="my-5 ">
|
|
|
+ <div class="container mt-5">
|
|
|
+ <div class="d-flex align-items-start justify-content-center">
|
|
|
+ <div class="flex-fill">
|
|
|
+ <div class="text-center section-title fw-semibold">ONLY FOR YOU</div>
|
|
|
+ <div class="mt-2 mx-auto border-image"></div>
|
|
|
+ <div class="mt-4 text-center section-subtitle text-deep-red">SPECIAL OFFERS</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="col-12 col-lg-6 order-0 order-lg-1 px-3">
|
|
|
- <img class="w-100" src="./images/home_page/heir-shine.png" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
-
|
|
|
- <!-- only for you -->
|
|
|
- <section id="only-for-you" class="my-5 ">
|
|
|
- <div class="container mt-5">
|
|
|
- <div class="d-flex align-items-start justify-content-center">
|
|
|
- <div class="flex-fill">
|
|
|
- <div class="text-center section-title fw-semibold">ONLY FOR YOU</div>
|
|
|
- <div class="mt-2 mx-auto border-image"></div>
|
|
|
- <div class="mt-4 text-center section-subtitle text-deep-red">SPECIAL OFFERS</div>
|
|
|
+
|
|
|
+ <div class="row py-3">
|
|
|
+ <div class="col-4">
|
|
|
+ <img class="w-100" src="./images/home_page/only-for-you-1.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="col-4">
|
|
|
+ <img class="w-100" src="./images/home_page/only-for-you-2.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="col-4">
|
|
|
+ <img class="w-100" src="./images/home_page/only-for-you-3.png" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="row py-3">
|
|
|
- <div class="col-4">
|
|
|
- <img class="w-100" src="./images/home_page/only-for-you-1.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="col-4">
|
|
|
- <img class="w-100" src="./images/home_page/only-for-you-2.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="col-4">
|
|
|
- <img class="w-100" src="./images/home_page/only-for-you-3.png" alt="">
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- featured brands sliders -->
|
|
|
+ <section id="featured-brands" class="mt-3 py-3">
|
|
|
+ <div class="container">
|
|
|
+
|
|
|
+ <div class="text-center section-title fw-semibold">FEATURED BRANDS</div>
|
|
|
+ <div class="mt-1 mx-auto border-image"></div>
|
|
|
+
|
|
|
+ <div class="mt-4 position-relative">
|
|
|
+ <div class="swiper featuredBrands">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/feature-brands-1.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/feature-brands-2.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/feature-brands-3.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/feature-brands-4.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/feature-brands-1.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/feature-brands-2.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/feature-brands-3.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide">
|
|
|
+ <a href="#">
|
|
|
+ <img src="./images/home_page/feature-brands-4.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- featured brands sliders -->
|
|
|
- <section id="featured-brands" class="mt-3 py-3">
|
|
|
- <div class="container">
|
|
|
-
|
|
|
- <div class="text-center section-title fw-semibold">FEATURED BRANDS</div>
|
|
|
- <div class="mt-1 mx-auto border-image"></div>
|
|
|
-
|
|
|
- <div class="mt-4 position-relative">
|
|
|
- <div class="swiper featuredBrands">
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- trending stories -->
|
|
|
+ <section id="trending-stories" class="mt-5 ">
|
|
|
+ <div class="container mt-5">
|
|
|
+ <div class="text-center section-title fw-semibold">TRENDING STORIES</div>
|
|
|
+ <div class="mt-1 mx-auto border-image"></div>
|
|
|
+ <div class="mt-2 text-center fs-4 text-gray">ON THE BLOG</div>
|
|
|
+
|
|
|
+ <div class="swiper trendingStories">
|
|
|
<div class="swiper-wrapper">
|
|
|
+
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/feature-brands-1.png" alt="">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/feature-brands-2.png" alt="">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/feature-brands-3.png" alt="">
|
|
|
- </a>
|
|
|
+ <div class="trending-container p-3">
|
|
|
+ <div class="image-container">
|
|
|
+ <a href="#">
|
|
|
+ <img class="w-100" src="./images/home_page/trending-1.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="content-details text-start px-2 py-4">
|
|
|
+ <div class="category-link">
|
|
|
+ <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
+ </div>
|
|
|
+ <div class="blog-link mt-3">
|
|
|
+ <a class="mt-3 text-gray fs-4" href="#">
|
|
|
+ USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <p class="mt-3 text-light-gray fs-6">
|
|
|
+ নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
+ </p>
|
|
|
+ <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
+ <div class="mt-3 read-more">
|
|
|
+ <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/feature-brands-4.png" alt="">
|
|
|
- </a>
|
|
|
+ <div class="trending-container p-2">
|
|
|
+ <div class="image-container">
|
|
|
+ <a href="#">
|
|
|
+ <img class="w-100" src="./images/home_page/trending-2.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="content-details text-start px-2 py-4">
|
|
|
+ <div class="category-link">
|
|
|
+ <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
+ </div>
|
|
|
+ <div class="blog-link mt-3">
|
|
|
+ <a class="mt-3 text-gray fs-4" href="#">
|
|
|
+ USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <p class="mt-3 text-light-gray fs-6">
|
|
|
+ নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
+ </p>
|
|
|
+ <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
+ <div class="mt-3 read-more">
|
|
|
+ <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/feature-brands-1.png" alt="">
|
|
|
- </a>
|
|
|
+ <div class="trending-container p-2">
|
|
|
+ <div class="image-container">
|
|
|
+ <a href="#">
|
|
|
+ <img class="w-100" src="./images/home_page/trending-3.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="content-details text-start px-2 py-4">
|
|
|
+ <div class="category-link">
|
|
|
+ <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
+ </div>
|
|
|
+ <div class="blog-link mt-3">
|
|
|
+ <a class="mt-3 text-gray fs-4" href="#">
|
|
|
+ USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <p class="mt-3 text-light-gray fs-6">
|
|
|
+ নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
+ </p>
|
|
|
+ <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
+ <div class="mt-3 read-more">
|
|
|
+ <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/feature-brands-2.png" alt="">
|
|
|
- </a>
|
|
|
+ <div class="trending-container p-2">
|
|
|
+ <div class="image-container">
|
|
|
+ <a href="#">
|
|
|
+ <img class="w-100" src="./images/home_page/trending-1.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="content-details text-start px-2 py-4">
|
|
|
+ <div class="category-link">
|
|
|
+ <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
+ </div>
|
|
|
+ <div class="blog-link mt-3">
|
|
|
+ <a class="mt-3 text-gray fs-4" href="#">
|
|
|
+ USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <p class="mt-3 text-light-gray fs-6">
|
|
|
+ নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
+ </p>
|
|
|
+ <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
+ <div class="mt-3 read-more">
|
|
|
+ <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/feature-brands-3.png" alt="">
|
|
|
- </a>
|
|
|
+ <div class="trending-container p-2">
|
|
|
+ <div class="image-container">
|
|
|
+ <a href="#">
|
|
|
+ <img class="w-100" src="./images/home_page/trending-2.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="content-details text-start px-2 py-4">
|
|
|
+ <div class="category-link">
|
|
|
+ <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
+ </div>
|
|
|
+ <div class="blog-link mt-3">
|
|
|
+ <a class="mt-3 text-gray fs-4" href="#">
|
|
|
+ USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <p class="mt-3 text-light-gray fs-6">
|
|
|
+ নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
+ </p>
|
|
|
+ <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
+ <div class="mt-3 read-more">
|
|
|
+ <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="swiper-slide">
|
|
|
- <a href="#">
|
|
|
- <img src="./images/home_page/feature-brands-4.png" alt="">
|
|
|
- </a>
|
|
|
+ <div class="trending-container p-2">
|
|
|
+ <div class="image-container">
|
|
|
+ <a href="#">
|
|
|
+ <img class="w-100" src="./images/home_page/trending-3.png" alt="">
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="content-details text-start px-2 py-4">
|
|
|
+ <div class="category-link">
|
|
|
+ <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
+ </div>
|
|
|
+ <div class="blog-link mt-3">
|
|
|
+ <a class="mt-3 text-gray fs-4" href="#">
|
|
|
+ USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <p class="mt-3 text-light-gray fs-6">
|
|
|
+ নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
+ </p>
|
|
|
+ <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
+ <div class="mt-3 read-more">
|
|
|
+ <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
+ <!-- <div class="swiper-button-next"></div>
|
|
|
+ <div class="swiper-button-prev"></div> -->
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
-
|
|
|
- <!-- trending stories -->
|
|
|
- <section id="trending-stories" class="mt-5 ">
|
|
|
- <div class="container mt-5">
|
|
|
- <div class="text-center section-title fw-semibold">TRENDING STORIES</div>
|
|
|
- <div class="mt-1 mx-auto border-image"></div>
|
|
|
- <div class="mt-2 text-center fs-4 text-gray">ON THE BLOG</div>
|
|
|
-
|
|
|
- <div class="swiper trendingStories">
|
|
|
- <div class="swiper-wrapper">
|
|
|
-
|
|
|
- <div class="swiper-slide">
|
|
|
- <div class="trending-container p-3">
|
|
|
- <div class="image-container">
|
|
|
- <a href="#">
|
|
|
- <img class="w-100" src="./images/home_page/trending-1.png" alt="">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="content-details text-start px-2 py-4">
|
|
|
- <div class="category-link">
|
|
|
- <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
- </div>
|
|
|
- <div class="blog-link mt-3">
|
|
|
- <a class="mt-3 text-gray fs-4" href="#">
|
|
|
- USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
- </a>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- find on instagram -->
|
|
|
+ <section id="find-on-instagram" class="my-2 pb-3">
|
|
|
+ <div class="container ">
|
|
|
+ <div class="text-center section-title fw-semibold">FIND US ON INSTAGRAM</div>
|
|
|
+ <div class="mt-1 mx-auto border-image"></div>
|
|
|
+
|
|
|
+ <div class="mt-3 py-3 image-container">
|
|
|
+ <img class="w-100" src="./images/home_page/find-on instragram.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- recently viewed -->
|
|
|
+ <section id="recently-viewed" class="my-5 ">
|
|
|
+ <div class="container mt-5 pb-5 pb-lg-0 position-relative">
|
|
|
+ <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
|
|
|
+ <div class="flex-fill">
|
|
|
+ <div class="text-center section-title fw-semibold">RECENTLY VIEWED</div>
|
|
|
+ <div class="mt-2 mx-auto border-image"></div>
|
|
|
+ </div>
|
|
|
+ <div class="view-more">
|
|
|
+ <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="d-flex flex-wrap mt-5">
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
</div>
|
|
|
- <p class="mt-3 text-light-gray fs-6">
|
|
|
- নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
- </p>
|
|
|
- <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
- <div class="mt-3 read-more">
|
|
|
- <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="swiper-slide">
|
|
|
- <div class="trending-container p-2">
|
|
|
- <div class="image-container">
|
|
|
- <a href="#">
|
|
|
- <img class="w-100" src="./images/home_page/trending-2.png" alt="">
|
|
|
- </a>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
</div>
|
|
|
- <div class="content-details text-start px-2 py-4">
|
|
|
- <div class="category-link">
|
|
|
- <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
- </div>
|
|
|
- <div class="blog-link mt-3">
|
|
|
- <a class="mt-3 text-gray fs-4" href="#">
|
|
|
- USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <p class="mt-3 text-light-gray fs-6">
|
|
|
- নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
- </p>
|
|
|
- <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
- <div class="mt-3 read-more">
|
|
|
- <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="swiper-slide">
|
|
|
- <div class="trending-container p-2">
|
|
|
- <div class="image-container">
|
|
|
- <a href="#">
|
|
|
- <img class="w-100" src="./images/home_page/trending-3.png" alt="">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="content-details text-start px-2 py-4">
|
|
|
- <div class="category-link">
|
|
|
- <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
- </div>
|
|
|
- <div class="blog-link mt-3">
|
|
|
- <a class="mt-3 text-gray fs-4" href="#">
|
|
|
- USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
- </a>
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
</div>
|
|
|
- <p class="mt-3 text-light-gray fs-6">
|
|
|
- নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
- </p>
|
|
|
- <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
- <div class="mt-3 read-more">
|
|
|
- <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="swiper-slide">
|
|
|
- <div class="trending-container p-2">
|
|
|
- <div class="image-container">
|
|
|
- <a href="#">
|
|
|
- <img class="w-100" src="./images/home_page/trending-1.png" alt="">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="content-details text-start px-2 py-4">
|
|
|
- <div class="category-link">
|
|
|
- <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
- </div>
|
|
|
- <div class="blog-link mt-3">
|
|
|
- <a class="mt-3 text-gray fs-4" href="#">
|
|
|
- USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
- </a>
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
</div>
|
|
|
- <p class="mt-3 text-light-gray fs-6">
|
|
|
- নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
- </p>
|
|
|
- <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
- <div class="mt-3 read-more">
|
|
|
- <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="swiper-slide">
|
|
|
- <div class="trending-container p-2">
|
|
|
- <div class="image-container">
|
|
|
- <a href="#">
|
|
|
- <img class="w-100" src="./images/home_page/trending-2.png" alt="">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="content-details text-start px-2 py-4">
|
|
|
- <div class="category-link">
|
|
|
- <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
- </div>
|
|
|
- <div class="blog-link mt-3">
|
|
|
- <a class="mt-3 text-gray fs-4" href="#">
|
|
|
- USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
- </a>
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 ">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
</div>
|
|
|
- <p class="mt-3 text-light-gray fs-6">
|
|
|
- নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
- </p>
|
|
|
- <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
- <div class="mt-3 read-more">
|
|
|
- <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="swiper-slide">
|
|
|
- <div class="trending-container p-2">
|
|
|
- <div class="image-container">
|
|
|
- <a href="#">
|
|
|
- <img class="w-100" src="./images/home_page/trending-3.png" alt="">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="content-details text-start px-2 py-4">
|
|
|
- <div class="category-link">
|
|
|
- <a class="text-deep-red" href="#">Lifestyle</a>
|
|
|
- </div>
|
|
|
- <div class="blog-link mt-3">
|
|
|
- <a class="mt-3 text-gray fs-4" href="#">
|
|
|
- USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
|
|
|
- </a>
|
|
|
+
|
|
|
+ <div class="product-single p-1 p-md-2 d-none d-xl-block">
|
|
|
+ <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+
|
|
|
+ <!-- product image -->
|
|
|
+ <a href="./product-details.html">
|
|
|
+ <div class="image-container text-center">
|
|
|
+ <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
</div>
|
|
|
- <p class="mt-3 text-light-gray fs-6">
|
|
|
- নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
|
|
|
- </p>
|
|
|
- <p class="date text-light-gray mt-3">26 Nov 2022</p>
|
|
|
- <div class="mt-3 read-more">
|
|
|
- <a class="text-deep-red fs-4" href="#">Read More </a>
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- product brand and ratting -->
|
|
|
+ <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+
|
|
|
+ <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
+
|
|
|
+ <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
+ <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
+ <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- product name -->
|
|
|
+ <a href="./product-details.html" class="title text-gray ">
|
|
|
+ Clear Kind to skin refreshing
|
|
|
+ shampoo
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <!-- offer -->
|
|
|
+ <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
+ Buy 2 Get 1 free
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <!-- product price -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
+ <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
+ <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- product price in app -->
|
|
|
+ <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
+ <span class="fw-semibold">App Price : </span>
|
|
|
+ <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- add to cart -->
|
|
|
+ <div class="text-center pt-2 pt-lg-3">
|
|
|
+ <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
+ <span>
|
|
|
+ <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
+ </span>
|
|
|
+ <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- show off -->
|
|
|
+ <section id="show-off">
|
|
|
+ <img class="w-100" src="./images/home_page/show-off.jpg" alt="">
|
|
|
+ </section>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- All Links -->
|
|
|
+ <section id="all-link" class="mt-5 py-5">
|
|
|
+ <div class="container">
|
|
|
+
|
|
|
+ <div class="link-group mt-2">
|
|
|
+ <h4 class="title text-center text-deep-red fw-normal">MAKEUP</h4>
|
|
|
+ <div class="links mt-3 px-3">
|
|
|
+ <nav aria-label="breadcrumb">
|
|
|
+ <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
|
|
|
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ </ol>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="link-group mt-4">
|
|
|
+ <h4 class="title text-center text-deep-red fw-normal">SKIN</h4>
|
|
|
+ <div class="links mt-3 px-3">
|
|
|
+ <nav aria-label="breadcrumb">
|
|
|
+ <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
|
|
|
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ </ol>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="link-group mt-4">
|
|
|
+ <h4 class="title text-center text-deep-red fw-normal">WELLNESS</h4>
|
|
|
+ <div class="links mt-3 px-3">
|
|
|
+ <nav aria-label="breadcrumb">
|
|
|
+ <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
|
|
|
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ </ol>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="link-group mt-4">
|
|
|
+ <h4 class="title text-center text-deep-red fw-normal">COLLECTION</h4>
|
|
|
+ <div class="links mt-3 px-3">
|
|
|
+ <nav aria-label="breadcrumb">
|
|
|
+ <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
|
|
|
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
+ </ol>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- <div class="swiper-button-next"></div>
|
|
|
- <div class="swiper-button-prev"></div> -->
|
|
|
</div>
|
|
|
+ </section>
|
|
|
+
|
|
|
|
|
|
+ <!-- checkout sidebar-->
|
|
|
+ <section id="checkout" class="pt-2 ">
|
|
|
|
|
|
- </div>
|
|
|
- </section>
|
|
|
+ <div class="checkout-container position-fixed bg-white pb-5">
|
|
|
|
|
|
- <!-- find on instagram -->
|
|
|
- <section id="find-on-instagram" class="my-2 pb-3">
|
|
|
- <div class="container ">
|
|
|
- <div class="text-center section-title fw-semibold">FIND US ON INSTAGRAM</div>
|
|
|
- <div class="mt-1 mx-auto border-image"></div>
|
|
|
+
|
|
|
|
|
|
- <div class="mt-3 py-3 image-container">
|
|
|
- <img class="w-100" src="./images/home_page/find-on instragram.png" alt="">
|
|
|
- </div>
|
|
|
+ <div class="cart-product-container px-3 pt-2 pb-5">
|
|
|
|
|
|
-
|
|
|
- </div>
|
|
|
- </section>
|
|
|
+ <!-- cart header -->
|
|
|
+ <div class="title-container border-bottom border-1 border-extralight-gray pt-3 d-flex align-items-start justify-content-between">
|
|
|
+ <h4 >CART</h4>
|
|
|
+ <button class="cross-btn btn">
|
|
|
+ <img src="./images/icon/cross-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
|
|
|
-
|
|
|
- <!-- recently viewed -->
|
|
|
- <section id="recently-viewed" class="my-5 ">
|
|
|
- <div class="container mt-5 pb-5 pb-lg-0 position-relative">
|
|
|
- <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
|
|
|
- <div class="flex-fill">
|
|
|
- <div class="text-center section-title fw-semibold">RECENTLY VIEWED</div>
|
|
|
- <div class="mt-2 mx-auto border-image"></div>
|
|
|
- </div>
|
|
|
- <div class="view-more">
|
|
|
- <a href="#" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="d-flex flex-wrap mt-5">
|
|
|
+ <!-- cart item -->
|
|
|
+ <div class="cart-items mt-3">
|
|
|
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+ <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
- </div>
|
|
|
- </a>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="item-details d-flex">
|
|
|
+ <div class="img-container">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pt-2 ">
|
|
|
+ <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
|
|
|
+ <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
|
|
|
+ <div class=" quantity text-center" >
|
|
|
+ <div class="title text-gray small">QTY</div>
|
|
|
+ <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <div class="price text-end mt-3 fs-5">
|
|
|
+ <span class="text-gray text-decoration-line-through">৳ 550</span>
|
|
|
+ <span class="ms-3 text-gray">৳ 440</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="btn delete-btn position-absolute">
|
|
|
+ <img src="./images/icon/delete-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
+ <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
|
|
|
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="item-details d-flex">
|
|
|
+ <div class="img-container">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
+ <div class="pt-2 ">
|
|
|
+ <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
|
|
|
+ <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
|
|
|
+ <div class=" quantity text-center" >
|
|
|
+ <div class="title text-gray small">QTY</div>
|
|
|
+ <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+ <div class="price text-end mt-3 fs-5">
|
|
|
+ <span class="text-gray text-decoration-line-through">৳ 550</span>
|
|
|
+ <span class="ms-3 text-gray">৳ 440</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
+ <button class="btn delete-btn position-absolute">
|
|
|
+ <img src="./images/icon/delete-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </a>
|
|
|
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+ <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
|
|
|
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="item-details d-flex">
|
|
|
+ <div class="img-container">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pt-2 ">
|
|
|
+ <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
|
|
|
+ <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
|
|
|
+ <div class=" quantity text-center" >
|
|
|
+ <div class="title text-gray small">QTY</div>
|
|
|
+ <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="price text-end mt-3 fs-5">
|
|
|
+ <span class="text-gray text-decoration-line-through">৳ 550</span>
|
|
|
+ <span class="ms-3 text-gray">৳ 440</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="btn delete-btn position-absolute">
|
|
|
+ <img src="./images/icon/delete-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
+ <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
|
|
|
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="item-details d-flex">
|
|
|
+ <div class="img-container">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
+ <div class="pt-2 ">
|
|
|
+ <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
|
|
|
+ <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
|
|
|
+ <div class=" quantity text-center" >
|
|
|
+ <div class="title text-gray small">QTY</div>
|
|
|
+ <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+ <div class="price text-end mt-3 fs-5">
|
|
|
+ <span class="text-gray text-decoration-line-through">৳ 550</span>
|
|
|
+ <span class="ms-3 text-gray">৳ 440</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
+ <button class="btn delete-btn position-absolute">
|
|
|
+ <img src="./images/icon/delete-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </a>
|
|
|
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+ <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
|
|
|
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="item-details d-flex">
|
|
|
+ <div class="img-container">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pt-2 ">
|
|
|
+ <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
|
|
|
+ <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
|
|
|
+ <div class=" quantity text-center" >
|
|
|
+ <div class="title text-gray small">QTY</div>
|
|
|
+ <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="price text-end mt-3 fs-5">
|
|
|
+ <span class="text-gray text-decoration-line-through">৳ 550</span>
|
|
|
+ <span class="ms-3 text-gray">৳ 440</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="btn delete-btn position-absolute">
|
|
|
+ <img src="./images/icon/delete-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
+ <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
|
|
|
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="item-details d-flex">
|
|
|
+ <div class="img-container">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
+ <div class="pt-2 ">
|
|
|
+ <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
|
|
|
+ <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
|
|
|
+ <div class=" quantity text-center" >
|
|
|
+ <div class="title text-gray small">QTY</div>
|
|
|
+ <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="product-single p-1 p-md-2 ">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+ <div class="price text-end mt-3 fs-5">
|
|
|
+ <span class="text-gray text-decoration-line-through">৳ 550</span>
|
|
|
+ <span class="ms-3 text-gray">৳ 440</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
+ <button class="btn delete-btn position-absolute">
|
|
|
+ <img src="./images/icon/delete-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </a>
|
|
|
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+ <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
|
|
|
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="item-details d-flex">
|
|
|
+ <div class="img-container">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pt-2 ">
|
|
|
+ <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
|
|
|
+ <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
|
|
|
+ <div class=" quantity text-center" >
|
|
|
+ <div class="title text-gray small">QTY</div>
|
|
|
+ <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="price text-end mt-3 fs-5">
|
|
|
+ <span class="text-gray text-decoration-line-through">৳ 550</span>
|
|
|
+ <span class="ms-3 text-gray">৳ 440</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="btn delete-btn position-absolute">
|
|
|
+ <img src="./images/icon/delete-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
+ <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
|
|
|
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="item-details d-flex">
|
|
|
+ <div class="img-container">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
+ <div class="pt-2 ">
|
|
|
+ <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
|
|
|
+ <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
|
|
|
+ <div class=" quantity text-center" >
|
|
|
+ <div class="title text-gray small">QTY</div>
|
|
|
+ <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="product-single p-1 p-md-2 d-none d-xl-block">
|
|
|
- <div class=" product rounded-1 px-3 py-3 text-start">
|
|
|
+ <div class="price text-end mt-3 fs-5">
|
|
|
+ <span class="text-gray text-decoration-line-through">৳ 550</span>
|
|
|
+ <span class="ms-3 text-gray">৳ 440</span>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product image -->
|
|
|
- <a href="./product-details.html">
|
|
|
- <div class="image-container text-center">
|
|
|
- <img class="h-100" src="./images/product_details/also-product.png" alt="">
|
|
|
+ <button class="btn delete-btn position-absolute">
|
|
|
+ <img src="./images/icon/delete-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
- </a>
|
|
|
|
|
|
- <!-- product brand and ratting -->
|
|
|
- <div class="my-2 d-flex flex-wrap align-items-center ">
|
|
|
+ <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
|
|
|
|
|
|
- <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
|
|
|
-
|
|
|
- <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
|
|
|
- <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
|
|
|
- <div class="rating-count ms-1 ms-md-2">(15)</div>
|
|
|
+ <div class="d-flex justify-content-between">
|
|
|
+ <div class="item-details d-flex">
|
|
|
+ <div class="img-container">
|
|
|
+ <img class="h-100" src="./images/product_details/product image.png" alt="">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pt-2 ">
|
|
|
+ <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
|
|
|
+ <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
|
|
|
+ <div class=" quantity text-center" >
|
|
|
+ <div class="title text-gray small">QTY</div>
|
|
|
+ <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="price text-end mt-3 fs-5">
|
|
|
+ <span class="text-gray text-decoration-line-through">৳ 550</span>
|
|
|
+ <span class="ms-3 text-gray">৳ 440</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button class="btn delete-btn position-absolute">
|
|
|
+ <img src="./images/icon/delete-icon.svg" alt="">
|
|
|
+ </button>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
- <!-- product name -->
|
|
|
- <a href="./product-details.html" class="title text-gray ">
|
|
|
- Clear Kind to skin refreshing
|
|
|
- shampoo
|
|
|
- </a>
|
|
|
-
|
|
|
- <!-- offer -->
|
|
|
- <p class="offer pt-2 pt-xl-3 text-deep-red">
|
|
|
- Buy 2 Get 1 free
|
|
|
- </p>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- product price -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
|
|
|
- <span class="text-decoration-line-through text-light-gray">৳600</span>
|
|
|
- <span class="ms-3 fw-semibold">৳510 </span>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- product price in app -->
|
|
|
- <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
|
|
|
- <span class="fw-semibold">App Price : </span>
|
|
|
- <span class="ms-3 fw-semibold">৳ 484 </span>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- add to cart -->
|
|
|
- <div class="text-center pt-2 pt-lg-3">
|
|
|
- <button class="checkout-btn mx-auto btn-sm btn btn-dark rounded-0 d-flex justify-content-center align-items-center py-1 px-2">
|
|
|
- <span>
|
|
|
- <img src="./images/icon/Cart_white.svg" alt="">
|
|
|
- </span>
|
|
|
- <span class="add-cart-text ms-2">Add to Cart</span>
|
|
|
- </button>
|
|
|
+ <!-- proced button and utility -->
|
|
|
+ <div class="content position-relative w-100">
|
|
|
+
|
|
|
+ <div class="proceed-button-container position-fixed bg-white bottom-0 px-2 py-3 d-flex align-items-center justify-content-between">
|
|
|
+
|
|
|
+ <div class="text-center w-50">
|
|
|
+ <div class="fw-normal">SUBTOTAL</div>
|
|
|
+ <div class="fw-semibold">৳1,550</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="text-center w-50">
|
|
|
+ <a href="./checkout.html" class="btn rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
|
|
|
+ PROCEED
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
- </div>
|
|
|
+
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- checkout sidebar navigation button -->
|
|
|
+ <div id="checkout-button" >
|
|
|
+ <!-- checkout navigation button for desktop -->
|
|
|
+ <button id="checkout-btn-desktop" class="checkout-product-btn-desktop position-fixed d-none d-xl-flex flex-lg-column justify-content-lg-center align-items-lg-center bg-white border-0 text-white p-2">
|
|
|
+ <img class="checkout-icon" src="./images/icon/shoping bag.svg" alt="">
|
|
|
+ <!-- items count -->
|
|
|
+ <p class="count mt-2 text-black small">
|
|
|
+ <span>5</span>
|
|
|
+ <span>items</span>
|
|
|
+ </p>
|
|
|
+ <!-- price -->
|
|
|
+ <p class="price text-black text-deep-red">4540</p>
|
|
|
+ </button>
|
|
|
|
|
|
- </div>
|
|
|
- </section>
|
|
|
+ <!-- checkout navigation button for mobile -->
|
|
|
+ <div id="checkout-btn-mobile" class="d-block">
|
|
|
+ <div class="checkout-mobile d-flex position-fixed bottom-0 start-0 d-block d-lg-none shadow-sm" >
|
|
|
|
|
|
+ <div class="border-0 py-2 bg-pink-extralight w-50 text-center">
|
|
|
|
|
|
- <!-- show off -->
|
|
|
- <section id="show-off">
|
|
|
- <img class="w-100" src="./images/home_page/show-off.jpg" alt="">
|
|
|
- </section>
|
|
|
+ <div class="cart-details position-relative mx-auto">
|
|
|
|
|
|
+ <span class="badge bg-red-deep rounded-circle fw-light text-white ">10</span>
|
|
|
+
|
|
|
+ <!-- total -->
|
|
|
+ <span class="total position-absolute text-deep-red">
|
|
|
+ 500000 ৳
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- All Links -->
|
|
|
- <section id="all-link" class="mt-5 py-5">
|
|
|
- <div class="container">
|
|
|
-
|
|
|
- <div class="link-group mt-2">
|
|
|
- <h4 class="title text-center text-deep-red fw-normal">MAKEUP</h4>
|
|
|
- <div class="links mt-3 px-3">
|
|
|
- <nav aria-label="breadcrumb">
|
|
|
- <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
|
|
|
- <li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- </ol>
|
|
|
- </nav>
|
|
|
-
|
|
|
+ <!-- checkout nav button -->
|
|
|
+ <button class="check-button checkout-product-btn-mobile border-0 py-2 bg-pink w-50 text-white fs-5">
|
|
|
+ Go To Checkout
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="link-group mt-4">
|
|
|
- <h4 class="title text-center text-deep-red fw-normal">SKIN</h4>
|
|
|
- <div class="links mt-3 px-3">
|
|
|
- <nav aria-label="breadcrumb">
|
|
|
- <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
|
|
|
- <li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- </ol>
|
|
|
- </nav>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="link-group mt-4">
|
|
|
- <h4 class="title text-center text-deep-red fw-normal">WELLNESS</h4>
|
|
|
- <div class="links mt-3 px-3">
|
|
|
- <nav aria-label="breadcrumb">
|
|
|
- <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
|
|
|
- <li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- </ol>
|
|
|
- </nav>
|
|
|
-
|
|
|
- </div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="link-group mt-4">
|
|
|
- <h4 class="title text-center text-deep-red fw-normal">COLLECTION</h4>
|
|
|
- <div class="links mt-3 px-3">
|
|
|
- <nav aria-label="breadcrumb">
|
|
|
- <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
|
|
|
- <li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- <li class="breadcrumb-item"><a href="#">Library</a></li>
|
|
|
- </ol>
|
|
|
- </nav>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
|
|
|
<!-- footer -->
|
@Mostafijur
