Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Hello,

Some help needed,
no matter what I do, the navbar and the section are dividing the page so they are one besides another, and I need the navbar to be on top of things, also I have set the background to be only for the navbar but on preview its takes the whole page.
Could you advice what am I doing wrong here?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
      crossorigin="anonymous"
    />
  </head>
    <body>
      <nav id="navbar" class="nav">
        <ul class="nav-list">
          <li>
            <a href="#welcome-section">About myself</a>
          </li>
          <li>
            <a href="#projects">My work</a>
          </li>
          <li>
            <a href="#contacts">Contact Me</a>
          </li>
        </ul>
      <nav>
       <section id="welcome-section" class="welcome-section"><h1>Hello I am Roman</h1>
       <p>Your Neighborhood web developper</section>
       <section id="projects" class="projects"><h1></h1></section>
       <section id="contacts" class="contacts"><h1></h1></section>

        
      </body>
</html>

/* file: styles.css */
body {
  font-family: 'poppins', sans-serif;
}

.nav {
background-color: #4682B4;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: flex-end;
}

.nav-list {
  display: flex;
  flex-direction: row;
}

li {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
  font-size: 1.5em;
  padding: 1rem 2rem;
}

a:hover {
  background-color: #008B8B
}

#welcome-section {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Hi Roman,

You’re missing the / in the closing tag </nav>.
It made your navigation bar never end.
That’s what causes the problem.

Also, you need to close your paragraph with the closing tag, too:

Happy coding!

3

Wow thanks! Works great now!

1 Like