Submitted 10 months ago

HTML and CSS design

Abhishek Tiwari•490

@AbhishekTiwari0143

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Done this but max-width pops-up vertical scroll bar..

Community feedback

Marcos Travaglini•4,840

@BlackpachamamePosted 10 months ago

It's pretty close to the original design, I think I can help you with that scrolling problem.

To center the content in the center of the screen we will make some changes to the body:

HTML 💀

<body>
     <main class="main">
        <div class="image">
          <img src="./images/image-qr-code.png" alt="image">
        </div>
        <div class="text-container">
          <h2>Improve your front-end skills by building projects</h2>
          <p>
            Scan the QR code to visit Frontend Mentor and take your coding
            skills to the next level
          </p>
        </div>
    </main>
    <footer class="attribution">
       <p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Abhishek Tiwari</a>.
       </p>
    </footer>
</body>

CSS 🎨

body {
    min-height: 100vh;
    display: grid;
    place-content: center; /* It's like using justify-content:center and align-items:center */
    gap: 20px; /* This separates the main from the footer */
    background-color: hsl(212, 45%, 89%); /* This is the background color of the design */
    font-family: sans-serif;
}

/* .container is no longer needed */

.main {
    max-width: 360px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    border-radius: 0.5rem;
}

In this way, the code is more organized and better respects semantics.

Please log in to post a comment

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