The part I am stuck on is #nav-bar should always be at top of viewport. I can get the code to pass by changing the CSS header position to fixed from positioned, when i do that i loose the ability to scroll on the page probably because of the position. Is there away to still scroll and have it pass? 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.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36 Edg/108.0.1462.54
Challenge: Responsive Web Design Projects - Build a Product Landing Page
Link to the challenge:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo"
/>
</div>
<header id="fixed">
<nav id="nav-bar">
<ul>
<li><a class="nav-link"
href="#features">features</a></li>
<li><a class ="nav-link" href="#how-it-works">how It Works</a></li>
<li><a class="nav-link" href="#pricing">pricing</a></li>
</ul>
</nav>
</header>
<main>
<div class="container"></div>
<section id="features">
<h2>To order fill out line below</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter your email address" type="email" name="email" required>
<br><input id="submit" type="submit" value="GET STARTED" class="btn"/></br>
</form>
</section>
<div class="container">
<section id="features">
<div class="grid">
<div class="icon"><i class="fa fa-3x fa-fire"></i></div>
<div class="desc">
<h2>Product Description</h2>
<p>Describe the product.</p>
</div>
</div>
<div class="grid">
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<div class="desc">
<h2>Shipping Info</h2>
<p>Shipping info goes here.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="desc">
<h2>Quality Assurance</h2>
<P>Whatever else needed goes here.</p>
</div>
</div>
</section>
<section id="how-it-works">
<iframe height="240" id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen type="video/mp4" >
</iframe>
</section>
<section id="pricing">
<div class="product" id="tenor">
<div class="level">Tenor Trombone</div>
<h2>$600</h2>
<ul>
<li>brown.</li>
<li>green.</li>
<li>blue.</li>
<li>red.</li>
</ul>
<button class="btn">Select</button>
</div>
<div class="product" id="bass">
<div class="level">Bass Trombone</div>
<h2>$900</h2>
<ul>
<li>brown.</li>
<li>green.</li>
<li>blue.</li>
<li>red.</li>
</ul>
<button class="btn">Select</button>
</div>
<div class="product" id="valve">
<div class="level">Valve Trombone</div>
<h2>$1200</h2>
<ul>
<li>plays similar to a trumpet</li>
<li>great to have one</li>
<li>many colors</li>
<li>fair price.</li>
</ul>
<button class="btn">Select</button>
</div>
</section>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>Copyright 2016, Original Trombones</span>
</footer>
</main>
</div>
</div>
</body>
</html>
{
background-color: #ff7f50;
}
img {
width: 100%;
object-fit: cover;
}
h2, p {
font-family: 'Raleway', sans-serif;
}
a {
text-decoration: none;
color: linen;
}
#hero {
grid-column: 1 / -1;
position: relative;
text-align: center;
}
header {
justify-content: flex-end;
position: positioned;
display: flex;
flex-direction: row;
flex-wrap: none;
width: 100%;
top: 0;
left: 0;
padding: 1em;
}
@media only screen and (max-width: 720px) {
.image-wrapper {
position: absolute;
top: 10px;
display: flex;} grid-template-columns: 1fr;
}
i {
color: yellow;
}
#submit {
background-color: yellow;
}
input {
font-weight: bold;
font-size: 15;
}
.btn {
color: blue;
padding-top:
}
hbar1st
December 29, 2022, 8:15pm
4
i don’t understand your page layout.
That’s a lot of nesting and I’m not sure why exactly.
I think once your html is simpler it will be easier to manipulate the location of everything.
1 Like
thanks for the input now that you mention it stuff does seem out of place. I just went line by line and it cleared so I kinda zoned out until I got to the end and this was the result. I will try and clean it up some thanks
1 Like
system
July 1, 2023, 3:45pm
6
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.