My personal portfolio passes all the tests except for the last one that says the navbar must stay at the top of the viewport which i dont understand because my nav-bar does stay fixed at the top of the page. Also any idea how to get rid of the whitespace at the bottom of the document?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav id=navbar>
<ul>
<li><a href="#intro">About</a></li>
<li><a href="#projects">Work</a></li>
<li><a href="#profile">Contact</a></li>
</ul>
</nav>
</header>
<div id="welcome-section">
<h1>Hey I am Craig</h1>
<p>a web developer</p>
</div>
<div id="projects">
<p>These are some of my projects</p>
<div id="flex-proj">
<div class="project-link">
<a href="https://codepen.io/CraigMarc/full/MWBwmEa" ><img src="https://acsess.onlinelibrary.wiley.com/cms/asset/b9220e74-6d2b-429b-bcec-42c07300e385/csancsa20145931-fig-0003-m.jpg"></a>
<div class="project-tile">Tribute Page</div>
</div>
<div class="project-link">
<a href="https://codepen.io/CraigMarc/full/VwBLbzQ" ><img src="https://image.slideserve.com/566203/common-technical-document-l.jpg"></a>
<div class="project-title">Technical Document</div>
</div>
<div class="project-link">
<a href="https://codepen.io/CraigMarc/full/mdjJmwK" ><img src="https://i.ytimg.com/vi/dkPKTUCWoqw/maxresdefault.jpg"></a>
<div class="project-title">Survey Form</div>
</div>
<div class="project-link">
<a href="https://codepen.io/CraigMarc/full/eYjNWvJ" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSD6XziL97HnpjmqY794zMytKzR2RRnyacKXP__Kp6CA&s"></a>
<div class="project-title">Product Landing Page</div>
</div>
</div>
</div>
<div id="profile">
<p>Lets Work Together</p>
<a id="profile-link" target="_blank" href="https://www.freecodecamp.org/fcc45f9387c-4140-4714-8035-e1c38ce2883a"> <img class="profilelink" src="https://tse3.mm.bing.net/th?id=OIP.BXz59EsMzryRcRdjaJnlVgHaA5&pid=Api&P=0"></a>
</div></body>
</html>
img {
height: 160px;
width: 200;
}
body {
font-family: Helvetica;
margin: 0;
}
header {
top: 0;
width: 100%;
height: 50px;
background-color: #D02929;
position: fixed;
z-index: 2;
}
nav > ul {
display: flex;
justify-content: right;
gap: 10px;
list-style: none;
padding-right: 20px;
padding-top: 0px;
}
nav > ul > li > a {
text-decoration: none;
color: white;
}
#welcome-section {
height: 100vh;
background-color: #312525;
color: white;
text-align: center;
}
#welcome-section > h1 {
font-size: 25px;
position: relative;
top: 30%;
z-index: 1;
}
#welcome-section > p {
font-size: 17px;
position: relative;
top: 27%;
z-index: 1;
}
#projects {
background-color: #1C1D6D;
text-align: center;
position: relative;
top: -20;
padding-top: 10;
padding-bottom: 25;
}
#flex-proj {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px
}
.project-tile {
background-color: #312525;
color: white;
}
#profile {
background-color: #312525;
height: calc(100vh - 50px);
position: relative;
top: -37;
padding-top: 10px;
text-align: center;
}
#projects > p {
font-size: 20px;
color: white;
}
#profile > p {
color: white;
font-size: 25px;
}
.profilelink {
height: 20;
}
@media (max-width: 550px) {
.profilelink: {
height: 20}
}
}