<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Github Pages Template</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

    <!-- Combo with CSSNormalize, CSSGrids-Responsive, CSSForm, CSSTable, CSSList (v3.9.1) -->
    <link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.9.1/build/cssnormalize/cssnormalize-min.css&amp;3.9.1/build/cssgrids-responsive/cssgrids-responsive-min.css&amp;3.9.1/build/cssbutton/cssbutton-min.css&amp;gallery-2013.03.27-22-06/build/gallerycss-csslist/gallerycss-csslist-min.css&amp;gallery-2013.03.27-22-06/build/gallerycss-csstable/gallerycss-csstable-min.css&amp;gallery-2013.03.27-22-06/build/gallerycss-cssform/gallerycss-cssform-min.css">
    
    <!-- Some custom styles to make things pretty. -->
    <link rel="stylesheet" type="text/css" href="https://rawgithub.com/tilomitra/prettypages/gh-pages/ui.css">

    <!-- RainbowJS Syntax Highlighting - Github Theme. 
         For more themes, go to https://github.com/ccampbell/rainbow/tree/master/themes -->
    <link rel="stylesheet" type="text/css" href="https://rawgithub.com/ccampbell/rainbow/master/themes/github.css">

    <!-- Modify header colors here to customize the look and feel of the site-->
    <style>
        
        .header {
            background: rgb(53, 41, 116);
         }
            .header h1 {
                color: white;
            }
             .header h2 {
                 font-weight:300;
                 margin:0;
                 color: rgb(116, 130, 230);
             }
    </style>

</head>

<body class='yui3-skin-sam'>

    <div id="headerMenu" class="yui3-menu yui3-menu-open yui3-menu-horizontal yui3-menu-fixed">
        <span class="yui3-menu-heading">PrettyPages</span>
        <ul>
            <li class="yui3-menu-active"><a href="http://tilomitra.github.com/cssforms/">Documentation</a></li>
            <li><a href="http://github.com/tilomitra/prettypages/">Fork on Github</a></li>
            <li><a href="http://github.com/tilomitra/">Other Projects</a></li>
        </ul>
    </div>
    <div class="header yui3-u-1">

        <h1 class="yui3-u-1">Pretty Pages</h1>
        <h2 class="yui3-u">A pretty Github Pages template</h2>

    </div>
    <div class="content">
        <h2>Get Started</h2>
        <p><a href="http://github.com/tilomitra/prettypages/">PrettyPages</a> is just an HTML template that makes it easy for you to create nice looking Github Pages for your projects. This page was created using PrettyPages. </p>

        <a href="http://github.com/tilomitra/prettypages/" class="yui3-button primary-button">View on Github</a>

        <h2>About</h2>
        
        <p>PrettyPages comes with a flat horizontal menu, where you can place links, and add the title of your project. This menu is responsive at lower screen sizes.</p>

        <p>You can also add pretty code snippets that have syntax highlighting thanks to <a href="http://craig.is/making/rainbows">RainbowJS</a>! These come in a variety of different <a href="https://github.com/ccampbell/rainbow/tree/master/themes">themes</a>.</p>

<pre><code data-language="javascript">
    YUI().use('node', function(Y) {
      Y.log('YUI Loaded. Vroom vroom!');
    });

</code></pre>

        <p>You can also display nice looking buttons thanks to YUI's CSSButton module. Add the <code>.yui3-button</code> class to a <code>a</code> element to make a nice looking button, and add the <code>primary-button</code> class to make a really big callout button.</p>

        <a class="yui3-button">Regular button</a>
        <a class="yui3-button primary-button">Primary button</a>


        <h2>More Content</h2>
        <p>
            In general, all your content should be placed inside a <code>div class="content"</code>. You can use <code>code</code> elements to highlight inline-code. If you want sub-headings, those are nicely styled too. 
        </p>

        <h3>A sub-heading</h3>

        <p>
            Use <code>h3</code> for subheadings! If you want something smaller, you can go for an <code>h4</code>.
        </p>

        <h4>A sub-sub heading</h4>
        <p>That's what an <code>h4</code> looks like.</p>


        <!-- TYPEKIT -->
        <script type="text/javascript" src="//use.typekit.net/ajf8ggy.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
        <script src="https://rawgithub.com/ccampbell/rainbow/master/js/rainbow.min.js"></script>
        <script src="https://rawgithub.com/ccampbell/rainbow/master/js/language/generic.js"></script>
    </div>
</body>
</html>