Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
“Your #navbar element should always be at the top of the viewport.”
I’ve been working on this problem for hours on end and it keeps giving me this error. Please help.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Personal Portfolio</title>
      <meta charset="UTF-8">
      <meta content="width=device-width, initial-scale=1.0" name="viewport">
      <link rel="stylesheet" href="styles.css">
   </head>


   <body>
      <header>
   <nav id="navbar">
      <ul class="nav-list">
        <li>
          <a href="#welcome-section">About</a>
        </li>
        <li>
          <a href="#projects">Work</a>
        </li>
        <li>
          <a href="#profiles">Contact</a>
        </li>
      </ul>
    </nav>
    </header>
      <section id="welcome-section">
       <h1 id="salutations">Hello, I'm Jayden!</h1>
     <p id="thefirstp">the web dev</p>
   </section>
   <section id="projects">
      <h1 id="project-title"><u>This is my work(Click the images)<u/></h1>
      <div class="project-tile">
         <a href="https://codepen.io/basicW/pen/wvYraOq"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Croce-Mozart-Detail.jpg/220px-Croce-Mozart-Detail.jpg"></img></a>
         <a href=" https://codepen.io/basicW/pen/mdoyLZa"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/640px-Python-logo-notext.svg.png"></img></a>
         <a href="https://codepen.io/basicW/pen/KKEwewz"><img src="https://uxwing.com/wp-content/themes/uxwing/download/business-professional-services/surveys-audit-icon.png"></img></a>
          <a href="https://codepen.io/basicW/pen/yLwyENV"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Shopping_cart_icon.svg/640px-Shopping_cart_icon.svg.png"></img></a>
      </div>
   </section>
   <section id="profiles">
      <h1>My Contacts/Profiles</h1>
      <h1><a href="discordapp.com/users/1049005064137740318" id="profile-link" target="_blank" >Discord</a></h1>
     <h1><a href="https://github.com/basicW" target="_blank" id="profile-link">Github</a></h1>
   </section>
   </body>
</html>

/* file: styles.css */
#navbar{
    height: 120px;
    background-color: #000000;
    text-align: center;
  left: 0;
  width: 100%;
  z-index: 9999;
}
#welcome-section{
    text-align: center;
  background-color: #3a3d40;
  font: 1em Helvetica;
}
#thefirstp{
    color: #FAF5E9;
    font-size: 3em;
}

#salutations{
    color: #FFCC00;
    font-size: 6em;
}

#nav-bar{
 width: 100%;
 height: 120px;
 background-color: #000000;
 text-align: center;
 position: relative;
 top: 0;
 overflow: hidden;
}
a{
color: #FFCC00;
text-decoration: none;
}

#project-title{
   color: #FFCC00;
   text-align: center; 
}

#projects{
    background-color: #009B4D;
    font: 1em Helvetica;
}

/* CSS */
button {
  background-color:#000;
  border-radius: 12px;
  color: #000;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 15px;
  text-align: center;
  transition: 200ms;
  width: 25%;
  box-sizing: border-box;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

}
img{
    text-align: center;
}

#profile-link{
background-color: #009B4D;
color: #FFCC00;
text-decoration: none;
 font-size: 6em;
 text-align: center;
}

@media screen and (min-width: 480px) {
  body {
    background-color: #FFCC00;
  }
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

This is personal project and I am not going to fix problems in your code, but here is the lesson link that can you learn how to set element at the top of the viewport `[(https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-48)]. If there’s another important lesson that comes to mind go back and study

4

It did not work please give another way of fixing it.

5

your #navbar element should have position property fixed and top value be 0

2 Likes
6

Thank you, thank you, thank you!!! You help a bunch! You have know idea how long I have worked on this problem! Thank you!!!

1 Like
7

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