<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 work-div">
<div id="breadcrumb-container" class="row" class="">
<div class="content_breadcrumb">
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<!-- Breadcrumb NavXT 5.4.0 -->
<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="" href="#" class="home"><span property="name">Portfolio</span></a>
<meta property="position" content="1">
</span>
<span class="breadsep"><i class="fa fa-angle-right"></i></span>
<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="" href="#" class="taxonomy category"><span property="name">Digital</span></a>
<meta property="position" content="2">
</span>
<span class="breadsep"><i class="fa fa-angle-right"></i></span>
<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="" href="#" class="taxonomy category"><span property="name">Websites</span></a>
<meta property="position" content="3">
</span>
</div>
</div>
</div>
<h1>Nome do trabalho</h1>
<div class="entry">
<p>Climb a tree, wait for a fireman jump to fireman then scratch his face if it fits, i sits and scratch at the door then walk away. Ignore the squirrels, you'll never catch them anyway chase after silly colored fish toys around the house cat snacks, or scamper burrow under covers touch water with paw then recoil in horror for climb leg. </p>
<p><img id="image-2" class="img-responsive" src="http://placekitten.com/600/300" alt=""></p>
<p>Climb a tree, wait for a fireman jump to fireman then scratch his face if it fits, i sits and scratch at the door then walk away. Ignore the squirrels, you'll never catch them anyway chase after silly colored fish toys around the house cat snacks, or scamper burrow under covers touch water with paw then recoil in horror for climb leg. <p>Climb a tree, wait for a fireman jump to fireman then scratch his face if it fits, i sits and scratch at the door then walk away. Ignore the squirrels, you'll never catch them anyway chase after silly colored fish toys around the house cat snacks, or scamper burrow under covers touch water with paw then recoil in horror for climb leg. </p>
<p class="row"><img id="image-2" class="col-md-4" src="http://placekitten.com/600/300" alt=""><img id="image-2" class="col-md-4" src="http://placekitten.com/600/300" alt=""><img id="image-2" class="col-md-4" src="http://placekitten.com/600/300" alt=""><p>
</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;
}
.work header {
-moz-box-shadow: 0px 0px 15px #444;
-webkit-box-shadow: 0px 0px 15px #444;
box-shadow: 0px 0px 15px #444;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
}
/* 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;
}
}
