Submitted 10 months ago

QR Component using Vanilla CSS

Daniel Zeljko•50

@danielzeljko

Preview site View code

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?

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

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

Community feedback

Alfrazgit•50
@AlfrazgitPosted 10 months ago
Good job on positioning the card exactly where it needs to be. I couldn't figure it out.
0

Marcos Travaglini•4,840

@BlackpachamamePosted 10 months ago

Good job!

Maybe there are some things in the HTML to improve. You could remove a couple of unnecessary divs and layout it like this:

<body>
  <main class="card">
        <img src="images/image-qr-code.png" alt="qr-code">

        <div class="card-body">
          <h5>Improve your front-end skills by building projects</h5>
          <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
        </div>
  </main>
  <footer class="attribution">
          Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
          Coded by <a href="https://github.com/danielzeljko">Daniel Zeljko</a>.
  </footer>
</body>

You can replace the main tag with article, both are valid.

I would modify the CSS like this:

html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 15px;
    font-family: 'Outfit', sans-serif;
    background: var(--main-bg-color);
    line-height: normal;
    display: grid;
    place-content: center; /* Center items, like using a justify-content: center and align-items: center */
    min-height: 100vh; /* Adjusts to the height of the viewport */
    width: 100%;
}

.card {
    padding: 16px;
    border-radius: calc(var(--base-border-radius) * 2);
    max-width: 320px; /* Instead of a fixed width, the width is now reduced if the screen is smaller */
    min-height: 497px; /* Increase the height of the card if required */
    background: var(--card-bg-color);
    box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.05);
}

.card img {
    height: 288px;
    width: 288px;
    display: block; /* Remove white space below the image */
    border-radius: var(--base-border-radius);
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* height: 193px;  This is no longer necessary */
}

I think that's it, if you try it and there are any errors let me know.

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