---
id: 587d78af367417b2b2512b04
title: Build a Product Landing Page
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Construir una página de inicio de producto
---
## Description
Objetivo: crear una aplicación CodePen.io que sea funcionalmente similar a esta: https://codepen.io/freeCodeCamp/full/RKRbwL . Cumple las siguientes historias de usuario y haz que pasen todas las pruebas. Dale tu propio estilo personal. Puedes usar HTML, JavaScript y CSS para completar este proyecto. Se recomienda CSS simple porque eso es lo que las lecciones han cubierto hasta ahora y debe obtener algo de práctica con CSS simple. Puede utilizar Bootstrap o SASS si lo desea. No se recomiendan tecnologías adicionales (solo por ejemplo, jQuery, React, Angular o Vue) para este proyecto, y su uso es bajo su propio riesgo. Otros proyectos te darán la oportunidad de trabajar con diferentes pilas de tecnología como React. Aceptaremos e intentaremos solucionar todos los informes de problemas que utilizan la pila de tecnología sugerida para este proyecto. ¡Feliz codificación! Historia de usuario n. ° 1: La página de destino de mi producto debe tener un elemento de header
con un id="header"
. Historia de usuario n. ° 2: Puedo ver una imagen dentro del elemento del header
con un id="header-img"
correspondiente id="header-img"
. Un logo de empresa sería una buena imagen aquí. Historia de usuario n. ° 3: Dentro del elemento #header
puedo ver un elemento de nav
con una id="nav-bar"
correspondiente id="nav-bar"
. Historia de usuario n. ° 4: Puedo ver al menos tres elementos seleccionables dentro del elemento de nav
, cada uno con la clase nav-link
. Historia de usuario n. ° 5: Cuando hago clic en un botón .nav-link
en el elemento de nav
, me lleva a la sección correspondiente de la página de destino. Historia de usuario n. ° 6: Puedo ver un video de un producto integrado con id="video"
. Historia de usuario n. ° 7: Mi página de destino tiene un elemento de form
con una id="form"
correspondiente id="form"
. Historia de usuario n. ° 8: Dentro del formulario, hay un campo de input
con id="email"
donde puedo ingresar una dirección de correo electrónico. Historia de usuario n. ° 9: el campo de entrada #email
debe tener un texto de marcador de posición para que el usuario sepa para qué sirve el campo. Historia de usuario n. ° 10: el campo de entrada #email
usa validación HTML5 para confirmar que el texto ingresado es una dirección de correo electrónico. Historia de usuario n. ° 11: Dentro del formulario, hay una input
envío con una id="submit"
correspondiente id="submit"
. Historia de usuario n. ° 12: Cuando hago clic en el elemento #submit
, el correo electrónico se envía a una página estática (use esta URL simulada: https://www.freecodecamp.com/email-submit ) que confirma que se ingresó la dirección de correo electrónico y que Se publicó con éxito. Historia de usuario n. ° 13: la barra de navegación siempre debe estar en la parte superior de la ventana gráfica. Historia de usuario n. ° 14: La página de inicio de mi producto debe tener al menos una consulta de medios. Historia de usuario n. ° 15: La página de inicio de mi producto debe utilizar CSS Flexbox al menos una vez. Puedes construir tu proyecto por medio de este bolígrafo CodePen . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de lectura-búsqueda-pregunta si te atascas.
## Instructions
## Tests
## Challenge Seed
## Solution
```js
// solution required
```