Failed:Your #navbar element should always be at the top of the viewport

<!DOCTYPE html>
<html>
  <head>

    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>

    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
      rel="stylesheet"
    />
   <!-- START NAV -->

    <nav id="navbar" class="nav">
      <ul class="nav-list">
        <li>
          <a href="#welcome-section">About</a>
        </li>
        <li>
          <a href="#projects">Work</a>
        </li>
        <li>
          <a href="#contact">Contact</a>
        </li>
      </ul>
    </nav>

    <!-- END NAV -->
 
  </head>
  <body>
    
    <!-- START WELCOME SECTION -->

    <section id="welcome-section" class="welcome-section">
      <h1>Hey I am Lebuhang Maduna</h1>
      <p>a full stack developer</p>
    </section>

    <!-- END WELCOME SECTION -->

    <!-- START PROJECTS SECTION -->

    <section id="projects" class="projects-section">
      <h2 class="projects-section-header">These are some of my projects</h2>
<a id="profile-link" target="_blank"></a>
      <div class="projects-grid">
        <a
          href="https://codepen.io/lebu-maduna/pen/LYXyVZe"
          target="_blank"
          class="project project-tile"
        >
          <img
            class="project-image"
            src="https://cdn.borna.news/thumbnail/3k1sd2PYs8tO/zKlnR2CgDMsLPypExSqkWVexFSgSRltNvp3exfX06vug6WJOtspsxLwVvO9faXc9wvplisndFdUHpxCkrVbVYTw2XbzuthE8/%D9%86%D9%84%D8%B3%D9%88%D9%86-%D9%85%D8%A7%D9%86%D8%AF%D9%84%D8%A7.jpg"
            alt="project"
          />
          <p class="project-title">
            <span class="code">&lt;</span>
            Tribute Page
            <span class="code">&#47;&gt;</span>
          </p>
        </a>
        

    <!-- END PROJECTS SECTION -->

    <!-- START CONTACT SECTION -->

    <section id="contact" class="contact-section">
      <div class="contact-section-header">
        <h2>Let's work together...</h2>
        <p>How do you take your coffee?</p>
      </div>
      <div class="contact-links">
        <a
          href="https://www.facebook.com/profile.php?id=100091363446671"
          target="_blank"
          class="btn contact-details"
          ><i class="fab fa-facebook-square"></i> Facebook</a
        >
        
       
        <a href="/cdn-cgi/l/email-protection#f99c81989489959cb99c81989489959cd79a9694" class="btn contact-details"><i class="fas fa-at"></i> Send a mail</a
        >
        <a href="tel:07293897000" class="btn contact-details"
          ><i class="fas fa-mobile-alt"></i> Call me</a
        >
      </div>
    </section>

    <!-- END CONTACT SECTION -->


    <!-- END FOOTER SECTION -->
  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>

We need to see your CSS as well.

Update your post with it. Use the </> button to format the code.


For future reference.

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.