<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lettering.js Examples</title>
<meta name="description" content="A jQuery Plugin that allows you to style each individual letter and more.">
<meta name="author" content="Dave Rupert">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
<style type="text/css" media="screen">
.demo {
padding: 50px;
border:1px solid #ccc;
font-weight:bold;
color: red;
background:#d0d0d0;
font-size:20px;
line-height:1.5;
text-align:center;
}
.demo h1 { font-size:72px; text-transform:uppercase; margin-bottom:0px;}
.char2,
#demo2 .word2,
.line2 { color: orange; }
.char3,
.word3,
.line3 { color: yellow; }
.char4,
.line4 { color: blue; }
.char5 { color: green; }
.char6 { color: indigo; }
.char7 { color: violet; }
</style>
</head>
<body>
<div id="container">
<header>
<h1 id="thebrand">Lettering.JS</h1>
<p>The following are some hokey examples of how you can implement LETTERING.JS.
</header>
<article id="main">
<section id='lettering-demo'>
<h2>Letters</h2>
<div id="demo1" class="demo">
<h1>Rainbow</h1>
</div>
</section>
<section id='words-demo'>
<div id="demo2" class="demo">
<h1>Hi, Multi Color</h1>
</div>
</section>
<section id='lines-demo'>
<h2>Lines</h2>
<div id="demo3" class="demo">
<p>This is an amazing<br/> Revolution in Typography. <br/> The possibilities are endless: <br/> Coloring, Vertical spacing, and Kerning.</p>
</div>
</section>
</article>
<script src="vanilla.lettering.js"></script>
<script>
new Lettering('#demo1 h1');
new Lettering('#demo2 h1', 'words');
new Lettering('#demo3 p', 'lines');
</script>
<footer>
<p>©2010 Dave Rupert <a href="http://daverupert.com">http://daverupert.com</a>
</footer>
</div>
</body>
</html>