Tell us what’s happening:
** Im getting the error Your #nav-bar
should always be at the top of the viewport.
My header is staying pinned to the top but Im guessing because its not defined its not letting me pass… But im having no issues with the header… can someone please help me figure out what to fix… Thanks**
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
body{
background-color:#EEE;
font-family: 'Lato', sans-serif;
}
#header{
display:flex;
flex-direction:row;
justify-content:space-around;
align-items:center;
}
.logo{
width: 60vw;
}
#header-image{
max-width:300px;
width:100%;
height:100%;
}
#nav-bar{
font-weight:bold;
width: 40vw;
top: 0;
}
ul{
display:flex;
flex-direction: row;
justify-content: space-around;
}
li{
list-style: none;
}
.nav-link{
color:black;
text-decoration:none;
}
#hero{
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
#hero input[type="email"]{
max-width: 275px;
min-width: 100px;
width: 275px;
height: 30px;
margin-bottom:15px;
}
#hero input[type="submit"]{
max-width: 275px;
width: 100%;
height:30px;
background-color: #f1c40f;
border: none;
font-weight: 900;
font-size: 1em;
}
.features{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 700px;
margin: 0;
padding: 0;
}
.grid{
display: flex;
flex-direction: row;
}
.icon{
width: 15vw;
display: flex;
justify-content: center;
align-items: center;
}
.fa-solid{
color: darkorange;
font-size: 50px;
}
#howItWorks{
margin: 30px;
display: flex;
justify-content: center;
align-items: center;
}
#pricing{
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-around;
margin-top: 60px;
margin-bottom: 90px;
}
@media(max-width:500px){
#pricing{
flex-direction: column;
}
}
.product{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(80%/3);
border: 1px solid black;
margin: 20px;
border-radius: 3px;
}
.level{
background-color: #DDD;
color: black;
width: 100%;
padding: 15px 0;
font-weight: 700;
}
ol > li{
margin: 2px;
}
.btn{
background-color: #f1c40f;
margin: 15px 0;
font-weight: 400;
border: 0;
width: 30%;
height: 30px;
font-size: 1em;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
lasjorg
November 16, 2022, 2:47am
2
We need to see your HTML as well.
But I don’t see position: fixed
or position: sticky
in your CSS. The header should stay at the top even when the page is scrolled down.
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css"/>
<script src="https://kit.fontawesome.com/f8f61e487a.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<div class="logo">
<img id="header-img" alt="Logo" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#howItWorks">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" type="email" id="email" placeholder="Enter Your Email Address" required/>
<input type="submit" id="submit" value="Get Started"/>
</form>
</section>
<div class="container">
<div id="features">
<div class="grid">
<div class="icon">
<i class="fa-solid fa-fire-flame-curved"></i>
</div>
<div class="text">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div id="features">
<div class="grid">
<div class="icon">
<i class="fa-solid fa-truck"></i>
</div>
<div class="text">
<h2>Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we finished making it. We also free returns if your not satisfied</p>
</div>
</div>
<div id="features">
<div class="grid">
<div class="icon">
<i class="fa-solid fa-battery-full"></i>
</div>
<div class="text">
<h2>Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</div>
<div id="howItWorks">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" height="350" width="500" title="Product Video" frameborder="0"></iframe>
</div>
<div id="pricing">
<div class="product">
<div class="level">TENOR TROMBONE</div>
<h2>$600</h2>
<ol>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ol>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="level">BASS TROMBONE</div>
<h2>$900</h2>
<ol>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ol>
<button class="btn">SELECT</button>
</div>
<div class="product">
<div class="level">VAVLE TROMBONE</div>
<h2>$1200</h2>
<ol>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ol>
<button class="btn">SELECT</button>
</div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
I did end up passing this from adding position:fixed in #nav-bar but it dosent make sense because the nav bar becomes unfixed. so not sure about that seems like a bug
lasjorg
November 16, 2022, 4:45pm
6
I don’t know what you mean by that. It should say fixed at the offset provided.
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: orange;
}
It does however get taken out of the normal flow and you have to compensate for that. By pushing the content that comes after it down manually.
The example project code and your code are a little too close to each other. You have to be careful about that. The point isn’t to copy the example page anyway (and definitely not the code).
Before we issue our verified certification to a camper, he or she must accept our Academic Honesty Pledge, which reads: "I understand that plagiarism means copying someone else’s work and presenting the work as if it were my own, without clearly...
1 Like
system
Closed
May 18, 2023, 4:45am
7
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.