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

Indice

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

Introducción

Note

Proyecto final del primer trimestre de lenguajes de marcas ( DAW ), alumno Pablo Gil Diaz , Finalizada dia Lunes 11/12/2023
Nombre del proyecto: ActionTV - The boys

Important

Proyecto inspirado en la serie de prime video '' THE BOYS '' Y '' GENV '' con fines totalmente educativos y sin ningún tipo de uso comercial

Motivación

El tema lo he elegido ya que me encanta mucho hacer proyectos inspirados en series que veo, en este caso tanto The boys como GenV la tengo muy reciente y no he podido evitar inspirarme en ella.

Estructura

• Hero section
• Introduccion
• Artículos
• Próximamente
• Galería
• Footer

Hero Section

He utilizado una imagen de fondo tomada de wallpaper Abyss que se adapta fácilmente a diferentes dispositivos y comple todas las necesidades buscadas para este proyecto.
Sobre ella he colocado un button estilado con un hover donde te lleva a la página de la serie en PRIMEVIDEO para buscar mas información.

Introducción

En este caso he usado una estructura simple con imagenes estéticas y acordes al diseño para indicar una elección al usuario, ¿quieres ser un heroe o prefieres no serlo?

Seguido de esta introducción al maravilloso mundo de Theboys hago uso de un banner con un ancho del 100% para romper con el ancho establecido del wrapper main y darle cierto dinamismo al diseño En donde aparece los protagonistas.

Artículos

Esta section de artículos empieza con una frase mítica del personaje HOMELANDER en theboys, la cual se hizo muy viral en tiktok por lo que representa esta escena.
Dentro de esta sección nos vamos a encontrar dos cards con su respectiva preview de información seguida del botón donde, si quieres, puedes ampliar la información de este personaje al igual que en el caso de la card de GENV. Ambas estan hechas con grid-2

Próximamente

En esta section podemos ver las próxima temporada anunciada confirmada para 2024, he usado en ella un grid de 3 con un hoover en las imágenes y un enlance donde te lleva al trailer en youtube

Galería

Una galería simple con slide

Footer

Y por último y no menos importante, un footer simple pero estético donde se encuentra las redes sociales del autor ( yo ) y el twitter de la página.

Dentro de ella encontraremos un button llamado '' credits '' donde se encuentra la webgrafía usada para los elementos de la web y el disclaimer

Estilo de la página

Tipografía:

• TÍTULOS
  // Raleway
  
• PARRAFOS
  // Roboto & Lato

Paletas de color:

Tonos blancos ( #f2f2f2 )
Tonos oscuros ( #141414 )
Tonos resalte ( rgb(236, 32, 32) )

Code snippets

He utilizado los siguientes:

• Para la barra de navegación y el slide de la galería he dado uso de W3SCHOOLS " HOW TO "
  // https://www.w3schools.com/howto/default.asp
  
• Para el footer me he inspirado en este de codepen escogiendo los iconos y un poco la estética
  // https://codepen.io/scanfcode/pen/MEZPNd
  
• Para las fotografías he usado
  // https://wall.alphacoders.com/by_sub_category.php?id=317706&name=The+Boys+Wallpapers

Enlace Proyecto

https://envyx10.github.io/Theboys/index.html