Tipografía

Color

Marca

Iconografía

Componentes

Aa

TIPOGRAFÍA

La forma en que presentas el texto en tu página web para que sea fácil de leer y estéticamente agradable.

H1

Titular 1 <h1>

  • font-family: Raleway
  • font-size: 38px
  • line-height: 46px
  • vertical-align: baseline
  • letter-spacing: normal
  • word-spacing: 0px
  • font-weight: 400
  • font-style: normal
  • font-variant: normal
  • text-transform: none
  • text-align: start
  • text-indent: 0px

H2

Titular 2 <h2>

  • font-family: Raleway
  • font-size: 36px
  • line-height: 46px
  • vertical-align: baseline
  • letter-spacing: 1px
  • word-spacing: 0px
  • font-weight: 400
  • font-style: normal
  • font-variant: normal
  • text-transform: none
  • text-align: center
  • text-indent: 0px

H3

Titular 3 <h3>

  • font-family: Raleway
  • font-size: 20px
  • line-height: 30px
  • vertical-align: baseline
  • letter-spacing: normal
  • word-spacing: 0px
  • font-weight: 700
  • font-style: normal
  • font-variant: normal
  • text-transform: none
  • text-align: center
  • text-indent: 0px

P

Párrafo <p>

  • font-family: Raleway
  • font-size: 16px
  • line-height: 27px
  • vertical-align: baseline
  • letter-spacing: normal
  • word-spacing: 0px
  • font-weight: 400
  • font-style: normal
  • font-variant: normal
  • text-transform: none
  • text-align: center
  • text-indent: 0px

Botón

Botón <a>

  • font-family: Raleway
  • font-size: 16px
  • line-height: normal
  • vertical-align: middle
  • letter-spacing: normal
  • word-spacing: 0px
  • font-weight: 400
  • font-style: normal
  • font-variant: normal
  • text-transform: none
  • text-align: center
  • text-indent: 0px

Menu

Menu <a>

  • font-family: Raleway
  • font-size: 14px
  • line-height: 60px
  • vertical-align: baseline
  • letter-spacing: normal
  • word-spacing: 0px
  • font-weight: 600
  • font-style: normal
  • font-variant: normal
  • text-transform: uppercase
  • text-align: right
  • text-indent: 0px

COLOR

Los colores que complementan la pagina web

Marca

Ikas

  • HEX: #20558a
  • RGBA: rgba(32, 85, 138, 1)

Ikaslan

  • HEX: #029283
  • RGBA: rgba(2, 146, 131, 1)

Ikasgida

  • HEX: #f9b233
  • RGBA: rgba(249, 178, 51, 1)

Ikasbizi

  • HEX: #e61873
  • RGBA: rgba(230, 24, 115, 1)

Ikasgune

  • HEX: #c7d40c
  • RGBA: rgba(199, 212, 12, 1)

Titulares

Titulares H1

  • HEX: #9EBAD2
  • RGBA: rgba(158, 186, 210, 1)

Fondos

Fondo 1

  • HEX: #FFFFFF
  • RGBA: rgba(255, 255, 255, 1)

Fondo 2

  • HEX: #EFF1F2
  • RGBA: rgba(239, 241, 242, 1)

Fondo Header

  • HEX: #F0F0F2
  • RGBA: rgba(240, 240, 242, 1)

Destacados

Destacados 1

  • HEX: #C7D408
  • RGBA: rgba(199, 212, 8, 1)

Destacados Redes Sociales

  • HEX: #99BAD1
  • RGBA: rgba(153, 186, 209, 1)

Destacados IkasGida

  • HEX: #FFF9EF
  • RGBA: rgba(255, 249, 239, 1)

Destacados IkasEnplegu

  • HEX: #C7D433
  • RGBA: rgba(199, 212, 51, 1)

Destacados IkasEnplegu 2

  • HEX: #CCDCE9
  • RGBA: rgba(204, 220, 233, 1)

Reconocimiento de Competencias Profesionales

  • HEX: #17E0C9
  • RGBA: rgba(23, 224, 201, 1)

Aula de Aprendizaje de Tareas

  • HEX: #00ff7f
  • RGBA: rgba(0, 255, 127, 1)

Proyectos

  • HEX: #99bad1
  • RGBA: rgba(153, 186, 209, 1)

MARCA

Logos y favicons de la empresa

ICONOGRAFÍA

Representar acciones, conceptos o funciones específicas de una manera visualmente compacta y comprensible

COMPONENTES

Partes reutilizables de una página web que encapsulan funcionalidades específicas o contenido visual

CONTENIDO

Son elementos utilizados para mostrar y organizar diferentes tipos de contenido en una página web. Se utilizan para estructurar y presentar información de manera clara y comprensible para los usuarios.

Modal

Una ventana emergente que aparece encima del contenido principal de una página web

Formularios

Herramienta fundamental que permite a los usuarios ingresar y enviar información de manera interactiva en una página web.

Cards

Contenedor flexible y adaptable que se utiliza para presentar información de manera visualmente atractiva y organizada en una página web

Acordeon

Componente interactivo que se utiliza para mostrar y ocultar contenido de manera organizada en una página web

Tabs

Componente interactivo que organiza y muestra contenido en diferentes pestañas o secciones dentro de una misma área de la página web

Listado

Forma de presentar información de manera ordenada y estructurada utilizando diferentes tipos de listas

Tablas

Estructura que organiza la información en filas y columnas

MULTIMEDIA

Son elementos utilizados para incorporar contenido multimedia, como audio, video y otros medios interactivos, en una página web.

Imagenes

Elemento utilizado para mejorar la apariencia visual de una página, transmitir información de manera rápida y efectiva, y aumentar la interactividad

Graficos

Una representación visual de datos que se muestra en una página web

Carousel

Componente interactivo que permite a los usuarios ver una serie de elementos, como imágenes, contenido textual o cualquier otro tipo de información, en un formato de presentación de diapositivas que se desplaza automáticamente o mediante controles de navegación

Elementos divisorios

Elementos utilizados para crear divisiones o separaciones visuales entre secciones de contenido

Slider

Componente interactivo que permite a los usuarios desplazarse horizontal o verticalmente a través de un conjunto de elementos, como imágenes, contenido textual o cualquier otro tipo de información

OTROS ELEMENTOS

laysssfgiasdlgfkufgñiofkkkkkkkkkkkkkkkulkbaosudfhj

Counter

 

Paginacion

Dividir y mostrar grandes cantidades de contenido en una serie de páginas más pequeñas y manejables

Indicador de progreso

Elemento que muestra visualmente el avance o el estado de una tarea en una página web

Botones

Elementos interactivos que permiten a los usuarios realizar acciones o activar funciones en una página web con solo hacer clic en ellos.

Otros

Otros elementos utilizados en la pagina web