Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
I have CSS flex-box in my code but it’s not passing the test. Help.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"/>
    <title>Welcome to Sexy Shrimp</title>
</head>
<body>
    <header id="header">
      <nav id="nav-bar">
        <a href="#header" class="nav-link">Shrimp</a>
          <a class="nav-link" href="#video">Sexy Shrimp</a>
          <a class="nav-link" href="#form">NSFW Shrimp</a>
        </ul>
      </nav>
      <h1>Sexy Shrimp</h1>
      <img id="header-img" src="https://featuredcreature.com/wp-content/uploads/2012/10/4088262.jpg"/>
      
    </header>
    <div class="flex-container">
      <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/F5FEj9U-CJM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


    <form id="form" action="https://www.freecodecamp.com/email-submit">

      <label for="fname">E-Mail:</label><br>
      <input type="email" id="email" name="email" placeholder="sexyshrimp@sexyshrimp.com"><br>

      <input id="submit" type="submit" value="Submit">
    </form>
</div> 
  </body>
  </html>

/* file: styles.css */
#nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: orange;
}

body{
   display: felx;
   flex-direction: coloumn;
}

.flex-container{
  display: felx;
}

@media (max-width: 600px) {
  body {
    background-color: #87ceeb;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Welcome to our community!
You have typed in “felx”.

3

You’re kidding. I’ve been looking at this for too long.

4

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