Skip to content
Submitted about 2 years ago

Responsive layout with flexbox

Omer7_7•100
@omerkhan7210
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

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Omer, Congratulations on completing this challenge!

    Your solution is great and the code is working, but the html structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

    Here’s one example to show can be cleaner this HTML structure:

    <body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

    When you download the project files there’s a file called style-guide.md where you can find information such as hsl color codes and the font-size for the headings.

    This is the correct color for the background body { background-color: hsl(212deg 66% 92%);}

    The correct value for this shadow is box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 3%);

    ✌️ I hope this helps you and happy coding!

    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