Product Landing Page- Build A Product Landing Page

HTML-CSS
1

For some reason my icon symbols that I’ve inputted aren’t showing up on the page. What am i doing wrong?`

<!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>


** end of undefined **

** start of undefined **

* {
  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

Greetings @mohamed.sylla and welcome to the forum!

Which icons?
They worked when I put your code in codepen

Screenshot 2023-01-19 150208
Screenshot 2023-01-19 1502081252×972 40.6 KB

3

The style sheet is also pasted in the code i sent earlier. If you paste that part in the CSS portion, they won’t show up. That’s what I’m having difficulty with @codewright .

4

It is better to create a codepen and share your code that way so people can review it live.

5

How do I create a codepen? @hbar1st

6

Create an account on codepen.io and then open a new “pen” area for you to paste your code there. Then share the URL.

7

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