Submitted over 1 year ago

Ecommerce product page - By Harderth

backpackoder• 80

@MrFougasse

Preview site View code

This is a solution for...

E-commerce product page

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

It's not the best one, but it does the job.

I don't know how to :

Modify the colors of the icons, it's surely because I put them into "<img>", which tag should I use instead ?
Set "opacity: 0.3" except for the orange border for the thumbnails.
When the thumbnails are in big screen, how to add a white background when we hover it or click on it. Because the background is "rgba(0, 0, 0, 0.7)" so when we hover it or click on it the bg is black and I haven't found a solution to set it white.

Any recommendations or thoughts about my code guys ?

Community feedback

John Mirage• 1,610

@john-mirage

Posted over 1 year ago

Hello,

Changing the color of an icon can be achieved using an Svg.

I assume that you icon has a svg extension, it mean that you can grab the svg code that is in your svg file and use it in your HTML file.

<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px" fill="currentColor">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>

note: to easily change the color of the icon with css make sure that the fill attribute has a value of currentColor. This way you can control the color of the icon with the color css property

.icon {
  color: blue;
}

.icon:hover {
  color: green;
}

Marked as helpful

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