bernkaztel / lyft

Creación de réplica de página de Lyft (maquetado).

Lyft

• Track: Common Core
• Curso: Creando tu primer sitio web interactivo
• Unidad: Maquetado web con HTML & CSS

---

Para hacer esta página web, se ha utilizado la técnica de grid. En primer lugar se dividió la página en dos grids:

1. El grid del header.
2. El grid del body.

#Grid Header
Cuenta con un esquema en el cual el header está dividido en tres grids: uno contien el logo, otro contiene el menú de navegación y el último lleva el botón de log-in.

#Grid Body El grid del body a su vez se divide en 6 boxes.

#Box 1: Está dividido a su vez en un grid de dos columnas. La primera columna lleva el gif con el logo de lyft que prende y apaga. La segunda columna lleva un fondo blanco, el título, el subtítulo, el campo para colocar el número telfónico, el botón para convertirse en un conductor y el botón de log in. Debajo de estos lleva dos pequeños subtitulos con un link en rosa al final de ellos.

#Box 2: Lleva un gradiante d dos colores de fondo. Y a su vez está dividida en dos columnas, la primera columna lleva el texto que tiene el título y el contenido. Y la segunda columna que contiene la imagen del teléfono móvil.

#Box 3: Está dividida por dos columnas, en la primera va la caja de texto que contien el título, el subítulo, y el contenido. La segunda columna lleva insertado el video de youtube.

#Box 4: Está dividida por dos columnas, en la primera lleva insertado el video de youtube. Y en la segunda columna llevala caja de texto que contien el título, el subítulo, y el contenido.

#Box5: Está dividida por dos columnas, en la primera va la caja de texto que contien el título, el subítulo, y el contenido. La segunda columna lleva insertado el video de youtube.

#Box6: La última box que correspond al footer, está dividida en dos filas. La primera fila tiene en su interior un grid dividido en dos columnas, la primera tiene otro grid al interior con tres columnas en las que se encuentra en cada una de éstas un menú de navegación. La segunda columna contiene los botones de las tiendas desde las cuales se pued bajar la aplicación. Finalmente, en la segunda fila del primer grid se encuentran otro grid que divide en dos filas, la primera recibe a los íconos y la segunda tiene la leyenda del copyright.