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

HI try remove the header container from it since nav element dont need to be wrapped by anything you can wrap the header element with nav but not the vice versa.

1 Like
3

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