Submitting Product landing page porject

freeCodeCamp Support
1

I’ve submitting my Product Landing Page Project, and it just sits there and loads. It then stops because it takes so long. I have a windows 11 computer. I don’t know what’s going on any help would be great.

2

Hi @kylewhitehead0033 and welcome to our community!

Could you share your full code with us please?

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

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">
  <title>Product Landing Page</title>
  </head>
<body>
  <header id="header">
    <img src="https://via.placeholder.com/100x40?text=Logo" alt="Logo" id="header-img" />
    <nav id="nav-bar">
      <a href="#features" class="nav-link">Features</a>
      <a href="#video-section" class="nav-link">Video</a>
      <a href="#signup" class="nav-link">Sign Up</a>
    </nav>
  </header>
<section id="features">
<div class="features">
      <div class="feature">🔋 Long Battery Life</div>
      <div class="feature">💡 Innovative Design</div>
      <div class="feature">🌎 Eco Friendly</div>
    </div>
</section>
<section id="video-section">
<h2>Watch How It Works</h2>
    <iframe 
      id="video"
      width="560"
      height="315"
      src="https://www.youtube.com/embed/dQw4w9WgXcQ"
      frameborder="0"
      allowfullscreen
    ></iframe>
</section>
<section id="signup">
  <h2>Sign Up for Updates</h2>
    <form id="form" action="https://www.freecodecamp.com/email-submit" method="POST">
      <input 
        type="email" 
        id="email" 
        name="email" 
        placeholder="Enter your email address"
        required
      />
      <input type="submit" id="submit" value="Subscribe" />
    </form>
</section>
</body>
</html>

This is the code

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

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

    /* Header / Navbar */
    #header {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #333;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      z-index: 1000;
    }

    #header-img {
      height: 40px;
    }

    #nav-bar {
      display: flex;
      gap: 20px;
    }

    .nav-link {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    .nav-link:hover {
      text-decoration: underline;
    }

    /* Sections */
    section {
      padding: 100px 20px;
      margin-top: 80px;
    }

    /* Flexbox Example */
    .features {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 20px;
    }

    .feature {
      flex: 1 1 250px;
      background: #f4f4f4;
      padding: 20px;
      border-radius: 8px;
    }

    /* Form */
    #form {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
    }

    #email {
      padding: 10px;
      width: 300px;
      max-width: 100%;
      margin-bottom: 10px;
    }

    #submit {
      padding: 10px 20px;
      background: #333;
      color: white;
      border: none;
      cursor: pointer;
    }

    #submit:hover {
      background: #555;
    }

    /* Responsive Media Query */
    @media (max-width: 600px) {
      #nav-bar {
        flex-direction: column;
        gap: 10px;
      }

      .features {
        flex-direction: column;
      }
    }

“This is the CSS”

4

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

5

I tried the steps you recommended, and I still have the same problem is there anything else that I could try?

6

Which browsers did you try?

Do you use a VPN?

7

I do use a VPN could that be causing the problem?
I tried Google, Bing, chrome and Firefox

8

would you be able to try without VPN?

9

The fCC website :white_check_mark: and your code :white_check_mark: work, so it’s something to do with your computer that is causing the problem. It could really be anything from your browser, a browser plugin, some other software on your computer, VPN, router, firewall on computer or router, bad cable, your ISP or anything in between those points.

Anything could cause a problem until you eliminate it as a possibility. Trying a different browser makes it unlikely it’s the browser or a browser plugin (unless you have the same plugin on both browsers…).

Both browsers go through your VPN so it would be a common point of failure and I think it’s happened in the past.

Yes