index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Word Clock</title>
	<link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" />
    <script type="text/javascript" src="http://cdn.jqmobi.com/1.11/jq.mobi.min.js"></script>
    <!--
    Feel free to use Zepto or jQuery instead of jqMobi:
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    -->
    <script type="text/javascript" src="clock.js"></script>
</head>

<body>
    <header>
        <a href="https://github.com/f1337/wordclock">View on Github</a>
    </header>

    <nav>
        <!--
        To add more color schemes, simply copy and paste one of the lines below,
        then customize to taste. The inline styles define the background and highlight
        colors for the link itself and the clock. The `data-off-color` property is used
        to define the unhighlighted letters. [Adobe Kuhler](https://kuler.adobe.com/)
        is an excellent tool for choosing color schemes.
        -->
        <a href="#black" style="background-color: #000; color: #fff" data-off-color="#333" title="Black &amp; White">Black &amp; White</a>
        <!-- https://kuler.adobe.com/#themeID/54394, modified off color from 57V (on HSV) to 37V -->
        <a href="#brown" style="background-color: #44301C; color: #9CCFDD" data-off-color="#5E5043" title="Blue &amp; Brown">Blue &amp; Brown</a>
        <!-- https://kuler.adobe.com/#themeID/332913 -->
        <a href="#red" style="background-color: #DF1A21; color: #FBE1A6" data-off-color="#FB6B58" title="Cherries &amp; Cream">Cherries &amp; Cream</a>
        <!-- https://kuler.adobe.com/#themeID/2111717 -->
        <a href="#blue" style="background-color: #063540; color: #E5D9CF" data-off-color="#176273" title="Blue Jeans">Blue Jeans</a>
        <!-- https://kuler.adobe.com/#themeID/2123634 -->
        <a href="#violet" style="background-color: #730240; color: #F2BC79" data-off-color="#BF1B39" title="Raspberry Sorbet">Raspberry Sorbet</a>
        <a href="#green" style="background-color: #3D4010; color: #CFD936" data-off-color="#575931" title="Olive Martini">Olive Martini</a>
        <!-- https://kuler.adobe.com/#themeID/110379 -->
        <a href="#steel" style="background-color: #6F6B79; color: #E1DEEB" data-off-color="#583736" title="Zoolander">Zoolander</a>
    </nav>

    <article id="WordClock">
        <section>
            <div>O</div>
            <div>N</div>
            <div>E</div>
            <div>T</div>
            <div>H</div>
            <div>R</div>
            <div>E</div>
            <div>E</div>
            <div>F</div>
            <div>I</div>
            <div>V</div>
            <div>E</div>
        </section>
        <section>
            <div>T</div>
            <div>W</div>
            <div>O</div>
            <div>F</div>
            <div>O</div>
            <div>U</div>
            <div>R</div>
            <div>S</div>
            <div>E</div>
            <div>V</div>
            <div>E</div>
            <div>N</div>
        </section>
        <section>
            <div>S</div>
            <div>I</div>
            <div>X</div>
            <div>E</div>
            <div>I</div>
            <div>G</div>
            <div>H</div>
            <div>T</div>
            <div>N</div>
            <div>I</div>
            <div>N</div>
            <div>E</div>
        </section>
        <section>
            <div>E</div>
            <div>L</div>
            <div>E</div>
            <div>V</div>
            <div>E</div>
            <div>N</div>
            <div>T</div>
            <div>W</div>
            <div>E</div>
            <div>L</div>
            <div>V</div>
            <div>E</div>
        </section>
        <section>
            <div>T</div>
            <div>E</div>
            <div>N</div>
            <div>T</div>
            <div>E</div>
            <div>E</div>
            <div>L</div>
            <div>F</div>
            <div>M</div>
            <div>T</div>
            <div>E</div>
            <div>N</div>
        </section>
        <section>
            <div>T</div>
            <div>W</div>
            <div>E</div>
            <div>N</div>
            <div>T</div>
            <div>Y</div>
            <div>T</div>
            <div>W</div>
            <div>E</div>
            <div>L</div>
            <div>V</div>
            <div>E</div>
        </section>
        <section>
            <div>T</div>
            <div>H</div>
            <div>I</div>
            <div>R</div>
            <div>T</div>
            <div>Y</div>
            <div>Z</div>
            <div>F</div>
            <div>O</div>
            <div>R</div>
            <div>T</div>
            <div>Y</div>
        </section>
        <section>
            <div>F</div>
            <div>I</div>
            <div>F</div>
            <div>T</div>
            <div>Y</div>
            <div>O</div>
            <div>’</div>
            <div>C</div>
            <div>L</div>
            <div>O</div>
            <div>C</div>
            <div>K</div>
        </section>
        <section>
            <div>O</div>
            <div>N</div>
            <div>E</div>
            <div>T</div>
            <div>H</div>
            <div>R</div>
            <div>E</div>
            <div>E</div>
            <div>F</div>
            <div>I</div>
            <div>V</div>
            <div>E</div>
        </section>
        <section>
            <div>T</div>
            <div>W</div>
            <div>O</div>
            <div>F</div>
            <div>O</div>
            <div>U</div>
            <div>R</div>
            <div>S</div>
            <div>E</div>
            <div>V</div>
            <div>E</div>
            <div>N</div>
        </section>
        <section>
            <div>S</div>
            <div>I</div>
            <div>X</div>
            <div>E</div>
            <div>I</div>
            <div>G</div>
            <div>H</div>
            <div>T</div>
            <div>N</div>
            <div>I</div>
            <div>N</div>
            <div>E</div>
        </section>
        <section>
            <div>E</div>
            <div>L</div>
            <div>E</div>
            <div>V</div>
            <div>E</div>
            <div>N</div>
            <div>X</div>
            <div>—</div>
            <div>T</div>
            <div>E</div>
            <div>E</div>
            <div>N</div>
        </section>
    </article>

    <footer>
        
    </footer>
</body>
</html>