Sobre mi

Este proyecto de guía de estilo está destinado a un colectivo ficticio de graffiti street art. Aquí encontrarás información sobre los colores, tipografías y herramientas recomendadas para desarrolladores.

Colores

Estos son los colores utilizados para el proyecto.

#000000
#47B2E4
#37517E
#444444
#FFFFFF

Justificación de Colores

Aquí tienes una justificación para el uso de cada uno de los colores:

Tipografías

Las tipografías recomendadas incluyen: "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji".

/* Fonts */ @font-face { font-family: 'Open Sans'; src: url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); } @font-face { font-family: 'Jost'; src: url('https://fonts.googleapis.com/css2?family=Jost&display=swap'); } @font-face { font-family: 'Poppins'; src: url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); } /* Las variables definidas dentro de :root están disponibles globalmente en todo el documento */ :root { --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --heading-font: "Jost", sans-serif; --nav-font: "Poppins", sans-serif; }



Carrousel

Utilizamos Bootstrap 4 para implementar un carrousel en el proyecto.

Multimedia

Para las imágenes y contenido multimedia hemos utilizado Glightbox

Botones

Boton

El texto se muestra dentro del propio botón.

  • Boton 1
  • Boton 2
  • Boton 3

Bootstrap CSS

Hemos incluido la siguiente hoja de estilos de Bootstrap 4 en el proyecto:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Bootstrap JS

También hemos necesitado el archivo JavaScript de Bootstrap 4:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

jQuery

jQuery es una biblioteca de JavaScript que también nos ha resultado útil será útil para este proyecto:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

NavBar

https://getbootstrap.com/docs/4.1/examples/navbars/

Memoria PDF

El siguiente documento contiene información adicional sobre la guía de estilos en formato visual con información
sobre las decisiones de diseño, los estilos utilizados, las fuentes, los colores y las pautas de diseño.

Ver Memoria

Fuentes de Inspiración

A continuación dejo enlaces directos a todas las referencias utilizadas para el proyecto: