@Hassiai
Posted
Replace <div class="hero"> with the main tag<main>, <div class="container"> with a section tag <section>, <div class="social"> should be within the main but after the <section> section tag to fix the accessibility issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/
There is no need to give the body a height value , background-attachment value and background position value.
Give the nav, main and footer a max-width of 1440px a width of 80% and margin:0 auto for left and right sides space of the page.
main, nav, footer {
max-width:1440px;
width: 80%;
margin: 0 auto;
}
There is no need for min-width in .mockup img and max-width makes the image responsive on any screen size. Give the section or .container display: flex; gap: 2rem; and give .mockup a width 55% and .header a width 0f 40%. give the section/.container a margin-top and bottom value.
In the media query you forgot to give the body a different background-image
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
