Save the Koala

El encargo para este ejercicio es crear la maqueta de un sitio de una fundación de rescate de Koalas.

Para esto debo usar el framework de Bootstrap.

Pasos

PRIMERO Dividir la maqueta del desktop en secciones contenedoras, las que a su vez dividiré en rows y columns, para poder decidir qué elementos de bootstrap me sirven para replicar el sitio. Una vez listo esto, aplicar las col necesarias para la vista sm (móvil) respetando la otra maqueta.

En la versión desktop podemos diferenciar 7 grandes secciones (las que luego se adaptarán a responsive design):

1. SECTION 1 - Header: Esta sección incluye una imágen de fondo, un navbar transparente (con un Logo a la izquierda y 3 links a la derecha). Un párrafo a la izquierda con un título y bajo el párrafo un botón.

2. SECTION 2 - INFO 1: Una fila con un col-6 (imagen mamá koala) y otra fila que en su interior tiene un epígrafe, un titulo, un parrafo en col-6 y luego otra fila que tiene 2 col-6 en su interior, cada uno con un título, un párrafo y un link de "ver más".

3. SECTION 3 - HELP: es una fila con 2 col-6, la primera columna con epígrafe, título, párrafo y un botón; la segunda con una imágen.

4. SECTION 4 - KOALA IMG: Es un gran contenedor, con una imágen de background y un solo párrafo de texto (probablemente 25%) el cual está indentado hacia la derecha con un offset que lo deja con el borde centrado y con alineación a la izquierda.

5. SECTION 5 - HOW TO HELP: Un titulo, centrado en col-12 (o puede ser solo un div centrado) y luego otra fila con un col-4 donde cada columna consiste en un ícono y bajo este un párrafo.

6. SECTION 6 - DONATIONS: nuevamente un titulo centrado en col 12, y luego otra fila con col-4. Dentro de cada columna va la info de pago y abajo un botón para donar.

7. SECTION 7 - FOOTER: una fila dividida en 2 col-6, la primera un párafo. La segunda tiene otra fila dentro de la cual va un col-4 con links.