Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE HTML>
<html>
  <head>
     <link rel="stylesheet" href="styles.css">
    <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">
  </head>
  <body>
    <div class="flex-container">
      <header id="header">
        <nav id="nav-bar">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"></img>
       <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 id="main-doc">
        <title>Handcrafted, home-made masterpieces</title>

        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <label>
          <input id ="email" name="email" type="email" placeholder="Enter your email address">
          <input id="submit" type="submit">
        </form>
        <section id="Features">
        <header><b>Premium Materials</b></header>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>

        <header><b>Fast Shipping</b></header>
        <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>

        <header><b>Quality Assurance</b></header>
        <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>
        </section>
        <video id="video" src="https://youtu.be/y8Yv4pnO7qc"></video>
        <section id="How_it_works"></section>
        <section id="Pricing"></section>

      </main>
      </div>
  </body>
/* file: styles.css */
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: white;
  
  padding: 1em;
}

.submit{
  background-color: yellow;
}

@media screen and (min-width: 600px) {
  .video {
    /* Apply some styles */

  }

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Hi and welcome! If you let us know what the specific issue is, it’s really helpful so folks know exactly where to look. Especially on projects like this, it’s a lot of code so describing the issue lets people know how to best help. :slight_smile:

2 Likes

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