Skip to content
Submitted about 2 years ago

Ecommerce product page - By Harderth

backpackoder•80
@MrFougasse
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

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,590
    @john-miragePosted about 2 years 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
    1

Please log in to post a comment

Log in with GitHub

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