Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Hello! I am doing the final portfolio project. And I can’t make my code comply with the condition that the nav is always on top of everything. Visually it is at the top. But it won’t let me pass the test.

Your code so far

<!-- file: index.html -->
<!DOCTYPE HTML>
<html>
  <head>
  <link rel="stylesheet" href="styles.css">  

  </head>
  <body>
    <nav id="navbar">
      <ul id="nav-list">
        <li>
          <a href="#">About</a>
        </li>
        <li>
          <a href="#projects">Work</a>
        </li>
        <li>
          <a href="#">Contanct</a>
        </li>
      </ul>
    <nav>
    <section id="welcome-section">
      <h1>Hey I am Mimic </h1>
      <h2>a web developer</h2>
    </section>
    <section id="projects" class="project-section">
      <div class="project-header"></div>

      <h1>These are some of my projects</h1>
      <div class="projects-grid">
        <a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project project-tile">
          <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="project">
          <p class="project-title">
            <span class="code">&lt;</span>
            Tribute Page
            <span class="code">/&gt;</span>
          </p>
        </a>

        <a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank" class="project project-tile">
          <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" alt="project">
          <p class="project-title">
            <span class="code">&lt;</span>
            Random Quote Machine
            <span class="code">/&gt;</span>
          </p>
        </a> 

        <a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank" class="project project-tile">
          <img class="project-image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" alt="project">
          <p class="project-title">
            <span class="code">&lt;</span>
            JavaScript Calculator
            <span class="code">/&gt;</span>
          </p>
        </a>

      </div>

    </section>
    <section id="contact">
      <div class="contact-section-header">
        <h1>Let´s work together</h1>
        <p>How do you take your coffee</p>
      </div>
      <div class="contact-link">
        <a id="profile-link" href="#" target="_blank" class="btn contact-details"></a>

      </div>

    </section>







  </body>





</html>

/* file: styles.css */
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}

#navbar {
  top: 1;

}


#nav-list {
  background-color: #f00;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  height:70px;
  justify-content: space-around;
}

#welcome-section {
  background: linear-gradient(to right, #4c4c4c 0%,#595959 12%,#666666 21%,#474747 33%,#2c2c2c 46%,#000000 57%,#111111 74%,#111111 74%,#1c1c1c 82%,#2b2b2b 94%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  }

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

#welcome-section h2 {
  color: #f00;
}

#projects {
  background: grey;
  height: 500px;
}

.project-header {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: start;

}

#projects h1 {
  font-size: 40px;
  }

.projects-grid {
  grid-template-columns: repeat(3,100px);
  grid-template-rows: 100px;
}


@media (max-width: 1000px) {

  sectionv{}

  #navbar {
    top:1
  }

.projects-grid {
  grid-template-columns: repeat(3,100px);
  grid-template-rows: 100px;
}


}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Hi,

yes visually it is at the top but when you scroll it should be there, visible. To do this, you need to change the position of your #nav-bar to fixed. and your current code doesn’t bring any changes.

3

This link may be helpful:
CSS Layout - The position Property (w3schools.com)

You want the navbar to be at the top of the viewport, so its always on screen.

4

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