Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

Hi everyone, I get the error “Your #navbar element should always be at the top of the viewport”. I ve been trying to do it right but I don’t know what else to do. It’s seem to be right for me. I’m new in coding so maybe there is something that I missing. I appreciate any help or advice. Thanks

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Ramiro Bratti</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <section id="welcome-section" class="asd">

<navbar id="navbar" class="navbar">
<a href="#About">About</a>
<a href="#Works">Projects</a>
<a href="#Contact">Contact</a>
</navbar>

<h1 >Hey I'm Ramiro</h1>
<h1>a web developer student</h1> 
</section>


<section id="projects">
<h1 id="Works">These are some of my projects. I know that I have a lot to learn but I will do my best to improve myself :)</h1>
<a class="project-tile">
<div class="projects">
<a id="profile-link" target="_blank" href="https://fr.wikipedia.org/wiki/Lionel_Messi">| Tribute page |
</a>
<a id="profile-link" target="_blank" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form">Survey Form |
</a>
<a id="profile-link" target="_blank" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page">Technical Documentation Page |
</a>
<a id="profile-link" target="_blank" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page">Product Landing Page |
</a>
</div>
</section>
<section  class="contact">
<h1 id="Contact">I leave my adresse mail here in case you want to work with me :)</h1>
<a>brattiramiro@gmail.com</a>





/* file: styles.css */
body {background-color: red; }

h1 {text-align: center; font-size: 32; margin-top: 80}

.projects {font-size: 30; text-align: center }

.navbar {font-size: 35; background-color: black; margin-top: 0}

.contact > a {font-size: 30;  }

@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36 Edg/116.0.1938.62

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Hello and welcome.

Add the position: fixed to your navbar styles.

Grets.

3

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