@DylandeBruijn
Posted
@TarekGawish1
Hiya! š
Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.
Things I like about your solution š
- Use of semantic HTML elements
- Clear descriptive CSS classes
- Use of CSS custom properties
Things you could improve āļø
-
You could add a
min-height: 100vh
to yourbody
element so it takes up the full height of the viewport while still being able to grow when the content inside it grows. -
On smaller viewports your solution is missing a couple things:
padding
at the top should disappear, image should lose it's border radius, image should be flush at the top. -
I recommend not setting a fixed
height
andwidth
on your elements or you'll run into overflow issues. Aheight: auto
is fine, whichblock
elements are by default. -
The dimensions of your image warp a lot when the viewport changes, this is due to the fixed
height
you have on it. Try changing your styling to this:
img {
border-radius: 10px;
max-width: 100%;
}
I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! š
Let me know if you have more questions and I'll do my best to answer them. šāāļø
Happy coding! š
Marked as helpful
@TarekGawish1
Posted
Hi @DylandeBruijn š
Thank you so much for your thoughtful feedback! I really appreciate the detailed insights and suggestions you provided.
Things Iām thrilled about š