Completed the Landing Page, but need help! Thanks

1

I’ve completed the Landing Page project of the HTML/CSS curriculum, and I’m pretty sure I’ve included all of the steps (user/stories), but the bot keeps telling me that:

  • (#5) the nav-link button in the nav element, won’t take it to the corresponding section of the landing page, and

  • the product landing page does not have at least one media query.

Can you help me figure out what’s going on here? or is this a bug?

Here’s my page: https://codepen.io/dlmoon/full/QVPqdE/

– Moon

2

  1. Remove the anchor element that is surrounding the logo image (the test see it as a link that should point to some section).

  2. The input element is an empty element, remove the closing tag you have.

<input id="submit" type="submit" value="Get Started" class="btn"></input>
<input id="submit" type="submit" value="Get Started" class="btn">
  1. The nav selector needs to be inside the media query
Summary 
// wrong
nav {
    @media (max-width: 650px) {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;

    li {
      padding-bottom: 5px;
    }
  }
}
// like this
@media (max-width: 650px) {
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
  li {
    padding-bottom: 5px;
  }
}
3

Great, all of that worked! Thanks @lasjorg!

On the @media feedback, is there any reason why “nav { @media …” works for the the example that freecodecamp provides but not for mine?

Here’s there’s: https://codepen.io/freeCodeCamp/full/RKRbwL/

4

  1. First takeaway should be don’t copy code, you are meant to do your own code.

  2. The answer is, they are using SASS/SCSS which supports nesting (you can see the compiled CSS by pressing the down chevron on the CSS box and clicking View Compiled CSS).