Build a Product Landing Page HTML/CSS (icon / footer)

HTML-CSS
1

Hi, I am trying to size the icon class so that it’s div block is the same size for all three icons. however the size of the last two div block is the same but the first div block is not. Please let me know how to solve this issue.

also, my footer doesn’t seem to work as a flex-box. I want my footer to be lined on the same line however I cant get it to work. Please let me know if my code is wrong.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UFT-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <div id="page-wrapper">
      <div id="page-wrapper">
        <header id="header">
          <div class="logo">
            <h2 class="logo-name">
              <img id="header-img" src="fa fa-music" />Original Trombones
            </h2>
          </div>
          <nav id="nav-bar">
            <ul>
              <li>
                <a href="#features" class="nav-link"> Features</a>
              </li>
              <li>
                <a href="#how-it-works" class="nav-link"> How It Works</a>
              </li>
              <li>
                <a href="#pricing" class="nav-link">Pricing</a>
              </li>
            </ul>
          </nav>
        </header>
        <section id="hero">
          <h2>Handcrafted, Home-Made Masterpieces</h2>
          <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input
              name="email"
              id="email"
              type="email"
              placeholder="Enter your email address"
              required
            />
            <input id="submit" type="submit" value="Get Started" class="btn" />
          </form>
        </section>
      </div>
    </div>
    <div class="container">
      <section id="features">
        <div class="grid">
          <div class="icon">
            <i class="fa fa-fire fa-3x"></i>
          </div>
          <div class="description">
            <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="grid">
          <div class="icon">
            <i class="fa fa-truck fa-3x"></i>
          </div>
          <div class="description">
            <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="icon">
            <i class="fa fa-battery-three-quarters fa-3x"></i>
          </div>
          <div class="description">
            <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"
          width="560"
          height="315"
          src="https://www.youtube.com/embed/y8Yv4pnO7qc"
          title="Roman Carnival Overture Op. 9 for Five Trombones"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          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</li>
            <li>Lorem ipsum</li>
          </ol>
          <button class="btn btn-price">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</li>
            <li>Lorem ipsum</li>
          </ol>
          <button class="btn btn-price">Select</button>
        </div>
        <div class="product" id="valve">
          <div class="level">Valve Trombone</div>
          <h2>$1200</h2>
          <ol>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
          </ol>
          <button class="btn btn-price">Select</button>
        </div>
      </section>
      <footer>
        <div class="footer">
          <ul>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <!-- <div class="copyright">Copyright 2016, Original Trombones</div> -->
        </div>
      </footer>
    </div>
  </body>
</html>

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

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: black;
  background-color: white;
}

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

div {
  display: block;
}

section {
  display: block;
}

.logo {
  width: 60vw;
}

#header-img::before,
#header-img::after {
  padding-right: 10px;
}

.logo > h2 {
  font-weight: lighter;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-transform: uppercase;
}

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

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

nav > ul > li {
  list-style: none;
  color: black;
}

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

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

#hero input[type="submit"] {
  max-width: 150px;
  height: 30px;
  width: 100%;
  margin: 15px 0;
  border: 0;
  background-color: #ffdc68;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.btn {
  padding: 0 20px;
  font-size: 1em;
  font-weight: 900;
  text-transform: uppercase;
  border-radius: 5px;
}

form {
  margin: 20px 0;
}

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

.grid {
  display: flex;
}

#features {
  margin-top: 50px;
}

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

.description {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}

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

#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: 400px;
  margin: 10px;
  border: 1px solid #000;
  border-radius: 3px;
}

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

h2 {
  font-weight: bold;
  margin: 15px 0;
}

ol {
  list-style-type: none;
  line-height: 30px;
  margin-bottom: 10px;
}

.btn-price {
  margin-bottom: 10px;
}

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

.footer {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
}

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

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

/* .copyright {
  display: flex;
  flex-direction: ;
} */
2

Hey, regarding the footer if you want them to get lined you need to break the list structure. To do so you need every item on the list to have an inline-block display. You can also remove the dots beside the names:

.footer ul {
  list-style: none;
}

.footer li {
  display: inline-block;
}

I do not get your first question.

3

  1. There are a few ways of doing it, setting flex: 1 on .description would do it. But you probably do not want 20vw for the icons. That seems a bit much and they really do not need to be viewport sized. For icons, you can often just lock the size. If you want more space between the icon and description use gap on the .grid container.

  2. This selector is not correct footer > ul as you have a div inside the footer this footer ul would make the ul a flex container.

4

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