Trabajo realizado en clase por: Álvaro Leiva García
Febrero de 2024
Licencia CC-BY
El tema lo he elegido porque desde pequeño me ha apasionado el espacio y todo lo relacionado con el mismo, pero nunca fui bueno eligiendo temas para trabajos o exposiciones, aun así tuve la suerte de encontrarme un vídeo de Youtube con un comienzo de animación del sistema solar estilo minimalista que me gustó mucho, lo que me motivó a terminarla y modificarla a mi gusto para centrar la temática de mi página en ella. Tras esto decidí mantener la idea, esta vez sin animación y escribirla usando el framework de Bootstrap
La web está dividida en 6 secciones:
- Hero Section
- Planetas
- Imágenes
- Historia
- Ubicación
- Footer
- Footer
He optado por un video a pantalla completa, junto al título de la página centrado, el color de fuente es contrario al del fondo, conseguido utilizando reglas CSS
He dispuesto en un grid de columnas, cuya cantidad dependerá del ancho de la página, haciéndolo completamente responsive gracias a la interfaz que nos proporciona Bootstrap,cada uno con una card que incluye una imagen del planeta a tratar, su nombre y una breve explicación
He optado por utilizar un slideshow de imágenes, el cual fue necesario retocar en varios aspectos a nivel de estilo fundamentalmente para adaptarse a mis necesidades. Mi plan era mantener el diseño de mi proyecto anterior pero empezando por un carousel de la documentación de Bootstrap y editándolo a mi gusto
He utilizado un acordeón con preguntas y respuestas sobre la historia del Sistema Solar. El acordeón ha tenido que ser extraido de los ejemplos de la documentación oficial de Bootstrap v5
Se muestra una imagen que señala la posición del Sistema Solar en la Vía Láctea junto a un breve texto explanatorio
Un pequeño formulario de contacto, por si quieres recibir más información al respecto
He usado un grid de 3 columnas, estructurado mediante Bootstrap con enlaces a los elementos de la página, enlaces a redes sociales (no funcionales) y datos sobre mi y la página genéricos
SVG de redes sociales copiados de la página de Bootstrap Icons
Imágenes de los 9 planetas del Sistema Solar
Se han utilizado básicamente los colores estándar de BootStrap, aunque en el archivo de styles.scss se han añadido funciones que generan clases de forma dinámica para toda la paleta de colores de Bootstrap, que no viene incluida por defecto, estas clases se han utilizado para diversos colores
He utilizado los siguientes:
- NavBar: Ejemplos de la documentación de BootStrap, aunque levemente editada para que encaje con el diseño de la página
- Slideshow de imágenes: Ejemplos de la documentación de BootStrap, editado en gran parte para añadir el texto en el lateral
- Acordeón: Ejemplo de la documentación de BootStrap, leves rediseños.
- Contacto: Ejemplo de la documentación de BootStrap, leves rediseños.