hitmorecode• 6,230
@hitmorecode
Posted
Congratulations well done. After taking a look at your markup, there is one div to many. You have one open div and two closing div's. The img, h1 and p tags are on them same level
### Original markup
<body>
<div class="card">
<img class="img" src="images/image-qr-code.png" alt="qr-code" />
<h1>Improve your front-end skills by building projects</h1>
<p id="grey">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
</body>
### modified markup
<body>
<div class="card">
<img class="img" src="images/image-qr-code.png" alt="qr-code" />
<h1>Improve your front-end skills by building projects</h1>
<p id="grey">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</body>
You can also do some changes to your CSS. Instead of adding the font family to each tag, you can place it in the body and it will be applicable for the entire page
### Original CSS
body {
background-color: hsl(212, 45%, 89%);
}
h1 {
color: var(--Dark-blue);
font-family: 'Outfit', sans-serif;
font-weight: 700;
text-align: center;
font-size: 20px;
}
p {
font-size: 15px;
font-family: 'Outfit', sans-serif;
font-weight: 400;
text-align: center;
}
#grey {
color: hsl(220, 15%, 55%);
}
/* Mobile styles */
@media only screen and (max-width: 375px) {
.card {
box-shadow: 0 4px 8px 0 rgba(147, 147, 147, 0.2);
transition: 0.3s;
border-radius: 15px;
background-color: white;
max-width: 300px;
margin: 0 auto;
padding: 1rem;
margin-top: 170px;
padding-bottom: 25px;
}
.img {
border-radius: 15px;
width: 100%;
}
}
/* Desktop styles */
@media only screen and (min-width: 376px) {
.card {
box-shadow: 0 4px 8px 0 rgba(147, 147, 147, 0.2);
transition: 0.3s;
border-radius: 15px;
background-color: white;
max-width: 300px;
margin: 0 auto;
padding: 1rem;
margin-top: 170px;
padding-bottom: 25px;
}
.img {
border-radius: 15px;
width: 100%;
}
}
### Modified CSS
body {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
}
h1 {
color: var(--Dark-blue);
font-weight: 700;
text-align: center;
font-size: 20px;
}
p {
font-size: 15px;
font-weight: 400;
text-align: center;
color: hsl(220, 15%, 55%);
}
.card {
box-shadow: 0 4px 8px 0 rgba(147, 147, 147, 0.2);
transition: 0.3s;
border-radius: 15px;
background-color: white;
max-width: 300px;
margin: 0 auto;
padding: 1rem;
margin-top: 170px;
padding-bottom: 25px;
}
.img {
border-radius: 15px;
width: 100%;
}
/* Mobile styles */
@media only screen and (max-width: 375px) {
### inside media queries only add things that you want to change. For example if you want to change the width of the card when the screen width is 375px.
.card {
max-width: 250px; ### you don't have to write everything down again.
}
}
/* Desktop styles */
@media only screen and (min-width: 376px) {
### inside media queries only add things that you want to change.
}
If you have any questions, feel free to ask.
Marked as helpful
0
キノシタ• 10
@Diavolo01
Posted
Thank you for recommending
0
