<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.5.0/css/font-awesome.min.css">
<nav class="navbar navbar-trans navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-fury" href="#">Lorem</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#"><i class="fa fa-home fa-lg"></i></a></li>
<li><a href="#">section</a></li>
<li><a href="#">section</a></li>
<li><a href="#">section</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs hidden-sm">
<li><a href="#" target="_blank"><i class="fa fa-facebook fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google-plus fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin fa-lg"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-github fa-lg"></i></a></li>
</ul>
</div>
</div>
</nav>
<section>
<div class="container">
<div class="wrap">
<h1> HELLO WORLD! </h1>
<hr class="primary">
<p>Lorem ipsum dolor sit amet, consetetur elaboraret quo in, nec quidam patrioque ea, id eum altera prodesset.</p>
</div>
</div>
</section>
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
html,body {
height:100%;
background:url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/congruent_outline.png");
background-repeat:repeat
}
a {
color:#999;
}
a:hover {
color:#9C27B0;
}
.text-fury, a.fury {
color:#9C27B0;
}
/* COLOR NAV */
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#2b2b2b;
color:#cdcdcd;
border-width:0;
}
.navbar-trans .navbar-brand, .navbar-trans >.container-fluid .navbar-brand {
padding: 14px;
color:#9C27B0;
}
.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#9C27B0;
color:#333;
}
.navbar-trans li>a:hover {
background-color:#9C27B0;
color:#fff;
opacity:0.5;
}
.navbar-trans a{
color:#cdcdcd;
letter-spacing:2px;
}
.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}
/* sections */
section {
padding-top:70px;
padding-bottom:50px;
min-height:100%;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Oswald', sans-serif;
}
h1{
font-size:6em;
color:#fff;
text-align:center;
}
p{
font-size:1em;
color:#fff;
text-align:center;
}
hr{
max-width: 120px;
border-width: 3px;
opacity: 0.08;
margin-top: 25px;
margin-bottom: 25px;
}
hr.primary{
border-color: #9C27B0;
opacity: 1;
}
