@correlucas
Posted
👾Hello @AbdouAI, Congratulations on completing this challenge!
I've just opened your live site and I can say that you did a great job putting everything together! There's some tips to improve your solution:
Make the vertical alignment using flex
properties and min-height
. First of all put min-height: 100vh
to the body
to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex
e flex-direction: column
to align the child element (the container) vertically using the body as reference.
body {
min-height: 100vh;
font-family: "inter",sans-serif;
font-size: 15px;
margin: 0;
background-color: hsl(233, 47%, 7%);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
The way you’ve applied the purple color is fine, but if you want the exact color tone of color of the challenge designs, you need to use mix-blend-mode
to make the color blend between the image and the background-color of the container. See the steps below to apply to the img
or picture
selector:
img {
mix-blend-mode: multiply;
opacity: 75%;}
✌️ I hope this helps you and happy coding!
Marked as helpful
@AbdouAI
Posted
@correlucas Thank you so much this is really helpful