Skip to content
OverviewSolutions
24
Comments
5
Abdelghafour
@Abdelghafour122

All comments

  • Abdelghafour•580
    @Abdelghafour122Posted about 1 year ago

    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
    0
  • Abdelghafour•580
    @Abdelghafour122Posted about 1 year ago

    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
    0
  • Abdelghafour•580
    @Abdelghafour122Posted about 1 year ago

    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!

    1
  • Abdelghafour•580
    @Abdelghafour122Posted over 2 years ago

    Hello Edis, you did well making this template ! However, there are more things that i would suggest:

    • I think you can do better on the responsive, the website shouldn't jump straight from desktop to mobile.
    • I highly recommend adding a tablet mode in-between for a better user experience.
    • The container should get smaller as the screen narrows, so removing clamp(50px, 11vw, 160px) will make it better.

    Everything else looks good. Good luck on the next challenges, Happy coding!

    0
  • Abdelghafour•580
    @Abdelghafour122Posted over 2 years ago

    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
    0