Skip to content
Submitted 4 months ago

HTML, CSS, responsive design, Second challenge.

Ali Alomar•20
@KingSlayer3x
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Items positioning was kind off tricky.

What specific areas of your project would you like help with?

Using Flex and grid system for better design.

Community feedback

  • z-mn•150
    @z-mnPosted 4 months ago

    Good job! In order to center the card, you should target the body and set min-height: 100vh, then use display: grid and place-items: center. Your solution is otherwise good excluding the minor font size and line height differences, and the missing border. Happy coding!

    Marked as helpful
    1
    Ali Alomar•20
    @KingSlayer3xPosted 4 months ago

    @z-mn Thank you very much! that was very helpful. Happy coding.

    0
  • Rinel•120
    @rineliniguezsosaPosted 4 months ago

    In your main container, align the items to the center and justify the content to the center in the same way. In the figma file, the text size, the internal padding, and the dimensions of the image appear.

    0
    Ali Alomar•20
    @KingSlayer3xPosted 4 months ago

    @rineliniguezsosa Thank you! I don't have the full access to the Figma file! 😥

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord