Bootstrap Snippet Portfolio using HTML CSS Bootstrap jQuery

.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"}); } });