EnriqueQuiroz89 / repository

Reto1_PaginaTrubuto

Objetivo: Construye una aplicación en CodePen.io que funcionalmente sea similar a esta: https://codepen.io/freeCodeCamp/full/zNqgVx. Completa las siguientes 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: Debe ver un elemento figure o div con su 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.