Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

My code corrects to me with all tasks but 4 tasks are unchecked by the tester. The unchecked tasks are related to “iframe/video” and “form” element. Can anyone see why? Thanks in advanced.

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>Product Landing Page</title>
  </head>
  <body>
  <header id="header">
    <img id="header-img"
    src="https://marketplace.canva.com/EAGGwxBPOuA/1/0/1600w/canva-black-and-red-cat-cute-and-cheeky-pet-logo-At5yba3j--Y.jpg" width="100">
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" id="video" href="#video">Video</a></li>
        <li><a class="nav-link" id="form" href="#form">Form</a></li>
        <li><a class="nav-link" id="feature" href="#features">Features</a></li>
      </ul> 
    </nav> 
  </header>
    <h1 class="title">A masterpiece of cat gallery</h1>        
    <p>Subscribe to receive a new update from our channel!</p>

    <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id='email' type='email' name="email" placeholder="Enter your email"></input>
    <input id="submit" type="submit"></input>
    </form>

    <iframe id="video" width="500" height="315" src="https://www.youtube-nocookie.com/embed/wE8s993ZV-8?si=h8_gPSsKNBNoAkfU&amp;start=2"></iframe> 

  <section id="features"> 
    <h3>Cat Features</h3>
    <ul>          
      <li><strong>Retractable Claws:</strong> Cats have retractable claws that they can extend when hunting or climbing, and retract to protect them from wear while walking.</li>
      <li><strong>Whiskers:</strong> Cats' whiskers are highly sensitive, helping them navigate in the dark, measure gaps, and detect changes in their environment.</li>
     <li><strong>Flexible Spine:</strong> Cats have an incredibly flexible spine, which allows them to twist their bodies and land on their feet when they fall (the "righting reflex").</li>
    </ul>
  </section>
  </body>
</html>

/* file: styles.css */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
    line-height: 1.7;
}

#header-img {
    width: 100px;
    height: auto;
}

iframe .video{
  align-items: center;
  justify-content: center;
  width: 100%;
  display: flex;
  height: 100%;
}

header {
    padding: 10px;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
}

nav > ul {
  position: fixed;
  top: 25px;
  right:0;
  display: flex;
  align-items: center;
  width: auto;
  padding: 10px;
  list-style-type: none;
}

.title {
  align-items: center;
  display: flex;
}

#nav-bar li {
    margin-right: 20px;
}

a {
  text-decoration: none;
}

@media only screen and (max-width:1200px){
  nav{
    justify-content: space-evenly;
  }
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Welcome to the forum @nhatlinh.lykny

Try running your code through a html validator. These services are available online and can check your code for any syntax errors.

Happy coding

3

Thank you @Teller for your advice. I fixed the issue right after that with writing code in another platform.

Happy coding

1 Like