Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
I have passed everything except for the very last requirement which says “YOUR PRODUCT LANDING PAGE MUST USE CSS FLEXBOX AT LEAST ONCE”

I have used CSS flexbox already and it doesnt seem to be acceptable? PLease help! Not sure what i did wrong!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <nav id="nav-bar">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.pngid=" id="header-img">
        <ul>
          <li><a class="nav-link" href="#features" id="features">Features</a></li>
          <li><a class="nav-link" href="#how-it-works" id="how-it-works">How It Works</a></li>
          <li><a class="nav-link" href="#pricing" id="pricing">Pricing</a></li></ul>
          <iframe width="500" height="200" src="https://www.youtube.com/embed/y8Yv4pnO7qc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
        </nav>
      <form action="https://www.freecodecamp.com/email-submit" id="form">
        <input type="email" placeholder="Enter your email here" id="email" name="email">
  <input id="submit" type="submit">
  </form>
  </button>
      </header>
    </body>


/* file: styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    display: list-item;
    text-align: center;
}

@media nav-link {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  margin-top: 50px;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Your media query looks incomplete. Might need to go back and visit the syntax of how to set it up. Im on my phone right now so its a pain to try and copy your code in the challenge. Thats the big thing I notice just from glancing, and could be why the challenge doesnt pass because the selector isnt correct right now

1 Like
3

I actually was able to figure it out!
I realized that “landing page” was referring to the page that is linked to the form. Thank you!!

2 Likes