Design comparison
Reports
Accessibility report (3)
warning
All page content should be contained by landmarks
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Qazi Aimal</a>.
</div>Qazi Aimal’s questions for the community
Using CSS grid but it can be done by using FLEX but i use Grid because it make challenge very easy to me.
Community feedback
Hassia Issah• 23,850
@Hassiai
Posted
Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html.
For the color of the image , give .right a background-color of of soft violet and add mix-blend-mode: multiply and opacity: 0.8 to the img.
.right{
background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
0
Please log in to post a comment
Log in with GitHub
Join our Slack community
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!