<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container dynamicTile"> <div class="row "> <div class="col-sm-2 col-xs-4"> <div id="ref_tile" class="tile tile-turquoise"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="tilecaption"> <span class="fa fa-home fa-5x"></span> </div> </div> <div class="item"> <h3 class="tilecaption">Home</h3> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div class="tile tile-blue"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="tilecaption"> <span class="fa fa-question-circle-o fa-5x"></span> </div> </div> <div class="item"> <h3 class="tilecaption">Guida in linea</h3> </div> </div> </div> </div> </div> <div class="col-sm-4 col-xs-8"> <div class="tile tile-orange"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="tilecaption"> <span class="fa fa-cart-plus fa-5x"></span> </div> </div> <div class="item"> <h3 class="tilecaption">Cassa Fissa</h3> </div> </div> </div> </div> </div> <div class="col-sm-4 col-xs-8"> <div class="tile tile-pink"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="tilecaption"> <span class="fa fa-paper-plane-o fa-5x"></span> </div> </div> <div class="item"> <h3 class="tilecaption">Cassa Volante</h3> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4 col-xs-8"> <div class="tile tile-pomegranate"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="tilecaption"> <span class="fa fa-file-text-o fa-5x"></span> </div> </div> <div class="item"> <h3 class="tilecaption">Gestione degli ordini inseriti</h3> </div> </div> </div> </div> </div> <div class="col-sm-4 col-xs-8"> <div class="tile tile-wisteria"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <h3 class="tilecaption"><i class="fa fa-street-view fa-5x"></i></h3> </div> <div class="item"> <h3 class="tilecaption">Gestisci gli ordini inseriti</h3> </div> <div class="item"> <h3 class="tilecaption">Ristampa, Modifica, Elimina</h3> </div> <div class="item"> <h3 class="tilecaption">Rapido, Funzionale e al servizio dei supervisori</h3> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div class="tile tile-emerald"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <h3 class="tilecaption"><i class="fa fa-line-chart fa-5x"></i></h3> </div> <div class="item"> <h3 class="tilecaption">Statistiche</h3> </div> <div class="item"> <h3 class="tilecaption">Visualizza, Filtra, Gestisci Bilanci</h3> </div> <div class="item"> <h3 class="tilecaption">Controllo completo dell'evento</h3> </div> </div> </div> </div> </div> <div class="col-sm-2 col-xs-4"> <div class="tile tile-wet-asphalt"> <div class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <h3 class="tilecaption"><i class="fa fa-terminal fa-5x"></i></h3> </div> <div class="item"> <h3 class="tilecaption">Admin</h3> </div> <div class="item"> <h3 class="tilecaption">Ruoli, Menu, Utenti</h3> </div> <div class="item"> <h3 class="tilecaption">Al servizio degli Amministratori</h3> </div> </div> </div> </div> </div> </div> </div> <div>Author: Fardella Simone (fardella93@gmail.com)</div>

@charset "UTF-8"; .tilecaption { font-size:18px; } .dynamicTile .col-sm-2.col-xs-4 { padding:5px; } .dynamicTile .col-sm-4.col-xs-8 { padding:5px; } @media (max-width:767px) { .tilecaption { font-size:20px; } .col-xs-8 { width:50%; } .col-xs-4 { width:50%; } } .tile.tile-blue { background-color:#2e8bcc; } .tile.tile-green { background-color:#339933; } .tile.tile-red { background-color:#e51400; } .tile.tile-yellow { background-color:#ffc40d; } .tile.tile-orange { background-color:#f39c12; } .tile.tile-pink { background-color:#e671b8; } .tile.tile-purple { background-color:#7b4f9d; } .tile.tile-lime { background-color:#8cbf26; } .tile.tile-magenta { background-color:#ff0097; } .tile.tile-teal { background-color:#00aba9; } .tile.tile-turquoise { background-color:#1abc9c; } .tile.tile-green-sea { background-color:#16a085; } .tile.tile-emerald { background-color:#2ecc71; } .tile.tile-nephritis { background-color:#27ae60; } .tile.tile-peter-river { background-color:#3498db; } .tile.tile-belize-hole { background-color:#2980b9; } .tile.tile-amethyst { background-color:#9b59b6; } .tile.tile-wisteria { background-color:#8e44ad; } .tile.tile-wet-asphalt { background-color:#34495e; } .tile.tile-midnight-blue { background-color:#2c3e50; } .tile.tile-sun-flower { background-color:#f1c40f; } .tile.tile-carrot { background-color:#e67e22; } .tile.tile-pumpkin { background-color:#d35400; } .tile.tile-alizarin { background-color:#e74c3c; } .tile.tile-pomegranate { background-color:#c0392b; } .tilecaption { position:relative; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); margin:0 !important; text-align:center; color:white; }

$(document).ready(function() { ///#Event binding and resizing var ref_tile = $('#ref_tile'); $(".tile").height(ref_tile.width()); $(".carousel").height(ref_tile.width()); $(".item").height(ref_tile.width()); $(window).resize(function() { if (this.resizeTO) clearTimeout(this.resizeTO); this.resizeTO = setTimeout(function() { $(this).trigger('resizeEnd'); }, 10); }); $(window).bind('resizeEnd', function() { $(".tile").height(ref_tile.width()); $(".carousel").height(ref_tile.width()); $(".item").height(ref_tile.width()); }); });