Floooid Agency 2018 – Free Bootstrap 4 Responsive Template

 17 gennaio 2018


Tema gratuito della settimana: Floooid Agency, un tema responsive in HTML 5 basato su Bootstrap 4.0 ideale per agenzie creative, studi fotografici e freelance. Scaricalo gratis!

Floooid Agency Free Bootstrap 4 Template è un template responsive creato in HTML 5 e basato su Bootstrap 4, caratterizzato da uno stile minimale e da colori decisi.
La barra di navigazione “intelligente” è pensata per permettere all’utente di raggiungere immediatamente i contenuti tramite un’animazione a scorrimento, e le voci di menù si accendono con una tonalità più chiara quando visitiamo la relativa sezione, scrollando con il mouse.

La sezione principale lascia spazio all’immagine e ospita un claim personalizzabile, insieme ad un link che porta immediatamente alla sezione successiva, che mostra i servizi offerti, disposti in colonne e accompagnati da immagini dalla forma stondata e irregolare, in contrapposizione con lo stile dei link che invece è squadrato e definito.

Scarica il PSD

La sezione relativa al portfolio è pensata per ospitare un numero indefinito di immagini, che grazie al CSS 3 sono mostrate in bianco e nero, e solo al passaggio del mouse vengono rivelate nel loro colore originale.

Il codice che ho utilizzato per questo effetto è il seguente:

.portfolio img {
 transition:filter .5s ease-in-out;
 -webkit-filter:grayscale(100%);
 /* Ch 23+,Saf 6.0+,BB 10.0+*/
 filter:grayscale(100%);
 /* FF 35+*/
}
.portfolio img:hover {
 -webkit-filter:grayscale(0%);
 /* Ch 23+,Saf 6.0+,BB 10.0+*/
 filter:grayscale(0%);
 /* FF 35+*/
}

Le immagini del portfolio possono essere filtrate per tipologia tramite il filtro presente nella testata della sezione. Il filtro è applicato grazie ad una funzione JavaScript che, filtrando la classe applicata all’immagine, mostra o nasconde l’elemento a seconda del filtro applicato, tramite i metodi .not() e .filter() di jQuery.

$(".filter-button").click(function() {
 var value = $(this).attr('data-filter');
 if (value == "all") {
 $('.filter').show('1000');
 } else {
 $(".filter").not('.' + value).hide('3000');
 $('.filter').filter('.' + value).show('3000');
 }
});

L’ultima sezione è relativa ai contatti e ed è caratterizzata da una mappa navigabile Google Maps in formato full-row, accompagnata da un form di contatto.

Demo & Download

Floooid Agency 2018 - Free Bootstrap 4 Responsive Template


Lascia un commento