Looking to hire developers?
Please provide feedback
@darryncodes
Posted
Hi Imen,
Nice work on this one, well done!
Try background-blend-mode: multiply; on .card-image and remove the opacity in the colour background: linear-gradient( 0deg,hsla(277, 64%, 61%) 0%,hsla(277, 64%, 61%) 100%),url(./images/image-header-desktop.jpg); to match the purple in the design to the challenge!
Hope that helps!
Marked as helpful
@imendh02
Posted
@darryncodes thank u
@PhoenixDev22
Posted
Hello @imendh02 , I have some suggestions, to tackle the accessibility issues:
There should be two landmark components as children of the body element - a main (which will be the component) and a footer (which will be the attribution).
Make the card a<main>and use divs for the two halves inside it.
In this challenge , it is much easier if you put the image in the html instead of using background image. If you do that, you would use mix-blend-mode instead of background blend mode .You don't need an extra div you can have the one div with a background image.
Use an unordered list with 3 items for the stats .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).
<ul>
<li><strong class="numbers">10k+</strong> companies</li>
<li><strong class="numbers">314</strong > templates</li>
<li><strong class="numbers">12m+</strong >queries</li>
</ul>
Make the<body>a flex container and min-height: 100vh; to center the component. (no need for position).
You don't need the code below
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
You can apply border radius, overflow hidden to the component (<main>). So you don't have to set it to individual corners.
You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.
Hopefully this feedback 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
