Design comparison
Solution retrospective
i couldn't figure out how to color overlay image without lowering opacity. so image ended up with 0.5 opacity :(
Community feedback
- @dnewbie25Posted over 2 years ago
Excellent job with the design. A simple solution to color the image is to create another
<div>
element that lies on top of the image. Set the height and width of that new div the same as the image, and then change the background color and opacity of that new<div>
to the desired one. That way you won't need to start editing the image properties.Also, try to use semantic tags for the following challenges. For example a
<main>
tag and at least one<h1>
tag. You completed the challenge, which was replicating the design, but it would be a great bonus to apply semantic HTML for people with vision impairment. Screen readers will work better when the semantic tags are used.Apart from that, you did a really good job!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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