Building a Product Landing Page

HTML-CSS
1

I am having difficulty with having my full layout shown. For some reason my nav"s are visiable. What can I chaneg to fix this?

<!Doctype html>
<html lang="en">
  <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta charset="UTF-8">
 <link rel="stylesheet" href="styles.css"/>
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
 <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet">
 <title>Bulking Proteins</title>
 <body>
   <div id="page-wrapper">
   <div class="top-navg">
   <header id="header">
     <h1 id="logo">MGPS Super Mass Gainer</h1>
     <img id="header-img" src="https://cdn4.iconfinder.com/data/icons/fitness-and-healthy-8/512/Bodybuilding-muscle-powder-protein-512.png" alt="Cartoon pictutre mass gainer">
     <nav id="nav-bar">
       <ul>
      <li> <a class="nav-link" href="#About"><h3>About</h3></a></li>
       <li>
         <a class="nav-link" href="#Which_MG_Is_For_Me"><h3>Which MG is For Me?</h3></a></li>
       <li><a class="nav-link" href="#Pricing"><h3>Pricing</h3></a></li>
       </ul>
       </nav>
       </header>
       <div class="container">
         <section id="About">
           <div class="grid">
             <div class="icon">
              <i class="fa fa-4x fa-bolt"></i>
             </div>
             <div class="description"> 
               <h2>Benefits</h2>
               <ul>
                 <li> <strong>Rich Carbs:</strong>When you work out consistently, over time your energy starts to deplete.You'll require a high level of carbs that is widely present in mass gainer
                 </li>
                 <li><strong>High Fiber Content:</strong> Fiber is important when trying to build muscules which is present in the mass gainer
                   </li>
                   <li><strong>Gives required calories:</strong>Can provide up to 1000 claries in one shake!
                     </li>
                     </ul>
         </div>
         </div>
         <div class="grid">
           <div class="icon">
             <i class="fa fa-4x fa-truck"></i>
             </div>
             <div class="description">
               <h2>Fast Shipping</h2>
               <p> Highly praised fast, free shipping! Free returns provided on unopened products. 30-day Money-Back Guarantee!
                 </p>
               </div>
               </div>
               <div class="grid">
               <div class="icon">
                 <i class="fa fa-4x fa-credit-card"></i>
                 </div>
                 <div class="description">
                   <h2> Rewards</h2>
                   <p>After every fourth purchase, we'll send you a $50 gift card for your next order! *Must be a MGPS subscriber*
                     </p>
                     </div>
                     </div>
                     </section>
  <section id="Which_MG_Is_For_Me">
    <iframe id="video" src="https://www.youtube.com/watch?v=ZZnhJSTga0A" alt="Video detailing the 7 best MG powder for you" allowfullscreen>
    </iframe>
  </section>
  <section id="Pricing">
    <div class="product" id="MG_3lb">
      <div class="level">AMP Mass XXX™ with MyoTor® 3lbs</div>
        <h2>$40.99</h2>
        <h4>What it comes with?<h4>
          <p> 1 3lb AMP MASS XXX</p>
          <h3>Flavors</h3>
            <ol>
              <li> Vanilla</li>
              <li> Chocolate</li>
              <li> Strawberry</li>
              <li>Cookies and Cream</li>
              <li> Coffee</li>
              <li> Mint</li>
        </ol>
<button class"btn">Select</button>
      </div>

      <div class="product" id="MG_7lb">
      <div class="level">AMP Mass XXX™ with MyoTor® 7lbs</div>
        <h2>$80.99</h2>
        <h4>What it comes with?<h4>
           <ul><li>1 7lb AMP MASS XXX</li>
           <li>1 AMP Pre-Workout</li>
          </ul>
          <h3>Flavors</h3>
            <ol>
              <li> Vanilla</li>
              <li> Chocolate</li>
              <li> Coffee</li>
              <li>Fruity Pebbles</li>
              <li> Superman</li>
              <li> Cotton candy</li>
        </ol>
<button class"btn">Select</button>
      </div>

       <div class="product" id="MG_Bundle">
      <div class="level">AMP Mass XXX™ with MyoTor® Bundle</div>
        <h2>$160</h2>
        <h4>What it comes with?<h4>
           <ul><li>1 7lb AMP MASS XXX</li>
           <li>1 AMP Fruit Punch Pre-Workout</li>
           <li>1 AMP Creatine</li>
           <li>1 AMP Fruit Punch Recovery
          </ul>
          <h3>Flavors</h3>
            <ol>
              <li> Vanilla</li>
              <li> Chocolate</li>
              <li> Peanut Butter</li>
              <li>Cinnomon</li>
              <li> Birthday Cake</li>
              <li>Cookie Dough</li>
        </ol>
<button class"btn">Select</button>
      </div>
           </section>
         </div>

       <section id="hero">
         <h2> For alerts about upcoming deals and events, Subscribe!</h2>
         <form id="form" action="https://www.freecodecamp.com/email-submit"> <input id="email" type="email" name="email" placeholder="Enter your email address" required>
         <input id="submit" value="Join!" type="submit">
           </form>
         </section>
         </div>
   </body>
  </html>


Styles Page:
* {
  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;
  }
}

#About {
  margin-top: 10px;
}

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

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

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

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

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

##Which_MG_Is_For_Me {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}

##Which_MG_Is_For_Me > 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;
}

h4 {margin-top:15px;
  font-style: italic;
}

.product >h3 {margin-top:15px;
color:darkblue}

.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;
  }
}
2

Can you clarify the question?
Your nav is visible? What were you hoping it would be?

3

I’m sorry not my nav’s but my descriptions. There is suppose to be a 3 column-like descriptions on the product which are “Benefits, Fast shipping, and Rewards” but i can’t get it to show up on the page @hbar1st.

4

okay, before we can help you, you will need to fix all the syntax errors in the code.
To find them all, go to the site below and copy your code into it. The checker will show you messages about your code and there are many error messages there which will indicate areas you need to address. Once they’re all fixed, then if your problem persists, we can help further.

5

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