Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

Product Landing Page Challenge doesn’t work properly.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/9650a62e47.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/style.css">
  <title>Product Landing Page - freecodecamp</title>
</head>
<body>
  <header id="header">
    <nav id="nav-bar">
      <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="logo" class="logo">
      <ul>
        <a class="nav-link" href="#features">Features</a>
        <a class="nav-link" href="#how-it-work">How It Works</a>
        <a class="nav-link" href="#pricing">Pricing</a>
      </ul>
    </nav>
  </header>

  <div id="container">
    <section class="message-box">
      <h1>Handcrafted, home-made masterpieces</h1>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" type="email" name="email" placeholder="example@mail.com">
      <input id="submit" type="submit" value="Get Started" class="btn"></input>
      </form>
    </section>
    <section id="features">
      <div class="feature">
        <i class="fab fa-free-code-camp fa-3x"></i>
        <div>
          <h2>Premium Materials</h2>
          <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your
            purchase.</p>
        </div>
      </div>
      <div class="feature">
        <i class="fas fa-shipping-fast fa-3x"></i>
        <div>
          <h2>Fast Shipping</h2>
          <p>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns
            if you are not satisfied.</p>
        </div>
      </div>
      <div class="feature">
        <i class="fas fa-battery-full fa-3x"></i>
        <div>
          <h2>Quality Assurance</h2>
          <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the
            pitch of your instrument.</p>
        </div>
      </div>
    </section>
    <section id="how-it-work">
      <iframe id="video" src="https://www.youtube.com/embed/JEwOy5Fm1yw"></iframe>
    </section>
    <section id="pricing">
      <div class="price-box">
        <h3>TENOR TROMBONE</h3>
        <h2>$600</h2>
        <p>Lorem ipsum.
          Lorem ipsum.
          Lorem ipsum dolor.
          Lorem ipsum.</p>
        <a href="#" class="btn">SELECT</a>
      </div>
      <div class="price-box">
        <h3>BASS TROMBONE</h3>
        <h2>$900</h2>
        <p>Lorem ipsum.
          Lorem ipsum.
          Lorem ipsum dolor.
          Lorem ipsum.</p>
        <a href="#" class="btn">SELECT</a>
      </div>
      <div class="price-box">
        <h3>VALVE TROMBONE</h3>
        <h2>$1200</h2>
        <p>Lorem ipsum.
          Lorem ipsum.
          Lorem ipsum dolor.
          Lorem ipsum.</p>
        <a href="#" class="btn">SELECT</a>
      </div>
    </section>
  </div>
  <!-- FOOTER -->
  <footer id="main-footer">
    <div>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Contact</a>
    </div>
    <p class="my-name">This Page recreated by <a target="_blank" id="fcs" href="https://github.com/FreeCodeCamp-Solutions/">FreeCodeCamp-Solutions</a></p>
    <p>&copy;Copyright 2016, Original Trombones</p>
  </footer>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</html>

//CSS

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

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

#header {
  display: flex;
}

#nav-bar {
  position: fixed;
  top: 0px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
}
/*
@media only screen and (max-width:600px){
#nav-bar ul {
  display: flex;
}

#nav-bar ul li {
  padding: 1rem 2rem;
}

#nav-bar ul li a {
  color: #333;
  font-size: 1.2rem;
}     } */

/* UTILITY CLASSES */
#container {
  max-width: 960px;
  margin: 2rem auto 0;
  overflow: hidden;
}

.logo {
  width: 300px;
  cursor: pointer;
}

@media (min-width: 1200px) {
  body {
      background-color: rgb(255, 255, 255);
  }
}

.btn {
  display: inline-block;
  padding: 0.4rem 1.5rem;
  color: #333;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #f1c40f;
}

.nav-link {
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}


.message-box {
  margin: 1.5rem;
  padding: 0.8rem;
  text-align: center;
}

.message-box h1 {
  font-size: 1.7rem;
  margin-bottom: 1rem;
}

.message-box input {
  display: block;
  margin: auto;
  width: 30%;
  padding: 0.4rem;
  margin-bottom: 1rem;
}

#features {
  padding: 1rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
}

#features .feature {
  display: flex;
  justify-self: center;
  align-items: center;
}

#features .feature i {
  color: #ff8c00;
}

#features .feature div {
  padding: 1rem;
  margin-left: 3rem;
}

#features .feature div h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

#how-it-work {
  padding: 3rem;
  margin: auto;
  text-align: center;
}

#how-it-work #video {
  width: 600px;
  height: 340px;
}

#pricing {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 0.2rem;
}

.price-box {
  border: solid #333 3px;
  border-radius: 2px;
  text-align: center;
}

.price-box:first-child {
  margin-right: 1.2rem;
}

.price-box:last-child {
  margin-left: 1.2rem;
}

.price-box h3 {
  background-color: #ddd;
  font-size: 1.05rem;
  padding: 1rem;
}

.price-box h2 {
  padding: 1rem;
}

.price-box p {
  padding: 0 4rem 1rem;
}

.price-box .btn {
  display: inline-block;
  margin: 1rem;
}

/* FOOTER */
#main-footer {
  background-color: #ccc;
  padding: 1rem 4rem;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

#main-footer div a {
  color: #333;
  padding: 0.5rem 1rem;
}

#fcs {
  text-decoration: underline;
  color: #333;
}

/* TABLET AND SMARTPHONE */
@media only screen and (max-width: 800px) {
  #navbar {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0.3rem;
  }

  #navbar ul li {
    padding: 1rem 1rem;
  }

  #features .feature {
    flex-direction: column;
  }

  #features .feature div {
    padding: 1rem;
    margin: 0.5rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  #how-it-work {
    padding: 1rem;
  }

  #how-it-work #video {
    width: 80%;
    height: 30%;
  }

  #pricing {
    flex-direction: column;
  }

  #pricing .price-box {
    margin: 1rem;
  }

  .price-box:first-child {
    margin-right: 0;
  }

  .price-box:last-child {
    margin-left: 0;
  }

  #main-footer {
    padding: 2.5rem 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #main-footer .my-name {
    margin: 1rem 0;
  }
}

Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

what do you mean that it doesn’t work properly? please expand

I meet the Challenge requirements, however I still get a non-existent error. I copied my code in the post.

what do you mean “non-existent error”?

also, why do you have that test script? is this really your code?

wrong link, the css file in the editor is at ./styles.css

1 Like

Thanks, thats cause I made it on VSCode first. Sorry for bother you!