Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

I kind of need help with this
I keep getting this error message:
Your #navbar element should always be at the top of the viewport.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Portfolio</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body> 
<nav id="navbar"><a href="#"></a></nav>
<section id="welcome-section"><h1>Welcome</h1></section>
<section id="projects"><a href="">
  <div class="project-tile"></div>
<a id="profile-link" target="_blank"></a>
</body>


/* file: styles.css */
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 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Well, it’s hard to tell where your nav bar is when you don’t have any link text in it.

I would take a look at CSS position property.

1 Like
3

  1. You have position: fixed on a header selector but you have no such element in your HTML. Wrap your navigation inside that element.

  2. Do not set header back to position: static inside the media query.

4

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