I stuck with the "HTML-CSS Project #3 Landing Page"

HTML-CSS
1

I did everything but test stuck 15/16. I can’t find what it needs.
(I couldn’t paste my codepen URL because of the forum’s security reason)

Thank you.

HTML START

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">

  <title>FCC: Product Landing Page</title>
</head>

<body>

  <header id="header">
    <nav id="nav-bar" class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#"><img id="header-img" src="https://image.freepik.com/free-vector/bicycle-shop-logo-design-vector_53876-40626.jpg"
          alt="logo"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#features">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#how">How It's Made</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#price">Pricing</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="container"></div>
  <section id="register">
      <form action="https://www.freecodecamp.com/email-submit" id="form" method="GET">
        <div class="form-group">
          <input class="form-control" type="email" name="email" id="email" required placeholder="Enter your email address">
        </div>
        <button type="submit" id="submit" class="btn btn-success">Let's Go!</button>
      </form>
  </section>

  <section id="features">
    <div class="container">

      <div class="left">
        <span><i id="icon" class="fas fa-fist-raised"></i></span>
      </div>

      <div class="right">
        <div class="header">
          <h2 class="hero-header">Durable Materials</h2>
        </div>
        <p>Our bicycles are made by durable materials, like carbon-fiber, aluminum. </p>
      </div>

    </div>

    <div class="container">

      <div class="left">
        <span><i id="icon" class="fas fa-feather-alt"></i></span>
      </div>

      <div class="right">
        <div class="header">
          <h2 class="hero-header">Light Weight</h2>
        </div>
        <p>It's light, easy to lift.</p>
      </div>

    </div>
  </section>
  <hr>
  <section id="how">
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/EMm6AMPcq8k" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe>
  </section>
  <hr>
  <section id="price">
    <div class="card-group">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Carbon</h5>
        <h6 class="card-subtitle mb-2 text-muted">1799$</h6>
        <ul>
          <li>Ultegra components</li>
          <li>Aero Wheels</li>
          <li>Very light</li>
        </ul>
        <a href="#" class="btn btn-success">Select</a>
      </div>
    </div>

    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">Aluminum</h5>
        <h6 class="card-subtitle mb-2 text-muted">600$</h6>
        <ul>
          <li>Ultegra components</li>
          <li>Aero Wheels</li>
          <li>Very light</li>
        </ul>
        <a href="#" class="btn btn-success">Select</a>
      </div>
    </div>
    </div>
  </section>

  <hr>
  <footer>
    <span class="copy-right">Copyright 2019, Bicycle - All Rights Reserved</span>
    <ul class="social">
      <li class="social-link"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
      <li class="social-link"><a href="#"><i class="fab fa-twitter"></i></a></li>
      <li class="social-link"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
    </ul>
  </footer>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP"
    crossorigin="anonymous"></script>
</body>

</html>

HTML END

CSS START

@import url("https://fonts.googleapis.com/css?family=Montserrat");

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

body {
  text-align: center;
  background: #eee;
  font-family: 'Montserrat', sans-serif;
  
  @media (max-width: 600px) {
    flex-wrap: wrap;
    margin: 0 auto;
  }
}

header {
  width: 100%;
  position: fixed;
  z-index: 1;
}

#header-img {
  width: 60px;
  height: 60px;
}

#register {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  margin-top: 50px;
}

#how{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

input[type="email"] {
  max-width: 1000px;
  width: 900px;
  height: auto;

  @media (max-width: 600px) {
    max-width: 300px;
  }
}

#icon {
  width: 55px;
  height: 55px;
  color: green;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 48%;
}

#features{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10vw ;
  @media (max-width: 600px){
    flex-wrap: wrap;
    margin: 0 auto;
  }
}


.left {
  float: left;
  margin-top: 5px;
}

.right {
  margin-left: 5vw;
}

.header {
  text-align: left;
}

p {
  float: left;
}

ul,
li {
  list-style: none;
}

.card {
  margin: 0 auto;
}

#price {
  margin-top: 60px;
  display: inline-flex;
  text-align: center;
  
  
  @media (max-width: 600px) {
    flex-wrap: wrap;
    text-align: center;
  }
}

hr,
footer {
  @media (max-width: 600px) {
    margin: 0 auto;
    margin-top: 10px;
  }
}

.social {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  float: right;
}



section {
  padding: 100px;
  width:100%
}

.copy-right, .social-link {
  margin-left: 3vw;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card-group{
  margin: 0 auto;
}

CSS END

2

Before I look at the code itself, I just want to ask if you could find which project rule you are missing. If you run the test, and then click on the red results button it should give you a list of the test rules, as well as the one you are failing in red.

That will help narrow down the search quite a bit, and you might even be able to find it yourself at that point.

2 Likes
5

You saved my life! I was complete other projects without problems. Because of that I never thought to click error button. Thank you. :hugs:

1 Like