Desktop design

Lightbox design

Mobile design

E-commerce product page

="15.2.3"><div _ngcontent-dbo-c3="" class="container-fluid"><app-h

dbo-c1=""><div _ngcontent-dbo-c1="" class="cart-box position-absolute d-flex flex-column"><stron

x-column"><strong _ngcontent-dbo-c1="" class="p-3">Cart</

t</strong><hr _ngcontent-dbo-c1=""><ul _n

dbo-c1=""><ul _ngcontent-dbo-c1="" class="cart-storage w-100 ps-2 py-2 d-flex flex-column justify-content-evenly align-items-center"><li _n

s-center"><li _ngcontent-dbo-c1="">Your c

---></div><ul _ngcontent-dbo-c1="" class="mobile-menu position-absolute pt-4"><butto

ute pt-4"><button _ngcontent-dbo-c1="" class="btn fs-4 fw-bold ps-2 mb-4 text-black"> x </b

</button><li _ngcontent-dbo-c1="" class="fw-bold border-0 rounded-3 p-2"><a _ng

ed-3 p-2"><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black"> Colle

</a></li><li _ngcontent-dbo-c1="" class="fw-bold border-0 rounded-3 p-2"><a _ng

ed-3 p-2"><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black"> Men <

ed-3 p-2"><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black"> Wemon

ed-3 p-2"><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black"> About

ed-3 p-2"><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black"> Conta

</li></ul><nav _ngcontent-dbo-c1="" class="navbar w-100 align-self-center align-items-center ps-5"><span

ter ps-5"><span _ngcontent-dbo-c1="" class="hamburger navbar-toggler-icon col-1 fs-5 fw-bolder"></span

r"></span><a _ngcontent-dbo-c1="" href="#" class="logo link-dark col-1 ps-3 ps-lg-0 text-decoration-none fs-4 fw-bold">sneake

eakers</a><ul _ngcontent-dbo-c1="" class="desktopMenu nav-menu h-75 col-4 d-flex justify-content-around align-items-end"><li _n

tems-end"><li _ngcontent-dbo-c1=""><a _ng

dbo-c1=""><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black-50"> Colle

dbo-c1=""><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black-50"> Men <

dbo-c1=""><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black-50"> Wemon

dbo-c1=""><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black-50"> About

dbo-c1=""><a _ngcontent-dbo-c1="" href="#" class="text-decoration-none text-black-50"> Conta

</li></ul><a _ngcontent-dbo-c1="" href="#" class="col-1 pe-4 pe-lg-0 offset-4 text-end"><img _

text-end"><img _ngcontent-dbo-c1="" src="../../assets/images/icon-cart.svg" width="25px" height="25px" alt=""></a><a

lt=""></a><a _ngcontent-dbo-c1="" href="#" class="col-1 pe-4 pe-lg-0"><img _

pe-lg-0"><img _ngcontent-dbo-c1="" src="../../assets/images/image-avatar.png" width="25px" height="25px" alt=""></a></

dbo-c2=""><div _ngcontent-dbo-c2="" class="d-flex justify-content-center align-items-lg-center align-items-start w-100 vh-100"><secti

0 vh-100"><section _ngcontent-dbo-c2="" class="product-page row d-lg-flex justify-self-lg-center align-self-lg-center"><div _

g-center"><div _ngcontent-dbo-c2="" class="product-pics-slider position-relative"><img _

relative"><img _ngcontent-dbo-c2="" alt="" class="position-absolute" src="../../assets/images/image-product-1.jpg"><div _

ct-1.jpg"><div _ngcontent-dbo-c2="" class="slider-control position-absolute d-flex justify-content-between align-items-center"><butto

s-center"><button _ngcontent-dbo-c2="" id="sliderBtnLeft" class="sliderBtnLeft ms-3 border-0 rounded-circle fw-bold display-6">&lt;</

;</button><button _ngcontent-dbo-c2="" id="sliderBtnRight" class="sliderBtnRight me-3 border-0 rounded-circle fw-bold display-6">&gt;</

ton></div><div _ngcontent-dbo-c2="" class="product-img-thumbnails position-absolute row"><div _

lute row"><div _ngcontent-dbo-c2="" class="thumb-container col-3"><img _

er col-3"><img _ngcontent-dbo-c2="" src="../../assets/images/image-product-1-thumbnail.jpg" alt="product-pic" class="thumb thumb1"></div>

b1"></div><div _ngcontent-dbo-c2="" class="thumb-container col-3"><img _

er col-3"><img _ngcontent-dbo-c2="" src="../../assets/images/image-product-2-thumbnail.jpg" alt="product-pic" class="thumb thumb2"></div>

b2"></div><div _ngcontent-dbo-c2="" class="thumb-container col-3"><img _

er col-3"><img _ngcontent-dbo-c2="" src="../../assets/images/image-product-3-thumbnail.jpg" alt="product-pic" class="thumb thumb3"></div>

b3"></div><div _ngcontent-dbo-c2="" class="thumb-container col-3"><img _

er col-3"><img _ngcontent-dbo-c2="" src="../../assets/images/image-product-4-thumbnail.jpg" alt="product-pic" class="thumb thumb4"></div>

div></div><div _ngcontent-dbo-c2="" class="product-details d-flex flex-column justify-content-evenly align-items-center"><div _

s-center"><div _ngcontent-dbo-c2="" class="description ps-lg-5 p-3 row gap-1"><stron

ow gap-1"><strong _ngcontent-dbo-c2="" class="fs-5 fw-bold text-uppercase">sneake

y</strong><h2 _ngcontent-dbo-c2="" class="fs-2 fw-bold text-capitalize">fall l

akers</h2><p _ngcontent-dbo-c2="" class="text-black-50">these

</p></div><div _ngcontent-dbo-c2="" class="product-pricing justify-self-lg-start row"><stron

tart row"><strong _ngcontent-dbo-c2="" class="current-product-price display-5 fw-bold col-4 col-lg-4 text-lg-start"> $125.

</strong><span _ngcontent-dbo-c2="" class="discount mt-lg-2 col-2 offset-lg-0 offset-1 fs-5 text-center border rounded-3">50%</s

50%</span><span _ngcontent-dbo-c2="" class="prev-price col-5 col-lg-2 text-end text-lg-start text-decoration-line-through text-black-50">$250.0

pan></div><div _ngcontent-dbo-c2="" class="w-100 d-lg-flex flex-lg-row d-flex flex-column justify-content-center align-items-lg-center"><div _

g-center"><div _ngcontent-dbo-c2="" class="count-product px-5 mt-lg-3 d-flex justify-content-between align-items-center border rounded-3"><butto

ounded-3"><button _ngcontent-dbo-c2="">-</but

-</button><span _ngcontent-dbo-c2="">0</spa

">0</span><button _ngcontent-dbo-c2="">+</but

ton></div><button _ngcontent-dbo-c2="" class="cart-btn mt-2 border-0 rounded-2 fs-5"><img _

d-2 fs-5"><img _ngcontent-dbo-c2="" src="../../assets/images/icon-cart.svg" alt="" class="pb-1 me-2"> Add t

Please log in to post a comment

Community feedback

Ecommerce product Page Using Angular`

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community