Exercises

exercise1.md

Treehouse card

El ejercicio consiste en recrear exactamente el card que se muestra en el gif:

El icono de play no es necesario (ni el tooltip que dice Watch trailer, pero si es necesario el efecto de hover del boton 'switch', los peque;os cards que se ven abajo con la animacion, y todo lo demas.

Los colores son los siguientes:

• #E95454 es el rojo del header
• #FFFFFF background color del card
• #EDEFF0 es el color de fondo

La font se llama "Gotham Rounded A" (no esta en google fonts asi que pueden descargarla en algun otro lugar, o si no pueden buscar una font similar)

Para hacerlo utilicen https://codepen.io

hints

• para el peque;o borde de las cards usen este shadow: box-shadow: 0 2px 0 rgba(0,0,0,0.06)

Pens con el ejercicio

Jose

http://codepen.io/Malixnox/pen/qNrOmO

Carlos

http://codepen.io/CarlosEME/pen/OXpyOz

Adonis

http://codepen.io/Megazord/pen/beqrPN

exercise2.md

Clock

El ejercicio consiste en recrear exactamente el componente que se muestra en el siguiente gif:

Es un reloj, obviamente, las tres agujas se mueven con respecto a la hora actual (siempre va a llevar la hora actual).

El reloj pueden revisarlo en la pagina de moment para que vean como funciona: http://momentjs.com/

Para hacerlo utilicen https://codepen.io

Tecnologias que deben usar:

• SCSS: http://sass-lang.com/guide requerido
• React/Angular/JQuery: cualquiera de las tres, preferiblemente React requerido
• moment.js: http://momentjs.com/ opcional (para trabajar con la hora)

exercise3.md

Hover Card

El ejercicio consiste en recrear el siguiente componente:

Para hacerlo utilicen https://codepen.io

Tecnologias que deben usar:

• SCSS: http://sass-lang.com/guide

Referencia: link