@zenab12
Posted
Hey odyg You did amazing work congratulations for completing this challenge
to fix accessibility issues :
-
You should use
<main class="container">and wrap inside it<div class="container">so all page content should be contained by landmarks. -
give class name card instead div.container as page contain more than one element so it is not the container for all content in the page
-
You can wrap your
<div class ="attribution">in a footer tag like this<footer><div class="attribution"></div></footer>to avoid accessibility issues. and you can comment the footer tag to hide it
To make your code more Responsive
- instead of using margin in
flex.containeruse this to center your elements in the page
body {margin :0;display:flex;flex-direction:column; min-height:100vh}
**/*it is a child of the body and we make flex-grow:1 to distribute space-equally in top and bottom*/**
main{display:flex;place-items:center;place-content:center;flex-grow:1}
**/*you can make it in this challenge to get identical design but don't make it in really site you work on as semantic layout should contain header,main,nav,footer,etc.*/ **
footer{display:none;margin:0}
-
don't give section or div specific height that will damage the responsivity in mobile if width of screen small so remove height and use min-height instead .
-
you can use variables in css and save colors or fixed sizes in variables like this :
:root
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1
{
font-family:var(--font-family)/*to call value of the variable*/
}
Regardless You did amazing I hope this is useful to you... Keep coding👍
Marked as helpful
