Product Landing Page - Build a Product Landing Page

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">
    <link rel="stylesheet" href="styles.css">
    <header id="header">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <nav id="nav-bar">
        <img src="" id="header-img">
          <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="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
      <form action="" id="form">
        <input type="email" placeholder="Enter your email here" id="email" name="email">
  <input id="submit" type="submit">

/* 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/ Safari/537.36 Edg/114.0.1823.51

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

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

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


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