<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;
}
}
