Help on product landing page

Helloo!

I think for this we need to see all code, not just header

Also, do you have this whole thing on codepen?

@admit8490 i don’t have it on code pen yet but i can share my whole code.

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&amp;controls=0&amp;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>

@admit8490 Are you there??

yep, just a sec) Some strange stuff was in another thread)

I guess we have case-sensitivity related issues here.

@admit8490 Oh yeah i got that let me change that & see if it’s gonna work…Just a sec pls!!!

You don’t need to rush, you know) We don’t have deadlines here :upside_down_face:

@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.

I think i need to style it in CSS before my #navbar appears at the top of the viewport right??

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??