Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Robaum
Robaum committed Sep 1, 2014
1 parent 6659879 commit 128bfe1
Showing 1 changed file with 199 additions and 1 deletion.
200 changes: 199 additions & 1 deletion index.html
View file
@@ -1 +1,199 @@
Hello World
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dot Navigation Styles</title>
<meta name="description" content="Dot Navigation Styles: Subtle effects for simple dot navigation" />
<meta name="keywords" content="dot navigation style, dot navigation effect, inspiration, css, web design" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.min.js"></script>
</head>
<body>
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="Scroll-Demo/index.html"><span>Vertical Dot Navigation Styles + One Page Scroll Demo</span></a>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=18295"><span>Back to the original Codrops Article</span></a></span>
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://blog.robamador.com/vertical-dot-navigation-styles-one-page-scroll"><span>Back to my Blog Post</span></a></span>
</div>
<header class="codrops-header">
<h1>Vertical Dot Navigation Styles <span>Subtle effects for simple dot navigation</span></h1>
</header>
<div class="wrap clearfix">
<div class="dotstyle dotstyle-fillup">
<h2>Fill up</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-scaleup">
<h2>Scale up</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-stroke">
<h2>Stroke</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-fillin">
<h2>Fill in</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-circlegrow">
<h2>Circle grow</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-dotstroke">
<h2>Dot stroke</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-drawcircle">
<h2>Draw circle</h2>
<ul>
<li class="current"><a href="#">Home</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">About</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">Products</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">Portfolio</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">Blog</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">Contact</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
</ul>
</div>
<div class="dotstyle dotstyle-smalldotstroke">
<h2>Small dot stroke</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-puff">
<h2>Puff</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-flip">
<h2>Flip</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-tooltip">
<h2>Tooltip</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-dotmove">
<h2>Dot move</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><!-- dummy dot --></li>
</ul>
</div>
<div class="dotstyle dotstyle-hop">
<h2>Hop</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-fall">
<h2>Fall</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>


</div><!-- /container -->
<script src="js/dots.js"></script>
<script>
[].slice.call( document.querySelectorAll( '.dotstyle > ul' ) ).forEach( function( nav ) {
new DotNav( nav, {
callback : function( idx ) {
//console.log( idx )
}
} );
} );
</script>
</body>
</html>

0 comments on commit 128bfe1

Please sign in to comment.