@pikapikamart
Posted
Hey, good work on this one. Though the desktop layout is pushed onto the top but the mobile view is good.
For the image color, since you used the image as img
, you could add a background-color: hsl(277, 64%, 61%)
(purplish one) on the imageContainer
selector. Then just manipulate the opacity
of the img
that holds the image. That way, the purple color will now be visible and adjust to your preference^
Other suggestions would be:
- To center your layout on the desktop, you could add in the body like:
display: grid;
min-height: 100vh;
place-content: center;
padding-top: adjust to make the layout not touch the ceiling
- On the text, they should not be centered right. So in your
description
selector, remove thealign-items: flex-end
, let them be at the left position. But by doing so, your elements inside thestats
container will be pushed more on the left, because you usedposition: relative
and used theright
property on them. It will be really awesome if you could remove them, since they are not really necessary on this one.
2.1. Remove the padding on the stats
selector, also edit the padding on the 3 divs inside of it. Only apply padding to the top and right, like `padding: 50px 25px 0 0;
- The width of the layout could be smaller :>
But still, good job on this one ^
@ironheart93
Posted
@pikamart Thank you, I made some changes, it's not exactly perfect but I understand a little better as to what I am doing.