@correlucas
Posted
👾Hello Giorgi, Congratulations on completing this challenge!
🎨 Here are some tips to improve your component design:
1.The font sizes are a bit off, for the paragraph and the stats section use at least 1 rem for the size to make it readable:
.main__article {
color: var(--main-paragraph);
font-size: 1rem;
line-height: 1.25rem;
padding-right: 3.125rem;
}
2.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!
@siduki
Posted
@correlucas Thank you Lucas. I changed font size, I just make it from design picture, how I saw it. About picture, I added code, what you wrote to img selector and background selector too, but color was more black/white, instead purple. I changed values, but nothing.
@correlucas
Posted
@siduki Add to the div a background color to make the color blend:
.img__container {
background-color: #9d409d;
position: relative;
display: inline-block;
}
