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

NFT preview card component usingHTML, SCSS

Ilia 80

@IliaIvashkevich

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi all! How to change background of active image (to Cyan)?

Community feedback

Naveed 330

@Naveed89-tech

Posted

You could use overlay with div for color. Before submitting the solution, try to validate your CSS and HTML markup on https://validator.w3.org/#validate_by_upload. To get more ideas, you can check my solution for the same challenge and more.

0
Kehinde 660

@jonathan401

Posted

Hey @IliaIvashkevich 👋🏽. Congratulations on completing this challenge. To answer your question, you could use two approach to change the background to cyan.

  1. In your html, you could make the div element with class img an overlay, give it a background colour of cyan and when the div is hovered, show the background colour. or
  2. You could use the ::before or :: after pseudo element to create an overlay for the image. I don't know if the above is enough without using a code example though 😆.

And also,.you could try checking out the accessibility reports to you solution. You could try wrapping the whole elements in a main element. That is <main>{the rest of your html code}</main>. So you should change that <div class="container"> to main.

You could checkout this freecodecamp article on semantic html.

Hope you got at least something from this feedback.

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