<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 ----------> <!-- Fixed navbar --> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="small-logo-container"> <a class="small-logo" href="#"></a> </div> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Portfolio</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container-fluid big-logo-row"> <div class="container"> <div class="row"> <div class="col-xs-12 big-logo-container"> <h1 class="big-logo"></h1> </div><!--/.col-xs-12 --> </div><!--/.row --> </div><!--/.container --> </div><!--/.container-fluid --> <div class="container"> <div class="row"> <div class="span2"> <img src="https://lh5.googleusercontent.com/-vO2SQ8PN0e4/AAAAAAAAAAI/AAAAAAAAAHc/9-dOf_KoS0Q/photo.jpg" alt="" class="img-rounded" height="200px" width="200px"> </div> <div class="span4"> <blockquote> <p>Paige Guzzell</p> <small><cite title="Source Title">Thunder Bay, ON <i class="icon-map-marker"></i></cite></small> </blockquote> <p> <i class="icon-envelope"></i> nobody@nothing.com <br> <i class="icon-globe"></i> www.penandpaiger.com <br> <i class="icon-gift"></i> March 24, 1994 </p> </div> <div class="container"> <div class="row"> <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12"> <h1 class="gallery-title">Gallery</h1> </div> <br/> <div class="col-md-12"> <div class="vid"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/p1GiMBWDs0s"></iframe> </div> </div><!--./vid --> </div><!--.col --> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s480x480/e35/15251777_347937558918973_6886527554266595328_n.jpg?ig_cache_key=MTM5ODk2MjUxNjg5NDUwODU5NA%3D%3D.2" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s750x750/sh0.08/e35/16464318_178059199355609_762998320204349440_n.jpg?ig_cache_key=MTQ1NjM0NTU2ODY0MDIwOTExMw%3D%3D.2" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s750x750/sh0.08/e35/12446026_543271855842400_894742140_n.jpg?ig_cache_key=MTE3NTQyMTE2ODk3MTI0OTMxNA%3D%3D.2" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://scontent.cdninstagram.com/t51.2885-15/sh0.08/e35/p640x640/16790054_583053521893319_1145856291994861568_n.jpg?ig_cache_key=MTQ1OTExNTMxMDQxNDMyMjc1Nw%3D%3D.2" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s480x480/e35/16908750_1472830466074158_7383339250462228480_n.jpg?ig_cache_key=MTQ1NjMxODU5NDIxNjgwNjY0Ng%3D%3D.2" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s750x750/sh0.08/e35/16788542_1404909916248308_4844316771622060032_n.jpg?ig_cache_key=MTQ1NjI3Mjc0ODEzMzYzODQxMQ%3D%3D.2" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"> <img src="http://scontent.cdninstagram.com/t51.2885-15/s750x750/sh0.08/e35/16585696_1972814609608476_4794716693991522304_n.jpg?ig_cache_key=MTQ1NjI3MjU5NzI2NDU2Nzg1Mg%3D%3D.2" class="img-responsive"> </div> </div> </div> </section>

.gallery-title { font-size: 36px; color: black; text-align: center; font-weight: 500; margin-bottom: 70px; } .gallery-title:after { content: ""; position: absolute; width: 7.5%; left: 46.5%; height: 45px; border-bottom: 1px solid #5e5e5e; } .filter-button { font-size: 18px; border: 1px solid #42B32F; border-radius: 5px; text-align: center; color: #42B32F; margin-bottom: 30px; } .filter-button:hover { font-size: 18px; border: 1px solid #42B32F; border-radius: 5px; text-align: center; color: #ffffff; background-color: #42B32F; } .filter-button.active { background-color: #42B32F; color: white; } .port-image { width: 100%; } .gallery_product { margin-bottom: 30px; } /* ********************************* Variables ********************************** */ /* ********************************* Some Style Overrides on Bootstrap ********************************** */ .navbar-inverse { background: lightblue; border-bottom: none; } .navbar-inverse .navbar-toggle { border: 1px solid #333; border-color: grey; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: transparent; } @media (max-width: 767px) { .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { background: grey; } } .navbar-inverse .navbar-nav > li > a { color: black; } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { color: #22F; } li a { text-decoration: none; position: relative; padding: 6px 0; -webkit-transition: all 0.8s; transition: all 0.8s; color: grey; } li a:after { content: ''; width: 0%; margin-left: 50%; height: 2px; bottom: 0; left: 0; border-radius: 40%; position: absolute; transition: all 0.5s; } li a:hover:after { background-color: white; width: 60%; margin-left: 20%; box-shadow: 0px 0px 10px white; } li a.active:after { background-color: white; width: 60%; margin-left: 20%; box-shadow: 0px 0px 10px white; } /* ********************************* Toolbar Logo ********************************** */ .small-logo-container { padding-top: 50px; height: 50px; overflow: hidden; position: absolute; } .small-logo { color: grey; font-size: 2.5em; padding-bottom: 2px; } /* ********************************* Big Logo ********************************** */ .big-logo-row { background:black; } .big-logo-row .big-logo-container { padding-top: 50px; } .big-logo-row h1 { font-size: 4em; margin: 0; padding: 0 0 15px 0; } @media (min-width: 400px) { .big-logo-row h1 { font-size: 4.5em; } } @media (min-width: 440px) { .big-logo-row h1 { font-size: 5.5em; } } @media (min-width: 500px) { .big-logo-row h1 { font-size: 6.5em; } } @media (min-width: 630px) { .big-logo-row h1 { font-size: 7.5em; } } @media (min-width: 768px) { .big-logo-row h1 { font-size: 9em; padding-bottom: 30px; } } @media (min-width: 1200px) { .big-logo-row h1 { font-size: 12em; } }

$(document).ready(function(){ $(".filter-button").click(function(){ var value = $(this).attr('data-filter'); if(value == "all") { //$('.filter').removeClass('hidden'); $('.filter').show('1000'); } else { // $('.filter[filter-item="'+value+'"]').removeClass('hidden'); // $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden'); $(".filter").not('.'+value).hide('3000'); $('.filter').filter('.'+value).show('3000'); } }); }); var navbarHeight = $('.navbar').height(); $(window).scroll(function() { var navbarColor = "grey";//color attr for rgba var smallLogoHeight = $('.small-logo').height(); var bigLogoHeight = $('.big-logo').height(); var smallLogoEndPos = 0; var smallSpeed = (smallLogoHeight / bigLogoHeight); var ySmall = ($(window).scrollTop() * smallSpeed); var smallPadding = navbarHeight - ySmall; if (smallPadding > navbarHeight) { smallPadding = navbarHeight; } if (smallPadding < smallLogoEndPos) { smallPadding = smallLogoEndPos; } if (smallPadding < 0) { smallPadding = 0; } $('.small-logo-container ').css({ "padding-top": smallPadding}); var navOpacity = ySmall / smallLogoHeight; if (navOpacity > 1) { navOpacity = 1; } if (navOpacity < 0 ) { navOpacity = 0; } var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')'; $('.navbar').css({"background-color": navBackColor}); var shadowOpacity = navOpacity * 0.4; if ( ySmall > 1) { $('.navbar').css({"box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")"}); } else { $('.navbar').css({"box-shadow": "none"}); } });