Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
My Nav bar is on top but : * Your #navbar element should always be at the top of the viewport.

Where is problem i didn’t understand that can you guys help me ?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav id="navbar">
      <ul>
        <li><a href="#welcome-section">Welcome</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a id="profile-link" href="https://github.com/your-username" target="_blank">GitHub</a></li>
      </ul>
    </nav>
  </header>

  <section id="welcome-section">
    <h1>Welcome to My Portfolio</h1>
  </section>

  <section id="projects">
    <div class="project-tile">
      <h2>Project 1</h2>
      <p>Description of Project 1</p>
      <a href="project1.html">View Project</a>
    </div>
  </section>
</body>
</html>


/* file: styles.css */
/* General Styles */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* Header and Navigation */
header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  z-index: 999; /* Ensures the navbar is always on top */
}

#navbar {
  display: flex;
  justify-content: flex-end;
}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#navbar li {
  display: inline;
  padding: 10px;
}

#navbar a {
  color: #fff;
  text-decoration: none;
}

/* Welcome Section */
#welcome-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
}

#welcome-section h1 {
  font-size: 40px;
  color: #333;
}

/* Projects Section */
#projects {
  padding: 20px;
}

.project-tile {
  background-color: #f1f1f1;
  padding: 20px;
  margin-bottom: 20px;
}

.project-tile h2 {
  font-size: 24px;
  color: #333;
}

.project-tile p {
  font-size: 16px;
  color: #555;
}

.project-tile a {
  display: inline-block;
  margin-top: 10px;
  color: #fff;
  background-color: #333;
  padding: 8px 16px;
  text-decoration: none;
}

/* Media Query for Responsive Design */
@media (max-width: 768px) {
  header {
    position: static;
    background-color: #f1f1f1;
  }

  #navbar {
    justify-content: center;
  }

  .project-tile {
    margin-left: 0;
    margin-right: 0;
  }

  .project-tile h2 {
    font-size: 20px;
  }

  .project-tile p {
    font-size: 14px;
  }
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

That error is saying that your navbar should always be at the top. Meaning if I scroll down then that navbar should be following the screen so I can click on a link in the navbar no matter how far down or up I am on the page.

This should help

3

It is on top whe i scroll it’s always on top

4

I will check again in a second, but when I checked the last time with your posted code it was not. I dont see any code in your nav that would keep it at the top, but it will be a minute before im back at my computer

5

Okay thank you so much

6

Notice how I am at the bottom of your page. I should still be able to see the navbar, but its not there.

image
image596×761 17.4 KB

but when I add the code to keep it there, I can see your navbar and the challenge passes for me. Just for the future if you ever update this later down the road as you learn things, but it would be a good idea to change the color for those links. Its very hard to see them

image
image500×747 14.3 KB

The link I posted gives you what you need

7

Thank You very much.