Personal Portfolio Webpage - Build a Personal Portfolio Webpage - Your `#navbar` element should always be at the top of the viewport

HTML-CSS
1

Tell us what’s happening:
I keep getting the error: Your #navbar element should always be at the top of the viewport. The website seems to be properly working though, but still getting the error:

https://robmaasmarin.github.io/portfolio.github.io/

I’ve been debugging and googling for hours now. Any hint is appreciated.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">

    <title>My portfolio</title>
  </head>
  <body>

<header>
  


    <nav id="navbar">
      <ul class="navbar-list">
        <li><a href="#welcome-section">About</a></li>
        <li><a href="#projects">My work</a></li>
        <li><a href="#contact">Reach me!</a></li>
      </ul>

    </nav>
    </header>

    <!-- COMIENZA LA WELCOME SECTION -->
    <section id="welcome-section" class="welcome-section">
      <h1>Weee I'm Bob Marin</h1>
      <p>Runner and selft-taugth developer</p>
    </section>

<!-- TERMINA LA WELCOME SECTION -->

<!-- COMIENZA LA Projects SECTION -->
    <section id="projects" class="projects-section">
      <h2 class="project-header">Find below some of my projects

      </h2>
      <div class="project-grid">
        <a href="https://robmaasmarin.github.io/GalicianPhishingvillages.github.io/" target="_blank" class="project project-tile">

        <img src="https://mochilerosindinero.com/wp-content/uploads/2021/11/cambadosSadurnio.jpg" alt="project" class="project-image">
        <p class="project-title">Phishing Villages</p>
        </a>
        <a href="https://robmaasmarin.github.io/magazine.github.io/" target="_blank" class="project project-tile">

        <img src="https://robmaasmarin.github.io/magazine.github.io/magazineimage.PNG" alt="project" class="project-image">
        <p class="project-title">Our magazine</p>
        </a>

        <a href="https://robmaasmarin.github.io/cityskyline.github.io/" target="_blank" class="project project-tile">

        <img src="https://robmaasmarin.github.io/cityskyline.github.io/skyline.png" alt="project" class="project-image">

        <p class="project-title">City skyline</p>
        </a>

      </div>

      <a href="https://github.com/robmaasmarin" class="btn click-here-for-more" target="_blank">Click here to find out more  <i class="fa-solid fa-circle-plus"></i></a>

    </section>

    <!-- TERMINA LA Projects SECTION -->

<!-- Sección de contacto -->
    <section id="contact" class="contact">
      <div class="contact-header">
        <h2>Let's do have a chat</h2>
        <p>Running or programming?</p>

      </div>
      <div class="contact-links">
        <a href="https://www.instagram.com/robmaasmarin/" target="_blank" class="btn contact-details"><i class="fa-brands fa-instagram"></i> instagram</a>

        <a href="https://github.com/robmaasmarin" id="profile-link" target="_blank" class="btn contact-details"><i class="fa-brands fa-github-alt"></i> GitHub</a>
        <a href="https://twitter.com/robmaasmarin" target="_blank" class="btn contact-details"><i class="fa-brands fa-square-twitter"></i> Twitter</a>
        <a href="https://www.linkedin.com/in/roberto-abelleira-pesqueira-554b44a1/" target="_blank" class="btn contact-details"><i class="fa-brands fa-linkedin"></i> Linkedin</a>


      </div>

    </section>

    <footer>
      <p>Hope you enjoyed my very first portfolio of many to come.</p>

      <p>This is part of the activity "Build a Personal Portfolio Webpage" by<a href="https://www.freecodecamp.org/" target="_blank">
         freeCodeCamp <i class="fa-brands fa-free-code-camp"></i></p></a>


    </footer>


  </body>
</html>




@media only screen and (max-width: 780px) {
img {
	width: 300px;
	height: 300px;
}
}

<style>
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');
</style>

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}



* {
  margin: 0;
  padding: 0;
  background-color: #feffdf;
  text-decoration: none;
  color: black;
}


html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}


body {
  font-family: 'Berkshire Swash', cursive;
  font-size: 1.8rem; /* 18px */
  font-weight: 400;
  line-height: 1.4;
  color: black;
  text-decoration: none;

}

a {
  text-decoration: none;
  color: black;
}

header {
  position: fixed;
}

#navbar {
  display: flex;
  justify-content: flex-end;
position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #feffdf;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);


}




.navbar-list {
  display: flex;
  margin-right: 2rem;

}



@media (max-width: 28.75em) {
  #navbar {
    justify-content: center;
  }

  .navbar-list {
    margin: 0 1rem;
  }
}

.navbar-list a {
  display: block;
  font-size: 2.2rem;
  padding: 2rem;
}

.navbar-list a:hover {
  background: green;
}

li {
  list-style: none;
}

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  font-size: 3.4rem;
  background-color: #feffdf;

}

.welcome-section > p {
  font-size: 3rem;
  font-weight: 200;
  font-style: italic;
  color: black;
}


/* Projects section */

.projects-section {
  text-align: center;
  padding: 10rem 2rem;
  background: #feffdf;
  font-size: 3rem;
}


.project-header {
  max-width: 640px;
  margin: 0 auto 6rem auto;
  border-bottom: 0.2rem solid black;
}

@media (max-width: 28.75em) {
  .project-header {
    font-size: 12rem;
  }
}


.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 4rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 6rem;
    font-size: 2.4rem;
  }

  .click-here-for-more {
    font-size: 3.4rem;
  }

  @media (max-width: 30.625em) {
    .projects-section {
      padding: 6rem 1rem;
    }

    .project-grid {
      grid-template-columns: 1fr;
    }
  }

  .project-image {
    height: calc(100% - 6.8rem);
    width: 100%;
    object-fit: cover;
  }



  /* Contacto */





  .contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 80vh;
    padding: 0 2rem;
    background: #feffdf;
  }
  .contact-header > h2 {
    font-size: 6rem;
  }


  @media (max-width: 28.75em) {
    .contact-header > h2 {
      font-size: 4rem;
    }
  }


  .contact-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 980px;
    margin-top: 4rem;
    flex-wrap: wrap;

  }



  .contact-details {
    font-size: 2.4rem;
    color: inherit;
    transition: transform 0.3s ease-out;
  }

  .contact-details:hover {
    transform: rotate(360deg);;
  }


  footer {
    font-weight: 300;
    display: flex;
    justify-content: space-evenly;
    padding: 2rem;
    background: #feffdf;
    border-top: 4px solid black;

  }

  footer > p {
    margin: 2rem;

  }

  footer i {
    vertical-align: middle;

  }

  @media (max-width: 28.75em) {
    footer {
      flex-direction: column;
      text-align: center;
    }
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

  • <p>This is part of the activity "Build a Personal Portfolio Webpage" by<a href="https://www.freecodecamp.org/" target="_blank">↩ freeCodeCamp <i class="fa-brands fa-free-code-camp"></i></p></a>↩
    Here the closing </a> tag should be put before the closing </p> tag

  • HTML tags <style></style> doesn’t belong to the CSS file

1 Like
3

You just made my day. Thanks a million!

image
image1119×802 32.2 KB

1 Like
4

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