This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: Frontend Mentor Solution
- Live Site URL: Live site at github page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
Learn basic use of html and css. You should start by thinking about the structure of your web page.
<div class="content">
<div class="card">
<img src="images/favicon-32x32.png" alt="favicon" id="icon">
<img src="images/image-qr-code.png" alt="qr-code" id="code">
</div>
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
.content{
margin: auto;
width: 320px;
height: 510px;
background: hsl(0, 0%, 100%);
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
}
How to determine the size of an element when designing a page.
- w3schools - As a front-end beginner, this site has helped me learn a lot about CSS usage.