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 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

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

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.

4

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

5

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

6

Hi
thank you but it is not working

7

Oh! Could u share the CSS code?

1 Like
8

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

1 Like
9

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