Product landing page

HTML-CSS
1

Hello, I got a problem in the product landing page at the moment of making the price section I dont know how to errase the space between the div to make them be together.

I want them to look like the pricing of this site https://product-landing-page.freecodecamp.rocks but mine have a huge space between each price.

2

Hi @alvaro624

Can you share your code?

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding

1 Like
3

Hello!

It is difficult to provide guidance without seeing the code you have already.

But, with that in mind, I am currently redoing the Camper Cafe, and just completed where it is necessary to align the price with the flavor.

Steps 31 through 41. Check it out.

4 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Product Landing Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
<body>
  <header id="header">
    <img id="header-img" src="https://i.pinimg.com/474x/dd/43/59/dd4359edf7920c1307d0577a1334588b.jpg">
    <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="#price">Price</a></li>
      </ul>
      </nav>
  </header>
  <section class="email">
    <h1>Handcrafted masterpieces</h1>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input name="email" id="email" placeholder="Enter your email" type="email" required></input>
      <input id="submit" type="submit" value="Start"></input>
      </form>
      </section>
<section id="features"> 
  <div class="materials">
    <h2>Premium Matirials</h2>
    <p>Our ppianos are made with the best wood you can find locally. This will increase the longevity of your purchase.
      </div>
      <div class="shipping">
        <h2>Fast Shipping</h2>
        <p>We make sure you recieve your piano as soon as we finish making it. We also provide free returns if you are not satisfied.</p>
        </div>
        <div class="quality">
          <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" src="https://media.istockphoto.com/id/1425999785/es/v%C3%ADdeo/toma-de-seguimiento-de-primer-plano-de-una-joven-pianista-talentosa-irreconocible-tocando.mp4?s=mp4-640x640-is&k=20&c=LRI50U8fCfzB8K9RBbhtYMJ_iR1V0RlT0-sa9pSWYcQ="></iframe>
    </section>
    <section id="price">
      <div class="piano">
        <div class="product">Grand piano</div>
        <h2>$1500</h2>
        <ol>
          <li>The best:</li>
          <li>Sound quality</li>
          <li>Acoustic power</li>
          <li>Tactile response</li>
          </ol>
          <buttom class="buttom">Select</buttom>
          </div>
          <div class="piano">
        <div class="product">Wall piano</div>
        <h2>$1000</h2>
        <ol>
          <li>More compact than grand piano</li>
          <li>Baddest sound quality</li>
          <li>Baddest acoustic power</li>
          <li>Baddest tactile response</li>
          </ol>
          <buttom class="buttom">Select</buttom>
          </div>
          <div class="piano">
        <div class="product">Electric piano</div>
        <h2>$500</h2>
        <ol>
          <li>Realistic piano sounds</li>
          <li>touch sensitivity similar to acoustic piano</li>
          <li>It have sounds of different instruments</li>
          <li>It can be functional between 10 and 20 years</li>
          </ol>
          <buttom class="buttom">Select</buttom>
          </div>
          </section>
      </body>
      </html>

That is index.html

5 
body {background-color: white; text-align: center; margin: 50px 0; }

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

  #header-img { width: 60px}
  ul { list-style: none; width: 35vw; display: flex; flex-direction: row; justify-content: space-around; }
  #nav-bar {padding-left: 880px}
   .nav-link {color: white; text-decoration: none; }
.email {margin-top: 100px;}
.materials {  margin-top: 50px; margin-left: 400px ;
  text-align: left; }
.shipping { margin-top: 50px ;  margin-left: 400px ;
  text-align: left; }
.quality { margin-top: 50px ;  margin-left: 400px ;
  text-align: left; }
  #video { width: 600px; height: 380px; margin: 50px; }
  #price { display: flex;   flex-direction: row; justify-content: center; margin: 0 500px; }
  .piano { display: flex; flex-direction: column; align-items: center; text-align: center; width:33%;margin: 125px;  border: 1px solid black; padding-top: 10px; padding-bottom: 10px; }
ol { list-style: none; padding-right: 30px}
.product {width: 100%; background-color: grey; padding-top: 10px; padding-bottom: 10px; }
.buttom {background-color: orange; width: 20%; padding: 10px 0; }

    
 #submit {background-color: orange; border: none; padding: 5px 5px; cursor: pointer; }

And this is the style

6

Hi @alvaro624

There are two ways to handle this.

First a background. ol elements have a default margin-top property of 1em

  1. set margin-top to 0 for ol elements.
    or,
  2. set margin-bottom to 0 for h2 elements.

Happy coding

7

Thanks for your help

1 Like
8

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