Proyecto de landing page con Bootstrap v5 - 1º DAW

Celtics - Website tribute

Indice

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

Introducción

Trabajo realizado por: Sergio Ramos Alarcón

Proyecto de web "Bootsrap" de 2ª evaluación de Lenguajes de Marcas

17 de febrero del 2024

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 sentirme orgulloso de mí mismo.

Estructura

La web está dividida en X secciones:

• Home (Hero Section)
• Introducción
• Trophies
• Video
• 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 le lleva al usuario directamente al apartado de contacto de los Boston Celtics

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 estilada correspondientemente

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

En el footer he añadido todos los recursos de la propiedad intelectual de Celtics, además de sus corrrespondientes propietarios

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 -> Helvetica Neue

Títulos -> Arial, sans-serif

Imágenes

Imágenes incorporadas de la página web oficial de la NBA

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 bootstrap https://www.w3schools.com/howto/howto_js_topnav.asp](https://getbootstrap.com/docs/5.3/components/navbar/#how-it-works)
• Accordion: tomado de boostrap https://freefrontend.com/css-accordions/](https://getbootstrap.com/docs/5.3/components/accordion/#how-it-works)
• Modal: tomada de boostrap https://getbootstrap.com/docs/5.3/components/modal/#how-it-works