Landing Page del producto - Construye una página de inicio de producto

Español HTML-CSS
1

Tu #nav-bar siempre debe estar en la parte superior de la ventana gráfica.
me falta solo ese punto. no se como hacer eso. gracias por la ayuda.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <img id="header-img" src="">
      <nav id="nav-bar">
        <a class="nav-link" href="#asd1">asd1</a>
        <a class="nav-link" href="#asd2">asd2</a>
        <a class="nav-link" href="#asd3">asd3</a>
      </nav>
      <section id="main-content">
        <div id="asd1"></div>
        <div id="asd2"></div>
        <div id="asd3"></div>

        </section>
      <iframe
            id="video"
            height="315"
            src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
            frameborder="0"
            allowfullscreen
          ></iframe>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input id="email" placeholder="email" type="email" name="email"> 
          <input id="submit" type="submit">
        </form>
    </header>
  </body>
  </html>

/* file: styles.css */
  body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        #header-img {
            width: 100%;
            height: auto;
        }

        #nav-bar {
            display: flex;
            justify-content: space-around;
            background-color: #f4f4f4;
            padding: 10px;
            position: fixed;
            top: 0;
            width: 100%;
        }

        .nav-link {
            text-decoration: none;
            color: #333;
            padding: 5px;
            margin: 5px 0;
        }

        #video {
            width: 100%;
            height: auto;
        }

        #form {
            text-align: center;
            padding: 20px;
        }

        #email {
            width: 80%;
            padding: 10px;
            margin: 10px 0;
        }

        #submit {
            padding: 10px;
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        /* Media query para pantallas más pequeñas */
        @media screen and (max-width: 768px) {
            #nav-bar {
                flex-direction: column;
                align-items: center;
            }
        }

Your browser information:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Landing Page del producto - Construye una página de inicio de producto

2

¡Hola! Intente configurar el #header-img en posición fija y vea qué sucede. Es posible que se sorprenda gratamente. ¡Feliz codificación!

Hello!
Try setting the #header-img to position fixed and see what happens.
You may be pleasantly surprised.
Happy coding!

1 Like
3

tnx very much bro…
I spent 2 hours trying and the only thing I got was a headache. you’re the best

1 Like
4

Happy to help you move on in your coding journey @r0ssty !

Happy coding!

1 Like