---
id: bd7158d8c442eddfaeb5bd18
title: Construye una página tributo
challengeType: 3
forumTopicId: 301147
dashedName: build-a-tribute-page
---

# --description--

**Objetivo:** Construye una aplicación en [CodePen.io](https://codepen.io) que funcionalmente sea similar a esta: <https://codepen.io/freeCodeCamp/full/zNqgVx>.

Completa las siguientes [historias de usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) y consigue aprobar todos los tests. Dale tu propio estilo personal.

Puedes usar HTML, JavaScript y CSS para completar este proyecto. Se recomienda usar CSS puro porque eso es lo que las lecciones han cubierto hasta ahora y debes practicar un poco con él. Puedes usar Bootstrap o SASS si lo deseas. Tecnologías adicionales (por ejemplo, jQuery, React, Angular o Vue) no se recomiendan para este proyecto, y usarlas es bajo tu propio riesgo. Otros proyectos te darán la oportunidad de trabajar con diferentes stacks de tecnologías como React. Aceptaremos e intentaremos solucionar todos los informes de incidencias que utilicen el stack de tecnología sugerido para este proyecto. ¡Feliz día programando!

**Historia de Usuario #1:** Mi página tributo debería tener un elemento con un respectivo `id="main"`, el cual contiene todos los demás elementos.

**Historia de Usuario #2:** Debería ver un elemento con un respectivo `id="title"`, que contiene una cadena que describe el tema de la página tributo (p. ej. "Dr. Norman Borlaug").

**Historia de Usuario #3:** Debería ver un elemento `div` con un respectivo `id="img-div"`.

**Historia de Usuario #4:** Dentro del elemento `img-div`, debería ver un elemento `img` con un respectivo `id="image"`.

**Historia de Usuario #5:** Dentro del elemento `img-div`, debería ver un elemento con un respectivo `id="img-caption"` que contiene contenido textual describiendo la imagen mostrada en `img-div`.

**Historia de Usuario #6:** Debería ver un elemento con un respectivo `id="tribute-info"`, que contiene contenido textual describiendo el tema de la página tributo.

**Historia de Usuario #7:** Debería ver un elemento `a` con un respectivo `id="tribute-link"`, que enlaza a un sitio externo conteniendo información adicional sobre el tema de la página tributo. SUGERENCIA: Debes dar a tu elemento un atributo `target` y establecerlo como `_blank` para que tu enlace se abra en una nueva pestaña (p. ej. `target="_blank"`).

**Historia de Usuario #8:** El elemento `img` debería cambiar de tamaño de forma responsiva, en relación al ancho de su elemento padre, sin exceder su tamaño original.

**Historia de Usuario #9:** El elemento `img` debería estar centrado dentro de su elemento padre.

Puedes construir tu proyecto usando <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>esta plantilla CodePen</a> y haciendo clic en `Save` para crear tu propio pen. O puedes utilizar este enlace CDN para ejecutar los tests en cualquier entorno que desees: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.

Una vez que hayas terminado, envía la URL de tu proyecto funcional con todos los tests aprobados.

# --solutions--

```html
// solution required
```
