index.html 476 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156615761586159616061616162616361646165616661676168616961706171617261736174617561766177617861796180618161826183618461856186618761886189619061916192619361946195619661976198619962006201620262036204620562066207620862096210621162126213621462156216621762186219622062216222622362246225622662276228622962306231623262336234623562366237623862396240624162426243624462456246624762486249625062516252625362546255625662576258625962606261626262636264626562666267626862696270627162726273627462756276627762786279628062816282628362846285628662876288628962906291629262936294629562966297629862996300630163026303630463056306630763086309631063116312631363146315631663176318631963206321632263236324632563266327632863296330633163326333633463356336633763386339634063416342634363446345634663476348634963506351635263536354635563566357635863596360636163626363636463656366636763686369637063716372637363746375637663776378637963806381638263836384638563866387638863896390639163926393639463956396639763986399640064016402640364046405640664076408640964106411641264136414641564166417641864196420642164226423642464256426642764286429643064316432643364346435643664376438643964406441644264436444644564466447644864496450645164526453645464556456645764586459646064616462646364646465646664676468646964706471647264736474647564766477647864796480648164826483648464856486648764886489649064916492649364946495649664976498649965006501650265036504650565066507650865096510651165126513651465156516651765186519652065216522652365246525652665276528652965306531653265336534653565366537653865396540654165426543654465456546654765486549655065516552655365546555655665576558655965606561656265636564656565666567656865696570657165726573657465756576657765786579658065816582658365846585658665876588658965906591659265936594659565966597659865996600660166026603660466056606660766086609661066116612661366146615661666176618661966206621662266236624662566266627662866296630663166326633663466356636663766386639664066416642664366446645664666476648664966506651665266536654665566566657665866596660666166626663666466656666666766686669667066716672667366746675667666776678667966806681668266836684668566866687668866896690669166926693669466956696669766986699670067016702670367046705670667076708670967106711671267136714671567166717671867196720672167226723672467256726672767286729673067316732673367346735673667376738673967406741674267436744674567466747674867496750675167526753675467556756675767586759676067616762676367646765676667676768676967706771677267736774677567766777677867796780678167826783678467856786678767886789679067916792679367946795679667976798679968006801680268036804680568066807680868096810681168126813681468156816681768186819682068216822682368246825682668276828682968306831683268336834683568366837683868396840684168426843684468456846684768486849685068516852685368546855685668576858685968606861686268636864686568666867686868696870687168726873687468756876687768786879688068816882688368846885688668876888688968906891689268936894689568966897689868996900690169026903690469056906690769086909691069116912691369146915691669176918691969206921692269236924692569266927692869296930693169326933693469356936693769386939694069416942694369446945694669476948694969506951695269536954695569566957695869596960696169626963696469656966696769686969697069716972697369746975697669776978697969806981698269836984698569866987698869896990699169926993699469956996699769986999700070017002700370047005700670077008700970107011701270137014701570167017701870197020702170227023702470257026702770287029703070317032703370347035703670377038703970407041704270437044704570467047704870497050705170527053705470557056705770587059706070617062706370647065706670677068706970707071707270737074707570767077707870797080708170827083708470857086708770887089709070917092709370947095709670977098709971007101710271037104710571067107710871097110711171127113711471157116711771187119712071217122712371247125712671277128712971307131713271337134713571367137713871397140714171427143714471457146714771487149715071517152715371547155715671577158715971607161716271637164716571667167716871697170717171727173717471757176717771787179718071817182718371847185718671877188718971907191719271937194719571967197719871997200720172027203720472057206720772087209721072117212721372147215721672177218721972207221722272237224722572267227722872297230723172327233723472357236723772387239724072417242724372447245724672477248724972507251725272537254725572567257725872597260726172627263726472657266726772687269727072717272727372747275727672777278727972807281728272837284728572867287728872897290729172927293729472957296729772987299730073017302730373047305730673077308730973107311731273137314731573167317731873197320732173227323732473257326732773287329733073317332733373347335733673377338733973407341734273437344734573467347734873497350735173527353735473557356735773587359736073617362736373647365736673677368736973707371737273737374737573767377737873797380738173827383738473857386738773887389739073917392739373947395739673977398739974007401740274037404740574067407740874097410741174127413741474157416741774187419742074217422742374247425742674277428742974307431743274337434743574367437743874397440744174427443744474457446744774487449745074517452745374547455745674577458745974607461746274637464746574667467746874697470747174727473747474757476747774787479748074817482748374847485748674877488748974907491749274937494749574967497749874997500750175027503750475057506750775087509751075117512751375147515751675177518751975207521752275237524752575267527752875297530753175327533753475357536753775387539754075417542754375447545754675477548754975507551755275537554755575567557755875597560756175627563756475657566756775687569757075717572757375747575757675777578757975807581758275837584758575867587758875897590759175927593759475957596759775987599760076017602760376047605760676077608760976107611761276137614761576167617761876197620762176227623762476257626762776287629763076317632763376347635763676377638763976407641764276437644764576467647764876497650765176527653765476557656765776587659766076617662766376647665766676677668766976707671767276737674767576767677767876797680768176827683768476857686768776887689769076917692769376947695769676977698769977007701770277037704770577067707770877097710771177127713771477157716771777187719772077217722772377247725772677277728772977307731773277337734773577367737773877397740774177427743774477457746774777487749775077517752775377547755775677577758775977607761776277637764776577667767776877697770777177727773777477757776777777787779778077817782778377847785778677877788778977907791779277937794779577967797779877997800780178027803780478057806780778087809781078117812781378147815781678177818781978207821782278237824782578267827782878297830783178327833783478357836783778387839784078417842784378447845784678477848784978507851785278537854785578567857785878597860786178627863786478657866786778687869787078717872
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <!-- fonts -->
  8. <link rel="preconnect" href="https://fonts.googleapis.com">
  9. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
  11. <!-- bootstrap css -->
  12. <link rel="stylesheet" href="./css/bootstrap.min.css">
  13. <!-- swiper slider css -->
  14. <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  15. <!-- lightbox css -->
  16. <link rel="stylesheet" href="./css/simple-lightbox.css">
  17. <!-- custom css -->
  18. <link rel="stylesheet" href="./css/style.css">
  19. <title>Home</title>
  20. </head>
  21. <body>
  22. <!-- nav header -->
  23. <section id="header" class="header">
  24. <!-- offrer -->
  25. <div class="offer bg-pink text-white py-1">
  26. <div class="container">
  27. <p class="text-center px-2 py-1">
  28. free delivery over dhaka over 999 Delivery policy (Inside Dhaka delivery within 24hrs, Outside Dhaka delivery within 72hrs)
  29. </p>
  30. </div>
  31. </div>
  32. <!-- upper nav -->
  33. <div id="uper-nav" class="bg-white">
  34. <div class="container-xl px-2 py-1">
  35. <div class="d-flex justify-content-center justify-content-xl-between align-items-center w-100">
  36. <!-- burger menu logo -->
  37. <button class="burger-menu btn me-auto d-block d-xl-none">
  38. <img class="h-100 w-100" src="./images/icon/burger-menu.svg" alt="">
  39. </button>
  40. <!-- brand logo -->
  41. <a class="brand-logo mx-auto mx-xl-0" href="./index.html">
  42. <img src="./images/navbar/brand-logo.svg" alt="">
  43. </a>
  44. <!-- search box -->
  45. <div class="search flex-fill px-5">
  46. <form action="">
  47. <div class=" form-group position-relative ">
  48. <label for="search-box" class="search-icon position-absolute">
  49. <img src="./images/icon/search.svg" alt="">
  50. </label>
  51. <input type="text" id="search-box" class=" form-control rounded-pill" placeholder="search" >
  52. </div>
  53. </form>
  54. </div>
  55. <!-- link -->
  56. <div class="link-box d-flex align-items-center">
  57. <!-- group -->
  58. <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1" >
  59. <img class="link-icon" src="./images/navbar/group.png" alt="">
  60. <div class="ms-2 fs-4 fw-bold text-nowrap text-black">Group</div>
  61. </a>
  62. <!-- vip points -->
  63. <a href="#" class="link d-none d-xl-flex align-items-center px-1 py-1 text-decoration-none" >
  64. <img class="link-icon" src="./images/navbar/face.png" alt="">
  65. <div>
  66. <h4 class="name fw-bold text-nowrap text-black">Hi Human</h4>
  67. <h5 class="fw-bold text-no-wrap text-black">Vip: 99 points</h5>
  68. </div>
  69. </a>
  70. </div>
  71. <!-- link -->
  72. <div class="link-box d-flex align-items-center ">
  73. <!-- search btn for mobile -->
  74. <button class="btn d-block d-xl-none search-btn-mobile">
  75. <img src="./images/icon/search.svg" alt="">
  76. </button>
  77. <!-- message -->
  78. <a href="#" class="link d-none d-xl-flex align-items-center mx-0 mx-lg-1" >
  79. <img class="link-icon" src="./images/navbar/message.png" alt="">
  80. </a>
  81. <!-- wishlist -->
  82. <a href="#" class="link d-flex align-items-center mx-0 mx-lg-1" >
  83. <img class="link-icon" src="./images/navbar/heart.png" alt="">
  84. </a>
  85. <!-- shoping basket -->
  86. <a href="./checkout.html" class="link d-none d-xl-flex align-items-center mx-0 mx-lg-1" >
  87. <img class="link-icon" src="./images/navbar/bascket.png" alt="">
  88. </a>
  89. <button class="btn user-btn-mobile d-block d-xl-none">
  90. <img src="./images/icon/user.svg" alt="">
  91. </button>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. <!-- main navigation -->
  97. <div class="main-nav bg-black text-white">
  98. <div class="container position-relative">
  99. <button class="btn d-block d-xl-none ms-auto burger-close-btn">
  100. <img src="./images/icon/cross-icon.svg" alt="">
  101. </button>
  102. <ul class=" d-flex flex-column flex-xl-row align-items-start align-items-xl-center justify-content-center ps-1 pe-2 ps-xl-0 pe-xl-0 ">
  103. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  104. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  105. <span>
  106. Makeup
  107. </span>
  108. <span class="drop-btn d-block d-xl-none ms-auto">
  109. <img src="./images/icon/arrow-down-solid.svg" alt="">
  110. </span>
  111. </button>
  112. <div class=" menu-items w-100 px-0 px-xl-4">
  113. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  114. <!-- nav-items -->
  115. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  116. <div class="items mb-1 mb-xl-3">
  117. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  118. <span>
  119. Makeup
  120. </span>
  121. <span class="drop-btn d-block d-xl-none ms-auto">
  122. <img src="./images/icon/arrow-down-solid.svg" alt="">
  123. </span>
  124. </button>
  125. <div class="submenu-items d-none d-xl-block ps-4">
  126. <ul >
  127. <li>
  128. <a href="#">Skincare</a>
  129. </li>
  130. <li>
  131. <a href="#">K beauty</a>
  132. </li>
  133. <li>
  134. <a href="#">Heir</a>
  135. </li>
  136. <li>
  137. <a href="#">Man</a>
  138. </li>
  139. <li>
  140. <a href="#">Baby</a>
  141. </li>
  142. </ul>
  143. </div>
  144. </div>
  145. <div class="items mb-1 mb-xl-3">
  146. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  147. <span>
  148. Makeup
  149. </span>
  150. <span class="drop-btn d-block d-xl-none ms-auto">
  151. <img src="./images/icon/arrow-down-solid.svg" alt="">
  152. </span>
  153. </button>
  154. <div class="submenu-items d-none d-xl-block ps-4">
  155. <ul>
  156. <li>
  157. <a href="#">Skincare</a>
  158. </li>
  159. <li>
  160. <a href="#">K beauty</a>
  161. </li>
  162. <li>
  163. <a href="#">Heir</a>
  164. </li>
  165. <li>
  166. <a href="#">Man</a>
  167. </li>
  168. <li>
  169. <a href="#">Baby</a>
  170. </li>
  171. </ul>
  172. </div>
  173. </div>
  174. <div class="items mb-1 mb-xl-3">
  175. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  176. <span>
  177. Makeup
  178. </span>
  179. <span class="drop-btn d-block d-xl-none ms-auto">
  180. <img src="./images/icon/arrow-down-solid.svg" alt="">
  181. </span>
  182. </button>
  183. <div class="submenu-items d-none d-xl-block ps-4">
  184. <ul>
  185. <li>
  186. <a href="#">Skincare</a>
  187. </li>
  188. <li>
  189. <a href="#">K beauty</a>
  190. </li>
  191. <li>
  192. <a href="#">Heir</a>
  193. </li>
  194. <li>
  195. <a href="#">Man</a>
  196. </li>
  197. <li>
  198. <a href="#">Baby</a>
  199. </li>
  200. </ul>
  201. </div>
  202. </div>
  203. <div class="items mb-1 mb-xl-3">
  204. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  205. <span>
  206. Makeup
  207. </span>
  208. <span class="drop-btn d-block d-xl-none ms-auto">
  209. <img src="./images/icon/arrow-down-solid.svg" alt="">
  210. </span>
  211. </button>
  212. <div class="submenu-items d-none d-xl-block ps-4">
  213. <ul>
  214. <li>
  215. <a href="#">Skincare</a>
  216. </li>
  217. <li>
  218. <a href="#">K beauty</a>
  219. </li>
  220. <li>
  221. <a href="#">Heir</a>
  222. </li>
  223. <li>
  224. <a href="#">Man</a>
  225. </li>
  226. <li>
  227. <a href="#">Baby</a>
  228. </li>
  229. </ul>
  230. </div>
  231. </div>
  232. <div class="items mb-1 mb-xl-3">
  233. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  234. <span>
  235. Makeup
  236. </span>
  237. <span class="drop-btn d-block d-xl-none ms-auto">
  238. <img src="./images/icon/arrow-down-solid.svg" alt="">
  239. </span>
  240. </button>
  241. <div class="submenu-items d-none d-xl-block ps-4">
  242. <ul>
  243. <li>
  244. <a href="#">Skincare</a>
  245. </li>
  246. <li>
  247. <a href="#">K beauty</a>
  248. </li>
  249. <li>
  250. <a href="#">Heir</a>
  251. </li>
  252. <li>
  253. <a href="#">Man</a>
  254. </li>
  255. <li>
  256. <a href="#">Baby</a>
  257. </li>
  258. </ul>
  259. </div>
  260. </div>
  261. <div class="items mb-1 mb-xl-3">
  262. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  263. <span>
  264. Makeup
  265. </span>
  266. <span class="drop-btn d-block d-xl-none ms-auto">
  267. <img src="./images/icon/arrow-down-solid.svg" alt="">
  268. </span>
  269. </button>
  270. <div class="submenu-items d-none d-xl-block ps-4">
  271. <ul>
  272. <li>
  273. <a href="#">Skincare</a>
  274. </li>
  275. <li>
  276. <a href="#">K beauty</a>
  277. </li>
  278. <li>
  279. <a href="#">Heir</a>
  280. </li>
  281. <li>
  282. <a href="#">Man</a>
  283. </li>
  284. <li>
  285. <a href="#">Baby</a>
  286. </li>
  287. </ul>
  288. </div>
  289. </div>
  290. <div class="items mb-1 mb-xl-3">
  291. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  292. <span>
  293. Makeup
  294. </span>
  295. <span class="drop-btn d-block d-xl-none ms-auto">
  296. <img src="./images/icon/arrow-down-solid.svg" alt="">
  297. </span>
  298. </button>
  299. <div class="submenu-items d-none d-xl-block ps-4">
  300. <ul >
  301. <li>
  302. <a href="#">Skincare</a>
  303. </li>
  304. <li>
  305. <a href="#">K beauty</a>
  306. </li>
  307. <li>
  308. <a href="#">Heir</a>
  309. </li>
  310. <li>
  311. <a href="#">Man</a>
  312. </li>
  313. <li>
  314. <a href="#">Baby</a>
  315. </li>
  316. </ul>
  317. </div>
  318. </div>
  319. <div class="items mb-1 mb-xl-3">
  320. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  321. <span>
  322. Makeup
  323. </span>
  324. <span class="drop-btn d-block d-xl-none ms-auto">
  325. <img src="./images/icon/arrow-down-solid.svg" alt="">
  326. </span>
  327. </button>
  328. <div class="submenu-items d-none d-xl-block ps-4">
  329. <ul>
  330. <li>
  331. <a href="#">Skincare</a>
  332. </li>
  333. <li>
  334. <a href="#">K beauty</a>
  335. </li>
  336. <li>
  337. <a href="#">Heir</a>
  338. </li>
  339. <li>
  340. <a href="#">Man</a>
  341. </li>
  342. <li>
  343. <a href="#">Baby</a>
  344. </li>
  345. </ul>
  346. </div>
  347. </div>
  348. <div class="items mb-1 mb-xl-3">
  349. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  350. <span>
  351. Makeup
  352. </span>
  353. <span class="drop-btn d-block d-xl-none ms-auto">
  354. <img src="./images/icon/arrow-down-solid.svg" alt="">
  355. </span>
  356. </button>
  357. <div class="submenu-items d-none d-xl-block ps-4">
  358. <ul>
  359. <li>
  360. <a href="#">Skincare</a>
  361. </li>
  362. <li>
  363. <a href="#">K beauty</a>
  364. </li>
  365. <li>
  366. <a href="#">Heir</a>
  367. </li>
  368. <li>
  369. <a href="#">Man</a>
  370. </li>
  371. <li>
  372. <a href="#">Baby</a>
  373. </li>
  374. </ul>
  375. </div>
  376. </div>
  377. <div class="items mb-1 mb-xl-3">
  378. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  379. <span>
  380. Makeup
  381. </span>
  382. <span class="drop-btn d-block d-xl-none ms-auto">
  383. <img src="./images/icon/arrow-down-solid.svg" alt="">
  384. </span>
  385. </button>
  386. <div class="submenu-items d-none d-xl-block ps-4">
  387. <ul>
  388. <li>
  389. <a href="#">Skincare</a>
  390. </li>
  391. <li>
  392. <a href="#">K beauty</a>
  393. </li>
  394. <li>
  395. <a href="#">Heir</a>
  396. </li>
  397. <li>
  398. <a href="#">Man</a>
  399. </li>
  400. <li>
  401. <a href="#">Baby</a>
  402. </li>
  403. </ul>
  404. </div>
  405. </div>
  406. <div class="items mb-1 mb-xl-3">
  407. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  408. <span>
  409. Makeup
  410. </span>
  411. <span class="drop-btn d-block d-xl-none ms-auto">
  412. <img src="./images/icon/arrow-down-solid.svg" alt="">
  413. </span>
  414. </button>
  415. <div class="submenu-items d-none d-xl-block ps-4">
  416. <ul>
  417. <li>
  418. <a href="#">Skincare</a>
  419. </li>
  420. <li>
  421. <a href="#">K beauty</a>
  422. </li>
  423. <li>
  424. <a href="#">Heir</a>
  425. </li>
  426. <li>
  427. <a href="#">Man</a>
  428. </li>
  429. <li>
  430. <a href="#">Baby</a>
  431. </li>
  432. </ul>
  433. </div>
  434. </div>
  435. <div class="items mb-1 mb-xl-3">
  436. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  437. <span>
  438. Makeup
  439. </span>
  440. <span class="drop-btn d-block d-xl-none ms-auto">
  441. <img src="./images/icon/arrow-down-solid.svg" alt="">
  442. </span>
  443. </button>
  444. <div class="submenu-items d-none d-xl-block ps-4">
  445. <ul>
  446. <li>
  447. <a href="#">Skincare</a>
  448. </li>
  449. <li>
  450. <a href="#">K beauty</a>
  451. </li>
  452. <li>
  453. <a href="#">Heir</a>
  454. </li>
  455. <li>
  456. <a href="#">Man</a>
  457. </li>
  458. <li>
  459. <a href="#">Baby</a>
  460. </li>
  461. </ul>
  462. </div>
  463. </div>
  464. </div>
  465. <!-- offer -->
  466. <div class="offer d-none d-xl-block p-3">
  467. <!-- loyal -->
  468. <div class="card border-0 mb-3">
  469. <div class="mb-3 text-black text-center">Loyal</div>
  470. <a href="#">
  471. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  472. </a>
  473. </div>
  474. <!-- vip -->
  475. <div class="card border-0 mb-3">
  476. <div class="mb-3 text-black text-center">Loyal</div>
  477. <a href="#">
  478. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  479. </a>
  480. </div>
  481. </div>
  482. </div>
  483. </div>
  484. </li>
  485. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  486. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  487. <span>
  488. Skincare
  489. </span>
  490. <span class="drop-btn d-block d-xl-none ms-auto">
  491. <img src="./images/icon/arrow-down-solid.svg" alt="">
  492. </span>
  493. </button>
  494. <div class=" menu-items w-100 px-0 px-xl-4">
  495. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  496. <!-- nav-items -->
  497. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  498. <div class="items mb-1 mb-xl-3">
  499. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  500. <span>
  501. Makeup
  502. </span>
  503. <span class="drop-btn d-block d-xl-none ms-auto">
  504. <img src="./images/icon/arrow-down-solid.svg" alt="">
  505. </span>
  506. </button>
  507. <div class="submenu-items d-none d-xl-block ps-4">
  508. <ul >
  509. <li>
  510. <a href="#">Skincare</a>
  511. </li>
  512. <li>
  513. <a href="#">K beauty</a>
  514. </li>
  515. <li>
  516. <a href="#">Heir</a>
  517. </li>
  518. <li>
  519. <a href="#">Man</a>
  520. </li>
  521. <li>
  522. <a href="#">Baby</a>
  523. </li>
  524. </ul>
  525. </div>
  526. </div>
  527. <div class="items mb-1 mb-xl-3">
  528. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  529. <span>
  530. Makeup
  531. </span>
  532. <span class="drop-btn d-block d-xl-none ms-auto">
  533. <img src="./images/icon/arrow-down-solid.svg" alt="">
  534. </span>
  535. </button>
  536. <div class="submenu-items d-none d-xl-block ps-4">
  537. <ul>
  538. <li>
  539. <a href="#">Skincare</a>
  540. </li>
  541. <li>
  542. <a href="#">K beauty</a>
  543. </li>
  544. <li>
  545. <a href="#">Heir</a>
  546. </li>
  547. <li>
  548. <a href="#">Man</a>
  549. </li>
  550. <li>
  551. <a href="#">Baby</a>
  552. </li>
  553. </ul>
  554. </div>
  555. </div>
  556. <div class="items mb-1 mb-xl-3">
  557. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  558. <span>
  559. Makeup
  560. </span>
  561. <span class="drop-btn d-block d-xl-none ms-auto">
  562. <img src="./images/icon/arrow-down-solid.svg" alt="">
  563. </span>
  564. </button>
  565. <div class="submenu-items d-none d-xl-block ps-4">
  566. <ul>
  567. <li>
  568. <a href="#">Skincare</a>
  569. </li>
  570. <li>
  571. <a href="#">K beauty</a>
  572. </li>
  573. <li>
  574. <a href="#">Heir</a>
  575. </li>
  576. <li>
  577. <a href="#">Man</a>
  578. </li>
  579. <li>
  580. <a href="#">Baby</a>
  581. </li>
  582. </ul>
  583. </div>
  584. </div>
  585. <div class="items mb-1 mb-xl-3">
  586. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  587. <span>
  588. Makeup
  589. </span>
  590. <span class="drop-btn d-block d-xl-none ms-auto">
  591. <img src="./images/icon/arrow-down-solid.svg" alt="">
  592. </span>
  593. </button>
  594. <div class="submenu-items d-none d-xl-block ps-4">
  595. <ul>
  596. <li>
  597. <a href="#">Skincare</a>
  598. </li>
  599. <li>
  600. <a href="#">K beauty</a>
  601. </li>
  602. <li>
  603. <a href="#">Heir</a>
  604. </li>
  605. <li>
  606. <a href="#">Man</a>
  607. </li>
  608. <li>
  609. <a href="#">Baby</a>
  610. </li>
  611. </ul>
  612. </div>
  613. </div>
  614. <div class="items mb-1 mb-xl-3">
  615. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  616. <span>
  617. Makeup
  618. </span>
  619. <span class="drop-btn d-block d-xl-none ms-auto">
  620. <img src="./images/icon/arrow-down-solid.svg" alt="">
  621. </span>
  622. </button>
  623. <div class="submenu-items d-none d-xl-block ps-4">
  624. <ul>
  625. <li>
  626. <a href="#">Skincare</a>
  627. </li>
  628. <li>
  629. <a href="#">K beauty</a>
  630. </li>
  631. <li>
  632. <a href="#">Heir</a>
  633. </li>
  634. <li>
  635. <a href="#">Man</a>
  636. </li>
  637. <li>
  638. <a href="#">Baby</a>
  639. </li>
  640. </ul>
  641. </div>
  642. </div>
  643. <div class="items mb-1 mb-xl-3">
  644. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  645. <span>
  646. Makeup
  647. </span>
  648. <span class="drop-btn d-block d-xl-none ms-auto">
  649. <img src="./images/icon/arrow-down-solid.svg" alt="">
  650. </span>
  651. </button>
  652. <div class="submenu-items d-none d-xl-block ps-4">
  653. <ul>
  654. <li>
  655. <a href="#">Skincare</a>
  656. </li>
  657. <li>
  658. <a href="#">K beauty</a>
  659. </li>
  660. <li>
  661. <a href="#">Heir</a>
  662. </li>
  663. <li>
  664. <a href="#">Man</a>
  665. </li>
  666. <li>
  667. <a href="#">Baby</a>
  668. </li>
  669. </ul>
  670. </div>
  671. </div>
  672. <div class="items mb-1 mb-xl-3">
  673. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  674. <span>
  675. Makeup
  676. </span>
  677. <span class="drop-btn d-block d-xl-none ms-auto">
  678. <img src="./images/icon/arrow-down-solid.svg" alt="">
  679. </span>
  680. </button>
  681. <div class="submenu-items d-none d-xl-block ps-4">
  682. <ul >
  683. <li>
  684. <a href="#">Skincare</a>
  685. </li>
  686. <li>
  687. <a href="#">K beauty</a>
  688. </li>
  689. <li>
  690. <a href="#">Heir</a>
  691. </li>
  692. <li>
  693. <a href="#">Man</a>
  694. </li>
  695. <li>
  696. <a href="#">Baby</a>
  697. </li>
  698. </ul>
  699. </div>
  700. </div>
  701. <div class="items mb-1 mb-xl-3">
  702. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  703. <span>
  704. Makeup
  705. </span>
  706. <span class="drop-btn d-block d-xl-none ms-auto">
  707. <img src="./images/icon/arrow-down-solid.svg" alt="">
  708. </span>
  709. </button>
  710. <div class="submenu-items d-none d-xl-block ps-4">
  711. <ul>
  712. <li>
  713. <a href="#">Skincare</a>
  714. </li>
  715. <li>
  716. <a href="#">K beauty</a>
  717. </li>
  718. <li>
  719. <a href="#">Heir</a>
  720. </li>
  721. <li>
  722. <a href="#">Man</a>
  723. </li>
  724. <li>
  725. <a href="#">Baby</a>
  726. </li>
  727. </ul>
  728. </div>
  729. </div>
  730. <div class="items mb-1 mb-xl-3">
  731. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  732. <span>
  733. Makeup
  734. </span>
  735. <span class="drop-btn d-block d-xl-none ms-auto">
  736. <img src="./images/icon/arrow-down-solid.svg" alt="">
  737. </span>
  738. </button>
  739. <div class="submenu-items d-none d-xl-block ps-4">
  740. <ul>
  741. <li>
  742. <a href="#">Skincare</a>
  743. </li>
  744. <li>
  745. <a href="#">K beauty</a>
  746. </li>
  747. <li>
  748. <a href="#">Heir</a>
  749. </li>
  750. <li>
  751. <a href="#">Man</a>
  752. </li>
  753. <li>
  754. <a href="#">Baby</a>
  755. </li>
  756. </ul>
  757. </div>
  758. </div>
  759. <div class="items mb-1 mb-xl-3">
  760. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  761. <span>
  762. Makeup
  763. </span>
  764. <span class="drop-btn d-block d-xl-none ms-auto">
  765. <img src="./images/icon/arrow-down-solid.svg" alt="">
  766. </span>
  767. </button>
  768. <div class="submenu-items d-none d-xl-block ps-4">
  769. <ul>
  770. <li>
  771. <a href="#">Skincare</a>
  772. </li>
  773. <li>
  774. <a href="#">K beauty</a>
  775. </li>
  776. <li>
  777. <a href="#">Heir</a>
  778. </li>
  779. <li>
  780. <a href="#">Man</a>
  781. </li>
  782. <li>
  783. <a href="#">Baby</a>
  784. </li>
  785. </ul>
  786. </div>
  787. </div>
  788. <div class="items mb-1 mb-xl-3">
  789. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  790. <span>
  791. Makeup
  792. </span>
  793. <span class="drop-btn d-block d-xl-none ms-auto">
  794. <img src="./images/icon/arrow-down-solid.svg" alt="">
  795. </span>
  796. </button>
  797. <div class="submenu-items d-none d-xl-block ps-4">
  798. <ul>
  799. <li>
  800. <a href="#">Skincare</a>
  801. </li>
  802. <li>
  803. <a href="#">K beauty</a>
  804. </li>
  805. <li>
  806. <a href="#">Heir</a>
  807. </li>
  808. <li>
  809. <a href="#">Man</a>
  810. </li>
  811. <li>
  812. <a href="#">Baby</a>
  813. </li>
  814. </ul>
  815. </div>
  816. </div>
  817. <div class="items mb-1 mb-xl-3">
  818. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  819. <span>
  820. Makeup
  821. </span>
  822. <span class="drop-btn d-block d-xl-none ms-auto">
  823. <img src="./images/icon/arrow-down-solid.svg" alt="">
  824. </span>
  825. </button>
  826. <div class="submenu-items d-none d-xl-block ps-4">
  827. <ul>
  828. <li>
  829. <a href="#">Skincare</a>
  830. </li>
  831. <li>
  832. <a href="#">K beauty</a>
  833. </li>
  834. <li>
  835. <a href="#">Heir</a>
  836. </li>
  837. <li>
  838. <a href="#">Man</a>
  839. </li>
  840. <li>
  841. <a href="#">Baby</a>
  842. </li>
  843. </ul>
  844. </div>
  845. </div>
  846. </div>
  847. <!-- offer -->
  848. <div class="offer d-none d-xl-block p-3">
  849. <!-- loyal -->
  850. <div class="card border-0 mb-3">
  851. <div class="mb-3 text-black text-center">Loyal</div>
  852. <a href="#">
  853. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  854. </a>
  855. </div>
  856. <!-- vip -->
  857. <div class="card border-0 mb-3">
  858. <div class="mb-3 text-black text-center">Loyal</div>
  859. <a href="#">
  860. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  861. </a>
  862. </div>
  863. </div>
  864. </div>
  865. </div>
  866. </li>
  867. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  868. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  869. <span>
  870. K beauty
  871. </span>
  872. <span class="drop-btn d-block d-xl-none ms-auto">
  873. <img src="./images/icon/arrow-down-solid.svg" alt="">
  874. </span>
  875. </button>
  876. <div class=" menu-items w-100 px-0 px-xl-4">
  877. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  878. <!-- nav-items -->
  879. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  880. <div class="items mb-1 mb-xl-3">
  881. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  882. <span>
  883. Makeup
  884. </span>
  885. <span class="drop-btn d-block d-xl-none ms-auto">
  886. <img src="./images/icon/arrow-down-solid.svg" alt="">
  887. </span>
  888. </button>
  889. <div class="submenu-items d-none d-xl-block ps-4">
  890. <ul >
  891. <li>
  892. <a href="#">Skincare</a>
  893. </li>
  894. <li>
  895. <a href="#">K beauty</a>
  896. </li>
  897. <li>
  898. <a href="#">Heir</a>
  899. </li>
  900. <li>
  901. <a href="#">Man</a>
  902. </li>
  903. <li>
  904. <a href="#">Baby</a>
  905. </li>
  906. </ul>
  907. </div>
  908. </div>
  909. <div class="items mb-1 mb-xl-3">
  910. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  911. <span>
  912. Makeup
  913. </span>
  914. <span class="drop-btn d-block d-xl-none ms-auto">
  915. <img src="./images/icon/arrow-down-solid.svg" alt="">
  916. </span>
  917. </button>
  918. <div class="submenu-items d-none d-xl-block ps-4">
  919. <ul>
  920. <li>
  921. <a href="#">Skincare</a>
  922. </li>
  923. <li>
  924. <a href="#">K beauty</a>
  925. </li>
  926. <li>
  927. <a href="#">Heir</a>
  928. </li>
  929. <li>
  930. <a href="#">Man</a>
  931. </li>
  932. <li>
  933. <a href="#">Baby</a>
  934. </li>
  935. </ul>
  936. </div>
  937. </div>
  938. <div class="items mb-1 mb-xl-3">
  939. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  940. <span>
  941. Makeup
  942. </span>
  943. <span class="drop-btn d-block d-xl-none ms-auto">
  944. <img src="./images/icon/arrow-down-solid.svg" alt="">
  945. </span>
  946. </button>
  947. <div class="submenu-items d-none d-xl-block ps-4">
  948. <ul>
  949. <li>
  950. <a href="#">Skincare</a>
  951. </li>
  952. <li>
  953. <a href="#">K beauty</a>
  954. </li>
  955. <li>
  956. <a href="#">Heir</a>
  957. </li>
  958. <li>
  959. <a href="#">Man</a>
  960. </li>
  961. <li>
  962. <a href="#">Baby</a>
  963. </li>
  964. </ul>
  965. </div>
  966. </div>
  967. <div class="items mb-1 mb-xl-3">
  968. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  969. <span>
  970. Makeup
  971. </span>
  972. <span class="drop-btn d-block d-xl-none ms-auto">
  973. <img src="./images/icon/arrow-down-solid.svg" alt="">
  974. </span>
  975. </button>
  976. <div class="submenu-items d-none d-xl-block ps-4">
  977. <ul>
  978. <li>
  979. <a href="#">Skincare</a>
  980. </li>
  981. <li>
  982. <a href="#">K beauty</a>
  983. </li>
  984. <li>
  985. <a href="#">Heir</a>
  986. </li>
  987. <li>
  988. <a href="#">Man</a>
  989. </li>
  990. <li>
  991. <a href="#">Baby</a>
  992. </li>
  993. </ul>
  994. </div>
  995. </div>
  996. <div class="items mb-1 mb-xl-3">
  997. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  998. <span>
  999. Makeup
  1000. </span>
  1001. <span class="drop-btn d-block d-xl-none ms-auto">
  1002. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1003. </span>
  1004. </button>
  1005. <div class="submenu-items d-none d-xl-block ps-4">
  1006. <ul>
  1007. <li>
  1008. <a href="#">Skincare</a>
  1009. </li>
  1010. <li>
  1011. <a href="#">K beauty</a>
  1012. </li>
  1013. <li>
  1014. <a href="#">Heir</a>
  1015. </li>
  1016. <li>
  1017. <a href="#">Man</a>
  1018. </li>
  1019. <li>
  1020. <a href="#">Baby</a>
  1021. </li>
  1022. </ul>
  1023. </div>
  1024. </div>
  1025. <div class="items mb-1 mb-xl-3">
  1026. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1027. <span>
  1028. Makeup
  1029. </span>
  1030. <span class="drop-btn d-block d-xl-none ms-auto">
  1031. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1032. </span>
  1033. </button>
  1034. <div class="submenu-items d-none d-xl-block ps-4">
  1035. <ul>
  1036. <li>
  1037. <a href="#">Skincare</a>
  1038. </li>
  1039. <li>
  1040. <a href="#">K beauty</a>
  1041. </li>
  1042. <li>
  1043. <a href="#">Heir</a>
  1044. </li>
  1045. <li>
  1046. <a href="#">Man</a>
  1047. </li>
  1048. <li>
  1049. <a href="#">Baby</a>
  1050. </li>
  1051. </ul>
  1052. </div>
  1053. </div>
  1054. <div class="items mb-1 mb-xl-3">
  1055. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  1056. <span>
  1057. Makeup
  1058. </span>
  1059. <span class="drop-btn d-block d-xl-none ms-auto">
  1060. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1061. </span>
  1062. </button>
  1063. <div class="submenu-items d-none d-xl-block ps-4">
  1064. <ul >
  1065. <li>
  1066. <a href="#">Skincare</a>
  1067. </li>
  1068. <li>
  1069. <a href="#">K beauty</a>
  1070. </li>
  1071. <li>
  1072. <a href="#">Heir</a>
  1073. </li>
  1074. <li>
  1075. <a href="#">Man</a>
  1076. </li>
  1077. <li>
  1078. <a href="#">Baby</a>
  1079. </li>
  1080. </ul>
  1081. </div>
  1082. </div>
  1083. <div class="items mb-1 mb-xl-3">
  1084. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1085. <span>
  1086. Makeup
  1087. </span>
  1088. <span class="drop-btn d-block d-xl-none ms-auto">
  1089. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1090. </span>
  1091. </button>
  1092. <div class="submenu-items d-none d-xl-block ps-4">
  1093. <ul>
  1094. <li>
  1095. <a href="#">Skincare</a>
  1096. </li>
  1097. <li>
  1098. <a href="#">K beauty</a>
  1099. </li>
  1100. <li>
  1101. <a href="#">Heir</a>
  1102. </li>
  1103. <li>
  1104. <a href="#">Man</a>
  1105. </li>
  1106. <li>
  1107. <a href="#">Baby</a>
  1108. </li>
  1109. </ul>
  1110. </div>
  1111. </div>
  1112. <div class="items mb-1 mb-xl-3">
  1113. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1114. <span>
  1115. Makeup
  1116. </span>
  1117. <span class="drop-btn d-block d-xl-none ms-auto">
  1118. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1119. </span>
  1120. </button>
  1121. <div class="submenu-items d-none d-xl-block ps-4">
  1122. <ul>
  1123. <li>
  1124. <a href="#">Skincare</a>
  1125. </li>
  1126. <li>
  1127. <a href="#">K beauty</a>
  1128. </li>
  1129. <li>
  1130. <a href="#">Heir</a>
  1131. </li>
  1132. <li>
  1133. <a href="#">Man</a>
  1134. </li>
  1135. <li>
  1136. <a href="#">Baby</a>
  1137. </li>
  1138. </ul>
  1139. </div>
  1140. </div>
  1141. <div class="items mb-1 mb-xl-3">
  1142. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1143. <span>
  1144. Makeup
  1145. </span>
  1146. <span class="drop-btn d-block d-xl-none ms-auto">
  1147. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1148. </span>
  1149. </button>
  1150. <div class="submenu-items d-none d-xl-block ps-4">
  1151. <ul>
  1152. <li>
  1153. <a href="#">Skincare</a>
  1154. </li>
  1155. <li>
  1156. <a href="#">K beauty</a>
  1157. </li>
  1158. <li>
  1159. <a href="#">Heir</a>
  1160. </li>
  1161. <li>
  1162. <a href="#">Man</a>
  1163. </li>
  1164. <li>
  1165. <a href="#">Baby</a>
  1166. </li>
  1167. </ul>
  1168. </div>
  1169. </div>
  1170. <div class="items mb-1 mb-xl-3">
  1171. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1172. <span>
  1173. Makeup
  1174. </span>
  1175. <span class="drop-btn d-block d-xl-none ms-auto">
  1176. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1177. </span>
  1178. </button>
  1179. <div class="submenu-items d-none d-xl-block ps-4">
  1180. <ul>
  1181. <li>
  1182. <a href="#">Skincare</a>
  1183. </li>
  1184. <li>
  1185. <a href="#">K beauty</a>
  1186. </li>
  1187. <li>
  1188. <a href="#">Heir</a>
  1189. </li>
  1190. <li>
  1191. <a href="#">Man</a>
  1192. </li>
  1193. <li>
  1194. <a href="#">Baby</a>
  1195. </li>
  1196. </ul>
  1197. </div>
  1198. </div>
  1199. <div class="items mb-1 mb-xl-3">
  1200. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1201. <span>
  1202. Makeup
  1203. </span>
  1204. <span class="drop-btn d-block d-xl-none ms-auto">
  1205. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1206. </span>
  1207. </button>
  1208. <div class="submenu-items d-none d-xl-block ps-4">
  1209. <ul>
  1210. <li>
  1211. <a href="#">Skincare</a>
  1212. </li>
  1213. <li>
  1214. <a href="#">K beauty</a>
  1215. </li>
  1216. <li>
  1217. <a href="#">Heir</a>
  1218. </li>
  1219. <li>
  1220. <a href="#">Man</a>
  1221. </li>
  1222. <li>
  1223. <a href="#">Baby</a>
  1224. </li>
  1225. </ul>
  1226. </div>
  1227. </div>
  1228. </div>
  1229. <!-- offer -->
  1230. <div class="offer d-none d-xl-block p-3">
  1231. <!-- loyal -->
  1232. <div class="card border-0 mb-3">
  1233. <div class="mb-3 text-black text-center">Loyal</div>
  1234. <a href="#">
  1235. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  1236. </a>
  1237. </div>
  1238. <!-- vip -->
  1239. <div class="card border-0 mb-3">
  1240. <div class="mb-3 text-black text-center">Loyal</div>
  1241. <a href="#">
  1242. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  1243. </a>
  1244. </div>
  1245. </div>
  1246. </div>
  1247. </div>
  1248. </li>
  1249. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  1250. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1251. <span>
  1252. Heir
  1253. </span>
  1254. <span class="drop-btn d-block d-xl-none ms-auto">
  1255. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1256. </span>
  1257. </button>
  1258. <div class=" menu-items w-100 px-0 px-xl-4">
  1259. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  1260. <!-- nav-items -->
  1261. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  1262. <div class="items mb-1 mb-xl-3">
  1263. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  1264. <span>
  1265. Makeup
  1266. </span>
  1267. <span class="drop-btn d-block d-xl-none ms-auto">
  1268. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1269. </span>
  1270. </button>
  1271. <div class="submenu-items d-none d-xl-block ps-4">
  1272. <ul >
  1273. <li>
  1274. <a href="#">Skincare</a>
  1275. </li>
  1276. <li>
  1277. <a href="#">K beauty</a>
  1278. </li>
  1279. <li>
  1280. <a href="#">Heir</a>
  1281. </li>
  1282. <li>
  1283. <a href="#">Man</a>
  1284. </li>
  1285. <li>
  1286. <a href="#">Baby</a>
  1287. </li>
  1288. </ul>
  1289. </div>
  1290. </div>
  1291. <div class="items mb-1 mb-xl-3">
  1292. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1293. <span>
  1294. Makeup
  1295. </span>
  1296. <span class="drop-btn d-block d-xl-none ms-auto">
  1297. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1298. </span>
  1299. </button>
  1300. <div class="submenu-items d-none d-xl-block ps-4">
  1301. <ul>
  1302. <li>
  1303. <a href="#">Skincare</a>
  1304. </li>
  1305. <li>
  1306. <a href="#">K beauty</a>
  1307. </li>
  1308. <li>
  1309. <a href="#">Heir</a>
  1310. </li>
  1311. <li>
  1312. <a href="#">Man</a>
  1313. </li>
  1314. <li>
  1315. <a href="#">Baby</a>
  1316. </li>
  1317. </ul>
  1318. </div>
  1319. </div>
  1320. <div class="items mb-1 mb-xl-3">
  1321. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1322. <span>
  1323. Makeup
  1324. </span>
  1325. <span class="drop-btn d-block d-xl-none ms-auto">
  1326. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1327. </span>
  1328. </button>
  1329. <div class="submenu-items d-none d-xl-block ps-4">
  1330. <ul>
  1331. <li>
  1332. <a href="#">Skincare</a>
  1333. </li>
  1334. <li>
  1335. <a href="#">K beauty</a>
  1336. </li>
  1337. <li>
  1338. <a href="#">Heir</a>
  1339. </li>
  1340. <li>
  1341. <a href="#">Man</a>
  1342. </li>
  1343. <li>
  1344. <a href="#">Baby</a>
  1345. </li>
  1346. </ul>
  1347. </div>
  1348. </div>
  1349. <div class="items mb-1 mb-xl-3">
  1350. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1351. <span>
  1352. Makeup
  1353. </span>
  1354. <span class="drop-btn d-block d-xl-none ms-auto">
  1355. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1356. </span>
  1357. </button>
  1358. <div class="submenu-items d-none d-xl-block ps-4">
  1359. <ul>
  1360. <li>
  1361. <a href="#">Skincare</a>
  1362. </li>
  1363. <li>
  1364. <a href="#">K beauty</a>
  1365. </li>
  1366. <li>
  1367. <a href="#">Heir</a>
  1368. </li>
  1369. <li>
  1370. <a href="#">Man</a>
  1371. </li>
  1372. <li>
  1373. <a href="#">Baby</a>
  1374. </li>
  1375. </ul>
  1376. </div>
  1377. </div>
  1378. <div class="items mb-1 mb-xl-3">
  1379. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1380. <span>
  1381. Makeup
  1382. </span>
  1383. <span class="drop-btn d-block d-xl-none ms-auto">
  1384. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1385. </span>
  1386. </button>
  1387. <div class="submenu-items d-none d-xl-block ps-4">
  1388. <ul>
  1389. <li>
  1390. <a href="#">Skincare</a>
  1391. </li>
  1392. <li>
  1393. <a href="#">K beauty</a>
  1394. </li>
  1395. <li>
  1396. <a href="#">Heir</a>
  1397. </li>
  1398. <li>
  1399. <a href="#">Man</a>
  1400. </li>
  1401. <li>
  1402. <a href="#">Baby</a>
  1403. </li>
  1404. </ul>
  1405. </div>
  1406. </div>
  1407. <div class="items mb-1 mb-xl-3">
  1408. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1409. <span>
  1410. Makeup
  1411. </span>
  1412. <span class="drop-btn d-block d-xl-none ms-auto">
  1413. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1414. </span>
  1415. </button>
  1416. <div class="submenu-items d-none d-xl-block ps-4">
  1417. <ul>
  1418. <li>
  1419. <a href="#">Skincare</a>
  1420. </li>
  1421. <li>
  1422. <a href="#">K beauty</a>
  1423. </li>
  1424. <li>
  1425. <a href="#">Heir</a>
  1426. </li>
  1427. <li>
  1428. <a href="#">Man</a>
  1429. </li>
  1430. <li>
  1431. <a href="#">Baby</a>
  1432. </li>
  1433. </ul>
  1434. </div>
  1435. </div>
  1436. <div class="items mb-1 mb-xl-3">
  1437. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  1438. <span>
  1439. Makeup
  1440. </span>
  1441. <span class="drop-btn d-block d-xl-none ms-auto">
  1442. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1443. </span>
  1444. </button>
  1445. <div class="submenu-items d-none d-xl-block ps-4">
  1446. <ul >
  1447. <li>
  1448. <a href="#">Skincare</a>
  1449. </li>
  1450. <li>
  1451. <a href="#">K beauty</a>
  1452. </li>
  1453. <li>
  1454. <a href="#">Heir</a>
  1455. </li>
  1456. <li>
  1457. <a href="#">Man</a>
  1458. </li>
  1459. <li>
  1460. <a href="#">Baby</a>
  1461. </li>
  1462. </ul>
  1463. </div>
  1464. </div>
  1465. <div class="items mb-1 mb-xl-3">
  1466. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1467. <span>
  1468. Makeup
  1469. </span>
  1470. <span class="drop-btn d-block d-xl-none ms-auto">
  1471. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1472. </span>
  1473. </button>
  1474. <div class="submenu-items d-none d-xl-block ps-4">
  1475. <ul>
  1476. <li>
  1477. <a href="#">Skincare</a>
  1478. </li>
  1479. <li>
  1480. <a href="#">K beauty</a>
  1481. </li>
  1482. <li>
  1483. <a href="#">Heir</a>
  1484. </li>
  1485. <li>
  1486. <a href="#">Man</a>
  1487. </li>
  1488. <li>
  1489. <a href="#">Baby</a>
  1490. </li>
  1491. </ul>
  1492. </div>
  1493. </div>
  1494. <div class="items mb-1 mb-xl-3">
  1495. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1496. <span>
  1497. Makeup
  1498. </span>
  1499. <span class="drop-btn d-block d-xl-none ms-auto">
  1500. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1501. </span>
  1502. </button>
  1503. <div class="submenu-items d-none d-xl-block ps-4">
  1504. <ul>
  1505. <li>
  1506. <a href="#">Skincare</a>
  1507. </li>
  1508. <li>
  1509. <a href="#">K beauty</a>
  1510. </li>
  1511. <li>
  1512. <a href="#">Heir</a>
  1513. </li>
  1514. <li>
  1515. <a href="#">Man</a>
  1516. </li>
  1517. <li>
  1518. <a href="#">Baby</a>
  1519. </li>
  1520. </ul>
  1521. </div>
  1522. </div>
  1523. <div class="items mb-1 mb-xl-3">
  1524. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1525. <span>
  1526. Makeup
  1527. </span>
  1528. <span class="drop-btn d-block d-xl-none ms-auto">
  1529. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1530. </span>
  1531. </button>
  1532. <div class="submenu-items d-none d-xl-block ps-4">
  1533. <ul>
  1534. <li>
  1535. <a href="#">Skincare</a>
  1536. </li>
  1537. <li>
  1538. <a href="#">K beauty</a>
  1539. </li>
  1540. <li>
  1541. <a href="#">Heir</a>
  1542. </li>
  1543. <li>
  1544. <a href="#">Man</a>
  1545. </li>
  1546. <li>
  1547. <a href="#">Baby</a>
  1548. </li>
  1549. </ul>
  1550. </div>
  1551. </div>
  1552. <div class="items mb-1 mb-xl-3">
  1553. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1554. <span>
  1555. Makeup
  1556. </span>
  1557. <span class="drop-btn d-block d-xl-none ms-auto">
  1558. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1559. </span>
  1560. </button>
  1561. <div class="submenu-items d-none d-xl-block ps-4">
  1562. <ul>
  1563. <li>
  1564. <a href="#">Skincare</a>
  1565. </li>
  1566. <li>
  1567. <a href="#">K beauty</a>
  1568. </li>
  1569. <li>
  1570. <a href="#">Heir</a>
  1571. </li>
  1572. <li>
  1573. <a href="#">Man</a>
  1574. </li>
  1575. <li>
  1576. <a href="#">Baby</a>
  1577. </li>
  1578. </ul>
  1579. </div>
  1580. </div>
  1581. <div class="items mb-1 mb-xl-3">
  1582. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1583. <span>
  1584. Makeup
  1585. </span>
  1586. <span class="drop-btn d-block d-xl-none ms-auto">
  1587. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1588. </span>
  1589. </button>
  1590. <div class="submenu-items d-none d-xl-block ps-4">
  1591. <ul>
  1592. <li>
  1593. <a href="#">Skincare</a>
  1594. </li>
  1595. <li>
  1596. <a href="#">K beauty</a>
  1597. </li>
  1598. <li>
  1599. <a href="#">Heir</a>
  1600. </li>
  1601. <li>
  1602. <a href="#">Man</a>
  1603. </li>
  1604. <li>
  1605. <a href="#">Baby</a>
  1606. </li>
  1607. </ul>
  1608. </div>
  1609. </div>
  1610. </div>
  1611. <!-- offer -->
  1612. <div class="offer d-none d-xl-block p-3">
  1613. <!-- loyal -->
  1614. <div class="card border-0 mb-3">
  1615. <div class="mb-3 text-black text-center">Loyal</div>
  1616. <a href="#">
  1617. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  1618. </a>
  1619. </div>
  1620. <!-- vip -->
  1621. <div class="card border-0 mb-3">
  1622. <div class="mb-3 text-black text-center">Loyal</div>
  1623. <a href="#">
  1624. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  1625. </a>
  1626. </div>
  1627. </div>
  1628. </div>
  1629. </div>
  1630. </li>
  1631. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  1632. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1633. <span>
  1634. Man
  1635. </span>
  1636. <span class="drop-btn d-block d-xl-none ms-auto">
  1637. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1638. </span>
  1639. </button>
  1640. <div class=" menu-items w-100 px-0 px-xl-4">
  1641. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  1642. <!-- nav-items -->
  1643. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  1644. <div class="items mb-1 mb-xl-3">
  1645. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  1646. <span>
  1647. Makeup
  1648. </span>
  1649. <span class="drop-btn d-block d-xl-none ms-auto">
  1650. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1651. </span>
  1652. </button>
  1653. <div class="submenu-items d-none d-xl-block ps-4">
  1654. <ul >
  1655. <li>
  1656. <a href="#">Skincare</a>
  1657. </li>
  1658. <li>
  1659. <a href="#">K beauty</a>
  1660. </li>
  1661. <li>
  1662. <a href="#">Heir</a>
  1663. </li>
  1664. <li>
  1665. <a href="#">Man</a>
  1666. </li>
  1667. <li>
  1668. <a href="#">Baby</a>
  1669. </li>
  1670. </ul>
  1671. </div>
  1672. </div>
  1673. <div class="items mb-1 mb-xl-3">
  1674. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1675. <span>
  1676. Makeup
  1677. </span>
  1678. <span class="drop-btn d-block d-xl-none ms-auto">
  1679. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1680. </span>
  1681. </button>
  1682. <div class="submenu-items d-none d-xl-block ps-4">
  1683. <ul>
  1684. <li>
  1685. <a href="#">Skincare</a>
  1686. </li>
  1687. <li>
  1688. <a href="#">K beauty</a>
  1689. </li>
  1690. <li>
  1691. <a href="#">Heir</a>
  1692. </li>
  1693. <li>
  1694. <a href="#">Man</a>
  1695. </li>
  1696. <li>
  1697. <a href="#">Baby</a>
  1698. </li>
  1699. </ul>
  1700. </div>
  1701. </div>
  1702. <div class="items mb-1 mb-xl-3">
  1703. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1704. <span>
  1705. Makeup
  1706. </span>
  1707. <span class="drop-btn d-block d-xl-none ms-auto">
  1708. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1709. </span>
  1710. </button>
  1711. <div class="submenu-items d-none d-xl-block ps-4">
  1712. <ul>
  1713. <li>
  1714. <a href="#">Skincare</a>
  1715. </li>
  1716. <li>
  1717. <a href="#">K beauty</a>
  1718. </li>
  1719. <li>
  1720. <a href="#">Heir</a>
  1721. </li>
  1722. <li>
  1723. <a href="#">Man</a>
  1724. </li>
  1725. <li>
  1726. <a href="#">Baby</a>
  1727. </li>
  1728. </ul>
  1729. </div>
  1730. </div>
  1731. <div class="items mb-1 mb-xl-3">
  1732. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1733. <span>
  1734. Makeup
  1735. </span>
  1736. <span class="drop-btn d-block d-xl-none ms-auto">
  1737. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1738. </span>
  1739. </button>
  1740. <div class="submenu-items d-none d-xl-block ps-4">
  1741. <ul>
  1742. <li>
  1743. <a href="#">Skincare</a>
  1744. </li>
  1745. <li>
  1746. <a href="#">K beauty</a>
  1747. </li>
  1748. <li>
  1749. <a href="#">Heir</a>
  1750. </li>
  1751. <li>
  1752. <a href="#">Man</a>
  1753. </li>
  1754. <li>
  1755. <a href="#">Baby</a>
  1756. </li>
  1757. </ul>
  1758. </div>
  1759. </div>
  1760. <div class="items mb-1 mb-xl-3">
  1761. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1762. <span>
  1763. Makeup
  1764. </span>
  1765. <span class="drop-btn d-block d-xl-none ms-auto">
  1766. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1767. </span>
  1768. </button>
  1769. <div class="submenu-items d-none d-xl-block ps-4">
  1770. <ul>
  1771. <li>
  1772. <a href="#">Skincare</a>
  1773. </li>
  1774. <li>
  1775. <a href="#">K beauty</a>
  1776. </li>
  1777. <li>
  1778. <a href="#">Heir</a>
  1779. </li>
  1780. <li>
  1781. <a href="#">Man</a>
  1782. </li>
  1783. <li>
  1784. <a href="#">Baby</a>
  1785. </li>
  1786. </ul>
  1787. </div>
  1788. </div>
  1789. <div class="items mb-1 mb-xl-3">
  1790. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1791. <span>
  1792. Makeup
  1793. </span>
  1794. <span class="drop-btn d-block d-xl-none ms-auto">
  1795. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1796. </span>
  1797. </button>
  1798. <div class="submenu-items d-none d-xl-block ps-4">
  1799. <ul>
  1800. <li>
  1801. <a href="#">Skincare</a>
  1802. </li>
  1803. <li>
  1804. <a href="#">K beauty</a>
  1805. </li>
  1806. <li>
  1807. <a href="#">Heir</a>
  1808. </li>
  1809. <li>
  1810. <a href="#">Man</a>
  1811. </li>
  1812. <li>
  1813. <a href="#">Baby</a>
  1814. </li>
  1815. </ul>
  1816. </div>
  1817. </div>
  1818. <div class="items mb-1 mb-xl-3">
  1819. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  1820. <span>
  1821. Makeup
  1822. </span>
  1823. <span class="drop-btn d-block d-xl-none ms-auto">
  1824. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1825. </span>
  1826. </button>
  1827. <div class="submenu-items d-none d-xl-block ps-4">
  1828. <ul >
  1829. <li>
  1830. <a href="#">Skincare</a>
  1831. </li>
  1832. <li>
  1833. <a href="#">K beauty</a>
  1834. </li>
  1835. <li>
  1836. <a href="#">Heir</a>
  1837. </li>
  1838. <li>
  1839. <a href="#">Man</a>
  1840. </li>
  1841. <li>
  1842. <a href="#">Baby</a>
  1843. </li>
  1844. </ul>
  1845. </div>
  1846. </div>
  1847. <div class="items mb-1 mb-xl-3">
  1848. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1849. <span>
  1850. Makeup
  1851. </span>
  1852. <span class="drop-btn d-block d-xl-none ms-auto">
  1853. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1854. </span>
  1855. </button>
  1856. <div class="submenu-items d-none d-xl-block ps-4">
  1857. <ul>
  1858. <li>
  1859. <a href="#">Skincare</a>
  1860. </li>
  1861. <li>
  1862. <a href="#">K beauty</a>
  1863. </li>
  1864. <li>
  1865. <a href="#">Heir</a>
  1866. </li>
  1867. <li>
  1868. <a href="#">Man</a>
  1869. </li>
  1870. <li>
  1871. <a href="#">Baby</a>
  1872. </li>
  1873. </ul>
  1874. </div>
  1875. </div>
  1876. <div class="items mb-1 mb-xl-3">
  1877. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1878. <span>
  1879. Makeup
  1880. </span>
  1881. <span class="drop-btn d-block d-xl-none ms-auto">
  1882. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1883. </span>
  1884. </button>
  1885. <div class="submenu-items d-none d-xl-block ps-4">
  1886. <ul>
  1887. <li>
  1888. <a href="#">Skincare</a>
  1889. </li>
  1890. <li>
  1891. <a href="#">K beauty</a>
  1892. </li>
  1893. <li>
  1894. <a href="#">Heir</a>
  1895. </li>
  1896. <li>
  1897. <a href="#">Man</a>
  1898. </li>
  1899. <li>
  1900. <a href="#">Baby</a>
  1901. </li>
  1902. </ul>
  1903. </div>
  1904. </div>
  1905. <div class="items mb-1 mb-xl-3">
  1906. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1907. <span>
  1908. Makeup
  1909. </span>
  1910. <span class="drop-btn d-block d-xl-none ms-auto">
  1911. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1912. </span>
  1913. </button>
  1914. <div class="submenu-items d-none d-xl-block ps-4">
  1915. <ul>
  1916. <li>
  1917. <a href="#">Skincare</a>
  1918. </li>
  1919. <li>
  1920. <a href="#">K beauty</a>
  1921. </li>
  1922. <li>
  1923. <a href="#">Heir</a>
  1924. </li>
  1925. <li>
  1926. <a href="#">Man</a>
  1927. </li>
  1928. <li>
  1929. <a href="#">Baby</a>
  1930. </li>
  1931. </ul>
  1932. </div>
  1933. </div>
  1934. <div class="items mb-1 mb-xl-3">
  1935. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1936. <span>
  1937. Makeup
  1938. </span>
  1939. <span class="drop-btn d-block d-xl-none ms-auto">
  1940. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1941. </span>
  1942. </button>
  1943. <div class="submenu-items d-none d-xl-block ps-4">
  1944. <ul>
  1945. <li>
  1946. <a href="#">Skincare</a>
  1947. </li>
  1948. <li>
  1949. <a href="#">K beauty</a>
  1950. </li>
  1951. <li>
  1952. <a href="#">Heir</a>
  1953. </li>
  1954. <li>
  1955. <a href="#">Man</a>
  1956. </li>
  1957. <li>
  1958. <a href="#">Baby</a>
  1959. </li>
  1960. </ul>
  1961. </div>
  1962. </div>
  1963. <div class="items mb-1 mb-xl-3">
  1964. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  1965. <span>
  1966. Makeup
  1967. </span>
  1968. <span class="drop-btn d-block d-xl-none ms-auto">
  1969. <img src="./images/icon/arrow-down-solid.svg" alt="">
  1970. </span>
  1971. </button>
  1972. <div class="submenu-items d-none d-xl-block ps-4">
  1973. <ul>
  1974. <li>
  1975. <a href="#">Skincare</a>
  1976. </li>
  1977. <li>
  1978. <a href="#">K beauty</a>
  1979. </li>
  1980. <li>
  1981. <a href="#">Heir</a>
  1982. </li>
  1983. <li>
  1984. <a href="#">Man</a>
  1985. </li>
  1986. <li>
  1987. <a href="#">Baby</a>
  1988. </li>
  1989. </ul>
  1990. </div>
  1991. </div>
  1992. </div>
  1993. <!-- offer -->
  1994. <div class="offer d-none d-xl-block p-3">
  1995. <!-- loyal -->
  1996. <div class="card border-0 mb-3">
  1997. <div class="mb-3 text-black text-center">Loyal</div>
  1998. <a href="#">
  1999. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  2000. </a>
  2001. </div>
  2002. <!-- vip -->
  2003. <div class="card border-0 mb-3">
  2004. <div class="mb-3 text-black text-center">Loyal</div>
  2005. <a href="#">
  2006. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  2007. </a>
  2008. </div>
  2009. </div>
  2010. </div>
  2011. </div>
  2012. </li>
  2013. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  2014. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2015. <span>
  2016. Baby
  2017. </span>
  2018. <span class="drop-btn d-block d-xl-none ms-auto">
  2019. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2020. </span>
  2021. </button>
  2022. <div class=" menu-items w-100 px-0 px-xl-4">
  2023. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  2024. <!-- nav-items -->
  2025. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  2026. <div class="items mb-1 mb-xl-3">
  2027. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  2028. <span>
  2029. Makeup
  2030. </span>
  2031. <span class="drop-btn d-block d-xl-none ms-auto">
  2032. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2033. </span>
  2034. </button>
  2035. <div class="submenu-items d-none d-xl-block ps-4">
  2036. <ul >
  2037. <li>
  2038. <a href="#">Skincare</a>
  2039. </li>
  2040. <li>
  2041. <a href="#">K beauty</a>
  2042. </li>
  2043. <li>
  2044. <a href="#">Heir</a>
  2045. </li>
  2046. <li>
  2047. <a href="#">Man</a>
  2048. </li>
  2049. <li>
  2050. <a href="#">Baby</a>
  2051. </li>
  2052. </ul>
  2053. </div>
  2054. </div>
  2055. <div class="items mb-1 mb-xl-3">
  2056. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2057. <span>
  2058. Makeup
  2059. </span>
  2060. <span class="drop-btn d-block d-xl-none ms-auto">
  2061. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2062. </span>
  2063. </button>
  2064. <div class="submenu-items d-none d-xl-block ps-4">
  2065. <ul>
  2066. <li>
  2067. <a href="#">Skincare</a>
  2068. </li>
  2069. <li>
  2070. <a href="#">K beauty</a>
  2071. </li>
  2072. <li>
  2073. <a href="#">Heir</a>
  2074. </li>
  2075. <li>
  2076. <a href="#">Man</a>
  2077. </li>
  2078. <li>
  2079. <a href="#">Baby</a>
  2080. </li>
  2081. </ul>
  2082. </div>
  2083. </div>
  2084. <div class="items mb-1 mb-xl-3">
  2085. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2086. <span>
  2087. Makeup
  2088. </span>
  2089. <span class="drop-btn d-block d-xl-none ms-auto">
  2090. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2091. </span>
  2092. </button>
  2093. <div class="submenu-items d-none d-xl-block ps-4">
  2094. <ul>
  2095. <li>
  2096. <a href="#">Skincare</a>
  2097. </li>
  2098. <li>
  2099. <a href="#">K beauty</a>
  2100. </li>
  2101. <li>
  2102. <a href="#">Heir</a>
  2103. </li>
  2104. <li>
  2105. <a href="#">Man</a>
  2106. </li>
  2107. <li>
  2108. <a href="#">Baby</a>
  2109. </li>
  2110. </ul>
  2111. </div>
  2112. </div>
  2113. <div class="items mb-1 mb-xl-3">
  2114. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2115. <span>
  2116. Makeup
  2117. </span>
  2118. <span class="drop-btn d-block d-xl-none ms-auto">
  2119. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2120. </span>
  2121. </button>
  2122. <div class="submenu-items d-none d-xl-block ps-4">
  2123. <ul>
  2124. <li>
  2125. <a href="#">Skincare</a>
  2126. </li>
  2127. <li>
  2128. <a href="#">K beauty</a>
  2129. </li>
  2130. <li>
  2131. <a href="#">Heir</a>
  2132. </li>
  2133. <li>
  2134. <a href="#">Man</a>
  2135. </li>
  2136. <li>
  2137. <a href="#">Baby</a>
  2138. </li>
  2139. </ul>
  2140. </div>
  2141. </div>
  2142. <div class="items mb-1 mb-xl-3">
  2143. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2144. <span>
  2145. Makeup
  2146. </span>
  2147. <span class="drop-btn d-block d-xl-none ms-auto">
  2148. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2149. </span>
  2150. </button>
  2151. <div class="submenu-items d-none d-xl-block ps-4">
  2152. <ul>
  2153. <li>
  2154. <a href="#">Skincare</a>
  2155. </li>
  2156. <li>
  2157. <a href="#">K beauty</a>
  2158. </li>
  2159. <li>
  2160. <a href="#">Heir</a>
  2161. </li>
  2162. <li>
  2163. <a href="#">Man</a>
  2164. </li>
  2165. <li>
  2166. <a href="#">Baby</a>
  2167. </li>
  2168. </ul>
  2169. </div>
  2170. </div>
  2171. <div class="items mb-1 mb-xl-3">
  2172. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2173. <span>
  2174. Makeup
  2175. </span>
  2176. <span class="drop-btn d-block d-xl-none ms-auto">
  2177. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2178. </span>
  2179. </button>
  2180. <div class="submenu-items d-none d-xl-block ps-4">
  2181. <ul>
  2182. <li>
  2183. <a href="#">Skincare</a>
  2184. </li>
  2185. <li>
  2186. <a href="#">K beauty</a>
  2187. </li>
  2188. <li>
  2189. <a href="#">Heir</a>
  2190. </li>
  2191. <li>
  2192. <a href="#">Man</a>
  2193. </li>
  2194. <li>
  2195. <a href="#">Baby</a>
  2196. </li>
  2197. </ul>
  2198. </div>
  2199. </div>
  2200. <div class="items mb-1 mb-xl-3">
  2201. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  2202. <span>
  2203. Makeup
  2204. </span>
  2205. <span class="drop-btn d-block d-xl-none ms-auto">
  2206. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2207. </span>
  2208. </button>
  2209. <div class="submenu-items d-none d-xl-block ps-4">
  2210. <ul >
  2211. <li>
  2212. <a href="#">Skincare</a>
  2213. </li>
  2214. <li>
  2215. <a href="#">K beauty</a>
  2216. </li>
  2217. <li>
  2218. <a href="#">Heir</a>
  2219. </li>
  2220. <li>
  2221. <a href="#">Man</a>
  2222. </li>
  2223. <li>
  2224. <a href="#">Baby</a>
  2225. </li>
  2226. </ul>
  2227. </div>
  2228. </div>
  2229. <div class="items mb-1 mb-xl-3">
  2230. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2231. <span>
  2232. Makeup
  2233. </span>
  2234. <span class="drop-btn d-block d-xl-none ms-auto">
  2235. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2236. </span>
  2237. </button>
  2238. <div class="submenu-items d-none d-xl-block ps-4">
  2239. <ul>
  2240. <li>
  2241. <a href="#">Skincare</a>
  2242. </li>
  2243. <li>
  2244. <a href="#">K beauty</a>
  2245. </li>
  2246. <li>
  2247. <a href="#">Heir</a>
  2248. </li>
  2249. <li>
  2250. <a href="#">Man</a>
  2251. </li>
  2252. <li>
  2253. <a href="#">Baby</a>
  2254. </li>
  2255. </ul>
  2256. </div>
  2257. </div>
  2258. <div class="items mb-1 mb-xl-3">
  2259. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2260. <span>
  2261. Makeup
  2262. </span>
  2263. <span class="drop-btn d-block d-xl-none ms-auto">
  2264. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2265. </span>
  2266. </button>
  2267. <div class="submenu-items d-none d-xl-block ps-4">
  2268. <ul>
  2269. <li>
  2270. <a href="#">Skincare</a>
  2271. </li>
  2272. <li>
  2273. <a href="#">K beauty</a>
  2274. </li>
  2275. <li>
  2276. <a href="#">Heir</a>
  2277. </li>
  2278. <li>
  2279. <a href="#">Man</a>
  2280. </li>
  2281. <li>
  2282. <a href="#">Baby</a>
  2283. </li>
  2284. </ul>
  2285. </div>
  2286. </div>
  2287. <div class="items mb-1 mb-xl-3">
  2288. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2289. <span>
  2290. Makeup
  2291. </span>
  2292. <span class="drop-btn d-block d-xl-none ms-auto">
  2293. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2294. </span>
  2295. </button>
  2296. <div class="submenu-items d-none d-xl-block ps-4">
  2297. <ul>
  2298. <li>
  2299. <a href="#">Skincare</a>
  2300. </li>
  2301. <li>
  2302. <a href="#">K beauty</a>
  2303. </li>
  2304. <li>
  2305. <a href="#">Heir</a>
  2306. </li>
  2307. <li>
  2308. <a href="#">Man</a>
  2309. </li>
  2310. <li>
  2311. <a href="#">Baby</a>
  2312. </li>
  2313. </ul>
  2314. </div>
  2315. </div>
  2316. <div class="items mb-1 mb-xl-3">
  2317. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2318. <span>
  2319. Makeup
  2320. </span>
  2321. <span class="drop-btn d-block d-xl-none ms-auto">
  2322. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2323. </span>
  2324. </button>
  2325. <div class="submenu-items d-none d-xl-block ps-4">
  2326. <ul>
  2327. <li>
  2328. <a href="#">Skincare</a>
  2329. </li>
  2330. <li>
  2331. <a href="#">K beauty</a>
  2332. </li>
  2333. <li>
  2334. <a href="#">Heir</a>
  2335. </li>
  2336. <li>
  2337. <a href="#">Man</a>
  2338. </li>
  2339. <li>
  2340. <a href="#">Baby</a>
  2341. </li>
  2342. </ul>
  2343. </div>
  2344. </div>
  2345. <div class="items mb-1 mb-xl-3">
  2346. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2347. <span>
  2348. Makeup
  2349. </span>
  2350. <span class="drop-btn d-block d-xl-none ms-auto">
  2351. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2352. </span>
  2353. </button>
  2354. <div class="submenu-items d-none d-xl-block ps-4">
  2355. <ul>
  2356. <li>
  2357. <a href="#">Skincare</a>
  2358. </li>
  2359. <li>
  2360. <a href="#">K beauty</a>
  2361. </li>
  2362. <li>
  2363. <a href="#">Heir</a>
  2364. </li>
  2365. <li>
  2366. <a href="#">Man</a>
  2367. </li>
  2368. <li>
  2369. <a href="#">Baby</a>
  2370. </li>
  2371. </ul>
  2372. </div>
  2373. </div>
  2374. </div>
  2375. <!-- offer -->
  2376. <div class="offer d-none d-xl-block p-3">
  2377. <!-- loyal -->
  2378. <div class="card border-0 mb-3">
  2379. <div class="mb-3 text-black text-center">Loyal</div>
  2380. <a href="#">
  2381. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  2382. </a>
  2383. </div>
  2384. <!-- vip -->
  2385. <div class="card border-0 mb-3">
  2386. <div class="mb-3 text-black text-center">Loyal</div>
  2387. <a href="#">
  2388. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  2389. </a>
  2390. </div>
  2391. </div>
  2392. </div>
  2393. </div>
  2394. </li>
  2395. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  2396. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2397. <span>
  2398. Fragnace
  2399. </span>
  2400. <span class="drop-btn d-block d-xl-none ms-auto">
  2401. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2402. </span>
  2403. </button>
  2404. <div class=" menu-items w-100 px-0 px-xl-4">
  2405. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  2406. <!-- nav-items -->
  2407. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  2408. <div class="items mb-1 mb-xl-3">
  2409. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  2410. <span>
  2411. Makeup
  2412. </span>
  2413. <span class="drop-btn d-block d-xl-none ms-auto">
  2414. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2415. </span>
  2416. </button>
  2417. <div class="submenu-items d-none d-xl-block ps-4">
  2418. <ul >
  2419. <li>
  2420. <a href="#">Skincare</a>
  2421. </li>
  2422. <li>
  2423. <a href="#">K beauty</a>
  2424. </li>
  2425. <li>
  2426. <a href="#">Heir</a>
  2427. </li>
  2428. <li>
  2429. <a href="#">Man</a>
  2430. </li>
  2431. <li>
  2432. <a href="#">Baby</a>
  2433. </li>
  2434. </ul>
  2435. </div>
  2436. </div>
  2437. <div class="items mb-1 mb-xl-3">
  2438. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2439. <span>
  2440. Makeup
  2441. </span>
  2442. <span class="drop-btn d-block d-xl-none ms-auto">
  2443. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2444. </span>
  2445. </button>
  2446. <div class="submenu-items d-none d-xl-block ps-4">
  2447. <ul>
  2448. <li>
  2449. <a href="#">Skincare</a>
  2450. </li>
  2451. <li>
  2452. <a href="#">K beauty</a>
  2453. </li>
  2454. <li>
  2455. <a href="#">Heir</a>
  2456. </li>
  2457. <li>
  2458. <a href="#">Man</a>
  2459. </li>
  2460. <li>
  2461. <a href="#">Baby</a>
  2462. </li>
  2463. </ul>
  2464. </div>
  2465. </div>
  2466. <div class="items mb-1 mb-xl-3">
  2467. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2468. <span>
  2469. Makeup
  2470. </span>
  2471. <span class="drop-btn d-block d-xl-none ms-auto">
  2472. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2473. </span>
  2474. </button>
  2475. <div class="submenu-items d-none d-xl-block ps-4">
  2476. <ul>
  2477. <li>
  2478. <a href="#">Skincare</a>
  2479. </li>
  2480. <li>
  2481. <a href="#">K beauty</a>
  2482. </li>
  2483. <li>
  2484. <a href="#">Heir</a>
  2485. </li>
  2486. <li>
  2487. <a href="#">Man</a>
  2488. </li>
  2489. <li>
  2490. <a href="#">Baby</a>
  2491. </li>
  2492. </ul>
  2493. </div>
  2494. </div>
  2495. <div class="items mb-1 mb-xl-3">
  2496. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2497. <span>
  2498. Makeup
  2499. </span>
  2500. <span class="drop-btn d-block d-xl-none ms-auto">
  2501. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2502. </span>
  2503. </button>
  2504. <div class="submenu-items d-none d-xl-block ps-4">
  2505. <ul>
  2506. <li>
  2507. <a href="#">Skincare</a>
  2508. </li>
  2509. <li>
  2510. <a href="#">K beauty</a>
  2511. </li>
  2512. <li>
  2513. <a href="#">Heir</a>
  2514. </li>
  2515. <li>
  2516. <a href="#">Man</a>
  2517. </li>
  2518. <li>
  2519. <a href="#">Baby</a>
  2520. </li>
  2521. </ul>
  2522. </div>
  2523. </div>
  2524. <div class="items mb-1 mb-xl-3">
  2525. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2526. <span>
  2527. Makeup
  2528. </span>
  2529. <span class="drop-btn d-block d-xl-none ms-auto">
  2530. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2531. </span>
  2532. </button>
  2533. <div class="submenu-items d-none d-xl-block ps-4">
  2534. <ul>
  2535. <li>
  2536. <a href="#">Skincare</a>
  2537. </li>
  2538. <li>
  2539. <a href="#">K beauty</a>
  2540. </li>
  2541. <li>
  2542. <a href="#">Heir</a>
  2543. </li>
  2544. <li>
  2545. <a href="#">Man</a>
  2546. </li>
  2547. <li>
  2548. <a href="#">Baby</a>
  2549. </li>
  2550. </ul>
  2551. </div>
  2552. </div>
  2553. <div class="items mb-1 mb-xl-3">
  2554. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2555. <span>
  2556. Makeup
  2557. </span>
  2558. <span class="drop-btn d-block d-xl-none ms-auto">
  2559. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2560. </span>
  2561. </button>
  2562. <div class="submenu-items d-none d-xl-block ps-4">
  2563. <ul>
  2564. <li>
  2565. <a href="#">Skincare</a>
  2566. </li>
  2567. <li>
  2568. <a href="#">K beauty</a>
  2569. </li>
  2570. <li>
  2571. <a href="#">Heir</a>
  2572. </li>
  2573. <li>
  2574. <a href="#">Man</a>
  2575. </li>
  2576. <li>
  2577. <a href="#">Baby</a>
  2578. </li>
  2579. </ul>
  2580. </div>
  2581. </div>
  2582. <div class="items mb-1 mb-xl-3">
  2583. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  2584. <span>
  2585. Makeup
  2586. </span>
  2587. <span class="drop-btn d-block d-xl-none ms-auto">
  2588. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2589. </span>
  2590. </button>
  2591. <div class="submenu-items d-none d-xl-block ps-4">
  2592. <ul >
  2593. <li>
  2594. <a href="#">Skincare</a>
  2595. </li>
  2596. <li>
  2597. <a href="#">K beauty</a>
  2598. </li>
  2599. <li>
  2600. <a href="#">Heir</a>
  2601. </li>
  2602. <li>
  2603. <a href="#">Man</a>
  2604. </li>
  2605. <li>
  2606. <a href="#">Baby</a>
  2607. </li>
  2608. </ul>
  2609. </div>
  2610. </div>
  2611. <div class="items mb-1 mb-xl-3">
  2612. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2613. <span>
  2614. Makeup
  2615. </span>
  2616. <span class="drop-btn d-block d-xl-none ms-auto">
  2617. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2618. </span>
  2619. </button>
  2620. <div class="submenu-items d-none d-xl-block ps-4">
  2621. <ul>
  2622. <li>
  2623. <a href="#">Skincare</a>
  2624. </li>
  2625. <li>
  2626. <a href="#">K beauty</a>
  2627. </li>
  2628. <li>
  2629. <a href="#">Heir</a>
  2630. </li>
  2631. <li>
  2632. <a href="#">Man</a>
  2633. </li>
  2634. <li>
  2635. <a href="#">Baby</a>
  2636. </li>
  2637. </ul>
  2638. </div>
  2639. </div>
  2640. <div class="items mb-1 mb-xl-3">
  2641. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2642. <span>
  2643. Makeup
  2644. </span>
  2645. <span class="drop-btn d-block d-xl-none ms-auto">
  2646. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2647. </span>
  2648. </button>
  2649. <div class="submenu-items d-none d-xl-block ps-4">
  2650. <ul>
  2651. <li>
  2652. <a href="#">Skincare</a>
  2653. </li>
  2654. <li>
  2655. <a href="#">K beauty</a>
  2656. </li>
  2657. <li>
  2658. <a href="#">Heir</a>
  2659. </li>
  2660. <li>
  2661. <a href="#">Man</a>
  2662. </li>
  2663. <li>
  2664. <a href="#">Baby</a>
  2665. </li>
  2666. </ul>
  2667. </div>
  2668. </div>
  2669. <div class="items mb-1 mb-xl-3">
  2670. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2671. <span>
  2672. Makeup
  2673. </span>
  2674. <span class="drop-btn d-block d-xl-none ms-auto">
  2675. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2676. </span>
  2677. </button>
  2678. <div class="submenu-items d-none d-xl-block ps-4">
  2679. <ul>
  2680. <li>
  2681. <a href="#">Skincare</a>
  2682. </li>
  2683. <li>
  2684. <a href="#">K beauty</a>
  2685. </li>
  2686. <li>
  2687. <a href="#">Heir</a>
  2688. </li>
  2689. <li>
  2690. <a href="#">Man</a>
  2691. </li>
  2692. <li>
  2693. <a href="#">Baby</a>
  2694. </li>
  2695. </ul>
  2696. </div>
  2697. </div>
  2698. <div class="items mb-1 mb-xl-3">
  2699. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2700. <span>
  2701. Makeup
  2702. </span>
  2703. <span class="drop-btn d-block d-xl-none ms-auto">
  2704. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2705. </span>
  2706. </button>
  2707. <div class="submenu-items d-none d-xl-block ps-4">
  2708. <ul>
  2709. <li>
  2710. <a href="#">Skincare</a>
  2711. </li>
  2712. <li>
  2713. <a href="#">K beauty</a>
  2714. </li>
  2715. <li>
  2716. <a href="#">Heir</a>
  2717. </li>
  2718. <li>
  2719. <a href="#">Man</a>
  2720. </li>
  2721. <li>
  2722. <a href="#">Baby</a>
  2723. </li>
  2724. </ul>
  2725. </div>
  2726. </div>
  2727. <div class="items mb-1 mb-xl-3">
  2728. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2729. <span>
  2730. Makeup
  2731. </span>
  2732. <span class="drop-btn d-block d-xl-none ms-auto">
  2733. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2734. </span>
  2735. </button>
  2736. <div class="submenu-items d-none d-xl-block ps-4">
  2737. <ul>
  2738. <li>
  2739. <a href="#">Skincare</a>
  2740. </li>
  2741. <li>
  2742. <a href="#">K beauty</a>
  2743. </li>
  2744. <li>
  2745. <a href="#">Heir</a>
  2746. </li>
  2747. <li>
  2748. <a href="#">Man</a>
  2749. </li>
  2750. <li>
  2751. <a href="#">Baby</a>
  2752. </li>
  2753. </ul>
  2754. </div>
  2755. </div>
  2756. </div>
  2757. <!-- offer -->
  2758. <div class="offer d-none d-xl-block p-3">
  2759. <!-- loyal -->
  2760. <div class="card border-0 mb-3">
  2761. <div class="mb-3 text-black text-center">Loyal</div>
  2762. <a href="#">
  2763. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  2764. </a>
  2765. </div>
  2766. <!-- vip -->
  2767. <div class="card border-0 mb-3">
  2768. <div class="mb-3 text-black text-center">Loyal</div>
  2769. <a href="#">
  2770. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  2771. </a>
  2772. </div>
  2773. </div>
  2774. </div>
  2775. </div>
  2776. </li>
  2777. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  2778. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2779. <span>
  2780. Healthcare
  2781. </span>
  2782. <span class="drop-btn d-block d-xl-none ms-auto">
  2783. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2784. </span>
  2785. </button>
  2786. <div class=" menu-items w-100 px-0 px-xl-4">
  2787. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  2788. <!-- nav-items -->
  2789. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  2790. <div class="items mb-1 mb-xl-3">
  2791. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  2792. <span>
  2793. ok
  2794. </span>
  2795. <span class="drop-btn d-block d-xl-none ms-auto">
  2796. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2797. </span>
  2798. </button>
  2799. <div class="submenu-items d-none d-xl-block ps-4">
  2800. <ul >
  2801. <li>
  2802. <a href="#">Skincare</a>
  2803. </li>
  2804. <li>
  2805. <a href="#">K beauty</a>
  2806. </li>
  2807. <li>
  2808. <a href="#">Heir</a>
  2809. </li>
  2810. <li>
  2811. <a href="#">Man</a>
  2812. </li>
  2813. <li>
  2814. <a href="#">Baby</a>
  2815. </li>
  2816. </ul>
  2817. </div>
  2818. </div>
  2819. <div class="items mb-1 mb-xl-3">
  2820. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2821. <span>
  2822. Makeup
  2823. </span>
  2824. <span class="drop-btn d-block d-xl-none ms-auto">
  2825. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2826. </span>
  2827. </button>
  2828. <div class="submenu-items d-none d-xl-block ps-4">
  2829. <ul>
  2830. <li>
  2831. <a href="#">Skincare</a>
  2832. </li>
  2833. <li>
  2834. <a href="#">K beauty</a>
  2835. </li>
  2836. <li>
  2837. <a href="#">Heir</a>
  2838. </li>
  2839. <li>
  2840. <a href="#">Man</a>
  2841. </li>
  2842. <li>
  2843. <a href="#">Baby</a>
  2844. </li>
  2845. </ul>
  2846. </div>
  2847. </div>
  2848. <div class="items mb-1 mb-xl-3">
  2849. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2850. <span>
  2851. Makeup
  2852. </span>
  2853. <span class="drop-btn d-block d-xl-none ms-auto">
  2854. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2855. </span>
  2856. </button>
  2857. <div class="submenu-items d-none d-xl-block ps-4">
  2858. <ul>
  2859. <li>
  2860. <a href="#">Skincare</a>
  2861. </li>
  2862. <li>
  2863. <a href="#">K beauty</a>
  2864. </li>
  2865. <li>
  2866. <a href="#">Heir</a>
  2867. </li>
  2868. <li>
  2869. <a href="#">Man</a>
  2870. </li>
  2871. <li>
  2872. <a href="#">Baby</a>
  2873. </li>
  2874. </ul>
  2875. </div>
  2876. </div>
  2877. <div class="items mb-1 mb-xl-3">
  2878. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2879. <span>
  2880. Makeup
  2881. </span>
  2882. <span class="drop-btn d-block d-xl-none ms-auto">
  2883. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2884. </span>
  2885. </button>
  2886. <div class="submenu-items d-none d-xl-block ps-4">
  2887. <ul>
  2888. <li>
  2889. <a href="#">Skincare</a>
  2890. </li>
  2891. <li>
  2892. <a href="#">K beauty</a>
  2893. </li>
  2894. <li>
  2895. <a href="#">Heir</a>
  2896. </li>
  2897. <li>
  2898. <a href="#">Man</a>
  2899. </li>
  2900. <li>
  2901. <a href="#">Baby</a>
  2902. </li>
  2903. </ul>
  2904. </div>
  2905. </div>
  2906. <div class="items mb-1 mb-xl-3">
  2907. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2908. <span>
  2909. Makeup
  2910. </span>
  2911. <span class="drop-btn d-block d-xl-none ms-auto">
  2912. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2913. </span>
  2914. </button>
  2915. <div class="submenu-items d-none d-xl-block ps-4">
  2916. <ul>
  2917. <li>
  2918. <a href="#">Skincare</a>
  2919. </li>
  2920. <li>
  2921. <a href="#">K beauty</a>
  2922. </li>
  2923. <li>
  2924. <a href="#">Heir</a>
  2925. </li>
  2926. <li>
  2927. <a href="#">Man</a>
  2928. </li>
  2929. <li>
  2930. <a href="#">Baby</a>
  2931. </li>
  2932. </ul>
  2933. </div>
  2934. </div>
  2935. <div class="items mb-1 mb-xl-3">
  2936. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2937. <span>
  2938. Makeup
  2939. </span>
  2940. <span class="drop-btn d-block d-xl-none ms-auto">
  2941. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2942. </span>
  2943. </button>
  2944. <div class="submenu-items d-none d-xl-block ps-4">
  2945. <ul>
  2946. <li>
  2947. <a href="#">Skincare</a>
  2948. </li>
  2949. <li>
  2950. <a href="#">K beauty</a>
  2951. </li>
  2952. <li>
  2953. <a href="#">Heir</a>
  2954. </li>
  2955. <li>
  2956. <a href="#">Man</a>
  2957. </li>
  2958. <li>
  2959. <a href="#">Baby</a>
  2960. </li>
  2961. </ul>
  2962. </div>
  2963. </div>
  2964. <div class="items mb-1 mb-xl-3">
  2965. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  2966. <span>
  2967. Makeup
  2968. </span>
  2969. <span class="drop-btn d-block d-xl-none ms-auto">
  2970. <img src="./images/icon/arrow-down-solid.svg" alt="">
  2971. </span>
  2972. </button>
  2973. <div class="submenu-items d-none d-xl-block ps-4">
  2974. <ul >
  2975. <li>
  2976. <a href="#">Skincare</a>
  2977. </li>
  2978. <li>
  2979. <a href="#">K beauty</a>
  2980. </li>
  2981. <li>
  2982. <a href="#">Heir</a>
  2983. </li>
  2984. <li>
  2985. <a href="#">Man</a>
  2986. </li>
  2987. <li>
  2988. <a href="#">Baby</a>
  2989. </li>
  2990. </ul>
  2991. </div>
  2992. </div>
  2993. <div class="items mb-1 mb-xl-3">
  2994. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  2995. <span>
  2996. Makeup
  2997. </span>
  2998. <span class="drop-btn d-block d-xl-none ms-auto">
  2999. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3000. </span>
  3001. </button>
  3002. <div class="submenu-items d-none d-xl-block ps-4">
  3003. <ul>
  3004. <li>
  3005. <a href="#">Skincare</a>
  3006. </li>
  3007. <li>
  3008. <a href="#">K beauty</a>
  3009. </li>
  3010. <li>
  3011. <a href="#">Heir</a>
  3012. </li>
  3013. <li>
  3014. <a href="#">Man</a>
  3015. </li>
  3016. <li>
  3017. <a href="#">Baby</a>
  3018. </li>
  3019. </ul>
  3020. </div>
  3021. </div>
  3022. <div class="items mb-1 mb-xl-3">
  3023. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3024. <span>
  3025. Makeup
  3026. </span>
  3027. <span class="drop-btn d-block d-xl-none ms-auto">
  3028. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3029. </span>
  3030. </button>
  3031. <div class="submenu-items d-none d-xl-block ps-4">
  3032. <ul>
  3033. <li>
  3034. <a href="#">Skincare</a>
  3035. </li>
  3036. <li>
  3037. <a href="#">K beauty</a>
  3038. </li>
  3039. <li>
  3040. <a href="#">Heir</a>
  3041. </li>
  3042. <li>
  3043. <a href="#">Man</a>
  3044. </li>
  3045. <li>
  3046. <a href="#">Baby</a>
  3047. </li>
  3048. </ul>
  3049. </div>
  3050. </div>
  3051. <div class="items mb-1 mb-xl-3">
  3052. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3053. <span>
  3054. Makeup
  3055. </span>
  3056. <span class="drop-btn d-block d-xl-none ms-auto">
  3057. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3058. </span>
  3059. </button>
  3060. <div class="submenu-items d-none d-xl-block ps-4">
  3061. <ul>
  3062. <li>
  3063. <a href="#">Skincare</a>
  3064. </li>
  3065. <li>
  3066. <a href="#">K beauty</a>
  3067. </li>
  3068. <li>
  3069. <a href="#">Heir</a>
  3070. </li>
  3071. <li>
  3072. <a href="#">Man</a>
  3073. </li>
  3074. <li>
  3075. <a href="#">Baby</a>
  3076. </li>
  3077. </ul>
  3078. </div>
  3079. </div>
  3080. <div class="items mb-1 mb-xl-3">
  3081. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3082. <span>
  3083. Makeup
  3084. </span>
  3085. <span class="drop-btn d-block d-xl-none ms-auto">
  3086. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3087. </span>
  3088. </button>
  3089. <div class="submenu-items d-none d-xl-block ps-4">
  3090. <ul>
  3091. <li>
  3092. <a href="#">Skincare</a>
  3093. </li>
  3094. <li>
  3095. <a href="#">K beauty</a>
  3096. </li>
  3097. <li>
  3098. <a href="#">Heir</a>
  3099. </li>
  3100. <li>
  3101. <a href="#">Man</a>
  3102. </li>
  3103. <li>
  3104. <a href="#">Baby</a>
  3105. </li>
  3106. </ul>
  3107. </div>
  3108. </div>
  3109. <div class="items mb-1 mb-xl-3">
  3110. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3111. <span>
  3112. Makeup
  3113. </span>
  3114. <span class="drop-btn d-block d-xl-none ms-auto">
  3115. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3116. </span>
  3117. </button>
  3118. <div class="submenu-items d-none d-xl-block ps-4">
  3119. <ul>
  3120. <li>
  3121. <a href="#">Skincare</a>
  3122. </li>
  3123. <li>
  3124. <a href="#">K beauty</a>
  3125. </li>
  3126. <li>
  3127. <a href="#">Heir</a>
  3128. </li>
  3129. <li>
  3130. <a href="#">Man</a>
  3131. </li>
  3132. <li>
  3133. <a href="#">Baby</a>
  3134. </li>
  3135. </ul>
  3136. </div>
  3137. </div>
  3138. </div>
  3139. <!-- offer -->
  3140. <div class="offer d-none d-xl-block p-3">
  3141. <!-- loyal -->
  3142. <div class="card border-0 mb-3">
  3143. <div class="mb-3 text-black text-center">Loyal</div>
  3144. <a href="#">
  3145. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  3146. </a>
  3147. </div>
  3148. <!-- vip -->
  3149. <div class="card border-0 mb-3">
  3150. <div class="mb-3 text-black text-center">Loyal</div>
  3151. <a href="#">
  3152. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  3153. </a>
  3154. </div>
  3155. </div>
  3156. </div>
  3157. </div>
  3158. </li>
  3159. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  3160. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3161. <span>
  3162. Lifestyle
  3163. </span>
  3164. <span class="drop-btn d-block d-xl-none ms-auto">
  3165. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3166. </span>
  3167. </button>
  3168. <div class=" menu-items w-100 px-0 px-xl-4">
  3169. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  3170. <!-- nav-items -->
  3171. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  3172. <div class="items mb-1 mb-xl-3">
  3173. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  3174. <span>
  3175. ok
  3176. </span>
  3177. <span class="drop-btn d-block d-xl-none ms-auto">
  3178. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3179. </span>
  3180. </button>
  3181. <div class="submenu-items d-none d-xl-block ps-4">
  3182. <ul >
  3183. <li>
  3184. <a href="#">Skincare</a>
  3185. </li>
  3186. <li>
  3187. <a href="#">K beauty</a>
  3188. </li>
  3189. <li>
  3190. <a href="#">Heir</a>
  3191. </li>
  3192. <li>
  3193. <a href="#">Man</a>
  3194. </li>
  3195. <li>
  3196. <a href="#">Baby</a>
  3197. </li>
  3198. </ul>
  3199. </div>
  3200. </div>
  3201. <div class="items mb-1 mb-xl-3">
  3202. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3203. <span>
  3204. Makeup
  3205. </span>
  3206. <span class="drop-btn d-block d-xl-none ms-auto">
  3207. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3208. </span>
  3209. </button>
  3210. <div class="submenu-items d-none d-xl-block ps-4">
  3211. <ul>
  3212. <li>
  3213. <a href="#">Skincare</a>
  3214. </li>
  3215. <li>
  3216. <a href="#">K beauty</a>
  3217. </li>
  3218. <li>
  3219. <a href="#">Heir</a>
  3220. </li>
  3221. <li>
  3222. <a href="#">Man</a>
  3223. </li>
  3224. <li>
  3225. <a href="#">Baby</a>
  3226. </li>
  3227. </ul>
  3228. </div>
  3229. </div>
  3230. <div class="items mb-1 mb-xl-3">
  3231. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3232. <span>
  3233. Makeup
  3234. </span>
  3235. <span class="drop-btn d-block d-xl-none ms-auto">
  3236. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3237. </span>
  3238. </button>
  3239. <div class="submenu-items d-none d-xl-block ps-4">
  3240. <ul>
  3241. <li>
  3242. <a href="#">Skincare</a>
  3243. </li>
  3244. <li>
  3245. <a href="#">K beauty</a>
  3246. </li>
  3247. <li>
  3248. <a href="#">Heir</a>
  3249. </li>
  3250. <li>
  3251. <a href="#">Man</a>
  3252. </li>
  3253. <li>
  3254. <a href="#">Baby</a>
  3255. </li>
  3256. </ul>
  3257. </div>
  3258. </div>
  3259. <div class="items mb-1 mb-xl-3">
  3260. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3261. <span>
  3262. Makeup
  3263. </span>
  3264. <span class="drop-btn d-block d-xl-none ms-auto">
  3265. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3266. </span>
  3267. </button>
  3268. <div class="submenu-items d-none d-xl-block ps-4">
  3269. <ul>
  3270. <li>
  3271. <a href="#">Skincare</a>
  3272. </li>
  3273. <li>
  3274. <a href="#">K beauty</a>
  3275. </li>
  3276. <li>
  3277. <a href="#">Heir</a>
  3278. </li>
  3279. <li>
  3280. <a href="#">Man</a>
  3281. </li>
  3282. <li>
  3283. <a href="#">Baby</a>
  3284. </li>
  3285. </ul>
  3286. </div>
  3287. </div>
  3288. <div class="items mb-1 mb-xl-3">
  3289. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3290. <span>
  3291. Makeup
  3292. </span>
  3293. <span class="drop-btn d-block d-xl-none ms-auto">
  3294. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3295. </span>
  3296. </button>
  3297. <div class="submenu-items d-none d-xl-block ps-4">
  3298. <ul>
  3299. <li>
  3300. <a href="#">Skincare</a>
  3301. </li>
  3302. <li>
  3303. <a href="#">K beauty</a>
  3304. </li>
  3305. <li>
  3306. <a href="#">Heir</a>
  3307. </li>
  3308. <li>
  3309. <a href="#">Man</a>
  3310. </li>
  3311. <li>
  3312. <a href="#">Baby</a>
  3313. </li>
  3314. </ul>
  3315. </div>
  3316. </div>
  3317. <div class="items mb-1 mb-xl-3">
  3318. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3319. <span>
  3320. Makeup
  3321. </span>
  3322. <span class="drop-btn d-block d-xl-none ms-auto">
  3323. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3324. </span>
  3325. </button>
  3326. <div class="submenu-items d-none d-xl-block ps-4">
  3327. <ul>
  3328. <li>
  3329. <a href="#">Skincare</a>
  3330. </li>
  3331. <li>
  3332. <a href="#">K beauty</a>
  3333. </li>
  3334. <li>
  3335. <a href="#">Heir</a>
  3336. </li>
  3337. <li>
  3338. <a href="#">Man</a>
  3339. </li>
  3340. <li>
  3341. <a href="#">Baby</a>
  3342. </li>
  3343. </ul>
  3344. </div>
  3345. </div>
  3346. <div class="items mb-1 mb-xl-3">
  3347. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  3348. <span>
  3349. Makeup
  3350. </span>
  3351. <span class="drop-btn d-block d-xl-none ms-auto">
  3352. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3353. </span>
  3354. </button>
  3355. <div class="submenu-items d-none d-xl-block ps-4">
  3356. <ul >
  3357. <li>
  3358. <a href="#">Skincare</a>
  3359. </li>
  3360. <li>
  3361. <a href="#">K beauty</a>
  3362. </li>
  3363. <li>
  3364. <a href="#">Heir</a>
  3365. </li>
  3366. <li>
  3367. <a href="#">Man</a>
  3368. </li>
  3369. <li>
  3370. <a href="#">Baby</a>
  3371. </li>
  3372. </ul>
  3373. </div>
  3374. </div>
  3375. <div class="items mb-1 mb-xl-3">
  3376. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3377. <span>
  3378. Makeup
  3379. </span>
  3380. <span class="drop-btn d-block d-xl-none ms-auto">
  3381. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3382. </span>
  3383. </button>
  3384. <div class="submenu-items d-none d-xl-block ps-4">
  3385. <ul>
  3386. <li>
  3387. <a href="#">Skincare</a>
  3388. </li>
  3389. <li>
  3390. <a href="#">K beauty</a>
  3391. </li>
  3392. <li>
  3393. <a href="#">Heir</a>
  3394. </li>
  3395. <li>
  3396. <a href="#">Man</a>
  3397. </li>
  3398. <li>
  3399. <a href="#">Baby</a>
  3400. </li>
  3401. </ul>
  3402. </div>
  3403. </div>
  3404. <div class="items mb-1 mb-xl-3">
  3405. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3406. <span>
  3407. Makeup
  3408. </span>
  3409. <span class="drop-btn d-block d-xl-none ms-auto">
  3410. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3411. </span>
  3412. </button>
  3413. <div class="submenu-items d-none d-xl-block ps-4">
  3414. <ul>
  3415. <li>
  3416. <a href="#">Skincare</a>
  3417. </li>
  3418. <li>
  3419. <a href="#">K beauty</a>
  3420. </li>
  3421. <li>
  3422. <a href="#">Heir</a>
  3423. </li>
  3424. <li>
  3425. <a href="#">Man</a>
  3426. </li>
  3427. <li>
  3428. <a href="#">Baby</a>
  3429. </li>
  3430. </ul>
  3431. </div>
  3432. </div>
  3433. <div class="items mb-1 mb-xl-3">
  3434. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3435. <span>
  3436. Makeup
  3437. </span>
  3438. <span class="drop-btn d-block d-xl-none ms-auto">
  3439. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3440. </span>
  3441. </button>
  3442. <div class="submenu-items d-none d-xl-block ps-4">
  3443. <ul>
  3444. <li>
  3445. <a href="#">Skincare</a>
  3446. </li>
  3447. <li>
  3448. <a href="#">K beauty</a>
  3449. </li>
  3450. <li>
  3451. <a href="#">Heir</a>
  3452. </li>
  3453. <li>
  3454. <a href="#">Man</a>
  3455. </li>
  3456. <li>
  3457. <a href="#">Baby</a>
  3458. </li>
  3459. </ul>
  3460. </div>
  3461. </div>
  3462. <div class="items mb-1 mb-xl-3">
  3463. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3464. <span>
  3465. Makeup
  3466. </span>
  3467. <span class="drop-btn d-block d-xl-none ms-auto">
  3468. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3469. </span>
  3470. </button>
  3471. <div class="submenu-items d-none d-xl-block ps-4">
  3472. <ul>
  3473. <li>
  3474. <a href="#">Skincare</a>
  3475. </li>
  3476. <li>
  3477. <a href="#">K beauty</a>
  3478. </li>
  3479. <li>
  3480. <a href="#">Heir</a>
  3481. </li>
  3482. <li>
  3483. <a href="#">Man</a>
  3484. </li>
  3485. <li>
  3486. <a href="#">Baby</a>
  3487. </li>
  3488. </ul>
  3489. </div>
  3490. </div>
  3491. <div class="items mb-1 mb-xl-3">
  3492. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3493. <span>
  3494. Makeup
  3495. </span>
  3496. <span class="drop-btn d-block d-xl-none ms-auto">
  3497. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3498. </span>
  3499. </button>
  3500. <div class="submenu-items d-none d-xl-block ps-4">
  3501. <ul>
  3502. <li>
  3503. <a href="#">Skincare</a>
  3504. </li>
  3505. <li>
  3506. <a href="#">K beauty</a>
  3507. </li>
  3508. <li>
  3509. <a href="#">Heir</a>
  3510. </li>
  3511. <li>
  3512. <a href="#">Man</a>
  3513. </li>
  3514. <li>
  3515. <a href="#">Baby</a>
  3516. </li>
  3517. </ul>
  3518. </div>
  3519. </div>
  3520. </div>
  3521. <!-- offer -->
  3522. <div class="offer d-none d-xl-block p-3">
  3523. <!-- loyal -->
  3524. <div class="card border-0 mb-3">
  3525. <div class="mb-3 text-black text-center">Loyal</div>
  3526. <a href="#">
  3527. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  3528. </a>
  3529. </div>
  3530. <!-- vip -->
  3531. <div class="card border-0 mb-3">
  3532. <div class="mb-3 text-black text-center">Loyal</div>
  3533. <a href="#">
  3534. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  3535. </a>
  3536. </div>
  3537. </div>
  3538. </div>
  3539. </div>
  3540. </li>
  3541. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  3542. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3543. <span>
  3544. Pet
  3545. </span>
  3546. <span class="drop-btn d-block d-xl-none ms-auto">
  3547. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3548. </span>
  3549. </button>
  3550. <div class=" menu-items w-100 px-0 px-xl-4">
  3551. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  3552. <!-- nav-items -->
  3553. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  3554. <div class="items mb-1 mb-xl-3">
  3555. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  3556. <span>
  3557. ok
  3558. </span>
  3559. <span class="drop-btn d-block d-xl-none ms-auto">
  3560. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3561. </span>
  3562. </button>
  3563. <div class="submenu-items d-none d-xl-block ps-4">
  3564. <ul >
  3565. <li>
  3566. <a href="#">Skincare</a>
  3567. </li>
  3568. <li>
  3569. <a href="#">K beauty</a>
  3570. </li>
  3571. <li>
  3572. <a href="#">Heir</a>
  3573. </li>
  3574. <li>
  3575. <a href="#">Man</a>
  3576. </li>
  3577. <li>
  3578. <a href="#">Baby</a>
  3579. </li>
  3580. </ul>
  3581. </div>
  3582. </div>
  3583. <div class="items mb-1 mb-xl-3">
  3584. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3585. <span>
  3586. Makeup
  3587. </span>
  3588. <span class="drop-btn d-block d-xl-none ms-auto">
  3589. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3590. </span>
  3591. </button>
  3592. <div class="submenu-items d-none d-xl-block ps-4">
  3593. <ul>
  3594. <li>
  3595. <a href="#">Skincare</a>
  3596. </li>
  3597. <li>
  3598. <a href="#">K beauty</a>
  3599. </li>
  3600. <li>
  3601. <a href="#">Heir</a>
  3602. </li>
  3603. <li>
  3604. <a href="#">Man</a>
  3605. </li>
  3606. <li>
  3607. <a href="#">Baby</a>
  3608. </li>
  3609. </ul>
  3610. </div>
  3611. </div>
  3612. <div class="items mb-1 mb-xl-3">
  3613. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3614. <span>
  3615. Makeup
  3616. </span>
  3617. <span class="drop-btn d-block d-xl-none ms-auto">
  3618. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3619. </span>
  3620. </button>
  3621. <div class="submenu-items d-none d-xl-block ps-4">
  3622. <ul>
  3623. <li>
  3624. <a href="#">Skincare</a>
  3625. </li>
  3626. <li>
  3627. <a href="#">K beauty</a>
  3628. </li>
  3629. <li>
  3630. <a href="#">Heir</a>
  3631. </li>
  3632. <li>
  3633. <a href="#">Man</a>
  3634. </li>
  3635. <li>
  3636. <a href="#">Baby</a>
  3637. </li>
  3638. </ul>
  3639. </div>
  3640. </div>
  3641. <div class="items mb-1 mb-xl-3">
  3642. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3643. <span>
  3644. Makeup
  3645. </span>
  3646. <span class="drop-btn d-block d-xl-none ms-auto">
  3647. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3648. </span>
  3649. </button>
  3650. <div class="submenu-items d-none d-xl-block ps-4">
  3651. <ul>
  3652. <li>
  3653. <a href="#">Skincare</a>
  3654. </li>
  3655. <li>
  3656. <a href="#">K beauty</a>
  3657. </li>
  3658. <li>
  3659. <a href="#">Heir</a>
  3660. </li>
  3661. <li>
  3662. <a href="#">Man</a>
  3663. </li>
  3664. <li>
  3665. <a href="#">Baby</a>
  3666. </li>
  3667. </ul>
  3668. </div>
  3669. </div>
  3670. <div class="items mb-1 mb-xl-3">
  3671. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3672. <span>
  3673. Makeup
  3674. </span>
  3675. <span class="drop-btn d-block d-xl-none ms-auto">
  3676. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3677. </span>
  3678. </button>
  3679. <div class="submenu-items d-none d-xl-block ps-4">
  3680. <ul>
  3681. <li>
  3682. <a href="#">Skincare</a>
  3683. </li>
  3684. <li>
  3685. <a href="#">K beauty</a>
  3686. </li>
  3687. <li>
  3688. <a href="#">Heir</a>
  3689. </li>
  3690. <li>
  3691. <a href="#">Man</a>
  3692. </li>
  3693. <li>
  3694. <a href="#">Baby</a>
  3695. </li>
  3696. </ul>
  3697. </div>
  3698. </div>
  3699. <div class="items mb-1 mb-xl-3">
  3700. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3701. <span>
  3702. Makeup
  3703. </span>
  3704. <span class="drop-btn d-block d-xl-none ms-auto">
  3705. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3706. </span>
  3707. </button>
  3708. <div class="submenu-items d-none d-xl-block ps-4">
  3709. <ul>
  3710. <li>
  3711. <a href="#">Skincare</a>
  3712. </li>
  3713. <li>
  3714. <a href="#">K beauty</a>
  3715. </li>
  3716. <li>
  3717. <a href="#">Heir</a>
  3718. </li>
  3719. <li>
  3720. <a href="#">Man</a>
  3721. </li>
  3722. <li>
  3723. <a href="#">Baby</a>
  3724. </li>
  3725. </ul>
  3726. </div>
  3727. </div>
  3728. <div class="items mb-1 mb-xl-3">
  3729. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  3730. <span>
  3731. Makeup
  3732. </span>
  3733. <span class="drop-btn d-block d-xl-none ms-auto">
  3734. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3735. </span>
  3736. </button>
  3737. <div class="submenu-items d-none d-xl-block ps-4">
  3738. <ul >
  3739. <li>
  3740. <a href="#">Skincare</a>
  3741. </li>
  3742. <li>
  3743. <a href="#">K beauty</a>
  3744. </li>
  3745. <li>
  3746. <a href="#">Heir</a>
  3747. </li>
  3748. <li>
  3749. <a href="#">Man</a>
  3750. </li>
  3751. <li>
  3752. <a href="#">Baby</a>
  3753. </li>
  3754. </ul>
  3755. </div>
  3756. </div>
  3757. <div class="items mb-1 mb-xl-3">
  3758. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3759. <span>
  3760. Makeup
  3761. </span>
  3762. <span class="drop-btn d-block d-xl-none ms-auto">
  3763. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3764. </span>
  3765. </button>
  3766. <div class="submenu-items d-none d-xl-block ps-4">
  3767. <ul>
  3768. <li>
  3769. <a href="#">Skincare</a>
  3770. </li>
  3771. <li>
  3772. <a href="#">K beauty</a>
  3773. </li>
  3774. <li>
  3775. <a href="#">Heir</a>
  3776. </li>
  3777. <li>
  3778. <a href="#">Man</a>
  3779. </li>
  3780. <li>
  3781. <a href="#">Baby</a>
  3782. </li>
  3783. </ul>
  3784. </div>
  3785. </div>
  3786. <div class="items mb-1 mb-xl-3">
  3787. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3788. <span>
  3789. Makeup
  3790. </span>
  3791. <span class="drop-btn d-block d-xl-none ms-auto">
  3792. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3793. </span>
  3794. </button>
  3795. <div class="submenu-items d-none d-xl-block ps-4">
  3796. <ul>
  3797. <li>
  3798. <a href="#">Skincare</a>
  3799. </li>
  3800. <li>
  3801. <a href="#">K beauty</a>
  3802. </li>
  3803. <li>
  3804. <a href="#">Heir</a>
  3805. </li>
  3806. <li>
  3807. <a href="#">Man</a>
  3808. </li>
  3809. <li>
  3810. <a href="#">Baby</a>
  3811. </li>
  3812. </ul>
  3813. </div>
  3814. </div>
  3815. <div class="items mb-1 mb-xl-3">
  3816. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3817. <span>
  3818. Makeup
  3819. </span>
  3820. <span class="drop-btn d-block d-xl-none ms-auto">
  3821. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3822. </span>
  3823. </button>
  3824. <div class="submenu-items d-none d-xl-block ps-4">
  3825. <ul>
  3826. <li>
  3827. <a href="#">Skincare</a>
  3828. </li>
  3829. <li>
  3830. <a href="#">K beauty</a>
  3831. </li>
  3832. <li>
  3833. <a href="#">Heir</a>
  3834. </li>
  3835. <li>
  3836. <a href="#">Man</a>
  3837. </li>
  3838. <li>
  3839. <a href="#">Baby</a>
  3840. </li>
  3841. </ul>
  3842. </div>
  3843. </div>
  3844. <div class="items mb-1 mb-xl-3">
  3845. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3846. <span>
  3847. Makeup
  3848. </span>
  3849. <span class="drop-btn d-block d-xl-none ms-auto">
  3850. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3851. </span>
  3852. </button>
  3853. <div class="submenu-items d-none d-xl-block ps-4">
  3854. <ul>
  3855. <li>
  3856. <a href="#">Skincare</a>
  3857. </li>
  3858. <li>
  3859. <a href="#">K beauty</a>
  3860. </li>
  3861. <li>
  3862. <a href="#">Heir</a>
  3863. </li>
  3864. <li>
  3865. <a href="#">Man</a>
  3866. </li>
  3867. <li>
  3868. <a href="#">Baby</a>
  3869. </li>
  3870. </ul>
  3871. </div>
  3872. </div>
  3873. <div class="items mb-1 mb-xl-3">
  3874. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3875. <span>
  3876. Makeup
  3877. </span>
  3878. <span class="drop-btn d-block d-xl-none ms-auto">
  3879. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3880. </span>
  3881. </button>
  3882. <div class="submenu-items d-none d-xl-block ps-4">
  3883. <ul>
  3884. <li>
  3885. <a href="#">Skincare</a>
  3886. </li>
  3887. <li>
  3888. <a href="#">K beauty</a>
  3889. </li>
  3890. <li>
  3891. <a href="#">Heir</a>
  3892. </li>
  3893. <li>
  3894. <a href="#">Man</a>
  3895. </li>
  3896. <li>
  3897. <a href="#">Baby</a>
  3898. </li>
  3899. </ul>
  3900. </div>
  3901. </div>
  3902. </div>
  3903. <!-- offer -->
  3904. <div class="offer d-none d-xl-block p-3">
  3905. <!-- loyal -->
  3906. <div class="card border-0 mb-3">
  3907. <div class="mb-3 text-black text-center">Loyal</div>
  3908. <a href="#">
  3909. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  3910. </a>
  3911. </div>
  3912. <!-- vip -->
  3913. <div class="card border-0 mb-3">
  3914. <div class="mb-3 text-black text-center">Loyal</div>
  3915. <a href="#">
  3916. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  3917. </a>
  3918. </div>
  3919. </div>
  3920. </div>
  3921. </div>
  3922. </li>
  3923. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  3924. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3925. <span>
  3926. Gifts
  3927. </span>
  3928. <span class="drop-btn d-block d-xl-none ms-auto">
  3929. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3930. </span>
  3931. </button>
  3932. <div class=" menu-items w-100 px-0 px-xl-4">
  3933. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  3934. <!-- nav-items -->
  3935. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  3936. <div class="items mb-1 mb-xl-3">
  3937. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  3938. <span>
  3939. ok
  3940. </span>
  3941. <span class="drop-btn d-block d-xl-none ms-auto">
  3942. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3943. </span>
  3944. </button>
  3945. <div class="submenu-items d-none d-xl-block ps-4">
  3946. <ul >
  3947. <li>
  3948. <a href="#">Skincare</a>
  3949. </li>
  3950. <li>
  3951. <a href="#">K beauty</a>
  3952. </li>
  3953. <li>
  3954. <a href="#">Heir</a>
  3955. </li>
  3956. <li>
  3957. <a href="#">Man</a>
  3958. </li>
  3959. <li>
  3960. <a href="#">Baby</a>
  3961. </li>
  3962. </ul>
  3963. </div>
  3964. </div>
  3965. <div class="items mb-1 mb-xl-3">
  3966. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3967. <span>
  3968. Makeup
  3969. </span>
  3970. <span class="drop-btn d-block d-xl-none ms-auto">
  3971. <img src="./images/icon/arrow-down-solid.svg" alt="">
  3972. </span>
  3973. </button>
  3974. <div class="submenu-items d-none d-xl-block ps-4">
  3975. <ul>
  3976. <li>
  3977. <a href="#">Skincare</a>
  3978. </li>
  3979. <li>
  3980. <a href="#">K beauty</a>
  3981. </li>
  3982. <li>
  3983. <a href="#">Heir</a>
  3984. </li>
  3985. <li>
  3986. <a href="#">Man</a>
  3987. </li>
  3988. <li>
  3989. <a href="#">Baby</a>
  3990. </li>
  3991. </ul>
  3992. </div>
  3993. </div>
  3994. <div class="items mb-1 mb-xl-3">
  3995. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  3996. <span>
  3997. Makeup
  3998. </span>
  3999. <span class="drop-btn d-block d-xl-none ms-auto">
  4000. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4001. </span>
  4002. </button>
  4003. <div class="submenu-items d-none d-xl-block ps-4">
  4004. <ul>
  4005. <li>
  4006. <a href="#">Skincare</a>
  4007. </li>
  4008. <li>
  4009. <a href="#">K beauty</a>
  4010. </li>
  4011. <li>
  4012. <a href="#">Heir</a>
  4013. </li>
  4014. <li>
  4015. <a href="#">Man</a>
  4016. </li>
  4017. <li>
  4018. <a href="#">Baby</a>
  4019. </li>
  4020. </ul>
  4021. </div>
  4022. </div>
  4023. <div class="items mb-1 mb-xl-3">
  4024. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4025. <span>
  4026. Makeup
  4027. </span>
  4028. <span class="drop-btn d-block d-xl-none ms-auto">
  4029. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4030. </span>
  4031. </button>
  4032. <div class="submenu-items d-none d-xl-block ps-4">
  4033. <ul>
  4034. <li>
  4035. <a href="#">Skincare</a>
  4036. </li>
  4037. <li>
  4038. <a href="#">K beauty</a>
  4039. </li>
  4040. <li>
  4041. <a href="#">Heir</a>
  4042. </li>
  4043. <li>
  4044. <a href="#">Man</a>
  4045. </li>
  4046. <li>
  4047. <a href="#">Baby</a>
  4048. </li>
  4049. </ul>
  4050. </div>
  4051. </div>
  4052. <div class="items mb-1 mb-xl-3">
  4053. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4054. <span>
  4055. Makeup
  4056. </span>
  4057. <span class="drop-btn d-block d-xl-none ms-auto">
  4058. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4059. </span>
  4060. </button>
  4061. <div class="submenu-items d-none d-xl-block ps-4">
  4062. <ul>
  4063. <li>
  4064. <a href="#">Skincare</a>
  4065. </li>
  4066. <li>
  4067. <a href="#">K beauty</a>
  4068. </li>
  4069. <li>
  4070. <a href="#">Heir</a>
  4071. </li>
  4072. <li>
  4073. <a href="#">Man</a>
  4074. </li>
  4075. <li>
  4076. <a href="#">Baby</a>
  4077. </li>
  4078. </ul>
  4079. </div>
  4080. </div>
  4081. <div class="items mb-1 mb-xl-3">
  4082. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4083. <span>
  4084. Makeup
  4085. </span>
  4086. <span class="drop-btn d-block d-xl-none ms-auto">
  4087. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4088. </span>
  4089. </button>
  4090. <div class="submenu-items d-none d-xl-block ps-4">
  4091. <ul>
  4092. <li>
  4093. <a href="#">Skincare</a>
  4094. </li>
  4095. <li>
  4096. <a href="#">K beauty</a>
  4097. </li>
  4098. <li>
  4099. <a href="#">Heir</a>
  4100. </li>
  4101. <li>
  4102. <a href="#">Man</a>
  4103. </li>
  4104. <li>
  4105. <a href="#">Baby</a>
  4106. </li>
  4107. </ul>
  4108. </div>
  4109. </div>
  4110. <div class="items mb-1 mb-xl-3">
  4111. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  4112. <span>
  4113. Makeup
  4114. </span>
  4115. <span class="drop-btn d-block d-xl-none ms-auto">
  4116. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4117. </span>
  4118. </button>
  4119. <div class="submenu-items d-none d-xl-block ps-4">
  4120. <ul >
  4121. <li>
  4122. <a href="#">Skincare</a>
  4123. </li>
  4124. <li>
  4125. <a href="#">K beauty</a>
  4126. </li>
  4127. <li>
  4128. <a href="#">Heir</a>
  4129. </li>
  4130. <li>
  4131. <a href="#">Man</a>
  4132. </li>
  4133. <li>
  4134. <a href="#">Baby</a>
  4135. </li>
  4136. </ul>
  4137. </div>
  4138. </div>
  4139. <div class="items mb-1 mb-xl-3">
  4140. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4141. <span>
  4142. Makeup
  4143. </span>
  4144. <span class="drop-btn d-block d-xl-none ms-auto">
  4145. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4146. </span>
  4147. </button>
  4148. <div class="submenu-items d-none d-xl-block ps-4">
  4149. <ul>
  4150. <li>
  4151. <a href="#">Skincare</a>
  4152. </li>
  4153. <li>
  4154. <a href="#">K beauty</a>
  4155. </li>
  4156. <li>
  4157. <a href="#">Heir</a>
  4158. </li>
  4159. <li>
  4160. <a href="#">Man</a>
  4161. </li>
  4162. <li>
  4163. <a href="#">Baby</a>
  4164. </li>
  4165. </ul>
  4166. </div>
  4167. </div>
  4168. <div class="items mb-1 mb-xl-3">
  4169. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4170. <span>
  4171. Makeup
  4172. </span>
  4173. <span class="drop-btn d-block d-xl-none ms-auto">
  4174. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4175. </span>
  4176. </button>
  4177. <div class="submenu-items d-none d-xl-block ps-4">
  4178. <ul>
  4179. <li>
  4180. <a href="#">Skincare</a>
  4181. </li>
  4182. <li>
  4183. <a href="#">K beauty</a>
  4184. </li>
  4185. <li>
  4186. <a href="#">Heir</a>
  4187. </li>
  4188. <li>
  4189. <a href="#">Man</a>
  4190. </li>
  4191. <li>
  4192. <a href="#">Baby</a>
  4193. </li>
  4194. </ul>
  4195. </div>
  4196. </div>
  4197. <div class="items mb-1 mb-xl-3">
  4198. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4199. <span>
  4200. Makeup
  4201. </span>
  4202. <span class="drop-btn d-block d-xl-none ms-auto">
  4203. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4204. </span>
  4205. </button>
  4206. <div class="submenu-items d-none d-xl-block ps-4">
  4207. <ul>
  4208. <li>
  4209. <a href="#">Skincare</a>
  4210. </li>
  4211. <li>
  4212. <a href="#">K beauty</a>
  4213. </li>
  4214. <li>
  4215. <a href="#">Heir</a>
  4216. </li>
  4217. <li>
  4218. <a href="#">Man</a>
  4219. </li>
  4220. <li>
  4221. <a href="#">Baby</a>
  4222. </li>
  4223. </ul>
  4224. </div>
  4225. </div>
  4226. <div class="items mb-1 mb-xl-3">
  4227. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4228. <span>
  4229. Makeup
  4230. </span>
  4231. <span class="drop-btn d-block d-xl-none ms-auto">
  4232. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4233. </span>
  4234. </button>
  4235. <div class="submenu-items d-none d-xl-block ps-4">
  4236. <ul>
  4237. <li>
  4238. <a href="#">Skincare</a>
  4239. </li>
  4240. <li>
  4241. <a href="#">K beauty</a>
  4242. </li>
  4243. <li>
  4244. <a href="#">Heir</a>
  4245. </li>
  4246. <li>
  4247. <a href="#">Man</a>
  4248. </li>
  4249. <li>
  4250. <a href="#">Baby</a>
  4251. </li>
  4252. </ul>
  4253. </div>
  4254. </div>
  4255. <div class="items mb-1 mb-xl-3">
  4256. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4257. <span>
  4258. Makeup
  4259. </span>
  4260. <span class="drop-btn d-block d-xl-none ms-auto">
  4261. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4262. </span>
  4263. </button>
  4264. <div class="submenu-items d-none d-xl-block ps-4">
  4265. <ul>
  4266. <li>
  4267. <a href="#">Skincare</a>
  4268. </li>
  4269. <li>
  4270. <a href="#">K beauty</a>
  4271. </li>
  4272. <li>
  4273. <a href="#">Heir</a>
  4274. </li>
  4275. <li>
  4276. <a href="#">Man</a>
  4277. </li>
  4278. <li>
  4279. <a href="#">Baby</a>
  4280. </li>
  4281. </ul>
  4282. </div>
  4283. </div>
  4284. </div>
  4285. <!-- offer -->
  4286. <div class="offer d-none d-xl-block p-3">
  4287. <!-- loyal -->
  4288. <div class="card border-0 mb-3">
  4289. <div class="mb-3 text-black text-center">Loyal</div>
  4290. <a href="#">
  4291. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  4292. </a>
  4293. </div>
  4294. <!-- vip -->
  4295. <div class="card border-0 mb-3">
  4296. <div class="mb-3 text-black text-center">Loyal</div>
  4297. <a href="#">
  4298. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  4299. </a>
  4300. </div>
  4301. </div>
  4302. </div>
  4303. </div>
  4304. </li>
  4305. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  4306. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4307. <span>
  4308. Brands
  4309. </span>
  4310. <span class="drop-btn d-block d-xl-none ms-auto">
  4311. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4312. </span>
  4313. </button>
  4314. <div class=" menu-items w-100 px-0 px-xl-4">
  4315. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  4316. <!-- nav-items -->
  4317. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  4318. <div class="items mb-1 mb-xl-3">
  4319. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  4320. <span>
  4321. ok
  4322. </span>
  4323. <span class="drop-btn d-block d-xl-none ms-auto">
  4324. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4325. </span>
  4326. </button>
  4327. <div class="submenu-items d-none d-xl-block ps-4">
  4328. <ul >
  4329. <li>
  4330. <a href="#">Skincare</a>
  4331. </li>
  4332. <li>
  4333. <a href="#">K beauty</a>
  4334. </li>
  4335. <li>
  4336. <a href="#">Heir</a>
  4337. </li>
  4338. <li>
  4339. <a href="#">Man</a>
  4340. </li>
  4341. <li>
  4342. <a href="#">Baby</a>
  4343. </li>
  4344. </ul>
  4345. </div>
  4346. </div>
  4347. <div class="items mb-1 mb-xl-3">
  4348. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4349. <span>
  4350. Makeup
  4351. </span>
  4352. <span class="drop-btn d-block d-xl-none ms-auto">
  4353. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4354. </span>
  4355. </button>
  4356. <div class="submenu-items d-none d-xl-block ps-4">
  4357. <ul>
  4358. <li>
  4359. <a href="#">Skincare</a>
  4360. </li>
  4361. <li>
  4362. <a href="#">K beauty</a>
  4363. </li>
  4364. <li>
  4365. <a href="#">Heir</a>
  4366. </li>
  4367. <li>
  4368. <a href="#">Man</a>
  4369. </li>
  4370. <li>
  4371. <a href="#">Baby</a>
  4372. </li>
  4373. </ul>
  4374. </div>
  4375. </div>
  4376. <div class="items mb-1 mb-xl-3">
  4377. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4378. <span>
  4379. Makeup
  4380. </span>
  4381. <span class="drop-btn d-block d-xl-none ms-auto">
  4382. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4383. </span>
  4384. </button>
  4385. <div class="submenu-items d-none d-xl-block ps-4">
  4386. <ul>
  4387. <li>
  4388. <a href="#">Skincare</a>
  4389. </li>
  4390. <li>
  4391. <a href="#">K beauty</a>
  4392. </li>
  4393. <li>
  4394. <a href="#">Heir</a>
  4395. </li>
  4396. <li>
  4397. <a href="#">Man</a>
  4398. </li>
  4399. <li>
  4400. <a href="#">Baby</a>
  4401. </li>
  4402. </ul>
  4403. </div>
  4404. </div>
  4405. <div class="items mb-1 mb-xl-3">
  4406. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4407. <span>
  4408. Makeup
  4409. </span>
  4410. <span class="drop-btn d-block d-xl-none ms-auto">
  4411. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4412. </span>
  4413. </button>
  4414. <div class="submenu-items d-none d-xl-block ps-4">
  4415. <ul>
  4416. <li>
  4417. <a href="#">Skincare</a>
  4418. </li>
  4419. <li>
  4420. <a href="#">K beauty</a>
  4421. </li>
  4422. <li>
  4423. <a href="#">Heir</a>
  4424. </li>
  4425. <li>
  4426. <a href="#">Man</a>
  4427. </li>
  4428. <li>
  4429. <a href="#">Baby</a>
  4430. </li>
  4431. </ul>
  4432. </div>
  4433. </div>
  4434. <div class="items mb-1 mb-xl-3">
  4435. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4436. <span>
  4437. Makeup
  4438. </span>
  4439. <span class="drop-btn d-block d-xl-none ms-auto">
  4440. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4441. </span>
  4442. </button>
  4443. <div class="submenu-items d-none d-xl-block ps-4">
  4444. <ul>
  4445. <li>
  4446. <a href="#">Skincare</a>
  4447. </li>
  4448. <li>
  4449. <a href="#">K beauty</a>
  4450. </li>
  4451. <li>
  4452. <a href="#">Heir</a>
  4453. </li>
  4454. <li>
  4455. <a href="#">Man</a>
  4456. </li>
  4457. <li>
  4458. <a href="#">Baby</a>
  4459. </li>
  4460. </ul>
  4461. </div>
  4462. </div>
  4463. <div class="items mb-1 mb-xl-3">
  4464. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4465. <span>
  4466. Makeup
  4467. </span>
  4468. <span class="drop-btn d-block d-xl-none ms-auto">
  4469. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4470. </span>
  4471. </button>
  4472. <div class="submenu-items d-none d-xl-block ps-4">
  4473. <ul>
  4474. <li>
  4475. <a href="#">Skincare</a>
  4476. </li>
  4477. <li>
  4478. <a href="#">K beauty</a>
  4479. </li>
  4480. <li>
  4481. <a href="#">Heir</a>
  4482. </li>
  4483. <li>
  4484. <a href="#">Man</a>
  4485. </li>
  4486. <li>
  4487. <a href="#">Baby</a>
  4488. </li>
  4489. </ul>
  4490. </div>
  4491. </div>
  4492. <div class="items mb-1 mb-xl-3">
  4493. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  4494. <span>
  4495. Makeup
  4496. </span>
  4497. <span class="drop-btn d-block d-xl-none ms-auto">
  4498. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4499. </span>
  4500. </button>
  4501. <div class="submenu-items d-none d-xl-block ps-4">
  4502. <ul >
  4503. <li>
  4504. <a href="#">Skincare</a>
  4505. </li>
  4506. <li>
  4507. <a href="#">K beauty</a>
  4508. </li>
  4509. <li>
  4510. <a href="#">Heir</a>
  4511. </li>
  4512. <li>
  4513. <a href="#">Man</a>
  4514. </li>
  4515. <li>
  4516. <a href="#">Baby</a>
  4517. </li>
  4518. </ul>
  4519. </div>
  4520. </div>
  4521. <div class="items mb-1 mb-xl-3">
  4522. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4523. <span>
  4524. Makeup
  4525. </span>
  4526. <span class="drop-btn d-block d-xl-none ms-auto">
  4527. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4528. </span>
  4529. </button>
  4530. <div class="submenu-items d-none d-xl-block ps-4">
  4531. <ul>
  4532. <li>
  4533. <a href="#">Skincare</a>
  4534. </li>
  4535. <li>
  4536. <a href="#">K beauty</a>
  4537. </li>
  4538. <li>
  4539. <a href="#">Heir</a>
  4540. </li>
  4541. <li>
  4542. <a href="#">Man</a>
  4543. </li>
  4544. <li>
  4545. <a href="#">Baby</a>
  4546. </li>
  4547. </ul>
  4548. </div>
  4549. </div>
  4550. <div class="items mb-1 mb-xl-3">
  4551. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4552. <span>
  4553. Makeup
  4554. </span>
  4555. <span class="drop-btn d-block d-xl-none ms-auto">
  4556. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4557. </span>
  4558. </button>
  4559. <div class="submenu-items d-none d-xl-block ps-4">
  4560. <ul>
  4561. <li>
  4562. <a href="#">Skincare</a>
  4563. </li>
  4564. <li>
  4565. <a href="#">K beauty</a>
  4566. </li>
  4567. <li>
  4568. <a href="#">Heir</a>
  4569. </li>
  4570. <li>
  4571. <a href="#">Man</a>
  4572. </li>
  4573. <li>
  4574. <a href="#">Baby</a>
  4575. </li>
  4576. </ul>
  4577. </div>
  4578. </div>
  4579. <div class="items mb-1 mb-xl-3">
  4580. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4581. <span>
  4582. Makeup
  4583. </span>
  4584. <span class="drop-btn d-block d-xl-none ms-auto">
  4585. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4586. </span>
  4587. </button>
  4588. <div class="submenu-items d-none d-xl-block ps-4">
  4589. <ul>
  4590. <li>
  4591. <a href="#">Skincare</a>
  4592. </li>
  4593. <li>
  4594. <a href="#">K beauty</a>
  4595. </li>
  4596. <li>
  4597. <a href="#">Heir</a>
  4598. </li>
  4599. <li>
  4600. <a href="#">Man</a>
  4601. </li>
  4602. <li>
  4603. <a href="#">Baby</a>
  4604. </li>
  4605. </ul>
  4606. </div>
  4607. </div>
  4608. <div class="items mb-1 mb-xl-3">
  4609. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4610. <span>
  4611. Makeup
  4612. </span>
  4613. <span class="drop-btn d-block d-xl-none ms-auto">
  4614. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4615. </span>
  4616. </button>
  4617. <div class="submenu-items d-none d-xl-block ps-4">
  4618. <ul>
  4619. <li>
  4620. <a href="#">Skincare</a>
  4621. </li>
  4622. <li>
  4623. <a href="#">K beauty</a>
  4624. </li>
  4625. <li>
  4626. <a href="#">Heir</a>
  4627. </li>
  4628. <li>
  4629. <a href="#">Man</a>
  4630. </li>
  4631. <li>
  4632. <a href="#">Baby</a>
  4633. </li>
  4634. </ul>
  4635. </div>
  4636. </div>
  4637. <div class="items mb-1 mb-xl-3">
  4638. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4639. <span>
  4640. Makeup
  4641. </span>
  4642. <span class="drop-btn d-block d-xl-none ms-auto">
  4643. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4644. </span>
  4645. </button>
  4646. <div class="submenu-items d-none d-xl-block ps-4">
  4647. <ul>
  4648. <li>
  4649. <a href="#">Skincare</a>
  4650. </li>
  4651. <li>
  4652. <a href="#">K beauty</a>
  4653. </li>
  4654. <li>
  4655. <a href="#">Heir</a>
  4656. </li>
  4657. <li>
  4658. <a href="#">Man</a>
  4659. </li>
  4660. <li>
  4661. <a href="#">Baby</a>
  4662. </li>
  4663. </ul>
  4664. </div>
  4665. </div>
  4666. </div>
  4667. <!-- offer -->
  4668. <div class="offer d-none d-xl-block p-3">
  4669. <!-- loyal -->
  4670. <div class="card border-0 mb-3">
  4671. <div class="mb-3 text-black text-center">Loyal</div>
  4672. <a href="#">
  4673. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  4674. </a>
  4675. </div>
  4676. <!-- vip -->
  4677. <div class="card border-0 mb-3">
  4678. <div class="mb-3 text-black text-center">Loyal</div>
  4679. <a href="#">
  4680. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  4681. </a>
  4682. </div>
  4683. </div>
  4684. </div>
  4685. </div>
  4686. </li>
  4687. <li class="megamenu-parrent mx-2 py-0 py-xl-2">
  4688. <button class="px-0 btn text-white collapse-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4689. <span>
  4690. Makeup
  4691. </span>
  4692. <span class="drop-btn d-block d-xl-none ms-auto">
  4693. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4694. </span>
  4695. </button>
  4696. <div class=" menu-items w-100 px-0 px-xl-4">
  4697. <div class="megamenu-submenu w-100 px-0 py-0 py-xl-3">
  4698. <!-- nav-items -->
  4699. <div class="nav-items d-flex flex-wrap flex-column flex-xl-row gap-2">
  4700. <div class="items mb-1 mb-xl-3">
  4701. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  4702. <span>
  4703. ok
  4704. </span>
  4705. <span class="drop-btn d-block d-xl-none ms-auto">
  4706. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4707. </span>
  4708. </button>
  4709. <div class="submenu-items d-none d-xl-block ps-4">
  4710. <ul >
  4711. <li>
  4712. <a href="#">Skincare</a>
  4713. </li>
  4714. <li>
  4715. <a href="#">K beauty</a>
  4716. </li>
  4717. <li>
  4718. <a href="#">Heir</a>
  4719. </li>
  4720. <li>
  4721. <a href="#">Man</a>
  4722. </li>
  4723. <li>
  4724. <a href="#">Baby</a>
  4725. </li>
  4726. </ul>
  4727. </div>
  4728. </div>
  4729. <div class="items mb-1 mb-xl-3">
  4730. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4731. <span>
  4732. Makeup
  4733. </span>
  4734. <span class="drop-btn d-block d-xl-none ms-auto">
  4735. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4736. </span>
  4737. </button>
  4738. <div class="submenu-items d-none d-xl-block ps-4">
  4739. <ul>
  4740. <li>
  4741. <a href="#">Skincare</a>
  4742. </li>
  4743. <li>
  4744. <a href="#">K beauty</a>
  4745. </li>
  4746. <li>
  4747. <a href="#">Heir</a>
  4748. </li>
  4749. <li>
  4750. <a href="#">Man</a>
  4751. </li>
  4752. <li>
  4753. <a href="#">Baby</a>
  4754. </li>
  4755. </ul>
  4756. </div>
  4757. </div>
  4758. <div class="items mb-1 mb-xl-3">
  4759. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4760. <span>
  4761. Makeup
  4762. </span>
  4763. <span class="drop-btn d-block d-xl-none ms-auto">
  4764. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4765. </span>
  4766. </button>
  4767. <div class="submenu-items d-none d-xl-block ps-4">
  4768. <ul>
  4769. <li>
  4770. <a href="#">Skincare</a>
  4771. </li>
  4772. <li>
  4773. <a href="#">K beauty</a>
  4774. </li>
  4775. <li>
  4776. <a href="#">Heir</a>
  4777. </li>
  4778. <li>
  4779. <a href="#">Man</a>
  4780. </li>
  4781. <li>
  4782. <a href="#">Baby</a>
  4783. </li>
  4784. </ul>
  4785. </div>
  4786. </div>
  4787. <div class="items mb-1 mb-xl-3">
  4788. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4789. <span>
  4790. Makeup
  4791. </span>
  4792. <span class="drop-btn d-block d-xl-none ms-auto">
  4793. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4794. </span>
  4795. </button>
  4796. <div class="submenu-items d-none d-xl-block ps-4">
  4797. <ul>
  4798. <li>
  4799. <a href="#">Skincare</a>
  4800. </li>
  4801. <li>
  4802. <a href="#">K beauty</a>
  4803. </li>
  4804. <li>
  4805. <a href="#">Heir</a>
  4806. </li>
  4807. <li>
  4808. <a href="#">Man</a>
  4809. </li>
  4810. <li>
  4811. <a href="#">Baby</a>
  4812. </li>
  4813. </ul>
  4814. </div>
  4815. </div>
  4816. <div class="items mb-1 mb-xl-3">
  4817. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4818. <span>
  4819. Makeup
  4820. </span>
  4821. <span class="drop-btn d-block d-xl-none ms-auto">
  4822. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4823. </span>
  4824. </button>
  4825. <div class="submenu-items d-none d-xl-block ps-4">
  4826. <ul>
  4827. <li>
  4828. <a href="#">Skincare</a>
  4829. </li>
  4830. <li>
  4831. <a href="#">K beauty</a>
  4832. </li>
  4833. <li>
  4834. <a href="#">Heir</a>
  4835. </li>
  4836. <li>
  4837. <a href="#">Man</a>
  4838. </li>
  4839. <li>
  4840. <a href="#">Baby</a>
  4841. </li>
  4842. </ul>
  4843. </div>
  4844. </div>
  4845. <div class="items mb-1 mb-xl-3">
  4846. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4847. <span>
  4848. Makeup
  4849. </span>
  4850. <span class="drop-btn d-block d-xl-none ms-auto">
  4851. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4852. </span>
  4853. </button>
  4854. <div class="submenu-items d-none d-xl-block ps-4">
  4855. <ul>
  4856. <li>
  4857. <a href="#">Skincare</a>
  4858. </li>
  4859. <li>
  4860. <a href="#">K beauty</a>
  4861. </li>
  4862. <li>
  4863. <a href="#">Heir</a>
  4864. </li>
  4865. <li>
  4866. <a href="#">Man</a>
  4867. </li>
  4868. <li>
  4869. <a href="#">Baby</a>
  4870. </li>
  4871. </ul>
  4872. </div>
  4873. </div>
  4874. <div class="items mb-1 mb-xl-3">
  4875. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-lg-start align-items-center">
  4876. <span>
  4877. Makeup
  4878. </span>
  4879. <span class="drop-btn d-block d-xl-none ms-auto">
  4880. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4881. </span>
  4882. </button>
  4883. <div class="submenu-items d-none d-xl-block ps-4">
  4884. <ul >
  4885. <li>
  4886. <a href="#">Skincare</a>
  4887. </li>
  4888. <li>
  4889. <a href="#">K beauty</a>
  4890. </li>
  4891. <li>
  4892. <a href="#">Heir</a>
  4893. </li>
  4894. <li>
  4895. <a href="#">Man</a>
  4896. </li>
  4897. <li>
  4898. <a href="#">Baby</a>
  4899. </li>
  4900. </ul>
  4901. </div>
  4902. </div>
  4903. <div class="items mb-1 mb-xl-3">
  4904. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4905. <span>
  4906. Makeup
  4907. </span>
  4908. <span class="drop-btn d-block d-xl-none ms-auto">
  4909. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4910. </span>
  4911. </button>
  4912. <div class="submenu-items d-none d-xl-block ps-4">
  4913. <ul>
  4914. <li>
  4915. <a href="#">Skincare</a>
  4916. </li>
  4917. <li>
  4918. <a href="#">K beauty</a>
  4919. </li>
  4920. <li>
  4921. <a href="#">Heir</a>
  4922. </li>
  4923. <li>
  4924. <a href="#">Man</a>
  4925. </li>
  4926. <li>
  4927. <a href="#">Baby</a>
  4928. </li>
  4929. </ul>
  4930. </div>
  4931. </div>
  4932. <div class="items mb-1 mb-xl-3">
  4933. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4934. <span>
  4935. Makeup
  4936. </span>
  4937. <span class="drop-btn d-block d-xl-none ms-auto">
  4938. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4939. </span>
  4940. </button>
  4941. <div class="submenu-items d-none d-xl-block ps-4">
  4942. <ul>
  4943. <li>
  4944. <a href="#">Skincare</a>
  4945. </li>
  4946. <li>
  4947. <a href="#">K beauty</a>
  4948. </li>
  4949. <li>
  4950. <a href="#">Heir</a>
  4951. </li>
  4952. <li>
  4953. <a href="#">Man</a>
  4954. </li>
  4955. <li>
  4956. <a href="#">Baby</a>
  4957. </li>
  4958. </ul>
  4959. </div>
  4960. </div>
  4961. <div class="items mb-1 mb-xl-3">
  4962. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4963. <span>
  4964. Makeup
  4965. </span>
  4966. <span class="drop-btn d-block d-xl-none ms-auto">
  4967. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4968. </span>
  4969. </button>
  4970. <div class="submenu-items d-none d-xl-block ps-4">
  4971. <ul>
  4972. <li>
  4973. <a href="#">Skincare</a>
  4974. </li>
  4975. <li>
  4976. <a href="#">K beauty</a>
  4977. </li>
  4978. <li>
  4979. <a href="#">Heir</a>
  4980. </li>
  4981. <li>
  4982. <a href="#">Man</a>
  4983. </li>
  4984. <li>
  4985. <a href="#">Baby</a>
  4986. </li>
  4987. </ul>
  4988. </div>
  4989. </div>
  4990. <div class="items mb-1 mb-xl-3">
  4991. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  4992. <span>
  4993. Makeup
  4994. </span>
  4995. <span class="drop-btn d-block d-xl-none ms-auto">
  4996. <img src="./images/icon/arrow-down-solid.svg" alt="">
  4997. </span>
  4998. </button>
  4999. <div class="submenu-items d-none d-xl-block ps-4">
  5000. <ul>
  5001. <li>
  5002. <a href="#">Skincare</a>
  5003. </li>
  5004. <li>
  5005. <a href="#">K beauty</a>
  5006. </li>
  5007. <li>
  5008. <a href="#">Heir</a>
  5009. </li>
  5010. <li>
  5011. <a href="#">Man</a>
  5012. </li>
  5013. <li>
  5014. <a href="#">Baby</a>
  5015. </li>
  5016. </ul>
  5017. </div>
  5018. </div>
  5019. <div class="items mb-1 mb-xl-3">
  5020. <button class="ps-4 me-0 pe-0 btn text-black submenu-buton d-flex justify-content-between justify-content-lg-start align-items-center">
  5021. <span>
  5022. Makeup
  5023. </span>
  5024. <span class="drop-btn d-block d-xl-none ms-auto">
  5025. <img src="./images/icon/arrow-down-solid.svg" alt="">
  5026. </span>
  5027. </button>
  5028. <div class="submenu-items d-none d-xl-block ps-4">
  5029. <ul>
  5030. <li>
  5031. <a href="#">Skincare</a>
  5032. </li>
  5033. <li>
  5034. <a href="#">K beauty</a>
  5035. </li>
  5036. <li>
  5037. <a href="#">Heir</a>
  5038. </li>
  5039. <li>
  5040. <a href="#">Man</a>
  5041. </li>
  5042. <li>
  5043. <a href="#">Baby</a>
  5044. </li>
  5045. </ul>
  5046. </div>
  5047. </div>
  5048. </div>
  5049. <!-- offer -->
  5050. <div class="offer d-none d-xl-block p-3">
  5051. <!-- loyal -->
  5052. <div class="card border-0 mb-3">
  5053. <div class="mb-3 text-black text-center">Loyal</div>
  5054. <a href="#">
  5055. <img class="card-img rounded-0" src="./images/navbar/offer-loyal.jpg" alt="">
  5056. </a>
  5057. </div>
  5058. <!-- vip -->
  5059. <div class="card border-0 mb-3">
  5060. <div class="mb-3 text-black text-center">Loyal</div>
  5061. <a href="#">
  5062. <img class="card-img rounded-0" src="./images/navbar/offer-vip.jpg" alt="">
  5063. </a>
  5064. </div>
  5065. </div>
  5066. </div>
  5067. </div>
  5068. </li>
  5069. <li>
  5070. <button class=" btn btn-sm btn-pink mt-3 mt-xl-0 mx-1 px-2">Blog</button>
  5071. </li>
  5072. <li>
  5073. <button class="btn btn-sm btn-orange-vivid mt-3 mt-xl-0 mx-2 px-2 ">Buy 1 Get 1</button>
  5074. </li>
  5075. <li>
  5076. <button class="btn btn-sm btn-orange-vivid mt-3 mt-xl-0 mx-2 px-2">Sale</button>
  5077. </li>
  5078. </ul>
  5079. </div>
  5080. </div>
  5081. </section>
  5082. <div class="position-relative">
  5083. <!-- hero sectiion -->
  5084. <section id="hero">
  5085. <div class="banner-carousel">
  5086. <div class="swiper bannerSlider">
  5087. <div class="swiper-wrapper">
  5088. <div class="swiper-slide">
  5089. <img src="./images/home_page/home-banner.png" alt="">
  5090. </div>
  5091. <div class="swiper-slide">
  5092. <img src="./images/home_page/home-banner.png" alt="">
  5093. </div>
  5094. <div class="swiper-slide">
  5095. <img src="./images/home_page/home-banner.png" alt="">
  5096. </div>
  5097. <div class="swiper-slide">
  5098. <img src="./images/home_page/home-banner.png" alt="">
  5099. </div>
  5100. <div class="swiper-slide">
  5101. <img src="./images/home_page/home-banner.png" alt="">
  5102. </div>
  5103. </div>
  5104. </div>
  5105. </div>
  5106. </section>
  5107. <!-- home category slider -->
  5108. <section id="home-category" class="mt-3 py-3">
  5109. <div class="container">
  5110. <div class="row">
  5111. <div class="swiper categorySlider">
  5112. <div class="swiper-wrapper">
  5113. <div class="swiper-slide">
  5114. <a href="#">
  5115. <img src="./images/home_page/people-1.png" alt="">
  5116. </a>
  5117. </div>
  5118. <div class="swiper-slide">
  5119. <a href="#">
  5120. <img src="./images/home_page/people-2.png" alt="">
  5121. </a>
  5122. </div>
  5123. <div class="swiper-slide">
  5124. <a href="#">
  5125. <img src="./images/home_page/people-3.png" alt="">
  5126. </a>
  5127. </div>
  5128. <div class="swiper-slide">
  5129. <a href="#">
  5130. <img src="./images/home_page/people-4.png" alt="">
  5131. </a>
  5132. </div>
  5133. <div class="swiper-slide">
  5134. <a href="#">
  5135. <img src="./images/home_page/people-5.png" alt="">
  5136. </a>
  5137. </div>
  5138. <div class="swiper-slide">
  5139. <a href="#">
  5140. <img src="./images/home_page/people-6.png" alt="">
  5141. </a>
  5142. </div>
  5143. <div class="swiper-slide">
  5144. <a href="#">
  5145. <img src="./images/home_page/people-1.png" alt="">
  5146. </a>
  5147. </div>
  5148. <div class="swiper-slide">
  5149. <a href="#">
  5150. <img src="./images/home_page/people-2.png" alt="">
  5151. </a>
  5152. </div>
  5153. <div class="swiper-slide">
  5154. <a href="#">
  5155. <img src="./images/home_page/people-3.png" alt="">
  5156. </a>
  5157. </div>
  5158. <div class="swiper-slide">
  5159. <a href="#">
  5160. <img src="./images/home_page/people-4.png" alt="">
  5161. </a>
  5162. </div>
  5163. <div class="swiper-slide">
  5164. <a href="#">
  5165. <img src="./images/home_page/people-5.png" alt="">
  5166. </a>
  5167. </div>
  5168. <div class="swiper-slide">
  5169. <a href="#">
  5170. <img src="./images/home_page/people-6.png" alt="">
  5171. </a>
  5172. </div>
  5173. </div>
  5174. </div>
  5175. <div class="swiper-button-next"></div>
  5176. <div class="swiper-button-prev"></div>
  5177. </div>
  5178. </div>
  5179. </section>
  5180. <!-- skin care -->
  5181. <section id="skin-care" class="mt-5 py-3">
  5182. <div class="container text-center">
  5183. <div class="row">
  5184. <!-- title -->
  5185. <div class="section-title fw-normal">
  5186. START YOUR SKINCARE JOURNEY
  5187. </div>
  5188. <!-- subtitle -->
  5189. <p class="mt-3 text-gray fs-4">
  5190. Skincare is an evolving personal journey and we're here
  5191. <br>
  5192. to guide you along the way.
  5193. </p>
  5194. <!-- shop tabs -->
  5195. <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">
  5196. <!-- SHOP BY BEST SELLERS -->
  5197. <li class="ms-0 nav-item" role="presentation">
  5198. <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
  5199. </button>
  5200. </li>
  5201. <!-- SHOP BY SKIN TYPE -->
  5202. <li class="ms-0 ms-md-3 nav-item" role="presentation">
  5203. <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">
  5204. SHOP BY SKIN TYPE
  5205. </button>
  5206. </li>
  5207. <!-- SHOP BY BRAND -->
  5208. <li class="ms-0 ms-md-3 nav-item" role="presentation">
  5209. <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">
  5210. SHOP BY BRAND
  5211. </button>
  5212. </li>
  5213. </ul>
  5214. <!-- tab content -->
  5215. <div class="tab-content mt-5" id="pills-tabContent">
  5216. <!-- SHOP BY BEST SELLERS -->
  5217. <div class="tab-pane fade show active" id="shop-by-best-sellers" role="tabpanel" aria-labelledby="shop-by-best-sellers-tab">
  5218. <!-- product list container -->
  5219. <div class="col-md-12 mobile-padding">
  5220. <div class="row">
  5221. <div class="col-md-3 product-single">
  5222. <div class="product rounded-1 px-2 py-2 text-start">
  5223. <!-- product image -->
  5224. <a href="./product-details.html">
  5225. <div class="image-container text-center">
  5226. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5227. </div>
  5228. </a>
  5229. <!-- product brand and ratting -->
  5230. <div class="my-2 d-flex flex-wrap align-items-center ">
  5231. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5232. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5233. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5234. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5235. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5236. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5237. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5238. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5239. </div>
  5240. </div>
  5241. <!-- product name -->
  5242. <a href="./product-details.html" class="title text-gray ">
  5243. Clear Kind to skin refreshing
  5244. shampoo
  5245. </a>
  5246. <!-- offer -->
  5247. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5248. Buy 2 Get 1 free
  5249. </p>
  5250. <!-- product price -->
  5251. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5252. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5253. <span class="ms-3 fw-semibold">৳510 </span>
  5254. </div>
  5255. <!-- product price in app -->
  5256. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5257. <span class="fw-semibold">App Price : </span>
  5258. <span class="ms-3 fw-semibold">৳ 484 </span>
  5259. </div>
  5260. <!-- add to cart -->
  5261. <div class="text-center pt-2 pt-lg-3">
  5262. <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">
  5263. <span>
  5264. <img src="./images/icon/Cart_white.svg" alt="">
  5265. </span>
  5266. <span class="add-cart-text ms-2">Add to Cart</span>
  5267. </button>
  5268. </div>
  5269. </div>
  5270. </div>
  5271. <div class="col-md-3 product-single">
  5272. <div class=" product rounded-1 px-2 py-2 text-start">
  5273. <!-- product image -->
  5274. <a href="./product-details.html">
  5275. <div class="image-container text-center">
  5276. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5277. </div>
  5278. </a>
  5279. <!-- product brand and ratting -->
  5280. <div class="my-2 d-flex flex-wrap align-items-center ">
  5281. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5282. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5283. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5284. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5285. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5286. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5287. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5288. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5289. </div>
  5290. </div>
  5291. <!-- product name -->
  5292. <a href="./product-details.html" class="title text-gray ">
  5293. Clear Kind to skin refreshing
  5294. shampoo
  5295. </a>
  5296. <!-- offer -->
  5297. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5298. Buy 2 Get 1 free
  5299. </p>
  5300. <!-- product price -->
  5301. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5302. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5303. <span class="ms-3 fw-semibold">৳510 </span>
  5304. </div>
  5305. <!-- product price in app -->
  5306. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5307. <span class="fw-semibold">App Price : </span>
  5308. <span class="ms-3 fw-semibold">৳ 484 </span>
  5309. </div>
  5310. <!-- add to cart -->
  5311. <div class="text-center pt-2 pt-lg-3">
  5312. <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">
  5313. <span>
  5314. <img src="./images/icon/Cart_white.svg" alt="">
  5315. </span>
  5316. <span class="add-cart-text ms-2">Add to Cart</span>
  5317. </button>
  5318. </div>
  5319. </div>
  5320. </div>
  5321. <div class="col-md-3 product-single">
  5322. <div class=" product rounded-1 px-2 py-2 text-start">
  5323. <!-- product image -->
  5324. <a href="./product-details.html">
  5325. <div class="image-container text-center">
  5326. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5327. </div>
  5328. </a>
  5329. <!-- product brand and ratting -->
  5330. <div class="my-2 d-flex flex-wrap align-items-center ">
  5331. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5332. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5333. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5334. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5335. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5336. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5337. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5338. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5339. </div>
  5340. </div>
  5341. <!-- product name -->
  5342. <a href="./product-details.html" class="title text-gray ">
  5343. Clear Kind to skin refreshing
  5344. shampoo
  5345. </a>
  5346. <!-- offer -->
  5347. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5348. Buy 2 Get 1 free
  5349. </p>
  5350. <!-- product price -->
  5351. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5352. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5353. <span class="ms-3 fw-semibold">৳510 </span>
  5354. </div>
  5355. <!-- product price in app -->
  5356. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5357. <span class="fw-semibold">App Price : </span>
  5358. <span class="ms-3 fw-semibold">৳ 484 </span>
  5359. </div>
  5360. <!-- add to cart -->
  5361. <div class="text-center pt-2 pt-lg-3">
  5362. <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">
  5363. <span>
  5364. <img src="./images/icon/Cart_white.svg" alt="">
  5365. </span>
  5366. <span class="add-cart-text ms-2">Add to Cart</span>
  5367. </button>
  5368. </div>
  5369. </div>
  5370. </div>
  5371. <div class="col-md-3 product-single">
  5372. <div class=" product rounded-1 px-2 py-2 text-start">
  5373. <!-- product image -->
  5374. <a href="./product-details.html">
  5375. <div class="image-container text-center">
  5376. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5377. </div>
  5378. </a>
  5379. <!-- product brand and ratting -->
  5380. <div class="my-2 d-flex flex-wrap align-items-center ">
  5381. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5382. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5383. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5384. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5385. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5386. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5387. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5388. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5389. </div>
  5390. </div>
  5391. <!-- product name -->
  5392. <a href="./product-details.html" class="title text-gray ">
  5393. Clear Kind to skin refreshing
  5394. shampoo
  5395. </a>
  5396. <!-- offer -->
  5397. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5398. Buy 2 Get 1 free
  5399. </p>
  5400. <!-- product price -->
  5401. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5402. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5403. <span class="ms-3 fw-semibold">৳510 </span>
  5404. </div>
  5405. <!-- product price in app -->
  5406. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5407. <span class="fw-semibold">App Price : </span>
  5408. <span class="ms-3 fw-semibold">৳ 484 </span>
  5409. </div>
  5410. <!-- add to cart -->
  5411. <div class="text-center pt-2 pt-lg-3">
  5412. <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">
  5413. <span>
  5414. <img src="./images/icon/Cart_white.svg" alt="">
  5415. </span>
  5416. <span class="add-cart-text ms-2">Add to Cart</span>
  5417. </button>
  5418. </div>
  5419. </div>
  5420. </div>
  5421. <div class="col-md-3 product-single d-none d-xl-block">
  5422. <div class=" product rounded-1 px-2 py-2 text-start">
  5423. <!-- product image -->
  5424. <a href="./product-details.html">
  5425. <div class="image-container text-center">
  5426. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5427. </div>
  5428. </a>
  5429. <!-- product brand and ratting -->
  5430. <div class="my-2 d-flex flex-wrap align-items-center ">
  5431. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5432. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5433. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5434. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5435. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5436. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5437. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5438. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5439. </div>
  5440. </div>
  5441. <!-- product name -->
  5442. <a href="./product-details.html" class="title text-gray ">
  5443. Clear Kind to skin refreshing
  5444. shampoo
  5445. </a>
  5446. <!-- offer -->
  5447. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5448. Buy 2 Get 1 free
  5449. </p>
  5450. <!-- product price -->
  5451. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5452. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5453. <span class="ms-3 fw-semibold">৳510 </span>
  5454. </div>
  5455. <!-- product price in app -->
  5456. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5457. <span class="fw-semibold">App Price : </span>
  5458. <span class="ms-3 fw-semibold">৳ 484 </span>
  5459. </div>
  5460. <!-- add to cart -->
  5461. <div class="text-center pt-2 pt-lg-3">
  5462. <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">
  5463. <span>
  5464. <img src="./images/icon/Cart_white.svg" alt="">
  5465. </span>
  5466. <span class="add-cart-text ms-2">Add to Cart</span>
  5467. </button>
  5468. </div>
  5469. </div>
  5470. </div>
  5471. </div>
  5472. </div>
  5473. </div>
  5474. <!-- SHOP BY SKIN TYPE -->
  5475. <div class="tab-pane fade" id="shop-by-skin" role="tabpanel" aria-labelledby="shop-by-skin-type-tab">
  5476. 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.
  5477. </div>
  5478. <!-- SHOP BY BRAND -->
  5479. <div class="tab-pane fade" id="shop-by-band" role="tabpanel" aria-labelledby="shop-by-band-tab">
  5480. 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.
  5481. </div>
  5482. </div>
  5483. </div>
  5484. </div>
  5485. </section>
  5486. <!-- discover more -->
  5487. <section id="discover-more" class="my-3">
  5488. <div class="container">
  5489. <div class="row align-items-center border border-1">
  5490. <div class="col-12 col-lg-5">
  5491. <img class="w-100" src="./images/home_page/looking-for-product.png" alt="">
  5492. </div>
  5493. <div class="col-12 col-lg-7 mt-3">
  5494. <div class="title">
  5495. LOOKING FOR PRODUCTS TO PROTECT YOUR SKIN FROM THE SUN THIS SUMMER?
  5496. </div>
  5497. <div class="mt-2 border-image"></div>
  5498. <p class="details mt-3 text-light-gray">
  5499. We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
  5500. </p>
  5501. <div class="mt-5 text-center pb-4 ">
  5502. <a href="#" class="discover-more btn-black px-4 py-3 px-lg-5 py-lg-3 ">
  5503. DISCOVER MORE
  5504. </a>
  5505. </div>
  5506. </div>
  5507. </div>
  5508. </div>
  5509. </section>
  5510. <!-- new arrivals -->
  5511. <section id="new-arrivals" class="my-5 ">
  5512. <div class="container mt-5 position-relative">
  5513. <div class="row">
  5514. <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
  5515. <div class="flex-fill">
  5516. <div class="text-center section-title fw-semibold">NEW ARRIVALS</div>
  5517. <div class="mt-2 mx-auto border-image"></div>
  5518. </div>
  5519. <div class="view-more ">
  5520. <a href="./all-product.html" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
  5521. </div>
  5522. </div>
  5523. </div>
  5524. <div class="row">
  5525. <div class="col-md-3 product-single">
  5526. <div class=" product rounded-1 px-2 py-2 text-start">
  5527. <!-- product image -->
  5528. <a href="./product-details.html">
  5529. <div class="image-container text-center">
  5530. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5531. </div>
  5532. </a>
  5533. <!-- product brand and ratting -->
  5534. <div class="my-2 d-flex flex-wrap align-items-center ">
  5535. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5536. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5537. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5538. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5539. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5540. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5541. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5542. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5543. </div>
  5544. </div>
  5545. <!-- product name -->
  5546. <a href="./product-details.html" class="title">
  5547. Clear Kind to skin refreshing
  5548. shampoo
  5549. </a>
  5550. <!-- offer -->
  5551. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5552. Buy 2 Get 1 free
  5553. </p>
  5554. <!-- product price -->
  5555. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5556. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5557. <span class="ms-3 fw-semibold">৳510 </span>
  5558. </div>
  5559. <!-- product price in app -->
  5560. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5561. <span class="fw-semibold">App Price : </span>
  5562. <span class="ms-3 fw-semibold">৳ 484 </span>
  5563. </div>
  5564. <!-- add to cart -->
  5565. <div class="text-center pt-2 pt-lg-3">
  5566. <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">
  5567. <span>
  5568. <img src="./images/icon/Cart_white.svg" alt="">
  5569. </span>
  5570. <span class="add-cart-text ms-2">Add to Cart</span>
  5571. </button>
  5572. </div>
  5573. </div>
  5574. </div>
  5575. <div class="col-md-3 product-single">
  5576. <div class=" product rounded-1 px-3 py-3 text-start">
  5577. <!-- product image -->
  5578. <a href="./product-details.html">
  5579. <div class="image-container text-center">
  5580. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5581. </div>
  5582. </a>
  5583. <!-- product brand and ratting -->
  5584. <div class="my-2 d-flex flex-wrap align-items-center ">
  5585. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5586. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5587. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5588. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5589. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5590. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5591. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5592. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5593. </div>
  5594. </div>
  5595. <!-- product name -->
  5596. <a href="./product-details.html" class="title">
  5597. Clear Kind to skin refreshing
  5598. shampoo
  5599. </a>
  5600. <!-- offer -->
  5601. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5602. Buy 2 Get 1 free
  5603. </p>
  5604. <!-- product price -->
  5605. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5606. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5607. <span class="ms-3 fw-semibold">৳510 </span>
  5608. </div>
  5609. <!-- product price in app -->
  5610. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5611. <span class="fw-semibold">App Price : </span>
  5612. <span class="ms-3 fw-semibold">৳ 484 </span>
  5613. </div>
  5614. <!-- add to cart -->
  5615. <div class="text-center pt-2 pt-lg-3">
  5616. <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">
  5617. <span>
  5618. <img src="./images/icon/Cart_white.svg" alt="">
  5619. </span>
  5620. <span class="add-cart-text ms-2">Add to Cart</span>
  5621. </button>
  5622. </div>
  5623. </div>
  5624. </div>
  5625. <div class="col-md-3 product-single">
  5626. <div class=" product rounded-1 px-3 py-3 text-start">
  5627. <!-- product image -->
  5628. <a href="./product-details.html">
  5629. <div class="image-container text-center">
  5630. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5631. </div>
  5632. </a>
  5633. <!-- product brand and ratting -->
  5634. <div class="my-2 d-flex flex-wrap align-items-center ">
  5635. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5636. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5637. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5638. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5639. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5640. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5641. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5642. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5643. </div>
  5644. </div>
  5645. <!-- product name -->
  5646. <a href="./product-details.html" class="title">
  5647. Clear Kind to skin refreshing
  5648. shampoo
  5649. </a>
  5650. <!-- offer -->
  5651. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5652. Buy 2 Get 1 free
  5653. </p>
  5654. <!-- product price -->
  5655. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5656. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5657. <span class="ms-3 fw-semibold">৳510 </span>
  5658. </div>
  5659. <!-- product price in app -->
  5660. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5661. <span class="fw-semibold">App Price : </span>
  5662. <span class="ms-3 fw-semibold">৳ 484 </span>
  5663. </div>
  5664. <!-- add to cart -->
  5665. <div class="text-center pt-2 pt-lg-3">
  5666. <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">
  5667. <span>
  5668. <img src="./images/icon/Cart_white.svg" alt="">
  5669. </span>
  5670. <span class="add-cart-text ms-2">Add to Cart</span>
  5671. </button>
  5672. </div>
  5673. </div>
  5674. </div>
  5675. <div class="col-md-3 product-single">
  5676. <div class=" product rounded-1 px-3 py-3 text-start">
  5677. <!-- product image -->
  5678. <a href="./product-details.html">
  5679. <div class="image-container text-center">
  5680. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5681. </div>
  5682. </a>
  5683. <!-- product brand and ratting -->
  5684. <div class="my-2 d-flex flex-wrap align-items-center ">
  5685. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5686. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5687. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5688. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5689. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5690. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5691. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5692. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5693. </div>
  5694. </div>
  5695. <!-- product name -->
  5696. <a href="./product-details.html" class="title">
  5697. Clear Kind to skin refreshing
  5698. shampoo
  5699. </a>
  5700. <!-- offer -->
  5701. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5702. Buy 2 Get 1 free
  5703. </p>
  5704. <!-- product price -->
  5705. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5706. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5707. <span class="ms-3 fw-semibold">৳510 </span>
  5708. </div>
  5709. <!-- product price in app -->
  5710. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5711. <span class="fw-semibold">App Price : </span>
  5712. <span class="ms-3 fw-semibold">৳ 484 </span>
  5713. </div>
  5714. <!-- add to cart -->
  5715. <div class="text-center pt-2 pt-lg-3">
  5716. <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">
  5717. <span>
  5718. <img src="./images/icon/Cart_white.svg" alt="">
  5719. </span>
  5720. <span class="add-cart-text ms-2">Add to Cart</span>
  5721. </button>
  5722. </div>
  5723. </div>
  5724. </div>
  5725. <div class="col-md-3 product-single d-none d-xl-block">
  5726. <div class=" product rounded-1 px-3 py-3 text-start">
  5727. <!-- product image -->
  5728. <a href="./product-details.html">
  5729. <div class="image-container text-center">
  5730. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5731. </div>
  5732. </a>
  5733. <!-- product brand and ratting -->
  5734. <div class="my-2 d-flex flex-wrap align-items-center ">
  5735. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5736. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  5737. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5738. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5739. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5740. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5741. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5742. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5743. </div>
  5744. </div>
  5745. <!-- product name -->
  5746. <a href="./product-details.html" class="title">
  5747. Clear Kind to skin refreshing
  5748. shampoo
  5749. </a>
  5750. <!-- offer -->
  5751. <p class="offer pt-2 pt-xl-3 text-deep-red">
  5752. Buy 2 Get 1 free
  5753. </p>
  5754. <!-- product price -->
  5755. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  5756. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5757. <span class="ms-3 fw-semibold">৳510 </span>
  5758. </div>
  5759. <!-- product price in app -->
  5760. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  5761. <span class="fw-semibold">App Price : </span>
  5762. <span class="ms-3 fw-semibold">৳ 484 </span>
  5763. </div>
  5764. <!-- add to cart -->
  5765. <div class="text-center pt-2 pt-lg-3">
  5766. <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">
  5767. <span>
  5768. <img src="./images/icon/Cart_white.svg" alt="">
  5769. </span>
  5770. <span class="add-cart-text ms-2">Add to Cart</span>
  5771. </button>
  5772. </div>
  5773. </div>
  5774. </div>
  5775. </div>
  5776. </div>
  5777. </section>
  5778. <!-- whats happening -->
  5779. <section id="whats-happening" class="mt-5 ">
  5780. <div class="container">
  5781. <div class="section-title fw-semibold text-center mt-5">
  5782. HERE’S WHATS HAPPENING LIVE
  5783. </div>
  5784. <div class="mt-2 mx-auto border-image"></div>
  5785. <p class="mt-3 section-subtitle text-gray text-center ">
  5786. 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.
  5787. </p>
  5788. <div class=" mt-2 mt-lg-5 row justify-content-between">
  5789. <div class="col-12 col-lg-6 mt-4 mt-lg-0">
  5790. <div class="border border-1 border-light-gray p-3 d-flex">
  5791. <div class="row align-items-center justify-content-center">
  5792. <div class="col-12 col-md-4">
  5793. <div class="picture w-100">
  5794. <img class="w-100" src="./images/home_page/whats-happening-1.png" alt="">
  5795. </div>
  5796. </div>
  5797. <div class="col-12 col-md-8">
  5798. <div class="content px-4 py-2">
  5799. <div class="fs-3 fw-semibold text-center">FACEBOOK LIVE</div>
  5800. <div class="mt-2 mx-auto border-image"></div>
  5801. <p class="mt-2 text-center text-gray">
  5802. Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
  5803. </p>
  5804. <div class="mt-5 text-center">
  5805. <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
  5806. DISCOVER MORE
  5807. </a>
  5808. </div>
  5809. </div>
  5810. </div>
  5811. </div>
  5812. </div>
  5813. </div>
  5814. <div class="col-12 col-lg-6 mt-4 mt-lg-0">
  5815. <div class="border border-1 border-light-gray p-3 d-flex">
  5816. <div class="row align-items-center justify-content-center">
  5817. <div class="col-12 col-md-4">
  5818. <div class="picture w-100">
  5819. <img class="w-100" src="./images/home_page/whats-happening-2.png" alt="">
  5820. </div>
  5821. </div>
  5822. <div class="col-12 col-md-8">
  5823. <div class="content px-4 py-2">
  5824. <div class="fs-3 fw-semibold text-center">WINTER SALE</div>
  5825. <div class="mt-2 mx-auto border-image"></div>
  5826. <p class="mt-2 text-center text-gray">
  5827. Join our facebook live for exclusive tips and beauty secrets along with the chance to win exciting prizes and discount vouchers.
  5828. </p>
  5829. <div class="mt-5 text-center">
  5830. <a href="#" class="discover-more btn-black px-3 py-2 px-lg-4 py-lg-3">
  5831. DISCOVER MORE
  5832. </a>
  5833. </div>
  5834. </div>
  5835. </div>
  5836. </div>
  5837. </div>
  5838. </div>
  5839. </div>
  5840. </div>
  5841. </section>
  5842. <!-- REWARD BAZAAR -->
  5843. <section id="REWARD-BAZAAR" class="my-5">
  5844. <div class="container mt-5 pb-5 pb-lg-0 position-relative">
  5845. <div class="row">
  5846. <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
  5847. <div class="flex-fill">
  5848. <div class="text-center section-title fw-semibold">REWARD BAZAAR</div>
  5849. <div class="mt-2 mx-auto border-image"></div>
  5850. </div>
  5851. <div class="view-more">
  5852. <a href="./all-product.html" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
  5853. </div>
  5854. </div>
  5855. </div>
  5856. <div class="row">
  5857. <div class="col-md-3 product-single">
  5858. <div class=" product rounded-1 px-3 py-3 text-start">
  5859. <a href="./product-details.html">
  5860. <div class="image-container text-center">
  5861. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5862. </div>
  5863. </a>
  5864. <div class="my-2 d-flex flex-wrap align-items-center ">
  5865. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5866. <div class="ms-1 ms-md-2 rating d-flex align-items-start">
  5867. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5868. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5869. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5870. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5871. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5872. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5873. </div>
  5874. </div>
  5875. <a href="./product-details.html" class="title">
  5876. Clear Kind to skin refreshing
  5877. shampoo
  5878. </a>
  5879. <p class="mt-3 text-deep-red small">
  5880. Buy 2 Get 1 free
  5881. </p>
  5882. <!-- product price -->
  5883. <div class="mt-3 price fs-6 text-center ">
  5884. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5885. <span class="ms-3 fw-semibold">৳510 </span>
  5886. </div>
  5887. <!-- product price in app -->
  5888. <div class="mt-3 app-price text-center fs-6 text-deep-red">
  5889. <span class="fw-semibold">App Price : </span>
  5890. <span class="ms-3 fw-semibold">৳ 484 </span>
  5891. </div>
  5892. <div class="text-center mt-3">
  5893. <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">
  5894. <span>
  5895. <img src="./images/icon/Cart_white.svg" alt="">
  5896. </span>
  5897. <span class="add-cart-text ms-2">Add to Cart</span>
  5898. </button>
  5899. </div>
  5900. </div>
  5901. </div>
  5902. <div class="col-md-3 product-single">
  5903. <div class=" product rounded-1 px-3 py-3 text-start">
  5904. <a href="./product-details.html">
  5905. <div class="image-container text-center">
  5906. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5907. </div>
  5908. </a>
  5909. <div class="my-2 d-flex flex-wrap align-items-center ">
  5910. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5911. <div class="ms-1 ms-md-2 rating d-flex align-items-start">
  5912. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5913. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5914. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5915. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5916. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5917. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5918. </div>
  5919. </div>
  5920. <a href="./product-details.html" class="title">
  5921. Clear Kind to skin refreshing
  5922. shampoo
  5923. </a>
  5924. <p class="mt-3 text-deep-red small">
  5925. Buy 2 Get 1 free
  5926. </p>
  5927. <!-- product price -->
  5928. <div class="mt-3 price fs-6 text-center ">
  5929. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5930. <span class="ms-3 fw-semibold">৳510 </span>
  5931. </div>
  5932. <!-- product price in app -->
  5933. <div class="mt-3 app-price text-center fs-6 text-deep-red">
  5934. <span class="fw-semibold">App Price : </span>
  5935. <span class="ms-3 fw-semibold">৳ 484 </span>
  5936. </div>
  5937. <div class="text-center mt-3">
  5938. <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">
  5939. <span>
  5940. <img src="./images/icon/Cart_white.svg" alt="">
  5941. </span>
  5942. <span class="add-cart-text ms-2">Add to Cart</span>
  5943. </button>
  5944. </div>
  5945. </div>
  5946. </div>
  5947. <div class="col-md-3 product-single">
  5948. <div class=" product rounded-1 px-3 py-3 text-start">
  5949. <a href="./product-details.html">
  5950. <div class="image-container text-center">
  5951. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5952. </div>
  5953. </a>
  5954. <div class="my-2 d-flex flex-wrap align-items-center ">
  5955. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  5956. <div class="ms-1 ms-md-2 rating d-flex align-items-start">
  5957. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5958. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5959. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5960. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  5961. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  5962. <div class="rating-count ms-1 ms-md-2">(15)</div>
  5963. </div>
  5964. </div>
  5965. <a href="./product-details.html" class="title">
  5966. Clear Kind to skin refreshing
  5967. shampoo
  5968. </a>
  5969. <p class="mt-3 text-deep-red small">
  5970. Buy 2 Get 1 free
  5971. </p>
  5972. <!-- product price -->
  5973. <div class="mt-3 price fs-6 text-center ">
  5974. <span class="text-decoration-line-through text-light-gray">৳600</span>
  5975. <span class="ms-3 fw-semibold">৳510 </span>
  5976. </div>
  5977. <!-- product price in app -->
  5978. <div class="mt-3 app-price text-center fs-6 text-deep-red">
  5979. <span class="fw-semibold">App Price : </span>
  5980. <span class="ms-3 fw-semibold">৳ 484 </span>
  5981. </div>
  5982. <div class="text-center mt-3">
  5983. <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">
  5984. <span>
  5985. <img src="./images/icon/Cart_white.svg" alt="">
  5986. </span>
  5987. <span class="add-cart-text ms-2">Add to Cart</span>
  5988. </button>
  5989. </div>
  5990. </div>
  5991. </div>
  5992. <div class="col-md-3 product-single">
  5993. <div class=" product rounded-1 px-3 py-3 text-start">
  5994. <a href="./product-details.html">
  5995. <div class="image-container text-center">
  5996. <img class="h-100" src="./images/product_details/product image.png" alt="">
  5997. </div>
  5998. </a>
  5999. <div class="my-2 d-flex flex-wrap align-items-center ">
  6000. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  6001. <div class="ms-1 ms-md-2 rating d-flex align-items-start">
  6002. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6003. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6004. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6005. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6006. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  6007. <div class="rating-count ms-1 ms-md-2">(15)</div>
  6008. </div>
  6009. </div>
  6010. <a href="./product-details.html" class="title">
  6011. Clear Kind to skin refreshing
  6012. shampoo
  6013. </a>
  6014. <p class="mt-3 text-deep-red small">
  6015. Buy 2 Get 1 free
  6016. </p>
  6017. <!-- product price -->
  6018. <div class="mt-3 price fs-6 text-center ">
  6019. <span class="text-decoration-line-through text-light-gray">৳600</span>
  6020. <span class="ms-3 fw-semibold">৳510 </span>
  6021. </div>
  6022. <!-- product price in app -->
  6023. <div class="mt-3 app-price text-center fs-6 text-deep-red">
  6024. <span class="fw-semibold">App Price : </span>
  6025. <span class="ms-3 fw-semibold">৳ 484 </span>
  6026. </div>
  6027. <div class="text-center mt-3">
  6028. <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">
  6029. <span>
  6030. <img src="./images/icon/Cart_white.svg" alt="">
  6031. </span>
  6032. <span class="add-cart-text ms-2">Add to Cart</span>
  6033. </button>
  6034. </div>
  6035. </div>
  6036. </div>
  6037. <div class="col-md-3 product-single d-none d-xl-block">
  6038. <div class=" product rounded-1 px-3 py-3 text-start">
  6039. <a href="./product-details.html">
  6040. <div class="image-container text-center">
  6041. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6042. </div>
  6043. </a>
  6044. <div class="my-2 d-flex flex-wrap align-items-center ">
  6045. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  6046. <div class="ms-1 ms-md-2 rating d-flex align-items-start">
  6047. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6048. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6049. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6050. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6051. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  6052. <div class="rating-count ms-1 ms-md-2">(15)</div>
  6053. </div>
  6054. </div>
  6055. <a href="./product-details.html" class="title">
  6056. Clear Kind to skin refreshing
  6057. shampoo
  6058. </a>
  6059. <p class="mt-3 text-deep-red small">
  6060. Buy 2 Get 1 free
  6061. </p>
  6062. <!-- product price -->
  6063. <div class="mt-3 price fs-6 text-center ">
  6064. <span class="text-decoration-line-through text-light-gray">৳600</span>
  6065. <span class="ms-3 fw-semibold">৳510 </span>
  6066. </div>
  6067. <!-- product price in app -->
  6068. <div class="mt-3 app-price text-center fs-6 text-deep-red">
  6069. <span class="fw-semibold">App Price : </span>
  6070. <span class="ms-3 fw-semibold">৳ 484 </span>
  6071. </div>
  6072. <div class="text-center mt-3">
  6073. <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">
  6074. <span>
  6075. <img src="./images/icon/Cart_white.svg" alt="">
  6076. </span>
  6077. <span class="add-cart-text ms-2">Add to Cart</span>
  6078. </button>
  6079. </div>
  6080. </div>
  6081. </div>
  6082. </div>
  6083. </div>
  6084. </section>
  6085. <!-- heir shine -->
  6086. <section id="heir-shine" class="mt-5 ">
  6087. <div class="container">
  6088. <div class="row align-items-center p-1 p-lg-3 pb-3 border border-1">
  6089. <div class="col-12 col-lg-6 order-1 mt-3 mt-lg-0 order-lg-0">
  6090. <h2>
  6091. HAIRCARE PRODUCTS TO MAKE YOUR HAIR SHINE THIS SEASON
  6092. </h2>
  6093. <div class="mt-2 border-image"></div>
  6094. <p class="mt-3 text-light-gray">
  6095. We've got beauty, all wrapped up. Check out our recommended absolute must haves this winter to take the best care of your
  6096. </p>
  6097. <div class="mt-3 mt-lg-5 text-center">
  6098. <a href="#" class="discover-more btn-black py-2 px-3 py-lg-3 px-lg-4">
  6099. DISCOVER MORE
  6100. </a>
  6101. </div>
  6102. </div>
  6103. <div class="col-12 col-lg-6 order-0 order-lg-1 px-3">
  6104. <img class="w-100" src="./images/home_page/heir-shine.png" alt="">
  6105. </div>
  6106. </div>
  6107. </section>
  6108. <!-- only for you -->
  6109. <section id="only-for-you" class="my-5 ">
  6110. <div class="container mt-5 ">
  6111. <div class=" d-flex align-items-start justify-content-center">
  6112. <div class="flex-fill">
  6113. <div class="text-center section-title fw-semibold">ONLY FOR YOU</div>
  6114. <div class="mt-2 mx-auto border-image"></div>
  6115. <div class="mt-4 text-center section-subtitle text-deep-red">SPECIAL OFFERS</div>
  6116. </div>
  6117. </div>
  6118. <div class="row py-3">
  6119. <div class="col-4">
  6120. <img class="w-100" src="./images/home_page/only-for-you-1.png" alt="">
  6121. </div>
  6122. <div class="col-4">
  6123. <img class="w-100" src="./images/home_page/only-for-you-2.png" alt="">
  6124. </div>
  6125. <div class="col-4">
  6126. <img class="w-100" src="./images/home_page/only-for-you-3.png" alt="">
  6127. </div>
  6128. </div>
  6129. </div>
  6130. </section>
  6131. <!-- featured brands sliders -->
  6132. <section id="featured-brands" class="mt-3 py-3">
  6133. <div class="container ">
  6134. <div class="text-center section-title fw-semibold">FEATURED BRANDS</div>
  6135. <div class="mt-1 mx-auto border-image"></div>
  6136. <div class="mt-4 position-relative">
  6137. <div class="swiper featuredBrands">
  6138. <div class="swiper-wrapper">
  6139. <div class="swiper-slide">
  6140. <a href="#">
  6141. <img src="./images/home_page/feature-brands-1.png" alt="">
  6142. </a>
  6143. </div>
  6144. <div class="swiper-slide">
  6145. <a href="#">
  6146. <img src="./images/home_page/feature-brands-2.png" alt="">
  6147. </a>
  6148. </div>
  6149. <div class="swiper-slide">
  6150. <a href="#">
  6151. <img src="./images/home_page/feature-brands-3.png" alt="">
  6152. </a>
  6153. </div>
  6154. <div class="swiper-slide">
  6155. <a href="#">
  6156. <img src="./images/home_page/feature-brands-4.png" alt="">
  6157. </a>
  6158. </div>
  6159. <div class="swiper-slide">
  6160. <a href="#">
  6161. <img src="./images/home_page/feature-brands-1.png" alt="">
  6162. </a>
  6163. </div>
  6164. <div class="swiper-slide">
  6165. <a href="#">
  6166. <img src="./images/home_page/feature-brands-2.png" alt="">
  6167. </a>
  6168. </div>
  6169. <div class="swiper-slide">
  6170. <a href="#">
  6171. <img src="./images/home_page/feature-brands-3.png" alt="">
  6172. </a>
  6173. </div>
  6174. <div class="swiper-slide">
  6175. <a href="#">
  6176. <img src="./images/home_page/feature-brands-4.png" alt="">
  6177. </a>
  6178. </div>
  6179. </div>
  6180. </div>
  6181. </div>
  6182. </div>
  6183. </section>
  6184. <!-- trending stories -->
  6185. <section id="trending-stories" class="mt-5 ">
  6186. <div class="container mt-5 ">
  6187. <div class="text-center section-title fw-semibold">TRENDING STORIES</div>
  6188. <div class="mt-1 mx-auto border-image"></div>
  6189. <div class="mt-2 text-center fs-4 text-gray">ON THE BLOG</div>
  6190. <div class="swiper trendingStories">
  6191. <div class="swiper-wrapper">
  6192. <div class="swiper-slide">
  6193. <div class="trending-container ">
  6194. <div class="image-container">
  6195. <a href="#">
  6196. <img class="w-100" src="./images/home_page/trending-1.png" alt="">
  6197. </a>
  6198. </div>
  6199. <div class="content-details text-start px-2 py-4">
  6200. <div class="category-link">
  6201. <a class="text-deep-red" href="#">Lifestyle</a>
  6202. </div>
  6203. <div class="blog-link mt-3">
  6204. <a class="mt-3 text-gray fs-4" href="#">
  6205. USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
  6206. </a>
  6207. </div>
  6208. <p class="mt-3 text-light-gray fs-6">
  6209. নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
  6210. </p>
  6211. <p class="date text-light-gray mt-3">26 Nov 2022</p>
  6212. <div class="mt-3 read-more">
  6213. <a class="text-deep-red fs-4" href="#">Read More </a>
  6214. </div>
  6215. </div>
  6216. </div>
  6217. </div>
  6218. <div class="swiper-slide">
  6219. <div class="trending-container ">
  6220. <div class="image-container">
  6221. <a href="#">
  6222. <img class="w-100" src="./images/home_page/trending-2.png" alt="">
  6223. </a>
  6224. </div>
  6225. <div class="content-details text-start px-2 py-4">
  6226. <div class="category-link">
  6227. <a class="text-deep-red" href="#">Lifestyle</a>
  6228. </div>
  6229. <div class="blog-link mt-3">
  6230. <a class="mt-3 text-gray fs-4" href="#">
  6231. USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
  6232. </a>
  6233. </div>
  6234. <p class="mt-3 text-light-gray fs-6">
  6235. নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
  6236. </p>
  6237. <p class="date text-light-gray mt-3">26 Nov 2022</p>
  6238. <div class="mt-3 read-more">
  6239. <a class="text-deep-red fs-4" href="#">Read More </a>
  6240. </div>
  6241. </div>
  6242. </div>
  6243. </div>
  6244. <div class="swiper-slide">
  6245. <div class="trending-container ">
  6246. <div class="image-container">
  6247. <a href="#">
  6248. <img class="w-100" src="./images/home_page/trending-3.png" alt="">
  6249. </a>
  6250. </div>
  6251. <div class="content-details text-start px-2 py-4">
  6252. <div class="category-link">
  6253. <a class="text-deep-red" href="#">Lifestyle</a>
  6254. </div>
  6255. <div class="blog-link mt-3">
  6256. <a class="mt-3 text-gray fs-4" href="#">
  6257. USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
  6258. </a>
  6259. </div>
  6260. <p class="mt-3 text-light-gray fs-6">
  6261. নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
  6262. </p>
  6263. <p class="date text-light-gray mt-3">26 Nov 2022</p>
  6264. <div class="mt-3 read-more">
  6265. <a class="text-deep-red fs-4" href="#">Read More </a>
  6266. </div>
  6267. </div>
  6268. </div>
  6269. </div>
  6270. <div class="swiper-slide">
  6271. <div class="trending-container p-2">
  6272. <div class="image-container">
  6273. <a href="#">
  6274. <img class="w-100" src="./images/home_page/trending-1.png" alt="">
  6275. </a>
  6276. </div>
  6277. <div class="content-details text-start px-2 py-4">
  6278. <div class="category-link">
  6279. <a class="text-deep-red" href="#">Lifestyle</a>
  6280. </div>
  6281. <div class="blog-link mt-3">
  6282. <a class="mt-3 text-gray fs-4" href="#">
  6283. USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
  6284. </a>
  6285. </div>
  6286. <p class="mt-3 text-light-gray fs-6">
  6287. নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
  6288. </p>
  6289. <p class="date text-light-gray mt-3">26 Nov 2022</p>
  6290. <div class="mt-3 read-more">
  6291. <a class="text-deep-red fs-4" href="#">Read More </a>
  6292. </div>
  6293. </div>
  6294. </div>
  6295. </div>
  6296. <div class="swiper-slide">
  6297. <div class="trending-container p-2">
  6298. <div class="image-container">
  6299. <a href="#">
  6300. <img class="w-100" src="./images/home_page/trending-2.png" alt="">
  6301. </a>
  6302. </div>
  6303. <div class="content-details text-start px-2 py-4">
  6304. <div class="category-link">
  6305. <a class="text-deep-red" href="#">Lifestyle</a>
  6306. </div>
  6307. <div class="blog-link mt-3">
  6308. <a class="mt-3 text-gray fs-4" href="#">
  6309. USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
  6310. </a>
  6311. </div>
  6312. <p class="mt-3 text-light-gray fs-6">
  6313. নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
  6314. </p>
  6315. <p class="date text-light-gray mt-3">26 Nov 2022</p>
  6316. <div class="mt-3 read-more">
  6317. <a class="text-deep-red fs-4" href="#">Read More </a>
  6318. </div>
  6319. </div>
  6320. </div>
  6321. </div>
  6322. <div class="swiper-slide">
  6323. <div class="trending-container p-2">
  6324. <div class="image-container">
  6325. <a href="#">
  6326. <img class="w-100" src="./images/home_page/trending-3.png" alt="">
  6327. </a>
  6328. </div>
  6329. <div class="content-details text-start px-2 py-4">
  6330. <div class="category-link">
  6331. <a class="text-deep-red" href="#">Lifestyle</a>
  6332. </div>
  6333. <div class="blog-link mt-3">
  6334. <a class="mt-3 text-gray fs-4" href="#">
  6335. USES THE RIGHT SUNSCREEN FOR YOUR SKIN TYPE
  6336. </a>
  6337. </div>
  6338. <p class="mt-3 text-light-gray fs-6">
  6339. নভেম্বর মানে সামনে এক মাসব্যাপী ব্ল্যাক ফ্রাইডে ডিল।
  6340. </p>
  6341. <p class="date text-light-gray mt-3">26 Nov 2022</p>
  6342. <div class="mt-3 read-more">
  6343. <a class="text-deep-red fs-4" href="#">Read More </a>
  6344. </div>
  6345. </div>
  6346. </div>
  6347. </div>
  6348. </div>
  6349. <!-- <div class="swiper-button-next"></div>
  6350. <div class="swiper-button-prev"></div> -->
  6351. </div>
  6352. </div>
  6353. </section>
  6354. <!-- find on instagram -->
  6355. <section id="find-on-instagram" class="my-2 pb-3">
  6356. <div class="container ">
  6357. <div class="text-center section-title fw-semibold">FIND US ON INSTAGRAM</div>
  6358. <div class="mt-1 mx-auto border-image"></div>
  6359. <div class="mt-3 py-3 image-container">
  6360. <img class="w-100" src="./images/home_page/find-on instragram.png" alt="">
  6361. </div>
  6362. </div>
  6363. </section>
  6364. <!-- recently viewed -->
  6365. <section id="recently-viewed" class="my-5 ">
  6366. <div class="container mt-5 pb-5 pb-lg-0 position-relative ">
  6367. <div class="row">
  6368. <div class="d-flex align-items-start justify-content-center justify-content-lg-end">
  6369. <div class="flex-fill">
  6370. <div class="text-center section-title fw-semibold">RECENTLY VIEWED</div>
  6371. <div class="mt-2 mx-auto border-image"></div>
  6372. </div>
  6373. <div class="view-more">
  6374. <a href="./all-product.html" class="view-all btn-black-outline fw-semibold ">VIEW ALL</a>
  6375. </div>
  6376. </div>
  6377. </div>
  6378. <div class="row">
  6379. <div class="col-md-3 product-single">
  6380. <div class=" product rounded-1 px-3 py-3 text-start">
  6381. <!-- product image -->
  6382. <a href="./product-details.html">
  6383. <div class="image-container text-center">
  6384. <img class="h-100" src="./images/product_details/also-product.png" alt="">
  6385. </div>
  6386. </a>
  6387. <!-- product brand and ratting -->
  6388. <div class="my-2 d-flex flex-wrap align-items-center ">
  6389. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  6390. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  6391. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6392. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6393. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6394. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6395. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  6396. <div class="rating-count ms-1 ms-md-2">(15)</div>
  6397. </div>
  6398. </div>
  6399. <!-- product name -->
  6400. <a href="./product-details.html" class="title">
  6401. Clear Kind to skin refreshing
  6402. shampoo
  6403. </a>
  6404. <!-- offer -->
  6405. <p class="offer pt-2 pt-xl-3 text-deep-red">
  6406. Buy 2 Get 1 free
  6407. </p>
  6408. <!-- product price -->
  6409. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  6410. <span class="text-decoration-line-through text-light-gray">৳600</span>
  6411. <span class="ms-3 fw-semibold">৳510 </span>
  6412. </div>
  6413. <!-- product price in app -->
  6414. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  6415. <span class="fw-semibold">App Price : </span>
  6416. <span class="ms-3 fw-semibold">৳ 484 </span>
  6417. </div>
  6418. <!-- add to cart -->
  6419. <div class="text-center pt-2 pt-lg-3">
  6420. <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">
  6421. <span>
  6422. <img src="./images/icon/Cart_white.svg" alt="">
  6423. </span>
  6424. <span class="add-cart-text ms-2">Add to Cart</span>
  6425. </button>
  6426. </div>
  6427. </div>
  6428. </div>
  6429. <div class="col-md-3 product-single">
  6430. <div class=" product rounded-1 px-3 py-3 text-start">
  6431. <!-- product image -->
  6432. <a href="./product-details.html">
  6433. <div class="image-container text-center">
  6434. <img class="h-100" src="./images/product_details/also-product.png" alt="">
  6435. </div>
  6436. </a>
  6437. <!-- product brand and ratting -->
  6438. <div class="my-2 d-flex flex-wrap align-items-center ">
  6439. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  6440. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  6441. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6442. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6443. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6444. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6445. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  6446. <div class="rating-count ms-1 ms-md-2">(15)</div>
  6447. </div>
  6448. </div>
  6449. <!-- product name -->
  6450. <a href="./product-details.html" class="title">
  6451. Clear Kind to skin refreshing
  6452. shampoo
  6453. </a>
  6454. <!-- offer -->
  6455. <p class="offer pt-2 pt-xl-3 text-deep-red">
  6456. Buy 2 Get 1 free
  6457. </p>
  6458. <!-- product price -->
  6459. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  6460. <span class="text-decoration-line-through text-light-gray">৳600</span>
  6461. <span class="ms-3 fw-semibold">৳510 </span>
  6462. </div>
  6463. <!-- product price in app -->
  6464. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  6465. <span class="fw-semibold">App Price : </span>
  6466. <span class="ms-3 fw-semibold">৳ 484 </span>
  6467. </div>
  6468. <!-- add to cart -->
  6469. <div class="text-center pt-2 pt-lg-3">
  6470. <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">
  6471. <span>
  6472. <img src="./images/icon/Cart_white.svg" alt="">
  6473. </span>
  6474. <span class="add-cart-text ms-2">Add to Cart</span>
  6475. </button>
  6476. </div>
  6477. </div>
  6478. </div>
  6479. <div class="col-md-3 product-single">
  6480. <div class=" product rounded-1 px-3 py-3 text-start">
  6481. <!-- product image -->
  6482. <a href="./product-details.html">
  6483. <div class="image-container text-center">
  6484. <img class="h-100" src="./images/product_details/also-product.png" alt="">
  6485. </div>
  6486. </a>
  6487. <!-- product brand and ratting -->
  6488. <div class="my-2 d-flex flex-wrap align-items-center ">
  6489. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  6490. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  6491. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6492. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6493. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6494. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6495. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  6496. <div class="rating-count ms-1 ms-md-2">(15)</div>
  6497. </div>
  6498. </div>
  6499. <!-- product name -->
  6500. <a href="./product-details.html" class="title">
  6501. Clear Kind to skin refreshing
  6502. shampoo
  6503. </a>
  6504. <!-- offer -->
  6505. <p class="offer pt-2 pt-xl-3 text-deep-red">
  6506. Buy 2 Get 1 free
  6507. </p>
  6508. <!-- product price -->
  6509. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  6510. <span class="text-decoration-line-through text-light-gray">৳600</span>
  6511. <span class="ms-3 fw-semibold">৳510 </span>
  6512. </div>
  6513. <!-- product price in app -->
  6514. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  6515. <span class="fw-semibold">App Price : </span>
  6516. <span class="ms-3 fw-semibold">৳ 484 </span>
  6517. </div>
  6518. <!-- add to cart -->
  6519. <div class="text-center pt-2 pt-lg-3">
  6520. <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">
  6521. <span>
  6522. <img src="./images/icon/Cart_white.svg" alt="">
  6523. </span>
  6524. <span class="add-cart-text ms-2">Add to Cart</span>
  6525. </button>
  6526. </div>
  6527. </div>
  6528. </div>
  6529. <div class="col-md-3 product-single">
  6530. <div class=" product rounded-1 px-3 py-3 text-start">
  6531. <!-- product image -->
  6532. <a href="./product-details.html">
  6533. <div class="image-container text-center">
  6534. <img class="h-100" src="./images/product_details/also-product.png" alt="">
  6535. </div>
  6536. </a>
  6537. <!-- product brand and ratting -->
  6538. <div class="my-2 d-flex flex-wrap align-items-center ">
  6539. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  6540. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  6541. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6542. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6543. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6544. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6545. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  6546. <div class="rating-count ms-1 ms-md-2">(15)</div>
  6547. </div>
  6548. </div>
  6549. <!-- product name -->
  6550. <a href="./product-details.html" class="title">
  6551. Clear Kind to skin refreshing
  6552. shampoo
  6553. </a>
  6554. <!-- offer -->
  6555. <p class="offer pt-2 pt-xl-3 text-deep-red">
  6556. Buy 2 Get 1 free
  6557. </p>
  6558. <!-- product price -->
  6559. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  6560. <span class="text-decoration-line-through text-light-gray">৳600</span>
  6561. <span class="ms-3 fw-semibold">৳510 </span>
  6562. </div>
  6563. <!-- product price in app -->
  6564. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  6565. <span class="fw-semibold">App Price : </span>
  6566. <span class="ms-3 fw-semibold">৳ 484 </span>
  6567. </div>
  6568. <!-- add to cart -->
  6569. <div class="text-center pt-2 pt-lg-3">
  6570. <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">
  6571. <span>
  6572. <img src="./images/icon/Cart_white.svg" alt="">
  6573. </span>
  6574. <span class="add-cart-text ms-2">Add to Cart</span>
  6575. </button>
  6576. </div>
  6577. </div>
  6578. </div>
  6579. <div class="col-md-3 product-single d-none d-xl-block">
  6580. <div class=" product rounded-1 px-3 py-3 text-start">
  6581. <!-- product image -->
  6582. <a href="./product-details.html">
  6583. <div class="image-container text-center">
  6584. <img class="h-100" src="./images/product_details/also-product.png" alt="">
  6585. </div>
  6586. </a>
  6587. <!-- product brand and ratting -->
  6588. <div class="my-2 d-flex flex-wrap align-items-center ">
  6589. <a href="#" class="brand-title text-deep-red fw-bold fs-6">Clear</a>
  6590. <div class="ms-1 ms-lg-2 rating d-flex align-items-start">
  6591. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6592. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6593. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6594. <img class="ms-0 rating-icon" src="./images/icon/star_full.svg" alt="">
  6595. <img class="ms-0 rating-icon" src="./images/icon/star_empty.svg" alt="">
  6596. <div class="rating-count ms-1 ms-md-2">(15)</div>
  6597. </div>
  6598. </div>
  6599. <!-- product name -->
  6600. <a href="./product-details.html" class="title">
  6601. Clear Kind to skin refreshing
  6602. shampoo
  6603. </a>
  6604. <!-- offer -->
  6605. <p class="offer pt-2 pt-xl-3 text-deep-red">
  6606. Buy 2 Get 1 free
  6607. </p>
  6608. <!-- product price -->
  6609. <div class=" pt-md-2 pt-xl-3 price fs-6 text-center ">
  6610. <span class="text-decoration-line-through text-light-gray">৳600</span>
  6611. <span class="ms-3 fw-semibold">৳510 </span>
  6612. </div>
  6613. <!-- product price in app -->
  6614. <div class=" pt-md-2 pt-xl-3 app-price text-center fs-6 text-deep-red">
  6615. <span class="fw-semibold">App Price : </span>
  6616. <span class="ms-3 fw-semibold">৳ 484 </span>
  6617. </div>
  6618. <!-- add to cart -->
  6619. <div class="text-center pt-2 pt-lg-3">
  6620. <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">
  6621. <span>
  6622. <img src="./images/icon/Cart_white.svg" alt="">
  6623. </span>
  6624. <span class="add-cart-text ms-2">Add to Cart</span>
  6625. </button>
  6626. </div>
  6627. </div>
  6628. </div>
  6629. </div>
  6630. </div>
  6631. </section>
  6632. <!-- show off -->
  6633. <section id="show-off">
  6634. <img class="w-100" src="./images/home_page/show-off.jpg" alt="">
  6635. </section>
  6636. <!-- All Links -->
  6637. <section id="all-link" class="mt-5 py-5">
  6638. <div class="container">
  6639. <div class="link-group mt-2">
  6640. <h4 class="title text-center text-deep-red fw-normal">MAKEUP</h4>
  6641. <div class="links mt-3 px-3">
  6642. <nav aria-label="breadcrumb">
  6643. <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
  6644. <li class="breadcrumb-item"><a href="#">Home</a></li>
  6645. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6646. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6647. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6648. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6649. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6650. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6651. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6652. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6653. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6654. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6655. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6656. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6657. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6658. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6659. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6660. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6661. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6662. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6663. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6664. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6665. </ol>
  6666. </nav>
  6667. </div>
  6668. </div>
  6669. <div class="link-group mt-4">
  6670. <h4 class="title text-center text-deep-red fw-normal">SKIN</h4>
  6671. <div class="links mt-3 px-3">
  6672. <nav aria-label="breadcrumb">
  6673. <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
  6674. <li class="breadcrumb-item"><a href="#">Home</a></li>
  6675. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6676. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6677. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6678. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6679. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6680. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6681. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6682. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6683. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6684. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6685. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6686. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6687. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6688. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6689. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6690. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6691. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6692. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6693. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6694. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6695. </ol>
  6696. </nav>
  6697. </div>
  6698. </div>
  6699. <div class="link-group mt-4">
  6700. <h4 class="title text-center text-deep-red fw-normal">WELLNESS</h4>
  6701. <div class="links mt-3 px-3">
  6702. <nav aria-label="breadcrumb">
  6703. <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
  6704. <li class="breadcrumb-item"><a href="#">Home</a></li>
  6705. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6706. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6707. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6708. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6709. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6710. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6711. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6712. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6713. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6714. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6715. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6716. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6717. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6718. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6719. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6720. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6721. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6722. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6723. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6724. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6725. </ol>
  6726. </nav>
  6727. </div>
  6728. </div>
  6729. <div class="link-group mt-4">
  6730. <h4 class="title text-center text-deep-red fw-normal">COLLECTION</h4>
  6731. <div class="links mt-3 px-3">
  6732. <nav aria-label="breadcrumb">
  6733. <ol class="breadcrumb text-gray d-flex flex-wrap justify-content-center">
  6734. <li class="breadcrumb-item"><a href="#">Home</a></li>
  6735. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6736. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6737. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6738. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6739. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6740. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6741. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6742. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6743. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6744. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6745. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6746. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6747. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6748. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6749. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6750. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6751. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6752. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6753. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6754. <li class="breadcrumb-item"><a href="#">Library</a></li>
  6755. </ol>
  6756. </nav>
  6757. </div>
  6758. </div>
  6759. </div>
  6760. </section>
  6761. <!-- checkout sidebar-->
  6762. <section id="checkout" class="checkout-container position-fixed bg-white pb-5 pt-2">
  6763. <div class="cart-product-container px-3 pt-2 pb-5">
  6764. <!-- cart header -->
  6765. <div class="title-container border-bottom border-1 border-extralight-gray pt-3 d-flex align-items-start justify-content-between">
  6766. <h4 >CART</h4>
  6767. <button class="cross-btn btn">
  6768. <img src="./images/icon/cross-icon.svg" alt="">
  6769. </button>
  6770. </div>
  6771. <!-- cart item -->
  6772. <div class="cart-items mt-3">
  6773. <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
  6774. <div class="d-flex justify-content-between">
  6775. <div class="item-details d-flex">
  6776. <div class="img-container">
  6777. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6778. </div>
  6779. <div class="pt-2 ">
  6780. <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
  6781. <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
  6782. </div>
  6783. </div>
  6784. <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
  6785. <div class=" quantity text-center" >
  6786. <div class="title text-gray small">QTY</div>
  6787. <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
  6788. </div>
  6789. </div>
  6790. </div>
  6791. <div class="price text-end mt-3 fs-5">
  6792. <span class="text-gray text-decoration-line-through">৳ 550</span>
  6793. <span class="ms-3 text-gray">৳ 440</span>
  6794. </div>
  6795. <button class="btn delete-btn position-absolute">
  6796. <img src="./images/icon/delete-icon.svg" alt="">
  6797. </button>
  6798. </div>
  6799. <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
  6800. <div class="d-flex justify-content-between">
  6801. <div class="item-details d-flex">
  6802. <div class="img-container">
  6803. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6804. </div>
  6805. <div class="pt-2 ">
  6806. <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
  6807. <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
  6808. </div>
  6809. </div>
  6810. <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
  6811. <div class=" quantity text-center" >
  6812. <div class="title text-gray small">QTY</div>
  6813. <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
  6814. </div>
  6815. </div>
  6816. </div>
  6817. <div class="price text-end mt-3 fs-5">
  6818. <span class="text-gray text-decoration-line-through">৳ 550</span>
  6819. <span class="ms-3 text-gray">৳ 440</span>
  6820. </div>
  6821. <button class="btn delete-btn position-absolute">
  6822. <img src="./images/icon/delete-icon.svg" alt="">
  6823. </button>
  6824. </div>
  6825. <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
  6826. <div class="d-flex justify-content-between">
  6827. <div class="item-details d-flex">
  6828. <div class="img-container">
  6829. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6830. </div>
  6831. <div class="pt-2 ">
  6832. <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
  6833. <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
  6834. </div>
  6835. </div>
  6836. <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
  6837. <div class=" quantity text-center" >
  6838. <div class="title text-gray small">QTY</div>
  6839. <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
  6840. </div>
  6841. </div>
  6842. </div>
  6843. <div class="price text-end mt-3 fs-5">
  6844. <span class="text-gray text-decoration-line-through">৳ 550</span>
  6845. <span class="ms-3 text-gray">৳ 440</span>
  6846. </div>
  6847. <button class="btn delete-btn position-absolute">
  6848. <img src="./images/icon/delete-icon.svg" alt="">
  6849. </button>
  6850. </div>
  6851. <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
  6852. <div class="d-flex justify-content-between">
  6853. <div class="item-details d-flex">
  6854. <div class="img-container">
  6855. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6856. </div>
  6857. <div class="pt-2 ">
  6858. <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
  6859. <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
  6860. </div>
  6861. </div>
  6862. <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
  6863. <div class=" quantity text-center" >
  6864. <div class="title text-gray small">QTY</div>
  6865. <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
  6866. </div>
  6867. </div>
  6868. </div>
  6869. <div class="price text-end mt-3 fs-5">
  6870. <span class="text-gray text-decoration-line-through">৳ 550</span>
  6871. <span class="ms-3 text-gray">৳ 440</span>
  6872. </div>
  6873. <button class="btn delete-btn position-absolute">
  6874. <img src="./images/icon/delete-icon.svg" alt="">
  6875. </button>
  6876. </div>
  6877. <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
  6878. <div class="d-flex justify-content-between">
  6879. <div class="item-details d-flex">
  6880. <div class="img-container">
  6881. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6882. </div>
  6883. <div class="pt-2 ">
  6884. <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
  6885. <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
  6886. </div>
  6887. </div>
  6888. <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
  6889. <div class=" quantity text-center" >
  6890. <div class="title text-gray small">QTY</div>
  6891. <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
  6892. </div>
  6893. </div>
  6894. </div>
  6895. <div class="price text-end mt-3 fs-5">
  6896. <span class="text-gray text-decoration-line-through">৳ 550</span>
  6897. <span class="ms-3 text-gray">৳ 440</span>
  6898. </div>
  6899. <button class="btn delete-btn position-absolute">
  6900. <img src="./images/icon/delete-icon.svg" alt="">
  6901. </button>
  6902. </div>
  6903. <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
  6904. <div class="d-flex justify-content-between">
  6905. <div class="item-details d-flex">
  6906. <div class="img-container">
  6907. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6908. </div>
  6909. <div class="pt-2 ">
  6910. <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
  6911. <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
  6912. </div>
  6913. </div>
  6914. <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
  6915. <div class=" quantity text-center" >
  6916. <div class="title text-gray small">QTY</div>
  6917. <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
  6918. </div>
  6919. </div>
  6920. </div>
  6921. <div class="price text-end mt-3 fs-5">
  6922. <span class="text-gray text-decoration-line-through">৳ 550</span>
  6923. <span class="ms-3 text-gray">৳ 440</span>
  6924. </div>
  6925. <button class="btn delete-btn position-absolute">
  6926. <img src="./images/icon/delete-icon.svg" alt="">
  6927. </button>
  6928. </div>
  6929. <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
  6930. <div class="d-flex justify-content-between">
  6931. <div class="item-details d-flex">
  6932. <div class="img-container">
  6933. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6934. </div>
  6935. <div class="pt-2 ">
  6936. <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
  6937. <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
  6938. </div>
  6939. </div>
  6940. <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
  6941. <div class=" quantity text-center" >
  6942. <div class="title text-gray small">QTY</div>
  6943. <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
  6944. </div>
  6945. </div>
  6946. </div>
  6947. <div class="price text-end mt-3 fs-5">
  6948. <span class="text-gray text-decoration-line-through">৳ 550</span>
  6949. <span class="ms-3 text-gray">৳ 440</span>
  6950. </div>
  6951. <button class="btn delete-btn position-absolute">
  6952. <img src="./images/icon/delete-icon.svg" alt="">
  6953. </button>
  6954. </div>
  6955. <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
  6956. <div class="d-flex justify-content-between">
  6957. <div class="item-details d-flex">
  6958. <div class="img-container">
  6959. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6960. </div>
  6961. <div class="pt-2 ">
  6962. <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
  6963. <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
  6964. </div>
  6965. </div>
  6966. <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
  6967. <div class=" quantity text-center" >
  6968. <div class="title text-gray small">QTY</div>
  6969. <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
  6970. </div>
  6971. </div>
  6972. </div>
  6973. <div class="price text-end mt-3 fs-5">
  6974. <span class="text-gray text-decoration-line-through">৳ 550</span>
  6975. <span class="ms-3 text-gray">৳ 440</span>
  6976. </div>
  6977. <button class="btn delete-btn position-absolute">
  6978. <img src="./images/icon/delete-icon.svg" alt="">
  6979. </button>
  6980. </div>
  6981. <div class="item position-relative mt-2 rounded-2 px-2 pt-3 pb-2">
  6982. <div class="d-flex justify-content-between">
  6983. <div class="item-details d-flex">
  6984. <div class="img-container">
  6985. <img class="h-100" src="./images/product_details/product image.png" alt="">
  6986. </div>
  6987. <div class="pt-2 ">
  6988. <h5 class="product-title text-dark">Sunsilk CLEAR MAN</h5>
  6989. <div class="product-details mt-2 text-gray">Sunsilk Lusciously Thick...</div>
  6990. </div>
  6991. </div>
  6992. <div class="quantity-container mt-5 me-3 d-flex justify-content-end align-content-end">
  6993. <div class=" quantity text-center" >
  6994. <div class="title text-gray small">QTY</div>
  6995. <div class="px-1 pt-1 border border-1 border-extralight-black">1</div>
  6996. </div>
  6997. </div>
  6998. </div>
  6999. <div class="price text-end mt-3 fs-5">
  7000. <span class="text-gray text-decoration-line-through">৳ 550</span>
  7001. <span class="ms-3 text-gray">৳ 440</span>
  7002. </div>
  7003. <button class="btn delete-btn position-absolute">
  7004. <img src="./images/icon/delete-icon.svg" alt="">
  7005. </button>
  7006. </div>
  7007. </div>
  7008. </div>
  7009. <!-- proced button and utility -->
  7010. <div class="content position-relative w-100">
  7011. <div class="proceed-button-container position-fixed bg-white bottom-0 px-2 py-3 d-flex align-items-center justify-content-between">
  7012. <div class="text-center w-50">
  7013. <div class="fw-normal">SUBTOTAL</div>
  7014. <div class="fw-semibold">৳1,550</div>
  7015. </div>
  7016. <div class="text-center w-50">
  7017. <a href="./checkout.html" class="btn rounded-0 bg-pink text-white py-2 px-3 fs-5 fw-semibold">
  7018. PROCEED
  7019. </a>
  7020. </div>
  7021. </div>
  7022. </div>
  7023. </section>
  7024. <!-- checkout sidebar navigation button -->
  7025. <div id="checkout-button" >
  7026. <!-- checkout navigation button for desktop -->
  7027. <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">
  7028. <img class="checkout-icon" src="./images/icon/shoping bag.svg" alt="">
  7029. <!-- items count -->
  7030. <p class="count mt-2 text-black small">
  7031. <span>5</span>
  7032. <span>items</span>
  7033. </p>
  7034. <!-- price -->
  7035. <p class="price text-black text-deep-red">4540</p>
  7036. </button>
  7037. <!-- checkout navigation button for mobile -->
  7038. <div id="checkout-btn-mobile" class="d-block">
  7039. <div class="checkout-mobile d-flex position-fixed bottom-0 start-0 d-block d-lg-none shadow-sm" >
  7040. <a class="border-0 py-2 bg-pink-extralight w-50 text-center" href="./checkout.html">
  7041. <div class="cart-details position-relative mx-auto">
  7042. <span class="badge bg-red-deep rounded-circle fw-light text-white ">10</span>
  7043. <!-- total -->
  7044. <span class="total position-absolute text-deep-red">
  7045. 500000 ৳
  7046. </span>
  7047. </div>
  7048. </a>
  7049. <!-- checkout nav button -->
  7050. <button class="check-button checkout-product-btn-mobile border-0 py-2 bg-pink w-50 text-white fs-5">
  7051. Go To Checkout
  7052. </button>
  7053. </div>
  7054. </div>
  7055. </div>
  7056. </div>
  7057. <!-- footer -->
  7058. <section id="footer" class=" bg-dark text-white mt-5">
  7059. <div class="container py-5">
  7060. <div class="row footer-border-bottom justify-content-evenly">
  7061. <div class="col-12 col-lg-4">
  7062. <div class="py-2 footer-comp-title h3 text-center">
  7063. BECOME AN INSIDER
  7064. </div>
  7065. <form class="mt-2 text-center" action="">
  7066. <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">
  7067. </form>
  7068. <div class="social mt-5 mb-5">
  7069. <div class="footer-comp-title h3 text-center">
  7070. FOLLOW US ON
  7071. </div>
  7072. <ul class="mt-4 d-flex justify-content-center align-items-center">
  7073. <li>
  7074. <a href="#">
  7075. <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-facebook.svg" alt="">
  7076. </a>
  7077. </li>
  7078. <li>
  7079. <a href="#">
  7080. <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-twitter.svg" alt="">
  7081. </a>
  7082. </li>
  7083. <li>
  7084. <a href="#">
  7085. <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-insta.svg" alt="">
  7086. </a>
  7087. </li>
  7088. <li>
  7089. <a href="#">
  7090. <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-pinterest.svg" alt="">
  7091. </a>
  7092. </li>
  7093. <li>
  7094. <a href="#">
  7095. <img class="social-icon mx-3 mx-md-4" src="./images/icon/footer-youtube.svg" alt="">
  7096. </a>
  7097. </li>
  7098. </ul>
  7099. <p class="mt-4 fw-light fs-5 text-center">hr@themallbd.com</p>
  7100. </div>
  7101. </div>
  7102. <div class="col-12 col-lg-6">
  7103. <div class="row justify-content-between">
  7104. <div class="col-6 col-md-5 mb-5">
  7105. <div class="py-2 mb-3 footer-comp-title footer-border-bottom h3 ">HELP</div>
  7106. <ul>
  7107. <li class="mb-2"><a href="#">ORDER</a></li>
  7108. <li class="mb-2"><a href="#">DELIVERY</a></li>
  7109. <li class="mb-2"><a href="#">RETUTRNS</a></li>
  7110. <li class="mb-2"><a href="#">COOKIE POLICY</a></li>
  7111. <li class="mb-2"><a href="#">CUSTOMER SUPPORT</a></li>
  7112. <li class="mb-2"><a href="#">VIP PRIVILEGES</a></li>
  7113. <li class="mb-2"><a href="#">HOW TO BECOME A VIP</a></li>
  7114. <li class="mb-2"><a href="#">THE MALL GLOBAL</a></li>
  7115. </ul>
  7116. </div>
  7117. <div class="col-6 col-md-5 mb-5">
  7118. <div class="py-2 mb-3 footer-comp-title footer-border-bottom h3">OUR COMPANY</div>
  7119. <ul>
  7120. <li class="mb-2"><a href="#">ABOUT US</a></li>
  7121. <li class="mb-2"><a href="#">CONTACT US</a></li>
  7122. <li class="mb-2"><a href="#">PRIVACY POLICY</a></li>
  7123. <li class="mb-2"><a href="#">COOKIE POLICY</a></li>
  7124. <li class="mb-2"><a href="#">PAYMENTS</a></li>
  7125. <li class="mb-2"><a href="#">SITEMAP</a></li>
  7126. <li class="mb-2"><a href="#">TERMS & CONDITIONS</a></li>
  7127. </ul>
  7128. </div>
  7129. </div>
  7130. </div>
  7131. </div>
  7132. <div class="copyright mt-4 text-center fw-light">
  7133. &copy 2022 THE MALL ALL RIGHT RESERVED
  7134. </div>
  7135. </div>
  7136. </section>
  7137. <!-- footer end-->
  7138. <!-- bootstrap js -->
  7139. <script src="./js/bootstrap.bundle.min.js"></script>
  7140. <!-- swiper slider js -->
  7141. <script src="./js/swiper-bundle.min.js"></script>
  7142. <!-- lightbox js -->
  7143. <script src="./js/simple-lightbox.js"></script>
  7144. <!-- custom js -->
  7145. <script src="./js/app.js"></script>
  7146. </body>
  7147. </html