Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
so I have completed the project and have created my CSS styling sheet for it. My styling for my icons and descriptions are not working like they should. the text and icons are in different locations and I don’t know why because I’ve written the code the exact same way as the website. could somebody please tell me what’s wrong thank you.

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.

HTML CODE
<!DOCTYPE HTML>
<html lang="en">
 
<head>
  <link rel="stylesheet" href="styles.css"/>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
  <div id="page-wrapper">
<header id="header">
  <div class="logo">
  <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
  </div>
  <nav id="nav-bar">
    <ul>
    <li >
      <a class="nav-link" href="#features">Features</a>
    </li>
    <li >
      <a class="nav-link" href="#how-it-works">How It Works</a>
    </li>
    <li>
      <a class="nav-link" href="#pricing">Pricing</a>
    </li>
    </ul>
  </nav>
</header>
<div class="container">
  <section id="hero">
    <h2>Handcrafted, home-made-masterpieces</h2>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input type="email" name="email" id="email" placeholder="please submit your email" required>
    <input id="submit" type="submit" value="Get Started" class="btn">
    </form>
  </section>
  <div class="container">
    <section id="features">
      <div class="grid">
        <div class="icon">
          <i class="fa fa-3x fa-fire"></i>
        </div>
        <div class="desc"></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 class="grid">
        <div class="icon">
          <i class="fa fa-3x fa-truck"></i>
        </div>
        <div class="icon">
          <h2>Fast Shipping</h2>
            <p>                We make sure you recieve 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="grid">
        <div class="icons">
          <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
        </div>
        <div class="desc">
          <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-works">
      <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
    </section>
    <section id="pricing">
      <div class="product" id="tenor">
        <div class="level">Tenor Trombone</div>
        <h2>$600</h2>
        <ol>
          <li>lorem ipsum </li>
          <li>lorem ipsum </li>
          <li>lorem ipsum dolor </li>
          <li>lorem ipsum </li>
        </ol>
        <button class="btn">Select</button>
      </div>
       <div class="product" id="bass">
         <div class="level">Bass Trombone</div>
        <h2>$900</h2>
        <ol>
          <li>lorem ipsum </li>
          <li>lorem ipsum </li>
          <li>lorem ipsum dolor </li>
          <li>lorem ipsum </li>
        </ol>
        <button class="btn">Select</button>
       </div>
        <div class="product" id="valve">
           <div class="level">Valave Trombone</div>
        <h2>$1200</h2>
        <ol>
          <li> Plays similar to a Trumpet </li>
          <li>Great for jazz bands</li>
          <li>lorem ipsum dolor </li>
          <li>lorem ipsum </li>
        </ol>
        <button class="btn">Select</button>

        </div>
    </section>
    <footer>
      <ul>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <span> Copyright 2016, Orignal Trombones</span>
    </footer>
  </div>
</div>
</body>

</html>
CSS CODE
/** global element styling **/

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

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

body {
  background-color: #eee;
  font-family: 'Lato', sans-serif;
}

#page-wrapper {
  position: relative;
}

li {
  list-style: none;
}

a {
  color: #000;
  text-decoration: none;
}

/** global classes styling **/

.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.btn {
  padding: 0 20px;
  height: 40px;
  font-size: 1em;
  font-weight: 900;
  text-transform: uppercase;
  border: 3px black solid;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

.grid {
  display: flex;
}

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

.logo {
  width: 60vw;
}

@media (max-width: 650px) {
  .logo {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
}

.logo > img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 20px;
}

@media (max-width: 650px) {
  .logo > img {
    margin: 0 auto;
  }
}

nav {
  font-weight: 400;
}

@media (max-width: 650px) {
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
  nav li {
    padding-bottom: 5px;
  }
}

nav > ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media (max-width: 650px) {
  nav > ul {
    flex-direction: column;
  }
}

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

#hero > h2 {
  margin-bottom: 20px;
  word-wrap: break-word;
}

#hero input[type='email'] {
  max-width: 275px;
  width: 100%;
  padding: 5px;
}

#hero input[type='submit'] {
  max-width: 150px;
  width: 100%;
  height: 30px;
  margin: 15px 0;
  border: 0;
  background-color: #f1c40f;
}

#hero input[type='submit']:hover {
  background-color: orange;
  transition: background-color 1s;
}

@media (max-width: 650px) {
  #hero {
    margin-top: 120px;
  }
}

#features {
  margin-top: 30px;
}

#features .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 20vw;
  color: darkorange;
}

@media (max-width: 550px) {
  #features .icon {
    display: none;
  }
}

#features .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 125px;
  width: 80vw;
  padding: 5px;
}

@media (max-width: 550px) {
  #features .desc {
    width: 100%;
    text-align: center;
    padding: 0;
    height: 150px;
  }
}

@media (max-width: 650px) {
  #features {
    margin-top: 0;
  }
}

#how-it-works {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

#how-it-works > iframe {
  max-width: 560px;
  width: 100%;
}

#pricing {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100% / 3);
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
}

.product > .level {
  background-color: #ddd;
  color: black;
  padding: 15px 0;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
}

.product > h2 {
  margin-top: 15px;
}

.product > ol {
  margin: 15px 0;
}

.product > ol > li {
  padding: 5px 0;
}

.product > button {
  border: 0;
  margin: 15px 0;
  background-color: #f1c40f;
  font-weight: 400;
}

.product > button:hover {
  background-color: orange;
  transition: background-color 1s;
}

@media (max-width: 800px) {
  #pricing {
    flex-direction: column;
  }
  .product {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}

footer {
  margin-top: 30px;
  background-color: #ddd;
  padding: 20px;
}

footer > ul {
  display: flex;
  justify-content: flex-end;
}

footer > ul > li {
  padding: 0 10px;
}

footer > span {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  font-size: 0.9em;
  color: #444;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2 
<div class="desc"></div>

Why do you have this empty div in the Premium Materials section?

<div class="icon">
  <h2>Fast Shipping</h2>
  <p>                We make sure you recieve your trombone as soon as we have
                finished making it. We also provide free returns if you are not
                satisfied.
  </p>
</div>

Should the div really have a class of icon?

Not saying these two things are the only things causing your problem. But if you want these two sections to look the same then they need to be coded the same.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.