Desktop design

Lightbox design

Mobile design

E-commerce product page

803951=""><header _ngcontent-ng-c2313803951="" class="p-6 sticky top-0 flex items-center justify-between lg:px-0 border-b-2 border-b-Pale-orange overflow-hidden z-10 bg-White"><div _

bg-White"><div _ngcontent-ng-c2313803951="" class="flex gap-5 items-center"><butto

s-center"><button _ngcontent-ng-c2313803951="" class="flex flex-col md:hidden"><img _

d:hidden"><img _ngcontent-ng-c2313803951="" src="./assets/icons/icon-menu.svg" alt="icon menu"></butt

--><div _ngcontent-ng-c2313803951="" class="logo"><a _ng

ss="logo"><a _ngcontent-ng-c2313803951="" href="#"><img _

href="#"><img _ngcontent-ng-c2313803951="" src="./assets/icons/logo.svg" alt="icon logo"></a></

</a></div><nav _ngcontent-ng-c2313803951="" class="ml-6 text-sm font-bold hidden md:inline"><ul _n

d:inline"><ul _ngcontent-ng-c2313803951="" class="flex gap-6 [&amp;>li]:p-2 [&amp;>li]:opacity-40 hover:[&amp;>li]:hover-nav-li"><li _n

r-nav-li"><li _ngcontent-ng-c2313803951=""><a _ng

803951=""><a _ngcontent-ng-c2313803951="" href="#">Collec

s</a></li><li _ngcontent-ng-c2313803951=""><a _ng

803951=""><a _ngcontent-ng-c2313803951="" href="#">Men</a

n</a></li><li _ngcontent-ng-c2313803951=""><a _ng

803951=""><a _ngcontent-ng-c2313803951="" href="#">Women<

803951=""><a _ngcontent-ng-c2313803951="" href="#">About<

t</a></li><li _ngcontent-ng-c2313803951=""><a _ng

803951=""><a _ngcontent-ng-c2313803951="" href="#">Contac

nav></div><div _ngcontent-ng-c2313803951="" class="flex items-center gap-5 md:gap-10"><div _

d:gap-10"><div _ngcontent-ng-c2313803951="" class="cursor-pointer relative z-50"><img _

ive z-50"><img _ngcontent-ng-c2313803951="" src="./assets/icons/icon-cart.svg" alt="icon cart" class="md:h-5 hover:brightness-50"><!----

---></div><div _ngcontent-ng-c2313803951=""><img _

803951=""><img _ngcontent-ng-c2313803951="" src="./assets/images/image-avatar.png" alt="avatar image" class="h-6 md:h-12 cursor-pointer hover:border-Orange hover:border-2 rounded-full"></div>

142718=""><main _ngcontent-ng-c2171142718="" class="pb-10 md:p-20 flex flex-col md:grid md:grid-cols-2 md:gap-16 md:px-11"><app-p

085552=""><section _ngcontent-ng-c3386085552="" class="md:flex md:flex-col gap-6 md:w-full md:h-full md:justify-center"><div _

y-center"><div _ngcontent-ng-c3386085552="" class="h-[90vw] max-h-96 relative md:max-h-max md:h-auto"><img _

d:h-auto"><img _ngcontent-ng-c3386085552="" alt="" class="w-full h-full md:h-auto object-cover md:rounded-xl cursor-pointer hover:shadow-md" src="./assets/images/image-product-1.jpg"><butto

ct-1.jpg"><button _ngcontent-ng-c3386085552="" class="md:hidden absolute inset-y-1/2 left-4 translate-y-[-50%] w-10 h-10 bg-White rounded-full flex justify-center items-center"><img _

s-center"><img _ngcontent-ng-c3386085552="" src="./assets/icons/icon-previous.svg" alt="icon previos"></butt

></button><button _ngcontent-ng-c3386085552="" class="md:hidden absolute inset-y-1/2 right-4 translate-y-[-50%] w-10 h-10 bg-White rounded-full flex justify-center items-center"><img _

s-center"><img _ngcontent-ng-c3386085552="" src="./assets/icons/icon-next.svg" alt="icon next"></butt

ton></div><div _ngcontent-ng-c3386085552="" class="hidden md:flex gap-6"><div _

ex gap-6"><div _ngcontent-ng-c3386085552="" class="border-2 rounded-xl overflow-hidden cursor-pointer border-Orange"><img _

r-Orange"><img _ngcontent-ng-c3386085552="" alt="" class="hover:opacity-40" src="./assets/images/image-product-1-thumbnail.jpg"></div>

pg"></div><div _ngcontent-ng-c3386085552="" class="border-2 rounded-xl overflow-hidden cursor-pointer border-transparent"><img _

nsparent"><img _ngcontent-ng-c3386085552="" alt="" class="hover:opacity-40" src="./assets/images/image-product-2-thumbnail.jpg"></div>

nsparent"><img _ngcontent-ng-c3386085552="" alt="" class="hover:opacity-40" src="./assets/images/image-product-3-thumbnail.jpg"></div>

nsparent"><img _ngcontent-ng-c3386085552="" alt="" class="hover:opacity-40" src="./assets/images/image-product-4-thumbnail.jpg"></div>

712382=""><section _ngcontent-ng-c160712382="" class="p-6 flex flex-col gap-3 md:h-full md:justify-center"><heade

y-center"><header _ngcontent-ng-c160712382=""><h2 _n

712382=""><h2 _ngcontent-ng-c160712382="" class="uppercase font-bold text-xs tracking-widest text-Orange"> sneak

></header><h1 _ngcontent-ng-c160712382="" class="text-Very-dark-blue font-bold text-3xl md:text-4xl"> Fall

kers </h1><p _ngcontent-ng-c160712382="" class="text-Dark-grayish-blue text-base"> These

ffer. </p><div _ngcontent-ng-c160712382="" class="flex md:flex-col justify-between items-center md:items-start my-4"><div _

art my-4"><div _ngcontent-ng-c160712382="" class="flex items-center gap-5"><p _ng

er gap-5"><p _ngcontent-ng-c160712382="" class="font-bold text-3xl"> $125.

25.00 </p><span _ngcontent-ng-c160712382="" class="px-2 bg-Pale-orange rounded-sm text-Orange font-bold"> 50% <

pan></div><div _ngcontent-ng-c160712382="" class="font-bold text-Grayish-blue line-through"> $250.

div></div><div _ngcontent-ng-c160712382="" class="flex flex-col gap-4 md:flex-row"><div _

flex-row"><div _ngcontent-ng-c160712382="" class="bg-Light-grayish-blue px-4 py-4 rounded-lg flex justify-between items-center md:basis-36"><butto

basis-36"><button _ngcontent-ng-c160712382="" class="w-5 h-5 cursor-not-allowed" disabled=""><img _

sabled=""><img _ngcontent-ng-c160712382="" src="./assets/icons/icon-minus.svg" alt="icon minus" class="m-auto hover:brightness-150"></butt

></button><div _ngcontent-ng-c160712382="" class="font-bold"> 0 </d

> 0 </div><button _ngcontent-ng-c160712382="" class="w-5 h-5"><img _

"w-5 h-5"><img _ngcontent-ng-c160712382="" src="./assets/icons/icon-plus.svg" alt="icon plus" class="m-auto hover:brightness-150"></butt

961540=""><button _ngcontent-ng-c1562961540="" class="flex gap-4 flex-wrap font-bold bg-Orange text-White w-full md:w-auto justify-center px-6 py-4 flex-1 hover:opacity-40 rounded-lg shadow-2xl"><img _

adow-2xl"><img _ngcontent-ng-c1562961540="" src="./assets/icons/icon-cart.svg" class="brightness-[3]"><!----

Please log in to post a comment

Community feedback

E-commerce page using Angular + Tailwind

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community