blocco icone per il progetto WPM WPM #ICONE #HOMEICONEBST #bootstrap
/************************************************************************************
************************************************************************************/
/* HOME ICONE */
.home-icone {
text-align: center;
}
.home-icone i {
font-size: 70px;
padding-right: 70px;
padding-left: 29px;
border-right: 1px solid #ccc;
line-height: 1;
cursor: pointer;
vertical-align: top;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.home-icone i:hover,
.home-icone i.active {
color: #ed1c24;
}
.home-icone i.last {
border-right: none;
}
.home-icone__infobox > div {
display: none;
padding-top: 120px;
padding-bottom: 70px;
position: relative;
}
.home-icone__infobox i {
display: none;
padding: 0;
border-right: none;
cursor: default;
position: absolute;
color: #eee;
top: 40px;
font-size: 70px;
left: 50%;
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.home-icone__title {
position: relative;
}
.home-icone__title small {
display: block;
margin-top: 20px;
margin-bottom: 40px;
font-weight: 400;
font-style: italic;
font-size: 12px;
}
.home-icone__title::before {
width: 100%;
text-align: center;
content: "-";
position: absolute;
left: 0;
top: -35px;
font-weight: 700;
}
@media only screen and (max-width: 480px) {
.home-icone i {
font-size: 30px;
padding-right: 21px;
padding-left: 20px;
}
.home-icone__infobox > div {
padding-top: 70px;
padding-bottom: 30px;
}
}
/* FINE BLOCCO ICONE */
/************************************************************************************
************************************************************************************/
//***********************************************************************************
//***********************************************************************************
// ICON BOX
//aggiungo id incrementale alle icone
//otterrò #icon0, #icon1 ecc...
$( "#home-icone i" ).each(function( index ) {
$(this).attr('id', 'icon' + index);
});
//aggiungo id incrementale ai box con le info per ciascuna icona
//otterrò #icon0_target, #icon1_target ecc...
$( "#home-icone .home-icone__infobox > div" ).each(function( index ) {
$(this).attr('id', 'icon' + index + '_target');
//aggiungo in ciascun box icona freccia
$(this).append('<i class="icon-down-open-big"></i>')
});
//setup prima icona e primo box
// aggiungo classe active alla prima icona
$("#home-icone #icon0").addClass('active');
$("#home-icone #icon0_target").show();
$("#home-icone #icon0_target i").delay(1000).show();
//su evento click di ciascuna icona
$( "#home-icone i" ).click(function() {
//rimuovo precedente classe active su altre icone
$( "#home-icone i").removeClass('active');
//aggiungo classe active su quella cliccata
$(this).addClass('active');
//recupero id icona selezionata e costruisco id box corrispondente
var idRef = $(this).attr('id');
var idTarget = idRef + '_target';
//nascondo freccia box attuale
$("#home-icone .home-icone__infobox > div:not(#" + idTarget + ") i").hide();
//chiudo box precedente
$( "#home-icone .home-icone__infobox > div:not(#" + idTarget + "):visible").slideUp(function() {
//quando eseguita chiusura apro quello selezionato
$( "#home-icone .home-icone__infobox > div#" + idTarget ).slideToggle( 1000, function() {
//quando eseguita apertura visualizzo icona freccia
$("#home-icone .home-icone__infobox > div#" + idTarget + " i").delay(1000).show()
});
});
});
// FINE ICON BOX
//***********************************************************************************
//***********************************************************************************
<!-- ICONE #HOMEICONEBST-->
<div id="home-icone" class="container home-icone mv-medium">
<div class="row">
<!-- in modalità MD e LG il blocco é a 10 con un offset di 1 a sx e lasciando uno spazio a dx -->
<!-- in modalità XS e SM il blocco é a 12 con un offset di 0 occupando tutto lo spazio disponibile -->
<div class="col-sm-12 col-md-10 col-md-offset-1">
<h2 class="home-icone__title">Click on the icon and discover our services <small>clicca e scopri i nostri servizi</small></h2>
<i class="icon-desktop"></i>
<i class="icon-video"></i>
<i class="icon-camera"></i>
<i class="icon-newspaper last"></i>
<!-- blocchi nascosti enumerati da 0 a 3 -->
<div class="home-icone__infobox">
<!-- singolo blocco nascosto -->
<div>
<h2>Montaggio Video professionale</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper pulvinar diam, feugiat faucibus velit eleifend a. Integer a cursus libero, sit amet ultrices ipsum.</p>
</div>
<!-- singolo blocco nascosto -->
<div>
<h2>Riprese sul campo da operatori esperti</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper pulvinar diam, feugiat faucibus velit eleifend a. Integer a cursus libero, sit amet ultrices ipsum.</p>
</div>
<!-- singolo blocco nascosto -->
<div>
<h2>Scatti fotografici professionali live e in studio</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper pulvinar diam, feugiat faucibus velit eleifend a. Integer a cursus libero, sit amet ultrices ipsum.</p>
</div>
<!-- singolo blocco nascosto -->
<div>
<h2>Siti web e comunicazione integrata.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper pulvinar diam, feugiat faucibus velit eleifend a. Integer a cursus libero, sit amet ultrices ipsum.</p>
</div>
</div>
<!-- fine blocchi nascosti enumerati da 0 a 3 -->
</div>
</div>
</div>
<!-- FINE ICONE -->