Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:

Describe your issue in detail here.
Your #navbar element should always be at the top of the viewport. I think I did everything correctly, but still it is not working. can anyone help me out?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
<title>Portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
  </head>
  <body>
<main>
<section id="welcome-section" class="welcome">
<h1>WELCOME</h1>
<h4 id="info">Info about author</h4>
</section>
<section id="projects">
  <div class="project-tile">
    <a href="https://hdtoday.tv/">Project1</a>
  </div> 
</section>
<navbar id="navbar">
<a href="#info" id="info" >Info</a>
<header  >ddjhdiljejghkuyjeelirfuahwatarbv</header>
</navbar>
<div>
<h2>
<a  id="profile-link" href="https://personal-portfolio.freecodecamp.rocks/" target="_blank">My accounts</a></h2>
</div>


















</main>
  </body>
  </html>
/* file: styles.css */
.welcome{
  height: 100vh;
  text-align: center;
  padding:70px;
}
@media welcome{
  color: green;
}
header{
 position: fixed;
    top: 0px;
    width: 100%;
    height: 19px;
    padding: 15px 0px;
 }

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

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!

Hello! @Sabreenam

Happy New Year!

You’re there already!

Style your navbar element in CSS as the position to fixed, width to 100% and top to 0.

Hey @Sabreenam
Great work so far.
There is no html element known as navbar its known as nav so u need to make these changes to your code
Semantically html is supposed to rake the format below

<body><header><nav></nav></header<main</main><footer></footer>
Maybe if you look at this and compare to the code above you will spot some bugs in your code

Happy learning

Hi!!!
Happy New Year!
i did but it is not working

Hi
thank you but it is not working

Oh! Could u share the CSS code?

1 Like

hey, i found my mistake
i forgot to write #navbar in my css code.
Anyway, thank you so much.

1 Like