Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

E-commerce product page

David 120

@ASVN2

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


What I found quite different for me that image slider when change to mobile version you change from clicking on the image to switch them by buttons and also that popup it's freaking me out

questions I have is that right to put the whole popup in the JS and when click show it and hide it ? and how can me change the color of svg icons without have 2 icons

Community feedback

yishak abrham 2,150

@yishak621

Posted

The pop up u referred is called a modal ....a modal is an entire block element which cover the viewport width and height which also have a z index greater than other block elements in html...so to activate a modal open u should set a css property like these

.open-modal { 
   z-index: 10; 
   visibility: visible; 
   transform: scale(1); 
 } 
  
 .close-modal { 
   z-index: -10; 
   visibility: hidden; 
   transform: scale(0); 
 }

And in the js remove and add the desired class....and also for the svg u asked u can change the svg fill color property in the virtual studio code ....click on the svg image and it display the numbers which is the svg designs so u scroll horizontally until u find the fill or fill-color property which has a hexdecimal color so u can change that color and use it....u can refer my code for more

1

David 120

@ASVN2

Posted

@yishak621 yeah I liked this man Thank you very much man <3

0

Please log in to post a comment

Log in with GitHub
Discord logo

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