Build a personal portfolio webpage

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;
  • 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

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