<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <nav class="col-sm-2"> <menu> <ul> <li><i class="glyphicon glyphicon-heart-empty"> Favorites</i></li> <li><i class="glyphicon glyphicon-heart-empty"> Favorites</i></li> <li><i class="glyphicon glyphicon-heart-empty"> Favorites</i></li> <li><i class="glyphicon glyphicon-heart-empty"> Favorites</i></li> </ul> </menu> </nav> <div class="col-sm-10"> <div class="row"> <div class="col-sm-12 feature"> <img src="http://lorempixel.com/610/300/fashion/4/" /> </div> </div> <div class="row feature-products"> <div class="product col-sm-3"> <div class="spinner"><span class="glyphicon glyphicon-repeat"></span></div> <img class="img-responsive" src="http://www.4simplelife.net/wp-content/uploads/2013/11/5-things-to-carry-in-your-purse.jpg.jpg" /> <div class="content"> <div class="price">$145.99</div> <p>Descriptions</p> </div> </div> <div class="product col-sm-3"> <div class="spinner"><span class="glyphicon glyphicon-repeat"></span></div> <img class="img-responsive" src="http://www.4simplelife.net/wp-content/uploads/2013/11/5-things-to-carry-in-your-purse.jpg.jpg" /> <div class="content"> <div class="price">$145.99</div> <p>Descriptions</p> </div> </div> <div class="product col-sm-3"> <div class="spinner"><span class="glyphicon glyphicon-repeat"></span></div> <img class="img-responsive" src="http://www.4simplelife.net/wp-content/uploads/2013/11/5-things-to-carry-in-your-purse.jpg.jpg" /> <div class="content"> <div class="price">$145.99</div> <p>Descriptions</p> </div> </div> <div class="product col-sm-3"> <div class="spinner"><span class="glyphicon glyphicon-repeat"></span></div> <img class="img-responsive" src="http://www.4simplelife.net/wp-content/uploads/2013/11/5-things-to-carry-in-your-purse.jpg.jpg" /> <div class="content"> <div class="price">$145.99</div> <p>Descriptions</p> </div> </div> </div> <footer class="row"> Footer </footer> </div> </div> </div>

/* Styles go here */ .table { display:table; } .table-cell { display:table-cell; } .table-row { display:table-row; } .hide { display:none; } li { padding:0; list-style:none; margin:0; } ul{ padding:0; margin:0; } /* ANIMATIONS */ .fade-in { opacity:1 !important; -webkit-transition: opacity 3s; transition: opacity 3s; } @-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} } /* NAV */ nav { background-color:#ddd; height:100%; } nav menu { position:absolute; top:30%; left:-30px; width:200px; } /* SPINNER */ .spinner { position:absolute; top:35%; left:45%; -webkit-animation: spin 1s infinite linear; } /* PRODUCT */ .product { text-align:center; } .product img { opacity: 0; } .product .content { margin-top:10px; } .product .price { font-weight:bold; font-size:14px; } .product p { color:#AAA; position:relative; } .product { border-right:1px solid #CCC; padding-top:5px; } .feature-products { margin:0 -15px; padding:0; } .feature-products .product:first-of-type { border-left:1px solid #CCC; } /*container*/ .container { width:620px; overflow:hidden; } /* Feature */ .feature { height:300px; background-color:#F0F0F0; border-bottom:1px dashed #CCC; margin:0 -15px 0 0; padding:0; } footer { background-color:#333; color:#AAA; padding:30px; }

// Code goes here $(function(){ setTimeout(function(){ $('.product img').each(function(index, value){ var self = $(this); var spinner = self.prev(); var time = (500 * index) + 1000; setTimeout(function(){ spinner.addClass('hide'); self.addClass('fade-in'); }, time) }); }, 3000); $('nav').height($('.container').height()) });