<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <header id="page-top"> <div class="container"> <div class="row"> <div class="col-lg-12"> <img class="img-responsive" src="http://ironsummitmedia.github.io/startbootstrap-freelancer/img/profile.png" alt=""> <div class="intro-text"> <span class="name">Inspired by PureCSS.io</span> <hr class="star-light"> <p class="skills">Landing Page Layout</p> <p class="skills">Scroll to see the effect</p> </div> </div> </div> </div> </header> <div class="content-wrapper"> <section class="primary" id="portfolio"> <div class="container"> <div class="row"> <div class="promo-content"> <p> Pecinta Fashion Berrybenka, yuk dapatkan tambahan diskon produk all item 10% dan gratis ongkos kirim untuk pembelian all item BUTIK BAJU (Gaja Hidup) ke seluruh indonesia!! KODE: KUDOBB10 </p> </div> </div> <div class="row category-child" style="margin-top:20px"> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://kudo.co.id/wp-pictures/product/example/woven_che_white.jpg" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Kebutuhan Ibu dan Anak</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/fashion.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/hijab.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/makanandaerah.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/tiket.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/holiday.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> </div> </div> </section> </div>

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"); /* HERE STARTS THE MAGIC */ .category-child .post-content span { color: #fff; } .category-child .post-content { background-color: rgba(7, 7, 7, 0.65); color: #fff; margin-top: -30px; position: relative; text-align: center; width: 100%; z-index: 1; height: 30px; overflow: hidden; } .category-child .thumb img { width: 200px; height: 150px; } .category-child .post-content span { line-height: 30px; position: relative; top: -10px; } header { text-align: center; color: #fff; background: #18bc9c; position: fixed; width:100%; z-index: 1; height: 88%; overflow: hidden; top: 0; left: 0; } #portfolio .text-center{ background: #fff none repeat scroll 0 0; position: relative !important; top: -169px; } .content-wrapper{ background-color: white; top: 87%; min-height: 12%; position:absolute; z-index: 2; width: 100%; } /* HERE ENDS THE MAGIC */ header .container { padding-top: 150px; padding-bottom: 50px; } section { padding: 100px 0; width: 100%; } section h2 { margin: 0; font-size: 3em; }

$(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });