Skip to content
Submitted 4 months ago

Blog Preview Card

Arjay Malaga•30
@ArjayGithub-dev
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 are you most proud of, and what would you do differently next time?

It was fun working with the container (box) width to fit the content.

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

Think first, and make it twice!

Community feedback

  • Ridwan Hasan•400
    @Ridwan10000Posted 4 months ago

    @ArjayGithub-dev Well done. You have made a great design. Just a few remarks. You are missing the <main> landmark from your page. It's important for SEO. You may want to link the fonts instead of using @import rule. Browsers perform better in this way. Instead of height:100vh use min-height:100vh instead. As height:100vh will fix the body size to the viewport. You man want to set height:80vw or something like that in .container rule. This will look good on mobile devices. Use text-align: left in the .container property. The children will inherit this property from their parent. Looks like you used margin in the .profile rule to align the profile image and the text. you may set the container as a flexbox and then use justify-content: center and align-items: center. Use <footer> to add the attributions.

    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