Product Landing Page - Build a Product Landing Page

HTML-CSS
1

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

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">
    <title>build a product landing page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" alt="logo" width="100" id="header-img"/>

      <nav id="nav-bar">
        <ul>
          <li class="nav-link">
            <a href="#home">Home</a>
            </li>

          <li class="nav-link">
            <a href="#video">Video</a>
            </li>

          <li class="nav-link"><a href="#contact">Contact</a></li>
        </ul>
      </nav>

      <section class="#home">
        <h1 class="title">My First App Design</h1>
        <p class="subtitle">My dream in life isto become a proffesioner web and software developer</p>
      </section>

      <section class="#video">
        <video width="240" height="80" control>
          <source src="https://player.vimeo.com/external/348824308.sd.mp4?s=b6596c8a1d0ef5b350af2a2cebc6fdb12bfa56d0&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          Birds in the field.
        </video>
        <br>

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

                <input id="email" type="email" name="email" placeholder="enter your email">

<input id="submit" type="submit" value="Submit">
        
        
        </form
      </section>

      <section class="contact">
        <footer>
          <p>No. 39 David Ejoor Crescent, Gudu District, Abuja, Nigeria</p>

          <p>+2348 5961 1779</p>

        </footer>
      </section>
    </header>
  </body>
</html>

/* file: styles.css */
*{
  margin: 0;
  padding: 0;
  font-size: 20px;
}

body{
  font-family: Arial, sans-serif;
}

#header{
  position: fixed;
  top: 0;
}

#nav-bar ul{
  display: flex;
}

#nav-bar .nav-link{
  display: inline-block;
  

}



@media only screen and (max-width:680px){
  .home{
    color: orangered;

  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/112.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hi everyone!

I don’t the reason this error keeping repeating though I code accordingly. Please can anyone help me in identifying the errors?

my code below:

 <nav id="nav-bar">
        <ul>
          <li class="nav-link">
            <a href="#home">Home</a>
            </li>

          <li class="nav-link">
            <a href="#video">Video</a>
            </li>

          <li class="nav-link"><a href="#contact">Contact</a></li>
        </ul>
      </nav>
3

could you provide a bit more information?

what error are you getting?
what have you tried so far?

4

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