Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"categorias"
Bootstrap 3.3.0 Snippet by
Bcsilva
3.3.0
Preview
HTML
CSS
View Full Screen
Fork
Fork this
1.8K
 
0 Fav
Post to Facebook
Tweet this
<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; } }
Related:
See More
Template
Paper Dashboard Pro Angular
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76