<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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <div class="wrapper work"> <header class="col-md-2 navbar-fixed-top"> <div class="sidebar-nav row"> <div class="brand-centered"> <a class="navbar-brand" href="http://bootsnipp-env.elasticbeanstalk.com/iframe/qgj99"> <h1>Logo</h1> </a> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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> <span class="visible-xs navbar-brand">Sidebar menu</span> </div> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/qgj99">Home</a></li> <li><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/1KXgV">Sobre</a></li> <li class="active"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/mvlmN">Serviços</a></li> <li><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/rvOz6">Contato</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </header> <section class="col-md-offset-2 col-md-10 categories-div"> <div id="categories-container" class="row"> <div class="inner"> <ul> <li><a href="#">Sites</a></li> <li><a href="#">Mkt digital</a></li> <li><a href="#">Impressos</a></li> <li><a href="#">Identidade Visual</a></li> <li><a href="#">Multimídia</a></li> <li><a href="#">Ilustração</a></li> </ul> </div> </div> <div class="row grids"> <div class="grid-item item1"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/100/100');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 1</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item2"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/200/200');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 2</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item3"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/300/300');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 3</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item4"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/400/400');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 4</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item5"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/500/500');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 5</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item6"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/600/600');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 6</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item7"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/700/700');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 7</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item8"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/800/800');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 8</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item9"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/90/90');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 9</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item10"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/1000/1000');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 10</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item11"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/110/110');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 11</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> <div class="grid-item item12"> <div class="content"> <div class="bg" style="background-image: url('http://placekitten.com/g/120/120');"></div> <div class="caption"> <div class="text"> <h3>Nome da obra 12</h3> <p>blabla blabla blabla blabla blabla blabla blabla </p> <span class="calltoaction"><a href="http://bootsnipp-env.elasticbeanstalk.com/iframe/7NMOl">Ver</a></span> </div> </div> </div> </div> </div> </section> <footer></footer> </div>

header, section.grids{ max-height:100vh; overflow-y:hidden; } .grids, .grids .row { height: 100vh; background:#000; } .brand-centered { display: block; position: relative; /* width: 100%; */ height: 40vh; line-height: 1em; margin: 0; font-size: 12px; float: none; } a.navbar-brand { position: absolute; top: 0; left: 0; /* bottom: 0; */ /* right: 0; */ /* background: #fff; */ width: 100%; padding: 30px; line-height: 1em; text-align: center; vertical-align: center; height: 100%; text-transform: uppercase; color: #fff; /*background: url('http://bcsilva.com/images/logo-bcsilva.png') no-repeat center center;*/ background: url('http://placehold.it/350x150') no-repeat center center; background-size: contain; } .brand-centered {} .navbar.navbar-default { height: 60vh; } .navbar-collapse.collapse.sidebar-navbar-collapse, ul.nav.navbar-nav { height: 100% !important; } .sidebar-nav .navbar li{ height:25%; } .sidebar-nav .navbar li a, .sidebar-nav .navbar li span{ width: 100%; height: 100%; font-size: 3rem; padding-left: 1.5em; /* display: block; */ /* line-height: 100%; */ display: flex; align-items: center; text-align: left; } a.navbar-brand h1{ visibility: hidden; } section.col-md-10.work-div { min-height: 100vh; background: #666; color: #fff; } section.col-md-10.work-div h2{ font-size:3.5em; text-transform:uppercase; margin-bottom:1em; } section.col-md-10.work-div p{ font-size:1.5em; line-height: 1.5em; margin-bottom: 1.5em; } section.col-md-10.work-div .img-responsive{ width:100%; } div#breadcrumb-container { padding: 2em; background: #fff; color: #666; text-align: right; font-size: 1.5rem; } .categories-div .grids { /* Prevent vertical gaps */ line-height: 0; -webkit-column-count: 4; -webkit-column-gap: 0px; -moz-column-count: 5; -moz-column-gap: 0px; column-count: 4; column-gap: 0px; height: initial; min-height: 100vh; min-height: calc(100vh - 81px); } .categories-div .grids .grid-item { /* Just in case there are inline attributes */ width: 100% !important; /*height: auto !important; width: 25%;*/ height: 33.33333333333333vh; background: #666; position: relative; } @media (max-width: 1200px) { .categories-div .grids { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media (max-width: 1000px) { .categories-div .grids { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } } @media (max-width: 800px) { .categories-div .grids { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media (max-width: 400px) { .categories-div .grids { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } } .categories-div .bg { position: absolute; width: 100%; height: 100%; opacity:1; } .categories-div .caption { background-color:#666; width: 100%; width: calc(100% + 1px); height: 100%; height: calc(100% + 1px); color:#fff; position: absolute; text-align: center; text-transform: uppercase; text-align: center; opacity:0; } .categories-div .grid-item:hover .content .caption{ opacity:1; } .categories-div .grid-item>.content .caption { display: table; vertical-align: middle; } .categories-div .grid-item>.content .caption .text { display: table-cell; vertical-align: middle; padding: 22px; } /*CATEGORIES MENU - COMEÇA*/ div#categories-container { background: #000; color: #fff; } div#categories-container .inner { padding:0em; } div#categories-container .inner ul { margin:0; padding: 0; list-style-type:none; text-align:center; } div#categories-container .inner ul li { margin:0; padding: 0; display:inline-block; } div#categories-container .inner ul li a{ padding:1em; font-size:20px; color: #fff; display: block; } div#categories-container .inner ul li a{ padding:1em; font-size:20px; color: #fff; display: block; text-transform: uppercase; } div#categories-container .inner ul li a:hover{ color: #000; background: #fff; text-decoration: none; } /*CATEGORIES MENU - TERMINA*/ /* make sidebar nav vertical */ @media (min-width: 768px) { .sidebar-nav .navbar .navbar-collapse { padding: 0; max-height: none; } .sidebar-nav .navbar ul { float: none; } .sidebar-nav .navbar ul:not { display: block; } .sidebar-nav .navbar li { float: none; display: block; } .sidebar-nav .navbar li a { padding-top: 12px; padding-bottom: 12px; } }