@MelvinAguilar
Posted
Hi @Mounir-kh ๐, good job on completing this challenge! ๐
Here are a few suggestions I've made that you can consider in the future if you're looking to improve the HTML code:
- Try to use semantic tags in your code. Click here for more information.:
With semantic tags:
<body>
<main class="main-container">
. . .
</main>
<footer class="attribution">
. . .
</footer>
<body>
- The thank you illustration is for decoration purposes only, so it can be hidden from screen-readers by adding
aria-hidden="true"
and leaving its alt attribute empty:
<img src="images/illustration-thank-you.svg" alt aria-hidden="true">
- The container isn't centered correctly. You can use flexbox to center elements:
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Additionally, remove the margin to center the main-container correctly.
.main-container {
. . .
/* margin-left: auto; */
/* margin-right: auto; */
/* margin-top: 10%;
}
Links with more information:
- The Complete Guide to Centering in CSS.
- A Complete Guide to Flexbox (CSS-Tricks).
- How TO - Center Elements Vertically (W3Schools).
- CSS Layout - Horizontal & Vertical Align (W3Schools).
I hope those tips will help you.
Good job, and happy coding!
Marked as helpful