Tell us what’s happening:
My final tests about the #navbar always being on top is still failing, where might the problem be.
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Personal Portfolio</title>
<meta name="viewport" content="width="device-width" initial-scale="1.0""/>
<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--welcome section begins here-->
<section id="welcome-section">
<div class="title">
<h1>portfolio</h1>
<nav id="navbar">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#project-section">Projects</a></li>
<li><a href="#contacts">Contacts</a></li>
</ul>
</nav>
</div>
<h2>Jayden</h2>
<p>hi and thank you for visiting my potfolio page. We have a lot to show you.</p>
</section>
<!--project section begins here-->
<section id="project-section">
<h2> These are some of my projects</h2>
<div>
<a href="www.google.com"><embed type="text/html" src="C:\Users\Jayden\Downloads\build-a-product-landing-page(1).html" class="project-tile"/></a>
<embed type="text/html" src="C:\Users\Jayden\Downloads\design-a-newspaper-layout.html" class="project-tile2"/>
<embed type="text/html" src="C:\Users\Jayden\Downloads\design-a-pricing-plans-layout-page(1).html" class="project-tile3"/>
<embed type="text/html" src="C:\Users\Jayden\Downloads\build-a-technical-documentation-page(1).html" class="project-tile4"/>
</div>
</section>
<!--contacts section begins here-->
<section id="contact">
<div class="contacts">
<a href="www.facebook.com" class="fa fa facebook" target="_blank"></a>
<a href="www.twitter.com" class="fa fa twitter" target="_blank"></a>
<a href="www.github.com" class="fa fa github" id="profile-link" target="_blank"></a>
</div>
</section>
</body>
<footer>
<p>Thank you for your interest... contact soon please</p>
</footer>
</html>
/* file: styles.css */
*{
box-sizing:border-box;
}
/*welcome section*/
.title{
display:flex;
justify-content:space-between;
}
.title{
height:80px;
position:sticky;
top:0;
background-color:#3F9AAE;
color:#FFE2AF;
}
#welcome-section{
background-color:#79C9C5;
height:100vh;
}
nav a{
text-decoration:none;
color:#FFE2AF;
right:20px;
}
#navbar{
position:sticky;
top:0;
right:0;
}
ul{
display:flex;
justify-content:space-between;
width:25vw;
list-style-type:none;
}
#welcome-section h2{
font-size:3rem;
text-align:center;
}
h1{
text-transform:uppercase;
}
#welcome-section p{
font-size:1.3rem;
position:absolute;
top:80vh;
left:15vw;
}
#welcome-section p:first-letter{
text-transform:uppercase;
font-size:1.7rem;
}
/*start of project section*/
#project-section h2{
font-size:1.5rem;
text-align:center;
}
#project-section div{
display:grid;
grid-template-columns:repeat(4, 1fr);
grid-template-rows:repeat(2, 1fr);
}
/*media query*/
@media screen and (width:652px){
.title{
height:50px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:146.0) Gecko/20100101 Firefox/146.0
Challenge Information:
Build a Personal Portfolio - Build a Personal Portfolio
