Product Landing Page - Build a Product Landing Page

HTML-CSS
1

I have a check for all the other steps but not for step 5.
Error I’m receiving is:
Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer )

HTML
<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="#prices" class="nav-link">Prices</a></li>

CSS

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

#pricing {
margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: center;
}
#features {
margin-top: 30px;
}

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

I’m not sure what I’m missing. please help.thank you
Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3 
<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="#prices" class="nav-link">Prices</a></li>
4

Post the entire html and css code here.

5 
html
<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,inital-scale=1.0">
    <meta http-equiv="X-UA=Compatible" content="IE=edge">
 <title>Products</title> 
 <link rel="stylesheet" href="styles.css">
  
 </head>
 <body>
   <header id="header">
     <nav id="nav-bar">
       <div class="logo-container">
         <img 
         src="https://www.google.com/search?q=trombones+logo&tbm=isch&ved=2ahUKEwi7qK6awfX_AhXwPN4AHcRVATkQ2-cCegQIABAA&oq=trombones+logo&gs_lcp=CgNpbWcQAzIFCAAQgAQyBggAEAUQHjoECCMQJzoHCAAQigUQQzoECAAQHjoGCAAQCBAeOgcIABAYEIAEUOIGWLgPYLcUaABwAHgAgAFtiAGQBJIBAzUuMZgBAKABAaoBC2d3cy13aXotaW1nwAEB&sclient=img&ei=vk2kZLvRLPD5-LYPxKuFyAM&bih=785&biw=1114&rlz=1C1GCEA_enUS911US911#imgrc=0lrgU7j_rXImhM"  alt="logo"
         id="header-img"/>
         <span class="the-product">Trombones</span>
         </div>
         <ul class="nav-links">
         </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="#prices" class="nav-link">Prices</a></li>
         </nav>
   </header>
   <section id="email-section">
     <h2>Handcrafted, home-made masterpieces</h2>
     <form action="https://www.freecodecamp.com/email-submit" id="form">
     <input id="email" type="email" required placeholder="Enter your email address" name="email">
     <input type="submit" id="submit" value="Get Started">
     </form>
   </section>
   <section id="features">
     <div class="features"></div>
     <div class="features"></div>
     <div class="features"></div>
   </section>
   <section id="audio">
     <iframe 
     id="video" width="560" height="315" src="https://www.youtube.com/embed/SGqiB0M6jR4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
   </section>
 </body>
 </html>
6

css

:root{
  --white:hsl(0, 0%, 100%);
  --text:hsl(228,12%,48%);
  --pale:hsl(32,37%,92%);
  --green:hsl(158,36%, 37%);
}
*{
  margin:0;
}
body{
  background-color:var(--pale);
}

#header-img{
  width:60px;
  object-fit: contain;
}

#nav-bar{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  position:fixed;
  width:100%;
  height:82;
  top:0;
  background:var(--white);
  padding:10px;
}

.nav-links{
  display:flex;
  list-style:none;
}

.nav-links a{
text-decoration:none;
color:var(--text);
padding:0 10px;
}



@media only screen and (max-width: 800px) {
  #pricing {
    flex-direction: column;
  }
  .product {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}

.logo-container{
  display:flex;
  align-items:center;
}

.the-product{
  font-size:25px;
  margin-left:70px;
  font-weight:800;
  font-family:Sans-serif;
}
#email-section{
  margin-top:100px;
  align-items:center;
}
input{
  padding:8px;
  border-radius:5px;
  border:1px solid var(--green);

}
section:before{
  display:block;
  content:"";
  margin-top:-100px;
  height:100px;
  visibility:hidden;
  pointer-events:none;
}

section{
  margin:20px 20px;
  text-align:center;
}
h2{
  font-family:fraunces;
  margin-bottom:10px;
}

@media only screen and (min-width:600px){
  #nav-bar{
    flex-direction:row;
  }
}

@media only screen and (450px <width <600px){
  .card{
    font-size:0.85rem;
  }
  .product-image{
    height:400px;
  }
}
@media only screen and (450px <= width) {
  .card{
    display:flex;
    max-width:525px;
  }
  .product-image{
    height:400px;
  }
}
7

You don’t have a section element with an id that corresponds to each ‘href’ value. In other words, href="#how_it_works" leads nowhere. The same is true for the #prices.

9

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