Template Bootstrap

Template Bootstrap / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Template Bootstrap

Template para web corporativa con scroll infinito y blog.

Creado para demostrar el aspecto final y funcionalidad de la web, siguiendo las tendencias actuales y ajustada para adaptarse a toda diversidad de proyectos.

Template Bootstrap

Web corporativa:

Destaca en este template, las tarjetas con jQuery, una forma de presentarse más original de lo habitual, un acordeón muestra todos los datos, “About me”, “tags”, “email”, etc.

Una vez que se “abre una tarjeta”, las demás se cerraran, lo logramos con este script.

	$(function () {
	   "use strict";
	   $(".card h3").click(function () {
	   $(this).next().slideToggle(500);
	   $(".accordion").not($(this).next()).slideUp(500);
	});
	});
	$(".headerCard").click(function () {
	   $(".infoCard").not($(this).next()).slideUp(500);
	   $(this).next().slideToggle(500);
	});

Transición entre páginas con jQuery, es un efecto de desvanecimiento o de transición entre páginas conocido con Fade-In y Fade-Out.

	$("body").css("display", "none");
	$("body").fadeIn(1000);
	$("a.transition").click(function(event){
	   event.preventDefault();
	   linkDestino = this.href;
	   $("body").fadeOut(1000, redireccionarPag);
	});
	function redireccionarPag() {
	window.location = linkDestino;
	}

Hemos de añadir la class “transition” a los href que nos interesen

El slide situado bajo el header, está preparado para facilitar su uso en el responsive, pudiendo moverse con un dedo. Con swipe and touch, cargando jQuery Mobile y añadiendo este script. Algo necesario, pero que no siempre se aplica.

	$("#myCarousel").swiperight(function() {
	   $(this).carousel("prev");
	});
	$("#myCarousel").swipeleft(function() {
	   $(this).carousel("next");
	});

En contacto, en el mapa se pueden ver varias ubicaciones con información al hacer click en el marcador personalizado. Este mapa, debido a que es un poco más complejo, le dedicaré la próxima entrada.

Blog:

Dividido en dos columnas, inspirado en este mismo, pero con diferencias, la sección de “newsletter” es un pop up que ocupa e ancho y alto total de la sección, enlaces para los tags, contador de posts, (algo que encuentro necesario y que por lo general se olvida), buscador, últimos comentarios y posts más votados.

“Page search example”, es una sección para mostrar cómo habría de ser el código para el buscador o para mostrar los tags, esta sección no solo forma parte del template, la intención es seguir trabajando para integrar el template en Wordpress.

Si deseas visitar este template, puedes hacerlo aquí.

Mariano J.

Escribe un comentario

Tu email no se hará visible