how to put navbar element at the top of the viewport
i don’t know what they mean by putting the navbar at the top of the viewport. could somebody please clarify that for me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=500, initial-scale=1.0">
<meta charset="UTF-8">
<title>Norma's Portfolio</title>
<link rel="stylesheet" href="styles.css"/>
<script src="https://kit.fontawesome.com/b98b02e413.js" crossorigin="anonymous"></script>
</head>
<body>
<ul>
<div id="navbar">
<li class="about"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design"></a></p>
<a href="about.hsp"><span class="about">About </span></a></li><li class="work"><a href="work-ethic.hsp"><span class="work">Work</span> </a></li><li class="connect"><a href="connect.hsp"><span class="connect">Connect </span></a></li>
</ul>
</div>
<div id="welcome-section">
<h1 id="title">Hello my name is Norma<span id="heart">💜</span><span class="title-two"> a web developer</span></h1>
<h1 id="projects">These are some of my projects</h1>
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page">
<div class="project-tile">
<img src="https://cdn.theatlantic.com/thumbor/1eLgsh6WVKKyOvSZQj8Lghm9iGQ=/1200x800/media/img/photo/2020/04/photos-essential-work-farmers-coron/f01_1216824338/original.jpg" alt="farmer" class="image-one"/><p class="border">Tribute Page</p></a>
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-69"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="cat-photo-app" class="cat"/><p class="cat-text">Cat photo app</p></a>
</div>
</a>
<div id="projects">
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-89"></a>
</div>
<div id="bottom">
<h1 class="together">Let's work together</h1>
<p class="coffee">"How do you take your coffee?"</p>
<p id="profile-link">
<a src="https://www.freecodecamp.org/misslathan" alt="profile-links"><i class="fa-brands fa-free-code-camp"></i><span id="freecodecamp">FreeCodeCamp.org </span></a><a href="https://www.linkedin.com/in/norma-lathan-a10667139/" alt="linkedIn"><span class="linkedIn"><i class="fa-brands fa-linkedin"></i>LinkedIn </span></a><a href="" alt="email"><span class="email"><i class="fa-solid fa-at"></i>Send an email</span></a>
</p>
</div>
</body>
</html>
body{
text-align:center;
margin: 250px;
font-family: sans-serif;
background:linear-gradient(90deg, hotpink, rgba(20, 30, 40, 60))
}
#navbar{
position:absolute;
right:0;
top:0;
margin:0 auto;
font-family:sans-serif verdana;
font-weight:bold;
}
ul{
list-style-type: none;
overflow: hidden;
}
li{
float:left;
}
a:link{
text-decoration:none;
}
a:hover{
transform: scale(1.5);
cursor:pointer;
}
.about{
padding:10px;
margin-right:20px;
}
.work{
padding:20px;
margin-top:10px;
}
.connect{
padding:20px;
margin-top:10px;
}
#welcome-section{
margin:0;
display: block;
}
#image-one {
width:350px;
top:0;
display:flex;
}
#title{
color:white;
font-family:sans-serif verdana;
}
.title-two{
display:flex;
align-items:center;
justify-content:center;
}
.linkedIn{
margin:10px;
color:white;
font-size:25px;
}
.email{
margin:10px;
color:white;
font-size:25px;
}
#freecodecamp{
margin:10px;
color:white;
font-size:25px;
}
.fa-free-code-camp{
color:white;
}
#projects{
margin:250px;
display: block;
font-family:sans-serif verdana;
color:white;
left:25px;
}
.project-tile{
margin:0;
display:flex;
}
.image-one{
max-width:400px;
float:left;
margin:20px;
border: 5px solid #ddd;
border-radius: 4px;
padding: 5px;
}
.border{
color:white;
}
h1{
color:white;
}
.cat{
border: 5px solid #ddd;
border-radius: 4px;
padding: 5px;
max-width: 400px;
margin:0;
}
.cat-text{
float:bottom;
color:white;
}
.about{
color:white;
}
.work{
color:white;
}
.connect{
color:white;
}
.coffee{
color:white;
font-family: sans-serif;
font-size:20px;
}
