@Hassiai
Posted
Replace <div class="container"> with the main tag, <div class="title"> with <h1> and <div class="description"> with <p> to fix the accessibility issues. click here for more on web-accessibility and semantic html
Use the colors that were given in the styleguide.md found in the zip folder you downloaded.
To center .box on the page using flexbox or grid, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}
There is no need to five . box a box-shadow.
Increase the max-width of .box for it to be equivalent to the width of the design. max-width: 400px
.
You forgot to give the body a background-image with a background-size of contain and a background-repeat of no-repeat.
This challenge requires a media query, in the media query change the background-image of the body.
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
@Mouradis
Posted
@Hassiai thanks for your reply first thanks for clarifying how to center the container with flexbox i didnt knew i could do it if i added min-height second i havent used media because i used % width and it was working on mobile there was no need for it last to be honest i copied the border box from the internet because i dont know how to do them myself
@Hassiai
Posted
@Mouradis The border-box subtracts the left and right padding values from the width of an element instead of adding the padding values to the to the width of the element.