<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<nav id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Github</a></li>
</ul>
</nav>
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
body {
overflow-x:hidden;
background:url("https://source.unsplash.com/category/nature") center center fixed;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
}
nav {
display:inline-block;
position:relative;
top:-80px;
left:0px;
margin:0;
padding:0;
width:105%;
height:250px;
text-align:right;
background-color:rgba(255,255,255,0.9);
transform:rotate(3deg);
-webkit-transform:rotate(3deg);
}
nav ul {
margin:0;
margin-top:140px;
margin-right:100px;
padding:0;
transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
}
nav ul li {
display:inline-block;
list-style:none;
}
nav ul li a {
display:block;
margin:0;
padding:7px 20px;
color:#1e1e1e;
font-family:'roboto', sans-serif;
font-size:1.7em;
text-decoration:none;
border-bottom:2px solid transparent;
box-shadow:0px 2px 0px transparent
transition:all .20s ease;
-webkit-transition:all .20s ease;
-moz-transition:all .20s ease;
-o-transition:all .20s ease;
}
nav ul li a:hover {
border-bottom:2px solid #333;
}
