Lyft

Flujo de trabajo

1. Debes realizar un [fork] (https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74) de este repositorio.
2. Luego hay que clonar el fork en la máquina.

Objetivo

El reto consiste en replicar el sitio de Lyft, este será el resultado a lograr:

Consideraciones

• En el archivo base index.html escribir la estructura del proyecto y enlazar los archivos de estilos (CSS).

• En la carpeta css hay un archivo base main.css para agregar los estilos necesarios para tu proyecto:

• Dentro de la carpeta assets se encuentra la carpeta images donde estan todas las imágenes necesarias para completar el proyecto.

• Deberás actualizar el archivo README.md explicando el contenido de tu repositorio.

• Esta web utiliza la tipografía Montserrat.

• Esta es la paleta de colores:

  • Botones, hover: #FF00BF
  • Fondo de footer: #333447
  • Título del formulario: #352384
  • Texto del formulario: #728099
  • Gradiente morado: linear-gradient(#76278F, #2B1E66);

• Para el footer, tomar en cuenta que tiene un hover y se ve como en la siguiente imagen:

  

  Además, los íconos deberás obtenerlo de Icomoon.

• Para este reto, encontrarás ciertas cosas que probablemente aun no has visto en clase (formularios, videos de Youtube). No te preocupes, estamos seguros que los afrontarás con éxito, de igual forma aquí unos tips:

  • Estos son los videos de Youtube:
    • https://www.youtube.com/watch?v=fLSmUWOYpKw
    • https://www.youtube.com/watch?v=V7j8Aqxmbs8
    • https://www.youtube.com/watch?v=xj2VWLV0xCU
  • Para agregar los videos, averigua sobre la etiqueta iframe.
  • Para el formulario, revisa las etiquetas como form e input.

• Puedes ver el sitio original, sin embargo, su diseño ya ha cambiado en ciertas partes, así que tu fuente de verdad es la imagen que muestra el objetivo de este reto.

  Nota: El sitio original tiene ciertos efectos y funcionalidades que están fuera del alcance de este reto. Enfócate en obtener la maquetación lo más parecido posible, usando lo aprendido en clase ;)

A tener en cuenta

Este reto será evaluado sobre lo siguiente:

• Pixel perfect (replicar el diseño con exactitud)
• Estructura de carpetas y archivos
• Nombramiento de clases, id, etc
• Indentación
• Archivo README.md actualizado y correctamente redactado
• Uso de comentarios para hacer tu código más legible