Memoria del proyecto fin de evaluación de Lenguajes de Marcas - 1º DAW

Celtics - Website tribute

Indice

• Introducción
• Motivación
• Estructura
• Estilo

Introducción

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

Motivación

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

Estructura

La web está dividida en X secciones:

• Home (Hero Section)
• Introducción
• Trophies
• Video
• Coaching Staff
• Gallery
• Footer

Hero Section

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)

Introducció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.

Trophies

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

Video

He añadido un vídeo de presentación del club de esta temporada. Está dentro de una card

Coaching Staff

He hecho un apartado parecido como el de trophies. Un grid de 4 columnas y cards para cada miembro del staff

Gallery

He añadido una galería mediante uso de clases y a estes le he añadido la propiedad flex.

Footer

Menú vertical izquierdo

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).

Menú vertical derecho

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.

Localización

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.

Estilo de la página

Paleta de colores

#008346

black

white

Tipografías

Texto normal -> Vintage Browner

Títulos -> Net Proxima Nova Bold

Imágenes

Videos

Vídeo de la presentación de la temporada

https://www.youtube.com/embed/YcF_SS_KSag

Code snippets

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