Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

The error message I keep getting is “make sure nav-bar is always at the top”

And how can I make each of the price box stand on their own

Your code so far

<!DOCTYPE html>
<html lanh="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, intial-scal=1.0">
    <title>freeCodeCamp Landing Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <div id="header-container">
    <header id="header">
    <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png"
            alt="original trombones logo">
            <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>
                </div>
                <section id="home">
    <h1>Handcrafted, home-made masterpieces</h1>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" name="email" placeholder="Enter email address" type="email"></br>
          <input id="submit" type="submit" value="Get started"></input>
          </div>
          </section>
          <div class="icon"></div>
          <section id="features">
              <div class="row">
                  <div class="icon">
                      <i class="fa fa-3x fa-fire"></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="row">
                <div class="icon">
                    <i class="fa fa-3x fa-truck"></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="row">
                            <div class="icon">
                                <i class="fa fa-3x fa-truck"></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="row">
       <div class="icon">
             <i class="fa fa-3x fa-battery-full"></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="500" height="350" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       </section>
       <section id="pricing">
        <div class="product">
      <div class="title-box">TENOR TROMBONE</div>
      <div class="description-box">
        <p class="price">$600</p>
  <p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>Select</button>
  </div>
    <div class="product">
        <div class="title-box">TENOR TROMBONE</div>
            <div class="description-box">
<p class="price">$900</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>Select</button>
  </div>
    <div class="product">
        <div class="title-box">TENOR TROMBONE</div>
            <div class="description-box">
<p class="price">$1200</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum.</p>
<p>Lorem ipsum dolor.</p>
<p>Lorem ipsum.</p>
<button>Select</button>
  </div>
  </section>
<footer>
        <ul>
    <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Contact</a></li>
          </ul>
              <span class="copyright">Copyright 2022</span>
        </footer>
  </body>
</html>


body {
   background-color: #f6f8e8;
   color: #010101;
   font-size: 8px;
   font-family: 'halvetica', san-serif;
}

#header-container {
   width: 100%;
   height: 50px;
   position: fixed;
}

#header-img {
   width: 100px;
   margin: 8px;
   display: flex;
   float: left;
}

#nav-bar {
   width:100%;
   height: 50px;
   margin: 8px;
}

#nav-bar ul {
   list-style: none;
   justify-content: space-evenly;
   text-align: center;
   display: flex;
   padding: 10px;
}

.nav-link{
   text-decoration: none;
   color: #010101;
}

#nav-bar ul li:hoover {
   background: whitesmoke;
}


h1 {
   font-size: 10px;
   text-align: center;
}

#form {
   text-align: center;
   font-size: 10px;
}

#email {
   width: 30%;
   height: 10px;
   margin: 0;
   padding: 0;
   font-size: 5px;
}

#submit {
   background-color: #ffdc00;
   margin: 5px 0 0 0;
   padding: 2px 4px;
   font-size: 6px;
   border: 0;
   text-transform: uppercase;
}

.description {
   margin: auto;
   padding: 3px;
   width: 80%;
   font-size: 8px;
}

#video {
   margin: auto;
   display: block;
   padding-top: 10px;
}

#pricing {
    
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.product {
   border: 1px solid black;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   width: 100px;
   padding: 5px 10px;
}

.title-box {
   background-color: lightgray;
   width: 100px;
   text-align: center;
   font-size: 10px;
   padding: 5px 10px;
   margin: 0;
}

button {
   border: 1px solid #f6f8e8;
   border-radius: 3px;
   width: 50px;
   text-align: center;
   text-transform: uppercase;
   font-size: 10px;
   padding: 3px 0;
   background-color: #ffdc00;
}

footer {
   display: flex;
   justify-content: center;
   float: left;
}

footer ul {
   justify-content: space-evenly;
}

footer li {
   list-style-type: none;
   text-align: center;
}
footer a {
   text-decoration: none;
   color: #010101;
}

footer li:hover {
   background: whitesmoke;
}

footer > span {
 margin-top: 5px;
 display: flex;
 float: left;
 font-size: 0.9em;
 color: #444;
}

@media screen only and (max-width: 320px) {
   #nav-bar ul {
       height: 250px;
       flex-direction: column;
       text-align: center;
   }
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.87 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

3

Move the positioning from the container to the nav (e.g. on the #nav-bar selector).

4

Thank you for your reply
I’ve done that, yet the code did not pass

5

Hello, is there no one to help me out?

6

hi, sorry you are still stuck.
Can you post your most recent code please in full?

1 Like
7

#nav-bar{
position: fixed;
top: 0;
width: 100%;
}

1 Like
8

Thank you guys have been able to solve the nav-bar issue.

I now have a challenge with the footer. I want the copyright which is wrapped up in a <span> to be aligned underneath the <ul> content

Here’s my code for them


footer {
    background-color: bisque;
    height: 25px;
    width: 100%;
    
    padding: 10px;
}


footer ul {
    list-style-type: none;
    display: flex;
    float: right;
}

footer a {
    margin-left: 10px;
    text-decoration: none;
    color: #010101;
}   
    
footer li:hover {
    background: whitesmoke;
}


#copyright {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  float: right;
}

And here’s my result from the code

Screenshot_20220916-164719~2
Screenshot_20220916-164719~2720×493 52.7 KB

9

Please post all your code.

  1. The font sizes you are using are way too small. Use the default sizes and above. Do not go below 16px if it can be avoided.

  2. In the HTML you posted copyright is a class not an id (.copyright).

  3. Do not mix flexbox and float. You do not need float at all for layout.

  4. Do not set a fixed height on containers, there needs to be room for the content. You can set a min-height if needed but it needs to be able to grow.

  5. Make the footer a flexbox container and set its direction to a column. Align the flex items to the end.

footer {
  background-color: bisque;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

footer ul {
  list-style-type: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

footer a {
  text-decoration: none;
  color: #010101;
}   
    
footer li:hover {
  background: whitesmoke;
}

.copyright {
  margin-top: 20px;
}
1 Like
10

Thank you so much lasjorg, it totally worked.

Thank you also for the tips you gave me, I never knew that you don’t have to use float with flexbox. Nor did I know that you don’t use fixed heights for containers.

11

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