Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="photo-header">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
<li><a href="http://getbootstrap.com/css">CSS</a></li>
<li><a href="http://getbootstrap.com/components">Components</a></li>
<li><a href="http://getbootstrap.com/javascript">JavaScript</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
</ul>
</div>
</div>
<span title="Fire Bee and Fire Spider">
<img src="https://morphmarket-media.s3.amazonaws.com/static/img/texoma-1.bdc3ed08a95d.png"/>
</span>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.photo-header {
position: relative;
// TODO give this span these a real class
}
.navbar {
position: absolute;
top: 0px;
width: 100%;
background: transparent;
border: none;
}
body .photo-header {
background: #030303;
}
.photo-header img {
margin-left: auto;
margin-right: auto;
display: block;
/* Here's where you set the opacity */
opacity: .5;
/* Here's where you set the opacity for the bad browser */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */