@benjamineke
Submitted
@Abdelghafour122
@benjamineke
Submitted
@Abdelghafour122
Posted
Hello Benjie Mondia, your solution on this challenge looks amazing! Your HTML is very well structured, the CSS is on point.
The only suggestion i can make, is to make the attribution a little bit thinner in small screens, because it takes the gap between itself and the card, that's the only thing I'd like to point out.
Everything else is great! You did a good job on this one, happy coding! ;)
Marked as helpful
@Shettyankith
Submitted
Suggestions are welcomed!
@Abdelghafour122
Posted
Hello shettyankith, you did a great job on this challenge especially on the card styles. However, I have some suggestions for you that might further improve the solution:
** I've noticed that the card element isn't centered, and the overlay is relative to the container
not the image
**
You can solve that by adding these styles:
1.Add height: 100%;
to both body
and html
elements, for the page to take the full height of the screen.
2.Add these styles to the body
element to center the card in all screens:
display: flex; align-items: center; justify-content: center;
3.Make the Overlay absolute in it's parent element (image) by setting it's parent element's display
property to relative
, it should be the direct parent.
4.You don't have to set the overlay's height and width by px
yourself, you can just say height: 100%
or width: 100%
and it will be set automatically for you.
Other than that, every thing looks great! I hope you find my suggestions helpful ! Have a good time coding ! ;)
Marked as helpful
@kevinfreitasv80
Submitted
@Abdelghafour122
Posted
Hello kevin, I really like your solution, your code is well structured, you used HTML semantics which is a great best practice, the styles also look very good almost the same as the original.
You did a very good job, keep on coding!
@edo979
Submitted
@Abdelghafour122
Posted
Hello Edis, you did well making this template ! However, there are more things that i would suggest:
clamp(50px, 11vw, 160px)
will make it better.Everything else looks good. Good luck on the next challenges, Happy coding!
@ninenine96
Submitted
How to simplify positioning elements in complex components?
@Abdelghafour122
Posted
Hello Mohammad Rohan, you did well in this challenge,
The most simple ways of positioning are using flexbox / grid / float properties.
Otherwise you can use the position
Property then position the element by manipulating the top / left / bottom / right
properties in more of a custom way.
Hope this helps!
Marked as helpful