I didn't find any difficult
@hmadamk
Posted
well done an extra tip is
header for the top section
main for your main section
section with aria-label to describe why you added this section
footer for the bottom section
Marked as helpful
@thidarnyien
Posted
@hmadamk thank your for your help
@correlucas
Posted
👾Hello Mal Thidar, congratulations for your new solution!
🎯 Your solution its almost done and I’ve some tips to help you to improve it:
1.Give a proper alignment to the card:
You tried to align the component using margins, but this make this task really tricky and hard control all the content. My advice for you is to use flexbox to create this alignment. First thing you've to do is to add min-height: 100vh to make sure your body will be displaying minimum 100% of the view-port height (this will help the card be ever aligned vertically centered) and then add display: flex; align-items: center; justify-content: center; to make the alignment:
body {
min-height: 100vh;
font-family: 'Outfit', sans-serif;
/* margin: 0; */
/* padding: 0; */
box-sizing: border-box;
background-color: hsl(212, 45%, 89%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
The html markup/structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.
Before:
<div class="card">
<div class="img">
<img src="./images/image-qr-code.png" alt="">
</div>
<div class="card-text">
<p class="title">Improve your front-end skills by building projects</p>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
After:
<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
<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>
</main>
</body>
✌️ I hope this helps you and happy coding!
Marked as helpful
@thidarnyien
Posted
thank you so much for your many help next time I hope you teach me a lot
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
