Tell us what’s happening:
I am still pretty new to coding and only coding experience I have is the the lessons and projects and I am a bit confused on the last three requirements of the lesson for the CSS idk how to make the #nav-bar be on the top and stay
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
<title>selling dummy dumb stuff</title>
</head>
<main>
<header id="header">
<img id="header-img" src="https://letstalkscience.ca/sites/default/files/2020-02/balanced-stones-on-a-pebble-beach.jpg" />
<nav id="nav-bar">
<a class="nav-link" href="#header"></a>
<a class="nav-link" href="#header"></a>
<a class="nav-link" href="#header"></a>
<iframe id="video" type="video" src="https://www.youtube.com/watch?v=d3Dtqq1uGjg" > rockes are cool things</iframe>
<form id="form" action="https://www.freecodecamp.com/email-submit" >
<p>If you want to but one of our epic rocks we need your email NOW okay :)</p>
<input id="email" type="email"placeholder="EMAIL NOW OR ELSE" name="email" ></input>
<input id="submit" type="submit"></input
</form>
</header>
</main>
</html>
/* file: styles.css */
#nav-bar {
position: fixed;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page
I am dumb I still need help lol
i Figured out how to position it to fixed but idk how to make it stay are the top or something
if you set the top property to 0, I think that will work.
so it worked which is pretty good lol but a question for later on how do you make it in the foreground of the document instead of behind because when I did that it made everything go behind it
and not move everything else like in the demo example website the project had
you should probably set the z-index values to make it above everything.
idk because the video for the document won’t go behind it or move if I make a seperate selector for it and give it a z-index of 0 and my image a z-index of 1
another quick question off topic why does youtube videos not work is it all youtube videos or do i need a certain code for it to work other than the attribute src
can you show me the code you are using right now because I’m confused by your reply?
Also please clarify what you are trying to do again? (what should be on top? I assume the navbar is always on top so its z-index has to be higher than everyone else)
@media (max-width: 20px) {
img {
display: flex;
justify-content: flex-wrap;
width: 20px;
height: 20px;
}
}
#nav-bar {
position: fixed;
top: 0;
}
html {
font-family: sans-serif;background-color: #556699;
}
#header-img {
max-height: 190;
width: 500;
z-index: 1;
}
.video {
z-index: 0;
}
for youtube videos, you should go to the youtube video and get the embed code they have. This embed code is what you would use in your html. (click on the share button then choose embed to see the full code you should copy)
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.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
so for the assignment it wants the logo or the image to go on the top and be fixed there but for me it done that technally but the image is behind everything else and what i was wondering was how to make the image in the foreground properly and how to make the code go down a bit so it is not overlapping. do you think the overflow property would work on the overlappy thing
why don’t you use a flexbox design or a grid design to arrange the different elements?
