Marcos Travaglini• 4,920
@Blackpachamame
Posted
¡Se ve bien! pero puede mejorar.
<body>
<section class="container">
<section class="card">
<div class="qrcode"></div>
<section class="text">
<h3>Improve your front-end skills by building projects</h3>
<p>
Scan the QR code to visit Frontend Mentor and take your coding
skills to the next level
</p>
</section>
</section>
</section>
</body>
Colocar un section dentro de otro y luego otro más dentro, creo que no es semánticamente correcto. Incluso, podría decir que te sobra un section.
HTML 💀
<body>
<main class="card">
<div class="qrcode"></div>
<div class="text">
<h3>Improve your front-end skills by building projects</h3>
<p>
Scan the QR code to visit Frontend Mentor and take your coding
skills to the next level
</p>
</div>
</main>
</body>
CSS 🎨
body {
background-color: hsl(220, 15%, 55%);
font-family: "Outfit", sans-serif;
min-height: 100vh;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-color: hsl(0, 0%, 100%);
width: 350px;
height: 550px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
}
.qrcode {
background-image: url(./images/image-qr-code.png);
background-repeat: no-repeat;
background-size: cover;
width: 320px;
height: 320px;
border-radius: 20px;
}
.text {
text-align: center;
padding: 18px;
}
h3 {
margin-top: 15px;
font-size: 25px;
}
p {
color: hsl(0, 0%, 68%);
font-size: 17px;
margin-top: 15px;
}
0
