@talissoncosta
Posted
Yep.. let's see :D
I see that you applied a gap on qr-container
<div class="qr-container">
<img src="./images/image-qr-code.png" alt="QR code" class="qr-image">
<--- It will generate a gap here, between `image` and `text-container`, which is pretty good, you don't need margins between the itens, and also if you need to add a new item inside `qr-container` it will get the same space, making it consistent --->
<div class="text-container">
<h1 class="title">Improve your front-end skills by building projects</h1>
<p class="subtitle">Scan the QR code to visit Frontend Mentor and take your
coding skills to the next level</p>
</div>
</div>
So the that is a great start using gap
congrats!! :D
Let's check your css...
.title,
.subtitle{
margin:0;
padding-inline:28px; // what if instead of setting a padding here, you set the same width as you've set on the img ? on `text-container` => `width: 90%` and apply `text-align: center`
text-align: center; // so it could also be removed
}
.title{
margin-bottom: 20px; // you could remove this margin, just applying gap on `text-container`
font-size: var(--title);
font-weight: 700;
color:var(--dark-blue)
}
.subtitle{
margin-bottom: 40px; // instead of margin, try to explore padding. In order to achieve this, you could just add a `padding: 40px` on `text-container`
font-size: var(--pharagraph);
font-weight: 400;
color:var(--grayish-blue);
}
I hope it helps!! ping me if you need extra help :D Happy coding!
Marked as helpful