Trabajo realizado por: Sergio Ramos Alarcón
Proyecto de web "from scratch" de 1ª evaluación de Lenguajes de Marcas
Diciembre de 2023
Licencia CC-BY
El tema lo he elegido porque de pequeño era muy fan de este equipo de baloncesto y creo que hacer esta página web es para hacerle un hueco en mi corazón
La web está dividida en X secciones:
- Home (Hero Section)
- Introducción
- Trophies
- Video
- Coaching Staff
- Gallery
- Footer
He utilizado una imagen de fondo tomada de una aportación de un fan, tiene una buena resolución y encaja perfectamente con la temática de mi página web.
Encima de la imagen he colocado un botón que
(una breve explicación)
He dispuesto en un grid de 2 columnas, en una he puesto un accordion, y en la otra la imagen del escudo del equipo.
He añadido los trofeos más relevantes para mí del equipo en un grid de 4 columnas y dentro sus respectivas cards, con su título y su pequeña descripción
He añadido un vídeo de presentación del club de esta temporada. Está dentro de una card
He hecho un apartado parecido como el de trophies. Un grid de 4 columnas y cards para cada miembro del staff
He añadido una galería mediante uso de clases y a estes le he añadido la propiedad flex.
En el footer he incluido un apartado de redes sociales (facebook, twitter, instagram, linkedin), los cuales al hacer click encima de sus respectivas imágenes le llevará a las redes sociales oficiales del equipo de baloncesto. Además he incluido un apartado denomidado "Site oficial" que le llevará directamente a la página web oficial. Por último he añadido un apartado de créditos que funciona con una ventana emergente (modal).
He implementado un pequeño menú vertical con todas los apartados de la página web por si es que te has quedado con más ganas de echarle un vistazo.
He añadido un enlace directo al estadio del equipo de baloncesto por si es que te da por querer ir a ver unos de sus emocionantes partidos.
#008346
black
white
Texto normal -> Vintage Browner
Títulos -> Net Proxima Nova Bold
Vídeo de la presentación de la temporada
https://www.youtube.com/embed/YcF_SS_KSag
He utilizado los siguientes:
- Barra de navegación: tomada de w3Schools "How to" https://www.w3schools.com/howto/howto_js_topnav.asp
- Accordion: tomado de freefronted "40 + CSS Accordions" https://freefrontend.com/css-accordions/
- Modal: tomada de w3Schools "How to" https://www.w3schools.com/howto/howto_css_modals.asp