MINI Sh3ll

<div id="example" class="section page hide">

    <h1>Examples</h1>

    <div id="box-button" class="box shadow">
        <h2>Buttons</h2>
        <a class="top-button" title="Show Source" data-code="button">
            <i class="fa fa-code"></i>
        </a>

        <style>
            #colored-button .btn { color: #fff; }
            #colored-button a, 
            #colored-button a:hover { background: #01BCFF; }
            #colored-button button,
            #colored-button button:hover { background: #1bb556; }
            #colored-button input,
            #colored-button input:hover { background: #ff4f0f; }
        </style>

        <p class="text-center">
            <a class="flat-buttons">Button A</a>
            <button class="flat-buttons">Button B</button>
            <input class="flat-buttons" type="submit" value="Button C">
        </p>

        <p id="colored-button" class="text-center">
            <a class="btn float-buttons">Button A</a>
            <button class="btn float-button-light">Button B</button>
            <input class="btn float-buttons" type="submit" value="Button C">
        </p>

        <script type="text/javascript">
            Waves.attach('.flat-buttons', ['waves-button']);
            Waves.attach('.float-buttons', ['waves-button', 'waves-float']);
            Waves.attach('.float-button-light', ['waves-button', 'waves-float', 'waves-light']);
        </script>
    </div>

    <div id="box-icon" class="box shadow">
        <h2>Icons</h2>
        <a class="top-button" title="Show Source" data-code="icon">
            <i class="fa fa-code"></i>
        </a>

        <style>
            #colored-icon i { color: #fff; }
            #colored-icon i:nth-child(1) { background: #ff6400; }
            #colored-icon i:nth-child(2) { background: #d54f38; }
            #colored-icon i:nth-child(3) { background: #eb4d7e; }
            #colored-icon i:nth-child(4) { background: #d138c8; }
            #colored-icon i:nth-child(5) { background: #bd73ff; }
            #colored-icon i:nth-child(6) { background: #0074d6; }
        </style>

        <p class="text-center">
            <i class="fa fa-bars flat-icon"></i>
            <i class="fa fa-bookmark flat-icon"></i>
            <i class="fa fa-calendar flat-icon"></i>
            <i class="fa fa-envelope flat-icon"></i>
            <i class="fa fa-exclamation flat-icon"></i>
            <i class="fa fa-folder flat-icon"></i>
        </p>

        <p id="colored-icon" class="text-center">
            <i class="fa fa-bars float-icon"></i>
            <i class="fa fa-bookmark float-icon-light"></i>
            <i class="fa fa-calendar float-icon"></i>
            <i class="fa fa-envelope float-icon-light"></i>
            <i class="fa fa-exclamation float-icon"></i>
            <i class="fa fa-folder float-icon-light"></i>
        </p>

        <script type="text/javascript">
            Waves.attach('.flat-icon', ['waves-circle']);
            Waves.attach('.float-icon', ['waves-circle', 'waves-float']);
            Waves.attach('.float-icon-light', ['waves-circle', 'waves-float', 'waves-light']);
        </script>

    </div>

    <div id="box-other" class="box shadow">
        <h2>DIVs &amp; Images</h2>
        <a  class="top-button" title="Show Source" data-code="other">
            <i class="fa fa-code"></i>
        </a>

        <div class="boxes flat-box">Flat Box</div>
        <div class="boxes float-box">Float Box</div>
        <div class="clear"></div>

        <p class="text-center">
            <img class="waves-image" src="https://farm2.staticflickr.com/1297/1091511802_2fb2451ecc_n.jpg">
        </p>

        <script type="text/javascript">
            Waves.attach('.flat-box', ['waves-block']);
            Waves.attach('.float-box', ['waves-block', 'waves-float']);
            Waves.attach('.waves-image');
        </script>

        <p class="text-center">
            Image Source: <a href="https://www.flickr.com/photos/aigle_dore/5238554034/" target="_blank">&copy; Moyan Brenn. Flickr</a>
        </p>
    </div>

    <div id="box-action" class="box shadow">
        <h2>Action/Event</h2>
        <a class="top-button" title="Show Source" data-code="action">
            <i class="fa fa-code"></i>
        </a>

        <p>Works fully with jQuery and JavaScript click event handlers, like <a href="http://hoxxep.github.io/Snarl" target="_blank">Snarl</a></p>

        <style>
            #snarl-demo {
                background:#04d654;
                color: #fff;
            }
        </style>

        <p class="text-center">
            <button id="snarl-demo">Click Me!</button>
        </p>

        <script type="text/javascript">
            Waves.attach('#snarl-demo', ['waves-button', 'waves-float']);

            Snarl.setDefaultOptions({
                timeout: 5000
            });

            $('#snarl-demo').click(function() {
                Snarl.addNotification({
                    title: 'Snarl Notification',
                    text: 'You clicked the Waves button!'
                });
            });
        </script>
    </div>
</div>