Tell us what’s happening:
Describe your issue in detail here: I am stuck on trying to get the nav-bar to remain static and also on the flex-box issue.I have worked on this for too long and help is required.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<header id="header">
<img id ="header-img" src="https://img.freepik.com/free-psd/logo-mockup-grey-wall_35913-2122.jpg?size=626&ext=jpg" alt="Logo" width="250" height="150">
<nav id="nav-bar">
<li><a class="nav-link" href="#header">Header</a></li>
<li><a class="nav-link" href="#video">Video</a></li>
<li><a class="nav-link" href="#nav-bar">Navigation</a></li>
<li> <a class="nav-link" href="#form">Form</a></li>
</nav>
<video id="video" width="320" height="240" controls>
<source src="https://joy.videvo.net/videvo_files/video/free/video0455/large_watermarked/_import_609113a1be0e89.39394997_preview.mp4" type="video/mp4">
<source src="https://joy.videvo.net/videvo_files/video/free/video0455/large_watermarked/_import_609113a1be0e89.39394997_preview.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</header>
<br>
<body>
<div class="flex-container">
<div><a href=""">Product item 1</a></div>
<div><a href="">Product item 2</a></div>
<div><a href="">Product item 3</a></div>
</div>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
<label for="name">First name:</label>
<input type="text" id="name" name="name" placeholder="John"><br><br>
<label for="surname">Last name:</label>
<input type="text" id="surname" name="surname" placeholder="Smith"><br><br>
<input type="email" id="email" name="email" placeholder="your email@ whatever.com"><br><br>
<input id="submit" type="submit" value="Submit">
</form>
</body>
</html>
/* file: styles.css */
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
@media screen and (min-width: 40px) {
video {float:right; width:70%;}
body {float:right;width: 77%;}
}
.img {
position: fixed;
left: 0px;
top: 0px;
z-index: -1;
}
#nav-bar {
position: fixed;
top: 0px;
width: 100%;
left:0px;
z-index:9999;
}
body {
align-text:center;
overflow: hidden !important;
width: 100%;
height: 100%;
}
.header{
position: fixed;
width:0px;
top: 0px;
left:0px;
z-index: 99999;
font-family: Helvetica, sans-serif;
padding: 1em;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
