---
# System prepended metadata

title: Ejercicio `Integrador` Box Model

---

# Ejercicio `Integrador` Box Model

## ⚙️ Ejercicio

Crear una card de películas que tenga el mismo aspecto que la siguiente imagen:

![WEB](https://successful-balance.surge.sh/maqueta.png)

El texto es el siguiente:

```
The Dark Knight

PG-13 / 2h 32min / Action, Crime, Drama

SUMMARY

When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, Batman must accept one of the greatest psychological and physical tests of his ability to fight injustice.

Christian Bale, Heath Ledger, Aaron Eckhart

https://youtu.be/EXeTwQWrcwY

Cover: https://successful-balance.surge.sh/batman-dark-knight.png
Botón play: https://successful-balance.surge.sh/play-button.png
```

#### 📋 Consideraciones:

- Las fuentes a utilizar son Roboto y Montserrat. Para agregarlas a tu web, tenés que copiar y pegar el siguiente código en tu archivo de CSS:

```css
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800,300italic,400italic,600italic,700italic,800italic);
```

- Todo el texto de la card tiene que tener la fuente Roboto.

- El título de la película y el título SUMMARY deben tener fuente Montserrat

- Los colores a utilizar para los textos son:
    - Blanco: #e7e7e7
    - Gris: #9b9b9b
    - Rojo: #fe4141

- El reparto de la película está en itálica

- El espacio entre los bordes y el texto es de 20px

- El fondo de la caja es de color #1e1b26