Helloo!
I think for this we need to see all code, not just header
Also, do you have this whole thing on codepen?
Helloo!
I think for this we need to see all code, not just header
Also, do you have this whole thing on codepen?
That would be necessary for this issue I guess
@admit8490 Here’s my whole code below…
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/fa4d84cc52.js" crossorigin="anonymous"></script>
<header id="header">
<div id="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
alt="original trombones logo">
<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>
<div class="container"></div>
<section id="hero">
<h1>Handcrafted, home-made masterpieces</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" name="email" placeholder="Enter your email" required />
<input id="submit" type="submit" value="GET STARTED">
</form>
</section>
<main>
<section id="features">
<div class="grid">
<div class="Features">
<div class="icon"><i class="fa-solid fa-spa"></i>
</div>
<div class="description">
<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 class="Features">
<div class="icon">
<i class="fa-solid fa-truck"></i>
</div>
<div class="description">
<h2>Fast Shipping</h2>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="Features">
<div class="icon">
<i class="fa-solid fa-square-check"></i>
</div>
<div class="description">
<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>
</section>
<section id="how-it-works">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0"
frameborder="0"
allowfullscreen></iframe>
<section id="pricing">
<div class="product"><br>
<div class="product-name">TENOR TROMBONE</div>
<h2>$600</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="button">select</button>
</div>
<br>
<div class="product">
<div class="product-name">BASS TROMBONE</div>
<h2>$900</h2>
<ol>
<li>Lorem ipsum.</li>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="button">select
</button>
</div><br>
<div class="product">
<div class="product-name">VALVE TROMBONE</div>
<h2>$1200</h2>
<ol>
<li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum.</li>
</ol>
<button class="button">select</button>
</div>
</section>
yep, just a sec) Some strange stuff was in another thread)
I guess we have case-sensitivity related issues here.
You don’t need to rush, you know) We don’t have deadlines here
@admit8490 Well after changing the id of “features” to lower case it passed the challenge for me… Thank you so much for bringing my notice to that because i couldn’t even figure that’s where the problem is coming from lol…One more thing please, i can’t seem to pass this challenge…
Your “#nav-bar” should always be at the top of the viewport.
Here you want to do research about position property. MDN and w3s both have relevant content if I remember correctly.
Well, I don’t know if order matters here… To pass the tests you don’t need additional styling tho, only this positon stuff if I am not mistaken
Yeah but if i’m gonna add the position property, i gotta style it in CSS
Yeah, of course. To pass this tests you need little bit of CSS
Okay thank you so much…I already have the codes in html, now i gotta style it in CSS…Can i have your email handle or number so we could exchange ideas or hit you up when i have a problem…
Create a thread here if you have a problem, you can get help from more experienced people than me, you know)
That’s a bit personal stuff, not sharing it here.
You know my codepen, right? You can write some stuff in comments to any of my pens, I check it regularly
That’s my github
I’m not on github…Anyways if you don’t wanna share that with me no worries…You can share & delete it immediately but it’s up to you…
Nothing personal, man. I just have some rules in terms of behaviour on the web.
I suggest you to start with github, it’s important to my opinion
It’s okay no worries…I’ve got codepen, why do i need github??