🌟 Proyecto final N°2 del curso Responsive Web Design de FreeCodeCamp 🌟

Este proyecto es 2/5 para la certificación del curso. ✨

Página de homenaje a Eiichirō Oda (One Piece) 👒🏴‍☠️

🎯 Objetivo: Construir una aplicación que sea funcionalmente similar a https://tribute-page.freecodecamp.rocks. No copies este proyecto de demostración.

Historias de usuario (Descripción) 📋

1. El main debe tener un id correspondiente de main, que contiene los demás elementos.
2. La página debe tener un elemento id de title, el cual contendrá una cadena de caracteres (p. ej. texto), que describe el tema de la página de homenaje (p. ej. "Dr. Norman Borlaug").
3. La página debe tener tanto un elemento figure o un elemento div con un id de img-div.
4. Dentro del elemento #img-div debe haber un elemento img con su correspondiente id="image".
5. Dentro del elemento #img-div, debes ver un elemento con un id="img-caption" correspondiente que contiene contenido textual describiendo la imagen mostrada en #img-div.
6. Debe tener su correspondiente elemento id="tribute-info", que contendrá una descripción textual del sujeto de la página tributo.
7. Debes ver un elemento a con su id="tribute-link" correspondiente, que contiene información adicional sobre el tema de la página de homenaje. CONSEJO: Debes dar al elemento un atributo target y establecerlo como _blank para que tu enlace se abra en una nueva pestaña.
8. Tú #image debe usar las propiedades max-width y height para redimensionarse en función de la anchura de su elemento padre, sin sobrepasar su tamaño original.
9. Tu elemento img debe estar centrado con respecto al elemento que lo contiene.

Pruebas (Pruebas Técnicas a pasar) ✔️🔬

• 🧪 Debes tener un elemento main con un id de main.
• 🧪 Tu #img-div, #image, #img-caption, #tribute-info, y #tribute-link deben ser descendientes de #main.
• 🧪 Debes tener un elemento con un id de title.
• 🧪 Tu #title no debe estar vacío.
• 🧪 Debes tener un elemento figure o div con un id de img-div.
• 🧪 Debes tener un elemento img con un id de image.
• 🧪 Tu #image debe ser descendiente de #img-div.
• 🧪 Deberías tener un elemento figcaption o div con un id de img-caption.
• 🧪 Tu #img-caption debe ser descendiente de #img-div.
• 🧪 Tu #img-caption no debe estar vacío.
• 🧪 Debes tener un elemento con un id de tribute-info.
• 🧪 Tu #tribute-info no debe estar vacío.
• 🧪 Debes tener un elemento a con un id de tribute-link.
• 🧪 Tu #tribute-link debe tener un atributo href con un enlace.
• 🧪 Tu #tribute-link debe tener un atributo target establecido en _blank.
• 🧪 Tu elemento img debe tener un display de block.
• 🧪 Tu #image debe tener un max-width de 100%.
• 🧪 Tu #image debe tener un height de auto.
• 🧪 Tu #image debe estar centrado con respecto al elemento que lo contiene.

---

Instalación 🛠️💻

Sigue estos pasos para clonar y ejecutar el proyecto localmente:

1. Clona este repositorio en tu máquina local utilizando Git:

   git clone https://github.com/Schugu/ProyectoFinalFreeCodeCamp2.git

2. Navega al directorio del proyecto:

   cd ProyectoFinalFreeCodeCamp2

3. Una vez clonado el repositorio en tu máquina local, abre el archivo index.html en tu navegador web para ver el proyecto.

4. Si deseas personalizar los estilos de la página, puedes hacerlo modificando el archivo styles.css. Este archivo contiene todas las reglas de estilo que se aplican a la página. Abre el archivo styles.css en un editor de texto o IDE de tu elección, realiza los cambios que desees y guarda el archivo. Luego, recarga la página en tu navegador para ver los cambios aplicados.

---

Capturas de pantalla 📸