Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
"* Your Product Landing Page should use at least one media query.

  • Failed:Your Product Landing Page should use CSS Flexbox at least once."

i don’t understand what i am missing !!!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="styles.css" />
</head>

<body>
<link rel="stylesheet" href="styles.css">

<header id="header" >

<div class="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt=""  </img>
</div>
<nav id="nav-bar"> 


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

<video id="video" src="https://youtu.be/y8Yv4pnO7qc" </video>
<form id="form" action="https://www.freecodecamp.com/email-submit" </form>
<input id="email" name="email" placeholder="Enter your email address" type= "email" </input>
<input id="submit" type="submit" </input>

<button id="submit" </button>

<div class="container">
        <h2 id="Features"> </h2>
        <h2 id="How-It-Works"> </h2>
        <h2 id="Pricing"> </h2>
</div>
</main>
</body>

</html>

/* file: styles.css */

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


li {
  list-style: none;
}


.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}



header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

.logo {
  width: 60vw;
}

@media (max-width: 650px) {
  .logo {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
}

.logo > img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 20px;
}

@media (max-width: 650px) {
  .logo > img {
    margin: 0 auto;
  }
}

#features {
  margin-top: 30px;
}


@media (max-width: 650px) {
  #features {
    margin-top: 0;
  }
}

#how-it-works {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

#how-it-works > img {
  max-width: 560px;
  width: 100%;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

hello hope you’re fine! I thing that the testing system was only able to detect the CSS Flexbox when it is applied to an element outside of an ‘@media’ query. Try to do
Body{
display: flex;
}
I think it will work! Hope I was helpful. Happy coding :+1:

4

nope, added what you suggested but still does not detect the media query and the flexbox

5

SORRY !!! i had two links to my style page that’s why it wasn’t working, i’m done now !!!

1 Like
6

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