-
-
Save TaylerKing/7977e60099c3726938fb to your computer and use it in GitHub Desktop.
Development Navigational Bar Test CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head> | |
| <!-- Meta tags & title /--> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Elegant</title> | |
| <meta name="description" content="Your Description Here" /> | |
| <meta name="keywords" content="Your Tags Here" /> | |
| <meta name="author" content="Xexode"> | |
| <!--<link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> if you wish to use a favicon--> | |
| <!-- Facebook Metadata /--> | |
| <meta property="og:description" content="Xexode"/> | |
| <meta property="og:title" content="Elegant"/> | |
| <!-- Google+ Metadata /--> | |
| <meta itemprop="name" content="Xexode"> | |
| <meta itemprop="description" content="Elegant"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"> | |
| <!-- Stylesheets /--> | |
| <link rel="stylesheet" href="css/styles.css"> | |
| </head> | |
| <body> | |
| <div class="intro"> | |
| <content> | |
| <div> | |
| <div class="line"><span>Xexode Development</span></div> | |
| <div class="stretch"> | |
| <h1>Elegant<br>One Page</h1> | |
| </div> | |
| <div class="line"><span>Elegant One Page Template</span></div> | |
| </div> | |
| </content> | |
| </div> | |
| <div class="navigation-anchor"></div> | |
| <div class="navigation"> | |
| <div class="navigation-inner"> | |
| <ul> | |
| <li><a href="#home" class="active">Home</a></li> | |
| <li><a href="#Page">Page</a></li> | |
| <li><a href="#Page">Page</a></li> | |
| <li><a href="#Page">Page</a></li> | |
| <li><a href="#Page">Page</a></li> | |
| <li><a href="#Page">Page</a></li> | |
| <li><a href="#Page">Page</a></li> | |
| <li><a href="#Page">Page</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="content"> | |
| <center> | |
| test | |
| </center> | |
| text<br> | |
| text<br> | |
| text<br> | |
| text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br> | |
| text<br> | |
| text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br> | |
| </div> | |
| <!-- JavaScript --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> | |
| <script src="js/backstretch.js" type="text/javascript"></script> | |
| <script src="js/navigation.js" type="text/javascript"></script> | |
| <!-- Placed after loading of scripts --> | |
| <script src="js/functions.js" type="text/javascript"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Raleway); | |
| body, html{ | |
| height: 100%; | |
| width: 100%; | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* Introduction */ | |
| .intro{ | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .intro content{ | |
| color: #222; | |
| font-family: 'Raleway', sans-serif; | |
| z-index:-1; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| margin-top: -130px; | |
| height: 260px; | |
| width: 800px; | |
| margin-left: -400px; | |
| text-align:center; | |
| } | |
| .intro content div{ | |
| font-size: 17px; | |
| letter-spacing: 1px; | |
| text-align:center; | |
| } | |
| .intro content div span { | |
| display: inline-block; | |
| text-transform: uppercase; | |
| color: #fff; | |
| } | |
| .line { | |
| text-align: center; | |
| display: table; | |
| width: 500px; | |
| margin-left:150px; | |
| } | |
| line h2 > span, .line:before, .line:after { | |
| display: table-cell; | |
| } | |
| .line:before, .line:after { | |
| background: url("../images/header.png") repeat-x center; | |
| width: 50%; | |
| content: ' '; | |
| } | |
| .line > span { | |
| white-space: nowrap; | |
| padding: 0 9px; | |
| } | |
| .intro content div h1 { | |
| font-size: 110px; | |
| line-height: 100px; | |
| letter-spacing: -3px; | |
| font-weight: 400; | |
| color: #fff; | |
| text-transform:uppercase; | |
| margin:-10px; | |
| } | |
| .stretch{ | |
| margin:20px; | |
| } | |
| /* Navigation */ | |
| .navigation { | |
| height: 45px; | |
| color: #999999; | |
| width: 100%; | |
| background: #ffffff; | |
| -webkit-box-shadow:0 1px 10px rgba(0,0,0,.1); | |
| -moz-box-shadow:0 1px 10px rgba(0,0,0,.1); | |
| box-shadow:0 1px 10px rgba(0,0,0,.1); | |
| position: relative; | |
| padding:0; | |
| margin:0; | |
| } | |
| .navigation.fixed { | |
| position:fixed; | |
| top:0; | |
| } | |
| /* Page Content */ | |
| .content{ | |
| width:100%; | |
| z-index: 0; | |
| background:#f5f5f5; | |
| color:#000000; | |
| min-height:100%; | |
| } | |
| /* Extra */ | |
| a{ | |
| text-decoration: none; | |
| color: #222; | |
| } | |
| a:focus { | |
| color: #222; | |
| } | |
| a:hover { | |
| color: #222; | |
| } | |
| a:active { | |
| color: #222; | |
| } | |
| a:visited { | |
| color: #222; | |
| } | |
| p { | |
| color: #7c7c7c; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #222; | |
| font-family: 'Raleway', sans-serif; | |
| } | |
| center { | |
| text-align: center; | |
| } | |
| .padding { | |
| padding-bottom:20px; | |
| } | |
| .right{ | |
| text-align:left; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment