Submitted 8 months ago

E-commerce product page (Html,Css(Sass), Splide.js, Js)

#accessibility#cube-css#sass/scss

Pablo Dettori• 710

@p4bloxx

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

E-commerce product page

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everyone ;)

In this challenge I learned to manage some interesting components, such as a slider (different between the mobile and tablet/desktop versions) and a lightbox inside a dialog box.

for the photo slider I used a dedicated JS library, simple to implement, a little less to customize it according to the requested design, but overall I succeeded.

If you like, you could leave me an opinion/advice/constructive criticism, we can discuss it, I'd be happy ;)

Community feedback

Yonten• 340

@yozidst

Posted 7 months ago

Hey, just wanted to point out something I noticed. For the image dialog box. Only the image with the shoe pointed to the left standing on two rocks matches the image of itself when clicked to view on dialog box. The rest is sort of in a shuffle. Nevertheless, Awesome job! 👍🏻

Pablo Dettori• 710

@p4bloxx

Posted 7 months ago

@yozidst hi, thank you for the warning, yes, unfortunately I wasn't able to resolve this bug, because basically these are two different slider instances and each of them is synchronized with the relevant thumbnail box, but they are not synchronized between them and I didn't understand how to do it..I'll look for a solution, thanks again ;)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord