---
id: 587d78af367417b2b2512b04
title: Build a Product Landing Page
isRequired: true
challengeType: 3
videoUrl: ''
localeTitle: Construir una página de inicio de producto
---

## Description
<section id="description"> <strong>Objetivo:</strong> crear una aplicación <a href="https://codepen.io" target="_blank">CodePen.io</a> que sea funcionalmente similar a esta: <a href="https://codepen.io/freeCodeCamp/full/RKRbwL" target="_blank">https://codepen.io/freeCodeCamp/full/RKRbwL</a> . Cumple las siguientes <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">historias de usuario</a> 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! <strong>Historia de usuario n. ° 1:</strong> La página de destino de mi producto debe tener un elemento de <code>header</code> con un <code>id=&quot;header&quot;</code> . <strong>Historia de usuario n. ° 2:</strong> Puedo ver una imagen dentro del elemento del <code>header</code> con un <code>id=&quot;header-img&quot;</code> correspondiente <code>id=&quot;header-img&quot;</code> . Un logo de empresa sería una buena imagen aquí. <strong>Historia de usuario n. ° 3:</strong> Dentro del elemento <code>#header</code> puedo ver un elemento de <code>nav</code> con una <code>id=&quot;nav-bar&quot;</code> correspondiente <code>id=&quot;nav-bar&quot;</code> . <strong>Historia de usuario n. ° 4:</strong> Puedo ver al menos tres elementos seleccionables dentro del elemento de <code>nav</code> , cada uno con la clase <code>nav-link</code> . <strong>Historia de usuario n. ° 5:</strong> Cuando hago clic en un botón <code>.nav-link</code> en el elemento de <code>nav</code> , me lleva a la sección correspondiente de la página de destino. <strong>Historia de usuario n. ° 6:</strong> Puedo ver un video de un producto integrado con <code>id=&quot;video&quot;</code> . <strong>Historia de usuario n. ° 7:</strong> Mi página de destino tiene un elemento de <code>form</code> con una <code>id=&quot;form&quot;</code> correspondiente <code>id=&quot;form&quot;</code> . <strong>Historia de usuario n. ° 8:</strong> Dentro del formulario, hay un campo de <code>input</code> con <code>id=&quot;email&quot;</code> donde puedo ingresar una dirección de correo electrónico. <strong>Historia de usuario n. ° 9:</strong> el campo de entrada <code>#email</code> debe tener un texto de marcador de posición para que el usuario sepa para qué sirve el campo. <strong>Historia de usuario n. ° 10:</strong> el campo de entrada <code>#email</code> usa validación HTML5 para confirmar que el texto ingresado es una dirección de correo electrónico. <strong>Historia de usuario n. ° 11:</strong> Dentro del formulario, hay una <code>input</code> envío con una <code>id=&quot;submit&quot;</code> correspondiente <code>id=&quot;submit&quot;</code> . <strong>Historia de usuario n. ° 12:</strong> Cuando hago clic en el elemento <code>#submit</code> , el correo electrónico se envía a una página estática (use esta URL simulada: <a href="https://www.freecodecamp.com/email-submit" target="_blank">https://www.freecodecamp.com/email-submit</a> ) que confirma que se ingresó la dirección de correo electrónico y que Se publicó con éxito. <strong>Historia de usuario n. ° 13:</strong> la barra de navegación siempre debe estar en la parte superior de la ventana gráfica. <strong>Historia de usuario n. ° 14:</strong> La página de inicio de mi producto debe tener al menos una consulta de medios. <strong>Historia de usuario n. ° 15:</strong> La página de inicio de mi producto debe utilizar CSS Flexbox al menos una vez. Puedes construir tu proyecto por medio de <a href="http://codepen.io/freeCodeCamp/full/MJjpwO" target="_blank">este bolígrafo CodePen</a> . O puede usar este enlace CDN para ejecutar las pruebas en el entorno que desee: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Una vez que haya terminado, envíe la URL a su cuenta Proyecto con todas sus pruebas aprobadas. Recuerda usar el método de <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">lectura-búsqueda-pregunta</a> si te atascas. </section>

## Instructions
<section id="instructions">
</section>

## Tests
<section id='tests'>

```yml
tests: []

```

</section>

## Challenge Seed
<section id='challengeSeed'>

</section>

## Solution
<section id='solution'>

```js
// solution required
```
</section>
