Build a personal portfolio webpage

HTML-CSS
1

Hi Everyone!

I feel stuck with my last point of this assignment which is fixing the navbar on the top of the viewport. I have tried different combinations but it seems like I am still missing out on something. I would highly appreciate your opinion!

Here is my code:

<!DOCTYPE html> 
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width"initial-scale=1.0">
      <title>My Personal Portfolio Webgage</title>
      <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">

  </head>

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

<hr>

<body>
    <section id="welcome-section">
      <h1>Hey I am Mimic</h1>
      <p>A Web Developer</p>
    </section>

<hr>

    <section id="projects">
      <h1>These are some of my projects</h1>
        <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank"></a>
        <img src="https://codepen.io/freeCodeCamp/full/zNqgVx" alt="Tribute Page" title="Tribute Page">
        <p class="project-tile">Tribute Page</p>
      </div>
    </section>

    <section id="contact">
      <h1>Let's work together</h1>
      <p>How do you take your coffee?</p>

      <div id="contact">
        <a id="profile-link" href="https://github.com/freecodecamp" target="_blank"></a>
      </div>

    </section>

  </body>

<hr>

  <footer>
      <p>**This is just a fake portfolio. All the projects and contact details given are not real.</p>
      <p>&copy; Created for freeCodeCamp</p>
  </footer>

</html>

And CSS:

@media screen only and (width:1500px)

#navbar {
  display: flex;
  flex-direction: column;
  position: fixed;
  text-align: center;
  width: 100vw;
2
  • Media query hasn’t a properly written syntax.
  • ‘body’ element should be found after the ‘head’ element
  • body element must have the closing tag before the </html> tag
  • you should add after the ‘position’ property, ‘left’ and ‘top’ properties set to zero