Product Landing Page Error with .nav-link - Please HELP!

1

Hey everyone!
I’m working on the product landing page right now. Unfortunately I get an error: 5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’ I can’t figure out, what’s missing, since I’ve linked to sections of my page.
BTW I know that there are a few more errors :wink:
I hope someone can help me!
Thanks,
Josy

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>UBlog | Instagram Academy</title>
    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Allura|Monsieur+La+Doulaise" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <header id="header">
        <nav id="nav-bar">
          <ul class="nav">
            <li class="img"><a href="#header"><img src="https://i.imgur.com/eyX1g4e.png?1" alt="UBlog Logo" id="header-img"></a></li>
            <li class="navbar-icon navbar-icon-toggle"><i class="fas fa-bars fa-2x"></i></li>
            <li class="nav-link"><a href="#header">Home</a></li>
            <li class="nav-link"><a href="#course-button">Courses</a></li>
            <li class="nav-link"><a href="#header">FAQ</a></li>
            <li class="nav-link"><a href="#header">About Us</a></li>
            <li class="nav-link"><a href="#header">Blog</a></li>
            <li class="nav-link"><a href="#form">Contact</a></li>
          </ul>
        </nav>
        <div class="intro">
          <h1>LEARN HOW TO <span id="boost"> boost </span> YOUR INSTAGRAM</h1>
          <p>Do you want to be a successful Instagramer? Do you want to work from anywhere?<p>
          <button id="course-button">See Courses</button>
        </div>
        <div class="how">
          <h2>How can we help?</h2>
          <div class="container">
            <div id="Course">
              <i class="fas fa-desktop"></i>
              <h3 class="item">Online Courses</h3>
              <p class="info">PDFs and videos that will teach you everything that you need to know step by step.</p>
            </div>
            <div id="Consult">
              <i class="fas fa-microphone"></i>
              <h3 class="item">Consulting</h3>
              <p class="info">Individual one on one coachings.</p>
            </div>
            <div id="Facebook">
              <i class="fab fa-facebook-f"></i>
              <h3 class="item">Facebook Community</h3>
              <p class="info">Closed online group to interact, connect and collaborate.</p>
            </div>
          </div>
        <div class="contact">
          <h3 class="intouch">Want to get in touch with us?</h3>
          <form id="form" class="contact-form" action="https://www.freecodecamp.com/email-submit" method="POST">
            <table>
              <tr>
                <td id="tlabel">
                  <label for="Name" id="name-label">* Name:</label>
                </td>
                <td id="tanswer">
                  <input type="text" id="name" placeholder="Enter your name" required>
                </td>
              </tr>
              <tr>
                <td id="tlabel">
                  <label for="email" id="email-label">* Email:</label>
                </td>
                <td id="tanswer">
                  <input type="email" id="email" placeholder="Enter your Email" required>
                </td>
              </tr>
              <tr>
                <td id="tlabel">
                  <label for="message">* Message:</label>
                </td>
                <td>
                  <textarea name="message" id="tanswer" rows="4"  placeholder="Enter your message" required></textarea>
                </td>
              </tr>
            </table>
            <button type="submit" id="submit">Submit</button>
          </form>
        </div>
      </header>
    <footer>
      <h4 class="foot">Created by Josy. H 2019</h4>
    </footer>
    <script type="text/javascript">
      function classToggle() {
        const navs = document.querySelectorAll('.nav-link')
        navs.forEach(nav => nav.classList.toggle('navbar__ToggleShow'));
        }

        document.querySelector('.navbar-icon-toggle')
        .addEventListener('click', classToggle);
    </script>
  </body>
</html>

body {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 0;
}

body, html {
  width: 100%;
  font-size: 12px;
}

#nav-bar {
  margin-right: 10%;
  position: fixed;
  top: 0;
  background-color: white;
  padding-bottom: 40px;
  width: 100%;
  z-index: 1;
}

.nav {
  display: flex;
  justify-content: flex-start;
}

img {
  max-width: 150px;
}

.img {
  padding-right: 10%;
}

.nav-link {
  font-size: 2rem;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 18px;
  margin-bottom: -25px;
}

li {
  list-style: none;
  height: 15px;
}

a:hover {
  color: rgb(69,154,211);
}

a {
  text-decoration: none;
  color: #344b51;
}

.navbar-icon-toggle {
  display: none;
}

.intro {
  background-image: url(https://i.imgur.com/UvZggNk.jpg);
  background-size: cover;
  background-color: #7887a0;
  background-blend-mode: multiply;
  height: 900px;
  }

#boost {
  font-family: 'Vladimir Script', cursive;
  font-weight: lighter;
  font-size: 100px;
  color: rgb(69,154,211);
}

h1 {
  color: white;
  font-size: 8rem;
  padding-top: 140px;
  text-align: center;
}

p {
  color: white;
  font-size: 4rem;
  text-align: center;
  position: relative;
  top: 10%;
  left: 15%;
  width: 70%;
}

button {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 25px;
  color: white;
  background-color: rgb(69,154,211);
  border-radius: 5px;
  height: 55px;
  width: 220px;
  border-style: none;
  position: relative;
  top: 20%;
  z-index: 0;
}

button:hover {
  cursor: pointer;
  background-color: #16659e;
}

.how {
  text-align: center;
  color: #344b51;
  font-size: 25px;
  font-weight: lighter;
}

.container {
   display: flex;
   padding-top: 2%;
}

.container > div {
  flex:1;
}

.fa-desktop, .fa-microphone, .fa-facebook-f {
  font-size: 70px;
}

.info {
  color: #344b51;
  font-size: 80%;
}

.item {
  font-size: 90%;
  margin-bottom: -4%;
}

.contact {
  background-color: #dae3f2;
  color: #344b51;
}

.intouch {
  font-size: 140%;
  text-align: center;
  padding-top: 3%;
}

.contact-form {
  padding-bottom: 2%;
  width: auto;
}

table {
  margin: auto;
  width: auto;
}

input {
  border-radius: 4px;
  border-style: none;
  width: 250px;
  height: 20px;
}

td {
  padding-right: 20px;
  width: auto;
  vertical-align: top;
  padding-bottom: 20px;
  font-size: 80%;
}

#tlabel {
  text-align: right;
}

#tanswer {
  text-align: left;
  border-radius: 4px;
  border-style: none;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  width: 250px;
  font-weight: lighter;
}

#submit {
  width: 80px;
  height: 30px;
  font-size: 70%;
  position: relative;
  right: 40px;
}

h4 {
  color: #344b51;
  text-align: center;
  font-size: 70%;
  margin-top: 1%;
  margin-bottom: 1%;
}

/*small laptops*/

@media only screen and (min-width: 768px) and (max-width: 1100px) {
  html {
    font-size: 8px;
  }

  h1 {
  max-width: 1090px;
  }

  p {
    padding-bottom: 90px;
  }

  .nav-link {
    padding-right: 30px;
    padding-left: 10px;
  }

}

/*tablets*/

@media only screen and (min-width: 500px) and (max-width: 768px) {
  html {
    font-size: 6px;
  }

  .intro {
    height: 800px;
  }

  h1 {
  padding-right: 5px;
  padding-left: 5px;
  }

  p {
    padding-bottom: 70px;
  }

  header {
    height: 20px;
  }
  .nav {
    flex-direction: column;
  }

  .nav-link {
    display:none;
  }

  .navbar-icon-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
    right: 30px;
    top: 20px;
  }

  .navbar__ToggleShow {
    display: flex;
    font-size: 20px;
    padding-top: 50px;
    padding-left: 5px;
    }

    li {
      height: 1px;
    }

    img {
      max-width: 100px;
    }

  button {
    font-size: 22px;
    height: 50px;
    width: 200px;
    }

  h2 {
    font-size: 22px;
    padding-bottom: 20px;
    padding-top: 20px;
  }

  .fa-desktop, .fa-microphone, .fa-facebook-f {
    font-size: 60px;
  }

  .item {
    font-size: 70%;
  }

  .info {
    font-size: 60%;
  }

  .intouch {
    font-size: 22px;
    padding-top: 20px;
  }
  td {
    font-size: 65%;
  }

  #tanswer {
    font-size: 12px;
  }

  input {
    font-size: 11px;
  }

  #submit {
    width: 70px;
    height: 25px;
    font-size: 60%;
    right: 55px;
  }
}

/*phones*/

@media only screen and (max-width: 500px) {
  .nav {
    flex-direction: column;
  }

  .nav-link {
    display:none;
  }

  .navbar-icon-toggle {
    align-self: flex-end;
    display: initial;
    position: absolute;
    cursor: pointer;
    right: 30px;
    top: 20px;
  }

  .navbar__ToggleShow {
    display: flex;
    font-size: 20px;
    padding-top: 50px;
    padding-left: 5px;
  }

  li {
    height: 1px;
  }

  html {
    font-size: 5px;
  }

  img {
    max-width: 100px;
  }

  .intro {
    height: 700px;
  }

  p {
    padding-bottom: 60px;
  }

  button {
    font-size: 17px;
    height: 40px;
    width: 180px;
    top: -15px;
    }

  .container {
    flex-direction: column;
    padding-right: 25px;
    padding-left: 25px;
    }

    h2 {
     font-size: 20px;
     padding-bottom: 20px;
     padding-top: 20px;
     }

   .fa-desktop, .fa-microphone, .fa-facebook-f {
       font-size: 50px;
     }

   .item {
       font-size: 70%;
       padding-bottom: 15px;
     }

   .info {
       font-size: 60%;
       margin-bottom: -15px;
     }

   .intouch {
       font-size: 20px;
       padding-top: 20px;
     }

  td {
      font-size: 55%;
    }

  #tanswer {
      font-size: 11px;
    }

  input {
      font-size: 10px;
    }

  #submit {
      width: 65px;
      height: 22px;
      font-size: 57%;
      right: 55px;
    }
}
2

The .nav-link class should be on the <a> elements, not the <li> elements.

3

Thank you so much!!
That was so easy but I just didnt see it.

1 Like
4

No problem. Glad to have helped :smile: