12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <!-- fonts -->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
- <!-- bootstrap css -->
- <link rel="stylesheet" href="./css/bootstrap.min.css">
- <!-- swiper slider css -->
- <link rel="stylesheet" href="./css/swiper-bundle.min.css">
- <!-- lightbox css -->
- <link rel="stylesheet" href="./css/simple-lightbox.css">
- <!-- custom css -->
- <link rel="stylesheet" href="./css/style.css">
- <title>All Product</title>
- </head>
- <body>
-
-
- <!-- nav header -->
- <section id="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 py-1">
- <div class="d-flex justify-content-between align-items-center w-100">
- <!-- brand logo -->
- <div class="brand-logo">
- <img src="./images/navbar/brand-logo.svg" alt="">
- </div>
- <!-- search box -->
- <div class="search flex-fill px-5">
- <div class=" form-group position-relative ">
- <label for="search-box" class="search-icon position-absolute">
- <img src="./images/icon/search.svg" alt="">
- </label>
- <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
- </div>
- </div>
- <!-- link -->
- <div class="link-box d-flex align-items-center">
- <a href="#" class="link d-flex align-items-center px-1 py-1" >
- <img class="link-icon" src="./images/navbar/group.png" alt="">
- </a>
- <a href="#" class="link d-flex align-items-center px-1 py-1 text-decoration-none" >
- <img class="link-icon" src="./images/navbar/face.png" alt="">
- <div>
- <h4 class="name fw-bold text-nowrap text-black">Hi Human</h4>
- <h5 class="fw-bold text-no-wrap text-black">Vip: 0 points</h5>
- </div>
- </a>
- <a href="#" class="link d-flex align-items-center px-1 py-1" >
- <img class="link-icon" src="./images/navbar/message.png" alt="">
- </a>
- <a href="#" class="link d-flex align-items-center px-1 py-1" >
- <img class="link-icon" src="./images/navbar/heart.png" alt="">
- </a>
- <a href="#" class="link d-flex align-items-center px-1 py-1" >
- <img class="link-icon" src="./images/navbar/bascket.png" alt="">
- </a>
- </div>
- </div>
- </div>
- </div>
- <!-- main navigation -->
- <div class="main-nav bg-black text-white">
- <div class="container py-2">
- <ul class="d-flex align-items-center justify-content-between px-1">
- <li>Makeup</li>
- <li>Skincare</li>
- <li>K beauty</li>
- <li>Heir</li>
- <li>Man</li>
- <li>Baby</li>
- <li>Fragnance</li>
- <li>Healthcare</li>
- <li>Lifestyle</li>
- <li>pet</li>
- <li>Gifts</li>
- <li>Brands</li>
- <li>Makeup</li>
- <li>
- <button class="btn btn-sm btn-pink px-3">Blog</button>
- </li>
- <li>
- <button class="btn btn-sm btn-orange-vivid px-3">Buy 1 Get 1</button>
- </li>
- <li>
- <button class="btn btn-sm btn-orange-vivid px-3">Sale</button>
- </li>
- </ul>
- </div>
- </div>
- </section>
- <div class="position-relative">
-
-
- <!-- banner -->
- <section id="all-product-banner" class="mt-3 position-relative">
- <div class="banner-container h-100">
- <img class="w-100 h-100" src="./images/all product/Rectangle 2.png" alt="">
- </div>
-
- <div class="banner-title-container position-absolute top-0 start-0 bottom-0 end-0 d-flex justify-content-center align-items-center h-100">
- <div class="banner-title display-5"> Shampo</div>
-
- </div>
- </section>
-
- <!-- all product nav -->
- <section id="all-product-nav" class="mt-2 py-2 d-none d-lg-block">
- <div class="container">
- <div class="swiper all-product-nav-slider">
- <div class="swiper-wrapper">
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1 active" href="#">Shampoo</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Conditioner</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair oil</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair Tonic</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair Mask</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair Treatment</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair Serum</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Shampoo</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Conditioner</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair oil</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair Tonic</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair Mask</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair Treatment</a>
- </a>
- </div>
- <div class="swiper-slide">
- <a href="#">
- <a class="border-end border-1 border-extralight-gray px-3 py-1" href="#">Hair Serum</a>
- </a>
- </div>
-
- </div>
- </div>
- <!-- <ul class="d-flex flex-nowrap justify-content-center">
- <li></li>
- <li><a class="border-end border-1 border-extralight-gray px-3 py-2 " href="#">Conditioner</a></li>
- <li><a class="border-end border-1 border-extralight-gray px-3 py-2 " href="#">Hair oil</a></li>
- <li><a class="border-end border-1 border-extralight-gray px-3 py-2 " href="#">Hair Tonic</a></li>
- <li><a class="border-end border-1 border-extralight-gray px-3 py-2 " href="#">Hair Mask</a></li>
- <li><a class="border-end border-1 border-extralight-gray px-3 py-2 " href="#">Hair Treatment</a></li>
- <li><a class="border-end border-1 border-extralight-gray px-3 py-2 " href="#">Hair Serum</a></li>
- <li><a class="px-3 py-2" href="#">Dry Shampoo</a></li>
- </ul> -->
- </div>
- </section>
-
- <!-- all products filter and product -->
- <section id="all-products" class="mt-5 position-relative">
- <div class="container">
-
- <!-- short filter count button-->
- <div class="short-filter d-flex justify-content-between align-items-center px-3 pb-3">
-
- <div class="d-none d-lg-block fs-5 text-gray">
- <span >Items :</span>
- <span>135</span>
- </div>
-
- <!-- short -->
- <div class="d-flex align-items-center text-gray">
- <span class="me-3 fs-6 d-none d-lg-block" for="short">SORT BY :</span>
- <span>
- <select class="short-select form-select rounded-0 border-extralight-black text-black-extralight" >
- <option selected>Short By</option>
- <option value="1">Featured Featured</option>
- <option value="2">Featured</option>
- <option value="3">Featured</option>
- </select>
- </span>
- </div>
-
- <!-- filter btn for mobile screen -->
- <button id="filter-button" class=" btn d-block d-lg-none rounded-0 border-1 border-extralight-black text-black-extralight">
- <span>Filter BY</span>
- <span class="ms-3">
- <img src="./images/icon/filter-icon.svg" alt="">
- </span>
- </button>
- </div>
-
- <!-- filter and products -->
- <div class=" d-block d-lg-flex ">
-
- <!-- filter -->
- <div class=" filter bg-white pt-0 p-2 border-end border-3 border-light-white ">
-
- <!-- filter by offer -->
- <div class="filter-by-offer">
- <div class="title border-bottom border-1 border-light-white d-flex justify-content-between align-items-start">
- <h4 class="py-2">Filter by Offer</h4>
- <button class="filter-close-btn btn d-block d-lg-none">
- <img src="./images/icon/cross-icon.svg" alt="">
- </button>
- </div>
-
- <input class="w-100 mt-3 rounded-2 border-0 bg-gray-extralight text-gray fs-5 px-2 py-1" placeholder="search" type="text">
-
- <form action="" class="mt-3">
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="clearance-sale">
- <label class="form-check-label fw-light" for="clearance-sale">
- Clearance Sale
- </label>
- </div>
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="to-taka">
- <label class="form-check-label fw-light" for="to-taka">
- 49 - 199 Tk
- </label>
- </div>
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="k-beauty">
- <label class="form-check-label fw-light" for="k-beauty">
- K. Beauty Sale
- </label>
- </div>
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="kitchen-assositation">
- <label class="form-check-label fw-light" for="kitchen-assositation">
- Kitchen & Home Accessories
- </label>
- </div>
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="lifestyle-bags">
- <label class="form-check-label fw-light" for="lifestyle-bags">
- Lifestyle Bags
- </label>
- </div>
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="lifestyle-shoe">
- <label class="form-check-label fw-light" for="lifestyle-shoe">
- Lifestyle Shoes
- </label>
- </div>
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="lifestyle-jewelry">
- <label class="form-check-label fw-light" for="lifestyle-jewelry">
- Lifestyle Jewelry
- </label>
- </div>
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="heirstyle-accessories">
- <label class="form-check-label fw-light" for="heirstyle-accessories">
- Hair Style Accessories
- </label>
- </div>
- </form>
- </div>
-
- <!--filter product price -->
- <div class="mt-4 filter-product-price">
- <div class="title border-bottom border-1 border-light-white">
- <h4 class="py-2">Filter by price</h4>
- </div>
-
-
- <div class="mt-3">
- <input type="range" min="0" max="50000" class="form-range " >
- </div>
-
- <div class="mt-2 fw-light text-pink">
- <span class="text-dark">Price:</span>
- <span>tk 0</span>
- <span>to</span>
- <span>tk 50000</span>
- </div>
- </div>
-
- <!--filter product categories -->
- <div class="mt-4 filter-product-categories">
- <div class="title border-bottom border-1 border-light-white">
- <h4 class="py-2">Product categories</h4>
- </div>
-
- <ul class="mt-3">
- <li class="mt-2 d-flex justify-content-between text-pink">
- <div class="name fs-5 fw-semibold text-pink ">Shampo</div>
- <div class="amount rounded-pill bg-pink text-white py-1 px-4 small">15</div>
- </li>
- </ul>
- </div>
-
- <!-- filter by offer -->
- <div class="mt-4 filter-by-offer">
- <div class="title border-bottom border-1 border-light-white">
- <h4 class="py-2">Filter by Brand</h4>
- </div>
-
- <input class="w-100 mt-3 rounded-2 border-0 bg-gray-extralight text-gray fs-5 px-2 py-1" placeholder="search" type="text">
-
- <form action="" class="mt-3">
-
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="alberto-balsma">
- <label class="form-check-label fw-light" for="alberto-balsma">
- <span>Alberto Balsam </span>
- <span>(1)</span>
- </label>
- </div>
-
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="alpecin">
- <label class="form-check-label fw-light" for="alpecin">
- <span>Alpecin</span>
- <span>(1)</span>
- </label>
- </div>
-
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="aveeno">
- <label class="form-check-label fw-light" for="aveeno">
- <span>Aveeno</span>
- <span>(1)</span>
- </label>
- </div>
-
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="badedas">
- <label class="form-check-label fw-light" for="badedas">
- <span>Badedas</span>
- <span>(1)</span>
- </label>
- </div>
-
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="biodarma">
- <label class="form-check-label fw-light" for="biodarma">
- <span>Biodarma</span>
- <span>(1)</span>
- </label>
- </div>
-
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="bioladge">
- <label class="form-check-label fw-light" for="bioladge">
- <span>Bioladge</span>
- <span>(1)</span>
- </label>
- </div>
-
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="clear">
- <label class="form-check-label fw-light" for="clear">
- <span>Clear</span>
- <span>(1)</span>
- </label>
- </div>
-
- <div class="form-check mt-2">
- <input class="form-check-input" type="checkbox" value="" id="color-vibe">
- <label class="form-check-label fw-light" for="color-vibe">
- <span>Color Vibe</span>
- <span>(1)</span>
- </label>
- </div>
-
- </form>
- </div>
-
- </div>
- <!-- filter end -->
-
- <!-- products -->
- <div class="products flex-fill pt-0 p-2">
-
- <div class="d-flex justify-content-between flex-wrap ">
-
- <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>
-
- <!-- 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>
-
- <!-- 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="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>
-
- <!-- 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>
-
- <!-- 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="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>
-
- <!-- 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>
-
- <!-- 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="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>
-
- <!-- 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>
-
- <!-- 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="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>
-
- <!-- 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>
-
- <!-- 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="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>
-
- <!-- 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>
-
- <!-- 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>
- <!-- products end-->
- </div>
-
- </div>
- </section>
-
- <!-- checkout sidebar-->
- <section id="checkout" class="pt-2 ">
- <div class="checkout-container position-fixed bg-white pb-5">
-
- <div class="cart-product-container px-3 pt-2 pb-5">
- <!-- 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>
- <!-- cart item -->
- <div class="cart-items mt-3">
- <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
- <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 class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
- <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 class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
- <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 class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
- <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 class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
- <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 class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
- <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 class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
- <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 class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
- <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 class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
- <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>
- </div>
- <!-- 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">
- <button class="btn rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
- PROCEED
- </button>
- </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-lg-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>
- <!-- 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">
- <span>
- <img src="./images/icon/Cart-icon.svg" alt="">
- </span>
- <span class="badge bg-red-deep rounded-circle fw-light text-white ">10</span>
- </div>
- <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>
-
-
-
- <!-- footer -->
- <section id="footer" class=" bg-dark text-white mt-5">
- <div class="container py-5">
- <div class="row footer-border-bottom justify-content-evenly">
- <div class="col-12 col-lg-4">
- <div class="py-2 footer-comp-title h3 text-center">
- BECOME AN INSIDER
- </div>
- <form class="mt-2 text-center" action="">
- <input class="footer-input px-3 py-3 py-md-3 px-md-5 mx-auto text-center" type="text" placeholder="ENTER YOUR EMAIL ADDRESS">
- </form>
- <div class="social mt-5 mb-5">
- <div class="footer-comp-title h3 text-center">
- FOLLOW US ON
- </div>
- <ul class="mt-4 d-flex justify-content-center align-items-center">
- <li>
- <a href="#">
- <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-facebook.svg" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-twitter.svg" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-insta.svg" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-pinterest.svg" alt="">
- </a>
- </li>
- <li>
- <a href="#">
- <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-youtube.svg" alt="">
- </a>
- </li>
- </ul>
- <p class="mt-4 fw-light fs-5 text-center">hr@themallbd.com</p>
- </div>
- </div>
- <div class="col-12 col-lg-6">
- <div class="row justify-content-between">
- <div class="col-6 col-md-5 mb-5">
- <div class="py-2 mb-3 footer-comp-title footer-border-bottom h3 ">HELP</div>
- <ul>
- <li class="mb-2"><a href="#">ORDER</a></li>
- <li class="mb-2"><a href="#">DELIVERY</a></li>
- <li class="mb-2"><a href="#">RETUTRNS</a></li>
- <li class="mb-2"><a href="#">COOKIE POLICY</a></li>
- <li class="mb-2"><a href="#">CUSTOMER SUPPORT</a></li>
- <li class="mb-2"><a href="#">VIP PRIVILEGES</a></li>
- <li class="mb-2"><a href="#">HOW TO BECOME A VIP</a></li>
- <li class="mb-2"><a href="#">THE MALL GLOBAL</a></li>
- </ul>
- </div>
- <div class="col-6 col-md-5 mb-5">
- <div class="py-2 mb-3 footer-comp-title footer-border-bottom h3">OUR COMPANY</div>
- <ul>
- <li class="mb-2"><a href="#">ABOUT US</a></li>
- <li class="mb-2"><a href="#">CONTACT US</a></li>
- <li class="mb-2"><a href="#">PRIVACY POLICY</a></li>
- <li class="mb-2"><a href="#">COOKIE POLICY</a></li>
- <li class="mb-2"><a href="#">PAYMENTS</a></li>
- <li class="mb-2"><a href="#">SITEMAP</a></li>
- <li class="mb-2"><a href="#">TERMS & CONDITIONS</a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div class="copyright mt-4 text-center fw-light">
- © 2022 THE MALL ALL RIGHT RESERVED
- </div>
- </div>
- </section>
- <!-- footer end-->
-
-
- <!-- bootstrap js -->
- <script src="./js/bootstrap.bundle.min.js"></script>
- <!-- swiper slider js -->
- <script src="./js/swiper-bundle.min.js"></script>
- <!-- lightbox js -->
- <script src="./js/simple-lightbox.js"></script>
- <!-- custom js -->
- <script src="./js/app.js"></script>
- </body>
- </html>
|