Ξ Prueba de maquetacion web

La prueba se divide en dos partes:

  1. Maquetar el diseño de esta página (la prueba misma) en HTML5 haciendo uso de la técnica RWD, es decir, deberá tener (con el mismo código) tres versiones: desktop, tablet y mobile (hasta 420px). La fuente usada es: Roboto Condensed
  2. Cuando tengas la maquetación deberás realizar las diferentes pruebas que contiene y escribir el resultado a continuación de la imagen de ejemplo.

Para ello puedes usar HTML5, CSS3,SASS ó LESS, cualquier sistema de grid (si lo necesitas) y todas las técnicas que necesites.

IMPORTANTE: En la carpeta [imagenes] tienes todos los archivos gráficos necesarios. Tendremos en cuenta las técnicas usadas, la claridad del código y el tiempo que tardes en enviarnos la prueba... que comienza ahora

¡Suerte!

01. Botones

Maqueta los dos botones que ves a continuación.Tienen 3 estados: normal, hover (cambia fondo) y active (cambia posición):

imagen-prueba1

Aquí tu maquetación:

02. Estados del input

Estiliza un input con sus diferentes estados, default, hover y active:

imagen-prueba2

Aquí tu maquetación:

03. El puzzle

En la carpeta [imagenes] tienes el logo troceado.
Tendrás que hacer un sprite con dichos trozos y rehacer el logo como se muestra en la imagen de ejemplo de abajo. Ten en cuenta que cada trozo de imagen será un elemento web:

imagen-prueba3

Aquí tu maquetación:

04. Centrado al centro

Centra tanto en altura como en anchura el cuadrado negro en la caja azul.

imagen-prueba4

Aquí tu maquetación:

05. Simple Menú

Tienes que crear un menu simple solo con CSS que tenga un submenu en cada uno de los elementos de la lista como se muestra en la imagen de ejemplo:

imagen-prueba5

Aquí tu maquetación:

06. El secreto está en la formula

Tienes que reproducir las listas que se muestran a continuación solo con CSS3. Crea dos listas, una llámala "lista-a" y la otra "lista-b", así de fácil.Finalmente alinea una al lado de la otra como se muestra en la imagen de ejemplo:

imagen-prueba6

Aquí tu maquetación: