Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
I am not able to solve 2 test cases of

  1. Your Product Landing Page should use at least one media query.
  2. Your Product Landing Page should use CSS Flexbox at least once.

Your code so far

<!-- 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 */

  }
}

.flex-container {
  display: flex;
  flex-direction: row;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

aayushi,

Welcome to the forum!

Upon looking at your code, I see you reference a video CLASS when in your HTML, you are using the ID attribute for “video.”

As for the flex-container class, I am not entirely sure. I would need to look at it in the browser to give further advice on that, but -
according to the MDN, The <div> element should be used only when no other semantic element (such as [<main>] or [<article>] is appropriate.

I hope that helps you get started troubleshooting.

1 Like

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