This is a solution to the QR code component challenge on Frontend Mentor.
HTML
<body>
<div class="card">
<img
class="qr-code"
src="images/image-qr-code.png"
alt="Image of QR Code"
/>
<h3 class="text heading">
Improve your front-end skills by building projects
</h3>
<p class="text paragraph">
Scan the QR code to visit Frontend Mentor and take your coding skills to
the next level
</p>
</div>
</body>
CSS
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
}
.card {
background-color: hsl(0, 0%, 100%);
padding: 16px;
border-radius: 20px;
}
.qr-code {
width: 288px;
height: 288px;
margin-bottom: 24px;
border-radius: 10px;
}
.text {
max-width: 250px;
text-align: center;
margin: 0 auto;
}
.heading {
font-size: 22px;
font-weight: 700;
margin-bottom: 16px;
color: hsl(218, 44%, 22%);
}
.paragraph {
margin-bottom: 24px;
font-weight: 400;
font-size: 15px;
color: hsl(220, 15%, 55%);
}
- Live Site URL: QR Code
I started this project by looking through the design images and style guide. I first imported the design image in Figma to get a sense of the dimensions and radius and then went on from there. The solution involves creating a card that includes an image and 2 text elements. The card is centered on the screen and so are the texts inside it. Both the card and the image has a border radius and the card also has a padding to match the design. The only place I was stuck a little bit was containing the text to match the image. I ultimately fixed it with a max-width property of 250px on both the texts.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Modern CSS Reset - This is the best CSS reset I've found so far. It is really handy for starting out any project and I recommend trying it out. I tweeked it a little bit to conform it to my use case.