Improving Final Projects

HTML-CSS
1

Hi everyone, I am at the point where I have finished my HTML/CSS certificate and I am now trying to improve my previous certificate projects in order for me to improve my CSS coding.
While I was building the last section of my website I noticed that it just wasn’t showing up and I can’t really figure out why, can anyone give me a hand in trying to understand this?

Thank you.

<!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">
</head>
<body>
  <header id="header">
    <img id="header-img" rel="brandlogo" src="https://i.im.ge/2025/02/06/H7rWrm.ioqwofpjwqeoifhbqewofnl.webp" alt="JS Industries Brand Logo">
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#board_testing">Board Testing</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
    <h2>Unparalleled Epoxy Technology</h2>
    <input id="email" type="email" name="email" placeholder="Enter your email address" />
    <input id="submit" type="submit" value="Submit to subscribe to our newsletter">
    </form>
    <div id="features">
      <h2>Premium Materials</h2>
      <p>JS Industries surfboards are made from the finest polyurethane foam core and is coated with premium fibreglass and polyester resin.</p>
      <h2>Shipping</h2>
      <p>Currently production time is about 4 - 6 weeks for a standard PU board depending on the workload at the factory. HYFI/EPS (Epoxy boards) tend to take a bit longer, around 12-14 weeks currently.</p>
      <h2>Stockists</h2>
      <p>JS Industries surfboards are available in stores all accross the world. Find the one nearest to you <a target="_blank" href="https://jsindustries.com/pages/stockists">here</a>.</p>
    </div>
    <section>
    <p id="board_testing">Check out our latest video where Harrison Roach tests out 3 of our boards: The Golden Child, The Xero Gravity and the Xero Fusion</p>
    <iframe id="video" allowfullscreen src="https://www.youtube.com/embed/XdQ4R5_QcNc&t=54s?controls=0"</iframe>
    </section>
----------------------------------------------------------------------------------------
    <section id="pricing">
      <div>
        <h2>The Xero Gravity</h2>
        <p>$999.00</p>
        <ul>
          <li>All wave types 2-6ft</li>
          <li>Medium-low Rocker</li>
          <li>Medium Full Rail</li>
          <li>Fin Type 3</li>
        </ul>
      </div>
      <div featured>
        <h2>The Golden Child</h2>
        <p>$999.00</p>
        <ul>
          <li>Intended for good or powerful waves 3-8ft+</li>
          <li>Medium+ Rocker</li>
          <li>Medium Rail</li>
          <li>Fin Type 3</li>
        </ul>
      </div>
      <div>
        <h2>The Xero Fusion</h2>
        <p>$999.00</p>
        <ul>
          <li>Flat faced waves 1-3ft</li>
          <li>Low Rocker</li>
          <li>Medium Full Rail</li>
          <li>Fin Type 3</li>
        </ul>
    </section>
--------------------------------------------------------------------------------------------
  </main>
</body>

So, the whole part in between ------------------------------------------------ just doesn’t show up and also the nav link to “pricing” doesn’t take me anywhere.

2

Can you post the actual HTML and CSS please. You need to put 3 backticks before and after each block of code.

3 
<!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">
</head>
<body>
  <header id="header">
    <img id="header-img" rel="brandlogo" src="https://i.im.ge/2025/02/06/H7rWrm.ioqwofpjwqeoifhbqewofnl.webp" alt="JS Industries Brand Logo">
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#board_testing">Board Testing</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
    <h2>Unparalleled Epoxy Technology</h2>
    <input id="email" type="email" name="email" placeholder="Enter your email address" />
    <input id="submit" type="submit" value="Submit to subscribe to our newsletter">
    </form>
    <div id="features">
      <h2>Premium Materials</h2>
      <p>JS Industries surfboards are made from the finest polyurethane foam core and is coated with premium fibreglass and polyester resin.</p>
      <h2>Shipping</h2>
      <p>Currently production time is about 4 - 6 weeks for a standard PU board depending on the workload at the factory. HYFI/EPS (Epoxy boards) tend to take a bit longer, around 12-14 weeks currently.</p>
      <h2>Stockists</h2>
      <p>JS Industries surfboards are available in stores all accross the world. Find the one nearest to you <a target="_blank" href="https://jsindustries.com/pages/stockists">here</a>.</p>
    </div>

    <section>
    <p id="board_testing">Check out our latest video where Harrison Roach tests out 3 of our boards: The Golden Child, The Xero Gravity and the Xero Fusion</p>
    <iframe id="video" allowfullscreen src="https://www.youtube.com/embed/XdQ4R5_QcNc&t=54s?controls=0"</iframe>
    </section>
    <section id="pricing">
      <div>
        <h2>The Xero Gravity</h2>
        <p>$999.00</p>
        <ul>
          <li>All wave types 2-6ft</li>
          <li>Medium-low Rocker</li>
          <li>Medium Full Rail</li>
          <li>Fin Type 3</li>
        </ul>
      </div>
      <div featured>
        <h2>The Golden Child</h2>
        <p>$999.00</p>
        <ul>
          <li>Intended for good or powerful waves 3-8ft+</li>
          <li>Medium+ Rocker</li>
          <li>Medium Rail</li>
          <li>Fin Type 3</li>
        </ul>
      </div>
      <div>
        <h2>The Xero Fusion</h2>
        <p>$999.00</p>
        <ul>
          <li>Flat faced waves 1-3ft</li>
          <li>Low Rocker</li>
          <li>Medium Full Rail</li>
          <li>Fin Type 3</li>
        </ul>
    </section>

  </main>
</body>
4

There you go! Thank you for teaching me how to do it

5

Hi there. Check youriframe opening tag, it’s missing closing angular bracket.

What’s this featured, looks like you forget to add an attribute to it.

missing html closing tag.

2 Likes
6

Also post your css code for assistance.

2 Likes
7

Validate your HTML.

https://validator.w3.org/nu/#textarea

1 Like
8

Thank you so much for your help. The issue was the iframe

1 Like
9

Thank you for this tool. It will help greatly in the future!