CSS Flexbox:: Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Says the only error message is the following:
“Your Product Landing Page should use CSS Flexbox at least once.”

However I have already applied the CSS Flexbox CSS code in tags within the of the HTML page. Please help as I don’t know where I’m going wrong. many thanks!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
  <link rel="stylesheet" href="styles.css">
<title>Title of page goes here for SEO reasons and browser tab</title>
<style>section, #header, #nav-bar { display: flex; flex-wrap: nowrap; padding: 30px; justify-content: space-between;} #nav-bar ul {list-style: none;} #nav-bar ul li {float: left; list-style: none; display: flex;display: inline-block; margin: 2px 7px;} #nav-bar {position: fixed; top: 0px; left: 0px; right: 0px;} body {padding-top: 80px;}</style>
</head>
<body>
  <header style="display: flex; flex-wrap: wrap; padding: 30px;" id="header">
    <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#issues">Issues</a></li>
      <li><a class="nav-link" href="#faq">FAQ's</a></li>
      <li><a class="nav-link" href="#return">Return</a></li>
    </ul>
    </nav>
    <img src="logo.jpeg" id="header-img" alt="Logo likely">
  </header>

  <section id="issues">
    <h3>Issues</h3>
  </section>

  <section style="display: flex; flex-wrap: wrap; padding: 30px;" id="faq">
    <h3>Issues</h3>
  </section>

  <section id="return">
    <h3>Return</h3>
  </section>

  <iframe src="video.wmv" id="video"></iframe>


  <form style="display: flex; flex-wrap: wrap; padding: 30px;" action="https://www.freecodecamp.com/email-submit" id="form">
    <input type="text">
    <input name="email" type="email" id="email" placeholder="Enter your email address">
    <input type="submit" id="submit">
    
    </form>
<video playsinline controls>
  <source src="tiny.mp4" type="video/mp4" media="(max-width:480px)">
  <source src="tiny.webm" type="video/webm" media="(max-width:480px)">
  <source src="big.mp4" type="video/mp4">
  <source src="big.webm" type="video/webm">
</video>
</body>
</html>
/* 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/92.0.4515.131 Safari/537.36 Edg/92.0.902.67

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

remove the style element and move the rules into the styles.css file

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