Marcos Travaglini• 4,920
@Blackpachamame
Posted
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.
0
