•  
  •  
  •  

retroweb

Os presento Retro Web, la tercera “Template Html5 Free Responsive” que publico y que, como las anteriores, está compuesta gracias al código que han liberado otros diseñadores y que, con unos cuantos retoques, he adaptado para integrarlo a mi propio diseño.

Veamos sus componentes:

El menú hamburguesa que queda fijo en la parte derecha superior del navegador, y que tiene un bonito efecto overlay cuando se pulsa en él, está configurado tan sólo con CSS (no interviene ningún script javascript en su funcionamiento).Lo ha subido Akshay Nair en codepen.io.

El título de esta página, “Retro Web”, tiene un “efecto hover” bastante llamativo, que ya utilicé en otra ocasión, y que está adaptado de Tympanus/codrops (se trata del estilo denominado allí como “Malki”).

El background de la pantalla de presentación de la página, de estilo setentero, no es una imagen, es un dibujo en CSS, diseñado por Tim Shangle, que también lo he hallado en codepen.io.

Sobre la imagen del centro de la pantalla de presentación, al clickar en ella se abre una ventana que contiene un slider de imágenes y un texto informativo. Está adaptado de codyhouse.co, del recurso llamado “product-quick-view”.

La sección de galería de proyectos la he sacado de codepen.io, como no, y es de Jeff Kinley.

También, para variar, de codepen.io, ha salido la sección que simula un fondo de hoja de papel de cuadernillo, que ha sido diseñado por Jonathan Tsang, y que he adaptado para que fuera responsive.

En esa sección, también he incorporado el “efecto tooltip“, con un css más sencillito que el que comenté en la entrada de mi blog, y que podéis encontrar en ¿no lo adivinas? codepen.io, subido por Guus Lieben.

La sección de “retro iconos”, me encanta, algunos tienen efectos hoover cuando se pulsa en ellos. Están “dibujados” con Css y, sí también, los he ido a buscar a codpen.io, donde los ha subido un tal Lionel T.

Esta template, como las otras dos que he hecho, se puede descargar libremente, para tal fin he incluido una sección con un botón de que he visto en codepen.io, creado por alguien que se hace llamar mghayour.

Y, por último, la sección del formulario de contacto, que tal y como imagináis también la encontré en codepen.io, diseñado por David Fitas, que contiene un bonito dibujo de un teléfono vintage hecho en formato svg. En los archivos de descarga he incluido el archivo php y los ajax de javascript para que funcione correctamente (podéis probarlo en la demo). Tan sólo hay que sustituir mi dirección de email del php, por la vuestra.

Las fotografías de la plantilla son mías, están hechas con la cámara de móvil, así que ya perdonaréis su (mala) calidad.