Looking to hire developers?
Feel free to tell me what i did wrong. Thank you!
@darryncodes
Posted
Hi Vasile,
Awesome work on this one, nice and responsive - well done!
You could add mix-blend-mode: multiply; to your .layer class and remove the opacity from background-color: hsl(277, 64%, 61%); to closer match the purple in the challenge!
Hope that helps!
Marked as helpful
@PhoenixDev22
Posted
hello @VasileCosmin , I have few suggestions:
Document should have one main landmark, so wrap the <body> content in <main> landmark. READ MORE ABOUT LANDAMRKS
For any decorative images, each img tag should have emptyalt=""and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images,
It's good practice to use a css reset at the start of css every time. That would do things like change images to display block instead of inline block. That will fix the slight gap I see under the image on mobile.
<div class="accomplish">/* no need foe a <Div>*/
<ul>
<li>
<h2>10k+</h2>/*Numbers don't make sense as h2s. */
<p>companies</p> /* The number and word have to be read together to make sense so need to be in the same meaningful element. so only a< span >or maybe strong tag needs to wrap the numbers. (You can set those to be display block via a class)*/
</li>
<li>
<h2>314</h2>
<p>templates</p>
</li>
<li>
<h2>12M+</h2>
<p>queries</p>
</li>
</ul>
</div>
</div>
you can use <footer> instead <div class="attribution">.
No need for any heights on this at all. That's causing big problems at the moment. All you need is a min-height on the half of the card containing the image. It's rarely ever a good practice to set heights on elements . Let the content dictate how tall something needs to be.
It's better not nest css selectors. Really important to keep css specificity as low/flat as possible. The best way to do that is single class selectors
Hopefully this helps.
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
