Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Good day all,
I completed and passed the Product landing page project, however when I look at the adjacent preview page I cannot see the nav bar, email address box or the footer section. Any reason why this code has passed without those sections being visible?

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en"><html>
  <meta charset=”UTF-8">
<meta name=”website” content=”Landing Page”>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>Freecodecamp Rocks</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  
  <body>
    <main>
      <header id="header">
      <nav id="nav-bar">
<a class="nav-link" id="Features" href="#Features">Features</a>
<a class="nav-link" id="How_it_works" href="#How_it_works">How it works</a>
<a class="nav-link" id="Pricing" href="#Pricing">Pricing</a>
</nav>

  <div class="form">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
  <label="for email">
    <input type="email" id="email" name="email" placeholder="Enter your email address"></input>
    <input type="submit" id="submit">
    </input>
    </form>
  </header>
  <header id="header">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="logo"</img>

<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
    
<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>

<h2>Quality Assurances</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>
    
<iframe id="video"
      src="https://youtu.be/y8Yv4pnO7qc">Roman Carnival Overtures
</iframe>

</main> 
</body>
<footer id="footer">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Contact</a>
      </footer>
</html>

/* file: styles.css */
*{
  background-color:grey
}
/* On smaller screens, where height is less than 450px, change the style of the navbar (less padding and a smaller font size) */
 @media screen and (max-height: 450px) {
   # navbar  {padding-top: 15px;}
   #navbar  a {font-size: 18px;}
 }
header{
  position:fixed;
}
 #contact-block{
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
h1{
  font-size: 75%
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

1 Like
2

Great work! I am not sure but I wonder if in your CSS code in the ‘@media screen’ part, there is a space in the first ‘# navbar’ try removing that space to look like ‘#navbar’ and check.

3

you can’t see footer because you put it after you closed body tag.

that’s like if someone took a picture of you and cut out your legs in it, for example.

  • footer needs to be in body

  • also, input is self closing tag. no need for </input>

same goes for image!

  • you also forgot to close label
1 Like
4

Made the necessary adjustments, closed and refreshed page, still doesnt show footer or nev bar items. When I was writing the code it appeared, made changes on nav-link question and after that those items disappeared. Youtube link also not displaying. Is my code incorrect or is there something not working on the freecode site.
Thanks for the feedback

5

In your first two ‘meta’ tags starting with the " (quotes) from ‘UTF-8’ up to ‘Landing Page’ are different.

If you think it is the site then save your code locally on your computer. Save all files. Then refresh the lesson and paste your work and run test. If same result I find the error in my code sooner or later.

You have done great work so far!

6

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