Skip to content

Instantly share code, notes, and snippets.

@owebboy

owebboy/index.html

Created July 7, 2014 03:54
Show Gist options
  • Save owebboy/b831bbd822a39491a176 to your computer and use it in GitHub Desktop.
Save owebboy/b831bbd822a39491a176 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Oliver Pope">
<title>Navbar</title>
<link rel="stylesheet" href="navbar.css">
</head>
<body>
<div id="page">
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</div>
</body>
</html>
Raw
navbar.scss
// Vairables
$bg: #B10DC9; // Background
$c: #FFFFFF; // Color
$h-bg: #39CCCC; // Hover Background
$h-c: #111111; // Hover Color
// Navbar Style
nav {
display: block;
background: $bg;
padding: 0 5%;
@media (max-width:700px) {
padding: 0;
}
a {
display: inline-block;
color: $c;
transition: 1s all;
padding: 1em 2%;
text: {
decoration: none;
transform: lowercase;
}
font: {
size: 1.5em;
family: sans-serif;
weight: 100;
}
@media (max-width:700px) {
display: block;
}
&:hover {
background: $h-bg;
color: $h-c;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment