index.html

<!DOCTYPE html>
<html class="home-page">
    <head>
        <meta charset="utf-8">
        <title>Magic of CSS — Adam Schwartz</title>

        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

        <link rel="icon" href="/magic-of-css/favicon.ico">

        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/logo.css">
        <link rel="stylesheet" href="css/home.css">

        <link rel="stylesheet" href="css/eager.css">

        <script src="js/home.js"></script>
    </head>
    <body>
        <div class="page">
            <div class="page-inner">
                <a class="logo animated" href="/magic-of-css"><h1 class="the-magic-of">The Magic of CSS</h1><div class="css-rainbow"><div class="css-letter css-rainbow-c"><div class="rainbow"><div class="bands"></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-1"><div class="top-half"><div class="rainbow"><div class="bands"></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"></div></div></div></div><div class="css-letter css-rainbow-s css-rainbow-s-2"><div class="top-half"><div class="rainbow"><div class="bands"></div></div></div><div class="bottom-half"><div class="rainbow"><div class="bands"></div></div></div></div></div></a>
                <p class="author"><a href="http://github.com/uvacoder">by @uvacoder</a></p>
                <div class="share">
                    <iframe class="github" src="https://adamschwartz.co/github-star-button/github/spin/adamschwartz/magic-of-css/?name=%20"></iframe>
                </div>
                <div class="separator"></div>
                <div class="preface-link">
                    <a href="chapters/preface"><span>Preface</span></a>
                </div>
                <h2><span>Chapters</span></h2>
                <ol class="chapters">
                    <li><a href="chapters/1-the-box"><span data-starts-with="T">The Box</span></a></li>
                    <li><a href="chapters/2-layout"><span>Layout</span></a></li>
                    <li><a href="chapters/3-tables"><span data-starts-with="T">Tables</span></a></li>
                    <li><a href="chapters/4-color"><span>Color</span></a></li>
                    <li><a href="chapters/5-typography"><span data-starts-with="T">Typography</span></a></li>
                    <li><a href="chapters/6-transitions"><span data-starts-with="T">Transitions</span></a></li>
                    <li class="coming-soon"><a href="https://github.com/adamschwartz/magic-of-css/blob/gh-pages/planning/planning.md" target="_blank"><span>Coming soon...</span></a></li>
                </ol>
                <h2><span>Potions</span></h2>
                <ul class="potions">
                    <li><a href="potions/two-pane-app"><span data-starts-with="T">Two Pane App</span></a></li>
                    <li><a href="potions/three-pane-app"><span data-starts-with="T">Three Pane App</span></a></li>
                    <li><a href="potions/three-pane-app-with-color"><span data-starts-with="T">Three Pane App with Color</span></a></li>
                    <li><a href="potions/table-styling"><span data-starts-with="T">Table Styling</span></a></li>
                    <li><a href="potions/overflow-ellipsis"><span>Overflow Ellipsis</span></a></li>
                    <li><a href="potions/letter-spacing"><span>Letter Spacing</span></a></li>
                    <li><a href="potions/buttons"><span>Buttons</span></a></li>
                    <li><a href="potions/content-reordering"><span>Content Reordering</span></a></li>
                </ul>
            </div>
        </div>

        // <script src="js/footer.js"></script>
    </body>
</html>