Build a product landing page

iamoluwatosin011 · April 3, 2023, 11:05am

Continuing the discussion from Product Landing Page - Build a Product Landing Page:

Product Landing Page - Build a Product Landing Page

`<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build a Product Landing Page</title>
<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>
<header id="header">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"" alt="Trombone img">
  <nav id="nav-bar">
    <ul class="nav-content">
      <!-- <li class="nav-link">
        <a href="#features" class="nav-items active">Features</a>
      </li>
       <li class="nav-link">
        <a href="#how-it-works" class="nav-items active">How It Works</a>
      </li>
       <li class="nav-link">
        <a href="#pricing" class="nav-items active">Pricing</a>
      </li> -->
            <a class="nav-link" href="#Features"><li>Features</li></a>
           <a class="nav-link" href="#How-it-work"><li>How It Works</li></a>
           <a class="nav-link" href="#Pricing"><li>Pricing</li></a>
    </ul>
  </nav>
  </header>
    <div class="main-header">
      <section class="details">
        <h1>Handcrafted, home-made masterpieces
        </h1>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
  <input type="email"  name="email" id="email" placeholder="Enter your email address" required/>
  <input type="submit" id="submit" class="button" value="Get started" />
</form>
</section>
    </div>

<main id="main">
  <div id="container"></div>
  <section class="quality analysis">
    <div class="features" id="features">
    <div class="icon">
      <i class="fa fa-fire" aria-hidden="true"></i>
      </div>
<div class="analysis">
  <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 fa-truck" aria-hidden="true"></i>
  </div>
  <div class="analysis">
    <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 fa-battery-full" aria-hidden="true"></i>
  </div>
  <div class="analysis">
    <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>
    <div id="how-to-link-target"></div>
    <section id="how-it-works" class="how-to-link">
        <iframe id="video" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc"
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</section>
<div class="price-section">
<section class="price" id="pricing">
  <div class="instrument" id="tenor">
  <div class="stage">Tenor Trombone</div>
    <h3>$600</h3>
    <ol>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum dolor.</li>
      <li>Lorem ipsum</li>
    </ol>
    <button class="btn">Select</button>
  </div>
</section>
<section class="price">
  <div class="instrument" id="bass">
  <div class="stage">Bass Trombone</div>
    <h3>$900</h3>
    <ol>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum dolor.</li>
      <li>Lorem ipsum</li>
    </ol>
    <button class="btn">Select</button>
  </div>
</section>
<section class="price">
  <div class="instrument" id="valve">
  <div class="stage">Valve Trombone</div>
    <h3>$1200</h3>
    <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="btn">Select</button>
  </div>
</section>
</div>
</main>
<section>
  <footer>
    <ul class="lists">
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <span class="copyright">Copyright 2016, Original Trombones</span>
  </footer>
</section> 
    </body>
</html>
`

iamoluwatosin011 · April 3, 2023, 11:06am

iamoluwatosin011 · April 3, 2023, 11:06am

This is the error i cant figured out

Kenny_1291 · April 3, 2023, 11:13am

HTML classes and ids are case sensitive.

the id is features but in the nav-link you wrote Features
the id is how-it-works but in the nav-link you wrote How-it-work
the id is pricing but in the nav-link you wrote Pricing

system · October 5, 2023, 7:19pm

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Product Landing Page - Build a Product Landing Page HTML-CSS	3	74	December 9, 2024
Product Landing Page - Build a Product Landing Page HTML-CSS	11	323	May 31, 2024
Product Landing Page - Build a Product Landing Page HTML-CSS	2	1403	October 3, 2023
Product Landing Page - Build a Product Landing Page HTML-CSS	4	250	March 26, 2023
Product Landing Page - Build a Product Landing Page HTML-CSS	2	254	September 7, 2023

Build a product landing page

Related topics