Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

  1. Your #nav-bar should always be at the top of the viewport.

I have tried everything but I still can’t get it right.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en"></html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>build a product landing page</title>
    <link rel="stylesheet" href="styles.css">
<header id="header">Hello
  <img id="header-img" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.gear4music.nl%2Fnl%2FGitaar-and-Basgitaar%2F3-4-LA-Electric-Guitar-by-Gear4music-Black-Box-Opened%2F1SZ4&psig=AOvVaw2O17P8pYvO1EXQdjJJ9ixo&ust=1734997647546000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCNCI3obIvIoDFQAAAAAdAAAAABAE">Image</img>
<video id="video" src="https://www.youtube.com/watch?v=mbcj_pmWmJk"></video>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="hannahg9@gmail.com" type="email" name="email"></input>
<input id="submit"  type="submit">Submit</input>

<nav id="nav-bar">
  <nav><a class="nav-link" href="#video"></a></nav>
  <nav><a class="nav-link" href="#form"></a></nav>
  <nav><a class="nav-link" href="#submit"></a></nav>
</nav>
</form>
</header>


/* file: styles.css */
@media {
  .header {
    color: gray;
  }}

.header-img {
  display: flex;
}

#nav-bar {
  position: fixed;
  top: 0px;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi there!

You have many nav elements. There’s should be one nav element for all nav-links. So remove the extra nav elements around nav-link elements.

3

Hi, I did what you said but my code will still not go through.

4

show your updated code please

5

I can’t due to me being a new user, should I create a new topic?