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 still can’t get it right. I have asked for help before, this is my updated code

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>
  <a class="nav-link" href="#form"></a>
  <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

Hello @Jendermen!

Good attempt!

Have you attempted to set you header to a fixed position in CSS to see if that may work? Remember to use the id syntax for the header.

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like
3

Hi there!

The above elements should be within the head elements.

You should not have nav element twice. Remove the inner nav opening and closing tags. Also your anchor elements doesn’t have the text corresponding to the related elements on your page.

1 Like