Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Community feedback
- @AlfrazgitPosted 11 months ago
Good job on positioning the card exactly where it needs to be. I couldn't figure it out.
0 - @BlackpachamamePosted 11 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 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.
0
Please log in to post a comment
Log in with GitHubJoin 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