Documentación landing101

 

 

Portada principal (Primera sección)

Componente de tipo: Menú de navegación.

Nombre del enlace: primer post, segundo post y tercer post.

Subtítulo o descripción del enlace:

Este sub elemento del componente de la portada principal cuenta con 2 bloques bien diferenciados, a y b como se señala en la siguiente imagen.

Bloque “a”, siendo este el titulo de la descripcion de la portada, de modo que lo asociamos a un elemento html de tipo “h2” con estos estilos css:

  •     line-height: .8;
  •     font-family: 'raleway';
  •     font-size: 43px !important;
  •     font-weight: 900;
  •     letter-spacing: -1px;
  •     text-transform: uppercase;
  •     color: var(--secondary-color-text);
  •     text-shadow: 3px 3px 4px var(--total-color);
  •     margin-bottom: 15px;

        Bloque “b”, es el párrafo con la descripción del tema propuesto en la portada. Lo forma un elemento html contenedor estándar de tipo “div”, al cual se le asignan estos estilos específicos:

  • font-size: 19px !important;
  • text-shadow:3px 3px 4px var(--total-color);
  • color: var(--secondary-color-text);
  • font-weight: bold;
  • margin: 15px 0;

        Imagen del enlace: Para formar el efecto transición se utiliza una librería de JavaScript de slider la cual utiliza las imágenes de los enlaces aplicando el efecto visto. Para esto es necesario que las imágenes sean mayor a la resolución de hd es decir 1024x720 pixeles.

        Estilos aplicados al contenedor de la clase “menuItem” relacionado a dicha imagen

  • display: none;
  • height: 100vh;
  • opacity: .7;
  • position: absolute;
  • top: 0;
  • right: 0;
  • bottom: 0;
  • left: 0;
  • background-size: 120%;
  • background-position: center;
  • background-attachment: fixed;
  • z-index: 1;
  • -webkit-animation: test 8s !important;
  • animation: test 10s !important;

Banner nuestros servicios (segunda sección)

Componente de tipo: Menú de navegación.

Nombre del enlace: Cards. Del cual se seleccionan todos los del subnivel del mismo.

 

Subtítulo o descripción del enlace:

Cada componente carta cuenta con la siguiente distribución de sub elementos.

Bloque “a”, lo utilizamos como icono/logo, conformado por la imagen del elemento “menú de navegación” (enlace):

Bloque “b”, siendo este el titulo principal del componente Card, viene asociado al “Título del enlace” y está diseñado con estos estilos css aplicados a la clase “.menuTitle”:

  • padding: 10px 0 0;
  • font-size: 20px;
  • margin-bottom: 15px;
  • line-height: 1 !important;
  • text-transform: uppercase;
  • font-family: 'Oswald';
  • font-weight: 400;
  • text-align: center;
  • color: var(--secondary-color-hover);

Bloque “c”, es el párrafo con la descripción de cada card. Lo forma un elemento html contenedor de párrafo de tipo “p”,al cual no se le asignan estilos específicos por heredar los estilos generales de un párrafo aplicados a todo el sitios web.Pero si obtiene ajustes pertenecientes a la clase “menuDescription” con los siguientes estilos:

  • font-size: 15px;
  • width: 90%;
  • text-align: center;
  • float: left;
  • line-height: 1.9;
  • color: var(--secondary-color-hover);

Baner nuestros servicios (tercera sección)

Componente de tipo: Menú de navegación.

Nombre del enlace:  NUESTROS SERVICIOS.

Este elemento está compuesto solo por el título del enlace y su imagen, no cuenta con otros requerimientos.

 

Cards 2 (cuarta sección)

Componente de tipo: Menú de navegación.

Nombre del enlace:  CartasGrupoDos.

Cada componente carta cuenta con la siguiente distribución de sub elementos.

Bloque “a”, lo utilizamos como imagen principal de la carta, conformado por la imagen del elemento “menú de navegación” (enlace):

Bloque “b”, siendo este el titulo principal del componente, viene asociado al “Título del enlace” y está diseñado con estos estilos css aplicados a la clase “.menuTitle”:

  • font-size: 18px;
  • line-height: 1.4 !important;
  • font-weight: 600;
  • font-family: 'Oswald'
  • color: var(--primary-color);
  • transition: 0.5s;
  • text-transform: uppercase;

Bloque “c”, es el párrafo con la descripción de cada componente. Lo forma un elemento html contenedor de párrafo de tipo “p”, al cual no se le asignan estilos específicos por heredar los estilos generales de un párrafo aplicados a todo el sitio web. Pero si obtiene ajustes pertenecientes a la clase “menuDescription” con los siguientes estilos:

  • font-size: 14px
  • line-height: 1.7;
  • font-weight: 600;
  • height: 150px;
  • color: var(--primary-color);

Paleta de colores general del site.

  • --link-menu-color: #2F528F;
  • --link-menu-color-hover: #FF7F27;
  • --secondary-color-text: #fff;
  • --secondary-color: #FF7F27;
  • --third-color: #2E75B6;
  • --primary-color-text: #000;
  • --primary-color: #2F528F;
  • --secondary-color-hover: #ff7f50;
  • --total-color: #d0dbe6;
  • --background-color-primary: #f1f6fd;
  • --background-color-secondary: #e5eefa;
  • --invert: invert(0);

 

 

Nuestros trabajos