QR Component using Vanilla CSS

Solution retrospective
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Alfrazgit
Good job on positioning the card exactly where it needs to be. I couldn't figure it out.
- @Blackpachamame
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 witharticle
, 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.
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