Reto de Código - Sprint 02: Página que replica la interfaz de la Web de Lyft. Aquí ponemos en práctica los recursos aprendidos hasta el momento de Html/Css para el maquetado de una página desde cero.
Desarrollado para Laboratoria.
- Curso: Creando tu primer sitio web interactivo
- Unidad: Maquetado web con HTML & CSS
El siguiente reto consiste en maquetar la página web de Lyft, una compañía de negocios del transporte en San Francisco, California.
Para este reto tenemos ya un repositorio de Laboratoria Learning que debemos copiar a nuestros repositorios y por medio de un git clone descargar los archivos a nuestros repositorios locales.
Una vez realizado estos pasos, empezamos y este será nuestro resultado.
-
Crear un archivo base
index.htmlen la que escribimos la estructura del proyecto y enlazar los archivos css. -
En una carpeta css creamos el archivo de estilo base
main.cssdonde agregamos todos los estilos para nuestra página. -
Dentro de la carpeta
assetsse encuentra la carpetaimagesdonde tenemos todas las imágenes para nuestra página. -
También incluimos el archivo
README.md** explicando el contenido de este repositorio. -
Esta web utiliza la tipografía
Montserrat. -
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);
- Botones, hover:
-
El footer se ve así:
-
Los íconos son de
Icomoon.
-
Para este reto, hemos visto formularios y videos de Youtube.
- Los videos de Youtube a colocar en las secciones:
- Utilizamos la etiqueta
iframepara los videos. - Para el formulario, la etiqueta
input.
-
Utilizamos como guía el sitio original, aunque su diseño se basa en la imagen objetiva de este reto.
- Molly Siesquén
- Shannon Rivera