Product Landing Page

Hello,

I’m almost done with the Product Landing Page project. However, there are a few minor issues I’ve run into and I can’t figure out a solution. I would highly appreciate the feedback of a more experienced user:

  1. In the features section, I’d like to have the h2 and p elements closer together and also centered vertically but I have not found a way to do it.

  2. I don’t know how to remove the blank space under the footer.

  3. I need to eliminate the decoration from the links in the footer section. I thought that the “li > a” and the “li > a:visited” selectors would accomplish this, but they don’t work on the footer section for some reason.

Thanks in advance.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-witdh, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css">
    <title>Artisan Crafted Guitars</title>
  </head>
  <body>
    <header id="header">
      <img src="https://parspng.com/wp-content/uploads/2022/11/guitarpng.parspng.com-6.png" id="header-img">
      <h1>Artisan Crafted Guitars</h1>
      <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>
    <main>
      <section class="two">
        <h2>Handcrafted, home-made masterpieces</h2>
        <form id="form" method="post" action="https://www.freecodecamp.com/email-submit">
          <label for="email"><input id="email" name="email" type="email" required placeholder="Enter your email address" /></label>
          <input id="submit" type="submit" value="GET STARTED" />
        </form>
      </section>
      <section id="Features">
        <div class="features">
          <img src="https://cdn.pixabay.com/photo/2013/03/30/00/10/fire-97863_1280.png" id="Premium_Materials">
          <h2>Premium Materials</h2>
          <p>Our guitar use top quality wood which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
        <div>
          <img src="https://cdn.pixabay.com/photo/2016/04/01/10/09/black-and-white-1299789_1280.png" id="Fast_Shipping">
          <h2>Fast Shipping</h2>
          <p>We make sure you receive your guitar as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
        <div>
          <img src="https://cdn.pixabay.com/photo/2023/06/05/08/56/quality-8041744_1280.png" id="Quality_Assurance">
          <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>
      </section>
      <section id="How_it_works">
        <iframe id="video" width="420" height="315" src="https://www.youtube.com/embed/Tniu5fr3wTw?si=KaMyJfXS_n-tkn8i" >
        </iframe>
      </section>
      <section id="Pricing">
        <div class="container">
          <div class="guitar">
            <h3>Electric Guitar</h3>
            <p><strong>$500</strong></p>
            <p>Ideal for Rock/Heavy Metal</p>
            <p>H/S/S Pickup Configuration with 5-Position Selector</p>
            <p>Thin and lightweight body</p>
            <button type="button">SELECT</button>
          </div>
          <div class="guitar">
            <h3>Acoustic Guitar</h3>
            <p><strong>$600</strong></p>
            <p>Ideal for Country music</p>
            <p>Premium, solid-top guitar for superior tone and projection</p>
            <p>Hardshell case included</p>
            <button type="button">SELECT</button>
          </div>
          <div class="guitar">
            <h3>Acoustic-Electric Guitar</h3>
            <p><strong>$800</strong></p>
            <p>Great for all types of bands</p>
            <p>Fitted with a pickup and a preamp</p>
            <p>Ability to customize your sound</p><br>
            <button type="button">SELECT</button>
          </div>
        </div>
      </section>
    </main>
    <footer>
      <ul>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <p>Artisan Crafted Guitars</p>
    </footer>
  </body>
</html>
body {
  background: #dbdbdb;
}
#header-img {
  height: auto;
  width: 40px;
  margin-left: 50px;
}
h1, nav {
  display: inline-block;
}
header {
  position: fixed;
  background: #dbdbdb;
  width: 100%;
  top: 0;
  }
  main {
    margin-top: 100px;
  }
h1 {
  font-family: Helvetica;
}
nav > ul{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-left: 600px;  
}
nav > ul > li {
  list-style-type: none;
  padding: 0 30px;
  font-family: helvetica;
}
li > a {
  text-decoration: none;
}
li > a:visited {
  color: black;
}
.two {
  text-align: center;
}
h2 {
  font-family: Helvetica;
  font-size: 25px;
  font-weight: 800;
}
input {
  display: block;
  margin: auto;
}
#email {
  width: 350px;
  height: 27px;
}
input[type="submit"] {
  margin-top: 15px;
  padding: 5px 15px;
  font-family: Helvetica;
  font-weight: 1000;
  font-size: 14px;
  background-color: #fff000;
  border: none;
}
#Premium_Materials {
  height: auto;
  width: 65px;
  float: left;
  margin-left: 300px;
  margin-right: 70px;
}
#Fast_Shipping {
  height: auto;
  width: 80px;
  float: left;
  margin-left: 300px;
  margin-right: 55px;
}
#Quality_Assurance {
  height: auto;
  width: 80px;
  float: left;
  margin-left: 300px;
  margin-right: 55px;
}
.features {
  margin-top: 150px;
}
iframe {
  margin-top: 95px;
  margin-bottom: 95px;
  margin-left: 150px;
}
.container {
  display: flex;
  margin: 100px 200px;
}
.guitar {
  display: inline-block;
  border: solid 2px black;
  margin: auto;
  text-align: center;
  width: 300px;
  height: 275px;
}
h3 {
  background: #b3b3b3;
  margin: 0;
  padding: 10px 0;
}
strong {
  font-size: 1.5rem;
}
button {
  margin-top: 15px;
  padding: 5px 15px;
  font-family: Helvetica;
  font-weight: 1000;
  font-size: 14px;
  background-color: #fff000;
  border: none;
  border-radius: 8px;
  cursor:pointer;
}
footer {
  background: #b3b3b3;
  width: 75%;
  height: 90px;
  margin: auto;
}
footer > ul {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  margin: auto;
}
footer p {
  text-align: right;
  margin-top: 5px;
  margin-right: 10px;
  font-family: helvetica;
}
footer > ul > li {
  list-style-type: none;
  padding: 45px 10px 0px;
  font-family: helvetica;
}

Hello, Af1991!

Let’s try to answer each of your questions:

Basically 1 and 2 have the same answer, and that is that the h2, the p and the body element all of them have margins by default. There are a lot of methods to get rid of them, but my favorite is this one:

*, *::before,
*::after {
margin: 0;
}

This makes all your elements with a default margin of 0, so you can adjust them however you like.

As for the 3rd question, I don’t see any decorations. When pasting your code into a codepen, it looks like the links from your nav. Can you elaborate what is happening on your end?

1 Like

Thanks for the help! On my computer the links in the footer section are blue and when they are active they become red. If you don’t see it, it may be an issue on my end.

Welcome to the community!

Here is a link that could be useful to help solve the text decoration problem.

Keep up the good progress!

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