Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening: “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.

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

It’s been a while since I’ve done this module, but maybe try putting the navbar on top of the header for this project, or ditch the header all together (if its not required) and use a div after the navbar instead.

1 Like
3

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

2 Likes
4

You’re welcome!! I know I’ve spent enough time staring at things until my eyes are crossed, especially since starting the JavaScript module :rofl:

I’ve noticed that some of the prompts ask for things I wouldn’t necessarily do in my projects, so it does take some rearranging and spell checking to make things work in these lessons.

2 Likes
5

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