Skip to content
Submitted about 2 months ago

Blog preview card

ThisIsArti•30
@ThisIsArti
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?

I did not have to refer back to notes, as much as I expected. I am proud of the drop shadow and the layout inside the container.

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

I struggled with getting the card the correct size, to replicate the example. I ended up changing the % with trial and error, until it looked similar enough. I also struggled with getting the name on the same line as the avatar.

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

Getting the name on the same line as the avatar

Community feedback

  • beowulf1958•1,450
    @beowulf1958Posted about 2 months ago

    Great work on this project. Typography is spot on and nice job on the hover state and box-shadow.

    Like @SvitlanaSuslenkova said, you need to fix the image file paths. Then you need to get Greg's picture and name on the same line. This is easily done by adding the following:

        .author {
      display: flex;
      align-items: center;
    }

    If you want to review the changes, I have created a fork on the repository. Hope this helps.

    Marked as helpful
    0
  • Svitlana Suslenkova•5,340
    @SvitlanaSuslenkovaPosted about 2 months ago

    <img src="/blog-preview-card-main/assets/images/illustration-article.svg" alt="main image"> change to the relative link (relative to your html!)

    body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

    Marked as helpful
    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