Help! Please assist on Product Landing Page

HTML-CSS
1

Hi everybody.

Could someone please help me?

Please look at my codepen and advise on where I am going wrong. Thanks

2

You are doing good so far. You can just set the email input and submit button as inline block and wrap them both on a div instead of making them fixed. Just a warning im also a beginner myself who’s been doing this for 4 months now. So there might be some mistakes but you can google some of the things ive said.

For referrence

<footer id = "main-footer">
     <div class= "footer-wrapper">
              <div class="newsletter">
                          <input type="email" />
                          <input type="submit" />
             </div>
              <div class="copyright">
                        <p>Copyright &copy 2020</p>
             </div>
   
</div>
</footer>

then on css. remove the position: fixed on your css for the email and submit controls then set them both to inline-block

#email, #submit{
   display:inline-block;
}

// the justify-content: space-between give the children elements of footer-wrapper class space in between the immediate 2 elements .newsletter class and .copyright class. newsletter class will be in the extreme end left while the copyright class will be in the right end of the page.

.footer-wrapper{
      display:flex;
     justify-content:space-between;
}
3

Are you asking why only 14/16 tests pass? If so, click on the red button. This will show which test(s) failed. It will show what the test was looking for and what you can do to fix it.

Additionally you can;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

https://devdocs.io/html/element/br

4

@BaldHeadPowers There are two User Stories that you have yet to pass. The first is User Story Content #5 “when I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.” The second is User Story Layout #1 " the navbar should always be at the top of the viewport." Click on the red button that says 14/16. It will show you which tests that are failed status, what each test is looking for and how to fix it.