Skip to content
Submitted 5 months ago

Blog preview card

Lara Mesa•180
@Lara-art
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’m really proud of this CSS code because I made it mobile responsive without using any @media queries.

.card { max-width: 380px; margin: auto; padding: 20px; }

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

I had trouble centering the image on the screen. And this is the solution I came up with. Using place-content: center, I was able to align and justify it both vertically and horizontally.

body { height: 100vh; place-content: center; max-width: 1440px; margin: auto; padding: 2rem; }

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

I'm not sure if there's a better way to center the image and place the text below it better. I did this, but I don't know if it's the right way.

.attribution { margin-top: 100px; font-size: 11px; text-align: center; }

Community feedback

  • Laura Rodrigues•100
    @laurafilhaPosted 5 months ago

    I would like to congratulate you on the excellent work in building the web page. The solution presented is almost perfect and truly impressive. The structure is clear and intuitive, making navigation easy and enjoyable.

    With small adjustments, such as modifying the font size in some sections and tweaking minor details, I believe the page will be perfect. These subtle changes can further enhance the user experience, making the design more harmonious and pleasing.

    The code is very well-crafted, demonstrating great care and professionalism. Additionally, it is easy to understand and adjust, which facilitates maintenance and future modifications.

    Marked as helpful
    0
  • Bart Feesley•220
    @antimatterhutPosted 5 months ago

    Looks good.

    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