Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Describe your issue in detail here.
Hi,
I have put my navbar at the top of viewport but when I scroll the page down, some of navbar is visible while the rest get’s hidden behind the video.
How can i fix this?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link href="styles.css" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Product Landing Page</title>
  </head>
  <body class="1">
    <header id="header">Best Soccerballs<img id="header-img" src="https://media.istockphoto.com/vectors/footballball-stamp-vector-id522396890?s=612x612" width="90" height="83">
    <div class="flex-container"><nav id="nav-bar">
      <a class="nav-link" href="#Feature">Feature</a>
      <a class="nav-link" href="#How we make it">How we make it</a>
      <a class="nav-link" href="#Price">Price</a>
      </nav></div>
</header>
<main>
  <h2>Made by leather</h2>
  <form action="https://www.freecodecamp.com/email-submit" id="form"> <input type="email" id="email" placeholder="Email"
  name="email" multiple><br><br></input>
<input id="submit" value="Submit" type="submit">
<section id="Feature">
<h3>Premium Materials</h3> 
<span>&#9917</span>
<section id="How we make it">
<iframe id="video" id="how_to_make_it"
width="560" height="315" src="https://www.youtube.com/embed/qFTPU5IHjbc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>


<div>
  <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Limited Edition Leather Ball</h4>
  <h3>&dollar;499</h3>
  <br>
  <p>Great for professional use</p><input id="select" value="SELECT" type="submit">
  <section id="Price">
</div>
  </main>
<footer>
 
 <div>&#169;&nbsp;Copyright 2022, <i><bold>Best Soccerballs</i></bold></div>
 
  
  


</footer>
  </body>













  </html>
/* file: styles.css */
@media only screen and(max-width:600px){
.1 {width:100%;}
}

body {  background: linear-gradient(70deg, #fdcd3b 45%, #ffed4b 60%); 
width: 450px;
}
header[id="header"]{
  position: fixed;
  top: 30px;
  left: 100px;
font-size: 30px;
  font-family: tahoma, sans serif;
  color: #778899;
  width: 100%;
}
img {
  position: absolute;
  left: -100px;
  border-radius: 40px;
  top: -25px;
}
nav {
  position: relative;
  font-size: 20px;
   left: 400px;
  top: -30px;
  
  
  
}
a {
  color: #778899;
  text-decoration: none;
  margin: 13px
}
a:hover{
  background-color: lightgray;
}

  main h2 {
  color: #778899;
  font-family: verdana;
  position: relative;
  top: 150px;
  left: 330px;
  font-size: 28px
}

a:active {
  background-color: lightyellow;
}
input[id=email] {
  font-size: 17px;
  position: absolute;
  left: 380px;
  top: 210px;
}
input[id=submit] {
  background-color:; 
  cursor: pointer;
  font-size: 13px;
  background-color: #778899;
  color: black;
  position: absolute;
  left: 440px;
  border-radius: 5px;
  top: 250px
}
input[id="submit"]:hover {
background-color: lightgray;}
h3 {
  position: relative;
  top: 170px;
  left: 200px;
  font-size: 23px;
  font-family: verdana;
  
}
span {
  font-size: 41px;
  position: relative;
  top: 105px;
  left: 97px;
}
iframe {
  position: absolute;
  top:450px;
  left: 210px;
}

main div {
  width:350px ;
  height: 250px ;
  border: 5px solid gray ;
  margin:10px ;
  position: absolute;
  top: 850px;
  left: 310px;
  background-color:white ;

}
div h4 {
  position: absolute;
  top: -20px;
  left: -20px;
  margin: 20px;
  padding: 20px;
  background-color: lightgray;
  width: 310px;
  font-family:seriff;
}
div h3 {
  position: absolute;
  top: 50px;
  left: 150px;
  letter-spacing: 1.5px;
  font-family: arial;

}
div p{
  position: absolute;
  top: 140px;
  left: 97px;
  font-weight: bold;
  
}
div input {
  position: absolute;
  top: 220px;
  left: 140px; 
  cursor: pointer;
  font-size: 17px;
  background-color: gold;
  color: black;
  border-radius: 2px;
  font-family: arial;
  border: hidden;
}

div input:hover {
  background-color: lightgray;
}
footer div {
  position: relative;
  top:920px;
  
}
.flex-container {
  display:flex;
}


Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

@dannee Hi, could you help me with my problem?

What part is not visible? I can see for now that you don’t have the ‘section’ closing tags.

For this type of layout question, it is best to set your code up inside codepen so that we can see it and play with it.

Hi, I hade them closed but validator told me to remove them.

Take a look at HTML section Tag

My sections are closed now, still not solved.

What is nested in each section? Put your code here again. Not “How we make it” but “How-we-make-it” for the ‘a’ element and corresponding ‘id’.

You could add a z-index in the header to move it in front of all the other tags

z-index: 1;

then still in d header tag in css you can add a background color similar to your body background color.

then you can close up the space btw your header element in the document and the body element by adjusting the top: 20px value.

hope this helps

Hi, yes I found same answer on the web it helps, thank you!

1 Like