Responsive landing page using HTML5 and CSS3 with flexbox.

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  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

  0