"Home"
Bootstrap 3.3.0 Snippet by adailton

<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 ----------> <div class="wrapper home"> <header class="col-sm-12 col-md-12 col-lg-2"> <div class="sidebar-nav row"> <div class="brand-centered"> <a class="navbar-brand" href="#"> <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 class="active current"><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><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> <li><span>!!!</span></li> </ul> </div><!--/.nav-collapse --> </div> </div> </header> <section class="col-md-12 col-lg-10 grids"> <div class="row"> <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/350x350') 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; } /*tamanho dos itens da grid - começa*/ .grid-item { display: block; position: relative; width: 25%; height: 33.33333333333333%; line-height: 1em; margin: 0; font-size: 12px; float: left; overflow: hidden; } /*.grid-item:before { content: ""; display: block; padding-top: 100%; }*/ .grid-item>.content { /*position: absolute; top: 0; left: 0; bottom: 0; right: 0;*/ background: black; padding: 0px; height: 100%; line-height: 1em; opacity: .5; display: block; cursor: pointer; overflow: hidden; } .grid-item>.content .bg { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; } .grid-item>.content .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; } .grid-item>.content .caption { display: table; vertical-align: middle; } .grid-item>.content .caption .text { display: table-cell; vertical-align: middle; } .grid-item:hover .content{ opacity:1; } .grid-item:hover .content .caption{ opacity:1; } /*tamanho dos itens da grid - termina*/ .home .nav .current{ display: none; } span.calltoaction a { width:45px; height:45px; position: absolute; top:0; right:0; background : linear-gradient( 225deg, #fff, #f3f3f3 45%, #ddd 50%, #aaa 50%, #bbb 56%, #ccc 62%, #f3f3f3 80%, #fff 100% ); box-shadow : 0 0 10px rgba(0,0,0,0.5); transition: all .5s ease; color: #fff; text-indent: 9999px; font-size: 24px; padding-top: 1em; padding-right: 1em; text-align:right; text-decoration:none; } span.calltoaction a:before, span.calltoaction a:after { content: ''; position: absolute; z-index: -1; left: 12.5%; bottom: 5.8%; width: 70%; max-width: 300px; max-height: 100px; height: 55%; box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3); transform: skew(-10deg) rotate(-6deg); } span.calltoaction a:after { left: auto; right: 5.8%; bottom: auto; top: 14.16%; transform: skew(-15deg) rotate(-84deg); } span.calltoaction a:hover { width: 35%; height: 35%; color: #666; text-indent:0; } span.calltoaction a:hover:before, span.calltoaction a:hover:after { box-shadow: 0 24px 30px rgba(0, 0, 0, 0.3); } /* make sidebar nav vertical */ @media (max-width: 1199px) { .grid-item { display: block; position: relative; width: 33.33333333333333%; height: 33.33333333333333%; line-height: 1em; margin: 0; font-size: 12px; float: left; overflow: hidden; } .grid-item:nth-child(n+10){ display:none; } .brand-centered { display: block; position: relative; width: 25%; height: 10vh; line-height: 1em; margin: 0; font-size: 12px; float: left; } a.navbar-brand { width: 100%; height: 100%; } .navbar.navbar-default { height: 10vh; width: 75%; float: right; margin: 0; } .grids { height: 90vh; } } @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


Questions / Comments: