Skip to content
Submitted about 2 months ago

qr-code card using maily flexbox

Kaleab-Tariku•10
@Kaleab-Tariku
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

Community feedback

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

    Congratulations on completing this challenge. You made very good use of flexbox.

    However, the content breaks out of the container; the image overlaps the top and the paragraph overlaps the bottom. This is easily fixed by removing the height: 400px; from the .qr-img-card <div>. If you remove the fixed height the <div> will automatically adjust to contain all of the content with no overlap.

    Also, the content is flush against the edges of the .qr-img-card; you need to add padding: 15px to the card div.

    Hope this helps. Keep on coding!

    0
  • Alaa Mekibes•1,540
    @alaa-mekibesPosted about 2 months ago

    Well done 🎉

    • Use Only One <h1> Per Page

    Maintain a proper heading structure, using <h1>, <h2>, and <h3> in a hierarchical manner. This improves both organization and SEO.

    • Use semantic HTML elements for better structure and accessibility. For example:
    <body>
    <main>
        <!-- Your code -->
    </main>
</body>
    • Never Leave the alt Attribute Blank

    Always provide a meaningful alt description for images. This improves accessibility and contributes to better SEO.

    • Add min-height: 100vh; inside body to get full-screen.

    Your work is outstanding, stay consistent and keep shining!

    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