Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here.

  • Your #nav-bar should always be at the top of the viewport.

  • Failed:Your Product Landing Page should use at least one media query.

  • Failed:Your Product Landing Page should use CSS Flexbox at least once.
    Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The Story Teller</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" >
    </head>
    <body>
       <h1>The Story Teller</h1>
       <header id="header">
         <img id="header-img" src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"></img>
         <nav id="nav-bar"><ul><li>
            <a class="nav-link" href="#love">Love</a></li>
          <li>  <a class="nav-link" href="#fear">fear</a></li>
          <li>  <a class="nav-link"href="#all">all</a></li>
            </ul>
         </nav>
         </header> 
         <section>
           <p id="love">I love the way he tells his stories what a guy.</p>
           <p>The story goes like this: A man is running screaming and shouting.His eyes red like the fire that burns in hell.His hair looks like someone whose been running for hours. </p>
           <p id="fear">The fear in his eyes could tell you evrything.He looked like he was sweating. A huge man was running after him with a knive in his hand.</p>
           <p id="all">All that came across this man was slit by the throut</p>
           <video id="video" src="https://youtu.be/y8Yv4pnO7qc"></video>
           </section>
           <section>
           <form id="form" action="https://www.freecodecamp.com/email-submit">
             <label><input id="name" name="name" type="text">Name the character</label>
             <label><input id="email" name="email" type="email" placeholder="email">Your email</label>
             <label><input id="phone" type"number" name="number">phone</label>
             <input name="submit" id="submit" type="submit">
           </form>
           <footer>
             PLEASE GIVE US A CALL</footer>
    </body>
    </html>
/* file: styles.css */

#nav-bar {
justify-content:space-evenly;
flex-direction: block;}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

The second two errors you have not done correctly, there is no media query in your css. You can look here to see how media query is done

You are not using flexbox correctly, you need a flex container that uses display flex. It would help you to read up on that again

You can look at this to see how to keep your nav up top

1 Like

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