the most difficult part was applying the filter on the picture o it's still messed up i hope someone can help with that, i've used position absolute so when you make the page bigger or smaller it follows the body . there's a way using grid but am still learning it so i hope someone has an even easier way
. i could've used filter but it wasn't even close to the design that's why i had to used a div with the pink background color and that's where i messed up
@as90695
Posted
Hii REDDDAX Congratulations for completing this challenge. I have one advice for you.
Please keep your code more readable to other users. Give your image element object-fit: cover; So it can cover the whole div.
You've done a great job Keep learning and happy coding.
Marked as helpful
@REDDDAX
Posted
@as90695 thank you so much ll try my best to do what you said . and by making it more readable can you explain more
@Hassiai
Posted
Replace <div id="container"> with the main tag, <div class="attribution"> with the footer tag and <div class="big text"> with <h1> to make the content/page accessible. click here for more on web-accessibility and semantic html
Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.
To center .main on the page using flexbox, replace the height in #container with min-height:100vh. There is no need to give #container a width.
Replace the heigh in the main with a padding value for all the sides. Give . top a background-color of soft violet and give the img a width and height of 100%, object-fit: cover, mix-blend-mode: multiply and opacity:0.8.
.top{
background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
@REDDDAX
Posted
hi @Hassiai thank you for the reply, i did what you said for the main and footer so thanks again. but for the filter when i did give the .top and the image the values you said but still nothing works , instead the image just got darker .top{ background-color: hsl(277, 64%, 61%); } img.desktop { width: 100%; height: 100%; object-fit: cover; mix-blend-mode:multiply ; opacity:0.8;
i hope you explain the problem to me or have a different way to fix it
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
