Template:OhioMOD2014
<html>
<nav>
<ul> <li><img src="http://www.pablogarciafernandez.com/images/svg/side-navigation-menu_home.svg" alt="Home"><a href="#">Home</a></li> <li><img src="http://www.pablogarciafernandez.com/images/svg/side-navigation-menu_about.svg" alt="About"><a href="#">About</a></li> <li><img src="http://www.pablogarciafernandez.com/images/svg/side-navigation-menu_work.svg" alt="Work"><a href="#">Work</a></li> <li><img src="http://www.pablogarciafernandez.com/images/svg/side-navigation-menu_contact.svg" alt="Contact"><a href="#">Contact</a></li> </ul></nav>
<section>
<h1>OhioMOD</h1> <h2>Page Under Construction</h2>
</section>
<style>
/* Typography
------------------------------------- */
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 1.8em; color:#4D4D4D;
}
/* Navigation */
a {
text-transform: uppercase; text-decoration: none; color: #151515; transition-delay: 0s; transition-duration: 0.36s; transition-property: all; transition-timing-function: line;
}
nav a:hover { font-weight: 400; }
nav, nav:hover { padding: 1em; }
nav a { text-indent: -200px; }
nav:hover a {
text-indent:0px; color: #EEFFE5;
}
svg, a { vertical-align: top; }
/* End Navigation */
/* Sections */
h1 {
font-family: 'Open Sans', sans-serif; font-size:3em; font-weight: 300; color:#000; line-height:1.8em;
}
h2 { font-weight: 300; }
h2 a { font-weight: 700; }
/* End Sections */
/* Structure
------------------------------------- */
body { background: #f1f1f1; }
/* Navigation */
nav {
position: fixed; left: 0; top: 0; bottom: 0; display: block; height: auto; min-width: 40px; width: 40px; background-color: #ccc; transition-delay: 0s; transition-duration: 0.4s; transition-property: all; transition-timing-function: line;
}
nav:hover {
position: fixed; left: 0; top: 0; bottom: 0; height: auto; width: 140px; background-color: #9ED29E;
}
nav a {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0; margin-left: 1em;
}
nav:hover a {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity:1;
}
li {
display: block; padding:0.2em; height:32px;
}
svg, a { display: inline-block; }
/* End Navigation */
/* Sections */
section { padding: 2em 0 0 14em; }
/* End sections */ </style>
</html>
