Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by Brett Diedrich.
<html>
<head>
<title>Aviation | Diedrich.co</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div class="nav">
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Airplanes</a>
<a href="#">Helicopters</a>
<a href="#">Gliders</a>
</div>
</body>
</html>
html {
background: url(http://diedrich.co/img/uploads/6259c3aac412158d3963b672e3a4117a.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0 auto;
}
.nav {
position: fixed;
height: 55px;
background-color: #0000CC;
padding-left: 20px;
padding-right: 20px;
width: 100%;
color: #E0E0E0 ;
}
.nav a {
display: inline-block;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
padding-bottom: 5px;
height: 42px;
color: #E0E0E0 ;
text-decoration: none;
font-size: 24px;
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
}
.nav a:hover {
color: #5c6166;
background: #0000CC;
border-radius: 15px;
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
}
.nav a.active {
color: #E0E0E0 ;
background: #0000CC;
border-radius: 15px;
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
}
.nav a.active:hover {
border-radius: 50px;
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
}
.video {
padding: 50px
}
#gallery {
text-align: center;
padding-top: 30px;
}
#aviation {
text-shadow: 5px 5px 5px #0000FF;
text-align: center;
padding-top: 65px;
font-size: 35px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment