•  
  •  
  •  

bootstrap4

Bootstrapcuatro, es mi nuevo diseño, que está basado, a su vez, en otras dos plantillas confeccionadas con la nueva versión de Bootstrap: la 4 Alpha.

Una es Bootstrap 4 de Themes Guide, de donde he tomado básicamente toda la base de diseño (la mayor parte del CSS y el javascript básico, el menú, la estructura y el footer).

La otra es Sigma de Templatemo, de quien he adaptado las columnas en grid de la sección de “Bienvenida”, así como los layouts de la sección “Trabajos” o “Galería”.

Además he incorporado, readaptándolas, otras cosillas de otros sitios:

Los flips El efecto flip se basa principalmente en utilizar transiciones CSS3, con ello se consigue un espectacular efecto de giro con efecto 3D que hay justo debajo de la pantalla principal los hallé en codepen, de  Aditya Bhandari. Los he readaptado un poquito, para redimensionarlos y hacerlos responsive.

Entre las cajas en grid que hay justo debajo de los flips, he añadido los controles para reproducir archivos de audio, cuyo código he copiado de Tympanus/codrops, del tutorial/demo llamado “Responsive & Touch-Friendly Audio Player“.

A su lado he incluido un dibujo con animaciones (los dientes de león se mueven y pasan pelusillas por el fondo), de condepen, diseñado y dibujado por Eva Santos. Le he quitado los javascripts que hace que el dibujo muestre más escena en panorámica (el pen original de Eva Santos es mucho más espectacular), para no sobrecargar la página.

También es de Eva Santos, es la brujilla que hay más abajo, dibujada en svg, y que gracias a su css, mueve las manos mientras ascienden pompas desde la olla:

bruja

Por otra parte, el fantástico globo terráqueo en 3D que gira sobre su eje, también está sacado de codepen, y es de un tal Gartempe.

El código de los cuadros de “alertas” con función de cierre de los mismos, que están en la sección de “Páginas Web”, está copiado de SMTB, que es una plantilla de “UI Kit”, o una colección de diseño de interfaces, de bootstrap 3.

Como he apuntado arriba, en la sección de “Galería de Trabajos”, el layout (la disposición de las imágenes) está sacado de una plantilla de templatemo, pero el efecto hover al pasar el ratón sobre cada imagen, por el que se despliega el título del trabajo y se tiene acceso al link, lo he adquirido de un tutorial en miketricking.github.io/dist.

El diseño del formulario de contacto, está calcado del formulario de la plantilla Brandy de Shapebootstrap.

Por último, y aprovechando que en la plantilla base ya tenía enlazados el archivo “https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js”, que permite que se “activen” animaciones en los elementos (div, imágenes, etc), conforme se va haciendo scroll, al referir en el html la clase “wow”, así como el archivo “https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css”, por el que pueden elegir la clase de animación que va a actuar conforme a los efectos que puedes ver aquí, he llenado la plantilla de diferentes animaciones.