Product Landing Page

HTML-CSS
1 
<!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="logo.png" alt="Logo">
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>

  <section id="features">
    <div class="feature">
      <h2>Feature 1</h2>
      <p>Description of feature 1.</p>
    </div>
    <div class="feature">
      <h2>Feature 2</h2>
      <p>Description of feature 2.</p>
    </div>
    <div class="feature">
      <h2>Feature 3</h2>
      <p>Description of feature 3.</p>
    </div>
  </section>



<section id="video">
  <iframe id="video-frame"  src="https://www.youtube.com/embed/vZE5X5rPATI" title="Netlink Rwanda  Services" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


  <section id="pricing">
    <h2>Pricing</h2>
    <p>Details about pricing.</p>
  </section>

  <footer>
    <!-- Footer content -->
  </footer>

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

  <script src="script.js"></script>
</body>
</html>

I tried several times but keeps telling this

  • You should have a video or iframe element with an id of video.

  • Failed:Your #video should have a src attribute.

please help

1 Like
2

Hi, I looked at your code and " You should have a video or iframe element with an id of video." And yours have an id="video-frame" . Change it in id="video"
and change the id of the section too. And try>

1 Like
3

This is a section element not a video element.

Put the video id here instead

1 Like
4

Awesome work! First quick fix. Swap the id names of ’ section id=“video” ’ and ’ iframe id="video-frame '. Hopefully this does not change your styling. The second issue may resolve itself because than the ‘id=’ will be in the right place with your ‘src=’. If your styling does change do not panic. You may just need to do a minor swap with the elements in your CSS file and not any of the styling. Happy coding!

5 
<!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="logo.png" alt="Logo">
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>

  
  <section id="features">
    <div class="feature">
      <h2>Feature 1</h2>
      <p>Description of feature 1.</p>
    </div>
    <div class="feature">
      <h2>Feature 2</h2>
      <p>Description of feature 2.</p>
    </div>
    <div class="feature">
      <h2>Feature 3</h2>
      <p>Description of feature 3.</p>
    </div>
  </section>

  <section id="video">
    <iframe id="video" src="https://www.youtube.com/embed/vZE5X5rPATI" title="Netlink Rwanda  Services" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </section>


  <section id="pricing">
    <h2>Pricing</h2>
    <p>Details about pricing.</p>
  </section>

  <footer>
    <!-- Footer content -->
  </footer>

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

  <script src="script.js"></script>
</body>
</html>

still am getting same issues
1 Like
6

still nothing changed

1 Like
7

Didn’t work am not going!! maybe you can tri it again for me

1 Like
8

this is a section element, not a video element.
Remove the video value from here.

1 Like
9

You can’t have two elements with the same id

2 Likes
10

yp I didn’t notice that thanks

1 Like
11

Great work! You should change your ‘section id=’ name. Because you can have only one ‘id’ and you are using ‘video’ in the ‘iframe’ tag you need a different name in the ‘section’ tag. This lesson requires that you name the 'iframe id=“video” '. Happy coding!

12

Hi there I am not sure if In fact you fix the video issue as of yet?, I went ahead and copied your code and I got to see a small frame video which is visible!

Screenshot_20240728-214917
Screenshot_20240728-214917480×960 80.1 KB