Skip to content
Submitted 8 months ago

Landing page with one card using flexbox

Rwmya•10
@Rwmya
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

it's almost the same as mockup ver but not 100% same, next time I'm gonna try to use grid, I guess

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

centering the card and sizing them, using margin and flexbox to center the card, and trying around different size to make it similar

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

How to write better than this? More clean and simpler than this. Also, are there unnecessary css there?

Community feedback

  • Harsh Kumar Dwivedi•740
    @Harsh-Kumar-DwivediPosted 8 months ago

    Hi @Rwmya ,

    Nice Solution !

    I would suggest following:-

    1.Only 1 container would be sufficient. <div class="card-container"> is redundant.

    2.Prefer replacing <div class="card"> with <main> element and <p>Improve your front-end skills by building projects</p> with <h1>Improve your front-end skills by building projects</h1>.

    These will enhance your code, improve accessibility and make your markup more semantic.

    Hope these suggestions are helpful !

    Stay Happy & Healthy !

    Happy Coding !

    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