<commit_before><!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Tuktuk - Simple (but powerful) RWD Framework</title>
    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <!-- TUKTUK -->
    <link rel="stylesheet" href="stylesheets/css/tuktuk.layout.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.grid.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.flexbox.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.font.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.form.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.button.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.nav.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.table.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.list.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.widget.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.media.css">
    <!-- TUKTUK.THEME -->
    <link rel="stylesheet" href="stylesheets/css/tuktuk.theme.css">
    <!-- TUKTUK.WIDGETS -->
    <link rel="stylesheet" href="package/widgets/tuktuk.widget.icon.css">
    <link rel="stylesheet" href="package/widgets/tuktuk.widget.modal.css">
</head>

<body>
    <!-- ========================== HEADER ========================== -->
    <header class="bck darkest text color white">
        <div class="row ">
            <div class="column_3">
                <a href="http://tuktuk.tapquo.com" class="logo text normal color white">tuk<span class="text book">tuk</span></a>
            </div>
            <nav class="column_6 offset_3 text normal right">
                <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Ftuktuk.tapquo.com%2F&text=Tuktuk%20-%20Simple%20(but%20powerful)%20RWD%20Framework&tw_p=tweetbutton&url=http%3A%2F%2Ftuktuk.tapquo.com%2F"><span class="icon twitter"></span>Share</a>
                <a href="http://tuktuk.tapquo.com/download/tuktuk.0.3.zip" class="button small"><span class="icon download"></span>Download</a>
            </nav>
        </div>
    </header>


    <!-- ========================== LANDING ========================== -->
    <section class="landing bck dark text color white  center">
        <div class="row">
            <div class="column_10 offset_1">
                <h1 class="text normal">tuk<span class="text thin">tuk</span></h1>

                <h3 class="margin bottom">This isn't another frontend framework... is a way to create sites and extend them with <span class="text normal">your own style</span>.</h3>

                <a href="http://tuktuk.tapquo.com/download/tuktuk.0.3.zip" class="button large margin bottom"><span class="icon download"></span>Download <span class="text bold">tuk</span><span class="text normal">tuk</span></a>

                <nav >
                    <a href="https://github.com/soyjavi/tuktuk" target="_blank" class="margin_right text color white"><span class="icon github"></span>GitHub Project</a>
                    <span class="margin_left"><span class="icon cube"></span> Version 0.3</span>
                </nav>
            </div>
        </div>
    </section>


    <!-- ========================== FEATURES ========================== -->
    <section class="bck light features">
        <div class="row text center margin_bottom">
            <div class="column_8 offset_2">
                <h1 class="text color theme">A new kid on the block</h1>
                <h3 class="text thin">
                    Not trying to be competence of Bootstrap or Foundation, they play in another league. Just worry to create responsive sites easily and fully extensible.
                </h3>
            </div>
        </div>
        <div class="row text center book margin_top">

            <div class="column_3">
                <h1 class="icon css3 text color theme"></h1>
                <h5>CSS3 Powered</h5>
                <small>The premise is to use as much as possible the features of the latest CSS specification. Don't try to use tuktuk in your hated IE6.</small>
            </div>
            <div class="column_3">
                <h1 class="icon paper-plane text color theme"></h1>
                <h5>Lightweight & fast</h5>
                <small>You don't want to carry heavy stylesheets that the only thing they get is a slow loading site. Tuktuk makes it easy, weighs 15kb.</small>
            </div>
            <div class="column_3">
                <h1 class="icon cube text color theme"></h1>
                <h5>Object Oriented CSS</h5>
                <small>The purpose is to encourage code reuse and faster and more efficient stylesheets that are easier to add to and maintain.</small>
            </div>
            <div class="column_3">
                <h1 class="icon github text color theme"></h1>
                <h5>Community Project</h5>
                <small>Each new line of code is welcome, I hope that developers and restless minds help me to improve this humble project day by day.</small>
            </div>
        </div>
    </section>


    <!-- ========================== COLUMNS ========================== -->
    <section class="bck lightest text center">
        <div class="row ">
            <div class="column_10 offset_1 margin_bottom">
                <h1 class="text color theme">Turn it up to 12 columns</h1>
                <h3 class="text thin">Tuktuk is divided horizontally into a series of 12 columns, and vertically into rows. 12 columns divide nicely into equal columns of two, three, four, or six columns.</h3>
             </div>
        </div>
        <div class="row margin_bottom">
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
        </div>
        <div class="row margin_bottom">
            <div class="column_4 bck light padding">4</div>
            <div class="column_4 bck light padding">4</div>
            <div class="column_4 bck light padding">4</div>
        </div>
        <div class="row margin_bottom">
            <div class="column_4 bck light padding ">4</div>
            <div class="column_8 bck light padding">8</div>
        </div>
        <div class="row margin_bottom">
            <div class="column_6 bck light padding">6</div>
            <div class="column_6 bck light padding">6</div>
        </div>
        <div class="row">
            <div class="column_12 bck light padding">12</div>
        </div>
    </section>


    <!-- ========================== OFFSETS ========================== -->
    <section class="bck light text center">
        <div class="row ">
            <div class="column_10 offset_1 margin_bottom">
                <h1 class="text color theme">Offsetting columns</h1>
                <h3 class="text thin">You have the option to offset a column, which should make life all the bit easier if you you need to add an extra bit of space between columns.</h3>
             </div>
        </div>

        <div class="row margin_bottom">
            <div class="column_4 bck lightest padding">4</div>
            <div class="column_4 offset_4 bck dark text color white padding">4 with 4 offset</div>
        </div>
        <div class="row margin_bottom">
            <div class="column_3 offset_3 bck dark text color white padding">3 with 3 offset</div>
            <div class="column_3 offset_3 bck dark text color white padding">3 with 3 offset</div>
        </div>
        <div class="row">
            <div class="column_8 offset_4 bck dark text color white padding">8 with 4 offset</div>
        </div>
    </section>


    <!-- ========================== HEADINGS ========================== -->
    <section class="bck lightest">
        <div class="row margin_bottom">
            <div class="column_10 offset_1 text center">
                <h1 class="text color theme">Headings</h1>
                <h3 class="text thin">You can use headings in a manner optimized for each device.</h3>
             </div>
         </div>

        <div class="row">
            <h1 class="column_2">H1</h1>
            <h2 class="column_2">H2</h2>
            <h3 class="column_2">H3</h3>
            <h4 class="column_2">H4</h4>
            <h5 class="column_2">H5</h5>
            <h6 class="column_2">H6</h6>
        </div>
    </section>


    <!-- ========================== BUTTONS ========================== -->
    <section class="bck light">
        <div class="row ">
            <div class="column_10 offset_1 text center margin_bottom">
                <h1 class="text color theme">Buttons</h1>
                <h3 class="text thin">a site without buttons? Tuktuk have a gallery of styles and sizes that will be enough to interact with your site.</h3>
             </div>
        </div>
        <div class="row">
            <div class="column_8 ">
                  <a href="#" class="button large">Large</a>
                  <a href="#" class="button ">Normal</a>
                  <a href="#" class="button secondary">Secondary</a>
                  <a href="#" class="button accept">Accept</a>
                  <a href="#" class="button cancel">Cancel</a>
                  <a href="#" class="button small">Small</a>
                  <a href="#" class="button tiny">Tiny</a>
              </div>
            <div class="column_4">
                <a href="#" class="button anchor margin_top">Anchor</a>
            </div>
        </div>
        <div class="row">
            <div class="column_8 ">
                  <a href="#" class="button large"><span class="icon twitter"></span>Large</a>
                  <a href="#" class="button "><span class="icon facebook"></span>Normal</a>
                  <a href="#" class="button secondary"><span class="icon dribbble"></span>Secondary</a>
                  <a href="#" class="button accept"><span class="icon accept"></span>Accept</a>
                  <a href="#" class="button cancel"><span class="icon cancel"></span>Cancel</a>
                  <a href="#" class="button small"><span class="icon wordpress"></span>Small</a>
                  <a href="#" class="button tiny"><span class="icon github"></span>Tiny</a>
              </div>
            <div class="column_4">
                <a href="#" class="button anchor margin_top"><span class="icon accept"></span>Anchor</a>
            </div>
        </div>
    </section>


    <!-- ========================== LISTS ========================== -->
    <section>
        <div class="row">
            <div class="column_10 offset_1 text center margin_bottom">
                <h1 class="text color theme">Lists</h1>
                <h3 class="text thin">If the buttons are important, so are the lists. Tuktuk gives a group of styles easily usable.</h3>
             </div>
        </div>

        <div class="row">
            <div class="column_3">
                <h4>Normal Bullets </h4>
                <ul>
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                    <li>
                        Donec ullamcorper nulla non metus auctor fringilla.
                        <ul>
                            <li>Aenean eu leo quam.</li>
                            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
                            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
                        </ul>
                    </li>
                    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ul>
            </div>

            <div class="column_3">
                <h4>Ordered Bullets</h4>
                <ol class="square">
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                    <li>
                        Donec ullamcorper nulla non metus auctor fringilla.
                        <ol>
                            <li>Aenean eu leo quam.</li>
                            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
                            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
                        </ol>
                    </li>
                    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ol>
            </div>

            <div class="column_3">
                <h4>Circle Bullets</h4>
                <ul class="circle">
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                    <li>
                        Donec ullamcorper nulla non metus auctor fringilla.
                        <ul>
                            <li>Aenean eu leo quam.</li>
                            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
                            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
                        </ul>
                    </li>
                    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ul>

            </div>

            <div class="column_3">
                <h4>Square Bullets</h4>
                <ul class="square">
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                    <li>
                        Donec ullamcorper nulla non metus auctor fringilla.
                        <ul>
                            <li>Aenean eu leo quam.</li>
                            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
                            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
                        </ul>
                    </li>
                    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ul>
            </div>
        </div>
    </section>


    <!-- ========================== FORMS & TABLES ========================== -->
    <section class="bck light">
         <div class="row margin_bottom">
                <div class="column_10 offset_1 text center">
                <h1 class="text color theme">Forms & Tables</h1>
                <h3 class="text thin">Get that forms & lists looks equally regardless of device and browser.</h3>
             </div>
         </div>

         <div class="row">
                <div class="column_6">
                    <div id="stylized-form">
                        <form id="form" name="form" method="post" action="index.html">
                            <label>Label example</label>
                            <input type="text" name="name" id="name" />
                            <fieldset>
                                <label>Required:<span>on .error class</span></label>
                                <input type="text" name="name" id="name" required />
                            </fieldset>

                            <fieldset>
                                <label>This is a Drop down:<span>Please select one option</span></label>
                                <select id="dropdown">
                                    <option>Select something...</option>
                                    <option>Drop down 01</option>
                                    <option>Drop down 02</option>
                                </select>
                            </fieldset>
                            <fieldset>
                                <label>Feedback:<span >You can write your comments here</span></label>
                                <textarea></textarea>
                            </fieldset>

                            <fieldset>
                                <label>Radio buttons:</label>
                                <input type="radio" name="radio1" /><span>Yes</span>
                                <input type="radio" name="radio2" /><span>No</span>
                            </fieldset>

                            <fieldset class="margin_bottom">
                                <label>Check Boxes:</label>
                                <input type="checkbox" name="radio1" /><span>One</span>
                                <input type="checkbox" name="radio2" /><span>Two</span>
                            </fieldset>

                            <button class="accept margin_right"><span class="icon accept"></span>Send</button>
                            <button class="cancel"><span class="icon cancel"></span>Cancel</button>
                        </form>
                    </div>
                </div>
                <div class="column_6">
                    <table>
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th>Category</th>
                                <th>Version</th>
                                <th >Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>iPhone</td>
                                <td>Mobile</td>
                                <td>5</td>
                                <td class="text right">$ 699</td>
                            </tr>
                            <tr>
                                <td>iPad Mini</td>
                                <td>Tablet</td>
                                <td>1</td>
                                <td class="text right">$ 399</td>
                            </tr>
                            <tr>
                                <td>iPad</td>
                                <td>Tablet</td>
                                <td>4</td>
                                <td class="text right">$ 499</td>
                            </tr>
                            <tr>
                                <td>Macbook Air 13"</td>
                                <td>Laptop</td>
                                <td>2</td>
                                <td class="text right">$ 1299</td>
                            </tr>
                            <tr>
                                <td>Macbook Pro 15"</td>
                                <td>Laptop</td>
                                <td class="highlight">Retina</td>
                                <td class="text right">$ 2299</td>
                            </tr>
                        </tbody>
                    </table>
                    In TukTuk I've included some styling for table elements like Table Headings (TH) and the option to have odd and even table rows as well as the ability to highlight a cell in your table..!
                </div>
            </div>
    </section>

    <!-- ========================== Show & hide ========================== -->
    <section class="bck lightest ">
        <div class="row margin_bottom">
            <div class="column_10 offset_1 text center ">
                <h1 class="text color theme">Show & Hide</h1>
                <h3 class="text thin">There are times when you may need to only show something on a desktop and not a tablet & phone or the reverse. I've done the work for you with some extra classes to hide & show content.</h3>
             </div>
        </div>

        <div class="row text center">
            <div class="column_4">
                <img src="images/laptop.png" class="responsive show-screen"/>
                <img src="images/laptop.png" class="responsive hide-screen" style="opacity:0.1;"/>
            </div>
            <div class="column_4">
                <img src="images/tablet.png" class="responsive show-tablet"/>
                <img src="images/tablet.png" class="responsive hide-tablet" style="opacity:0.1;"/>
            </div>
            <div class="column_4">
                <img src="images/smartphone.png" class="responsive show-phone"/>
                <img src="images/smartphone.png" class="responsive hide-phone" style="opacity:0.1;"/>
            </div>
        </div>

        <div class="row margin_top">
            <table class="text align center">
                <tbody>
                    <tr>
                        <td>hide-screen</td>
                        <td>hide-tablet</td>
                        <td>hide-phone</td>
                    </tr>
                    <tr>
                        <td>show-screen</td>
                        <td>show-tablet</td>
                        <td>show-phone</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <!-- ========================== Typography ========================== -->
    <section class="bck light">
        <div class="row ">
            <div class="column_10 offset_1 text center margin_bottom">
                <h1 class="text color theme">Typography</h1>
                <h3 class="text thin">Discover how you can play with the style of any element using the style inheritance with ooCSS.</h3>
             </div>
        </div>

        <div class="row">
            <div class="column_3">
                <h4>Color (.text.color)</h4>
                <h6>color normal</h6>
                <h6 class="text color theme">color theme</h6>
                <h6 class="text color secondary">color secondary</h6>
                <h6 class="text color accept">color accept</h6>
                <h6 class="text color cancel">color cancel</h6>
            </div>
            <div class="column_3">
                <h4>Style (.text)</h4>
                <h6 class="text thin">thin</h6>
                <h6 class="text book">book</h6>
                <h6 class="text normal">normal</h6>
                <h6 class="text bold">bold</h6>
                <h6 class="text italic">italic</h6>
                <h6 class="text underline">underline</h6>
            </div>
            <div class="column_3">
                <h4>Alignment (.text)</h4>
                <h6 class="text left">left</h6>
                <h6 class="text right">right</h6>
                <h6 class="text center">center</h6>
                <h6 class="text justify">justify</h6>
            </div>
            <div class="column_3">
                <h4>Background (.bck)</h4>
                <h6>normal</h6>
                <h6 class="bck lightest">lightest</h6>
                <h6 class="bck light">light</h6>
                <h6 class="bck dark text color white">dark</h6>
                <h6 class="bck darkest text color white">darkest</h6>

                <h6 class="bck theme">theme</h6>
                <h6 class="bck accept">accept</h6>
                <h6 class="bck cancel">cancel</h6>
            </div>
        </div>
    </section>

    <!-- ========================== Navigation ========================== -->
    <section class="bck lightest">
        <div class="row ">
            <div class="column_10 offset_1 text center">
                <h1 class="text color theme">Navigation</h1>
                <h3 class="text thin">A navigation menu that works in a desktop or a mobile?</h3>
             </div>
        </div>
    </section>
    <section class="bck light underline navigation ">
        <div class="row text center">
            <nav class="group text bold">
                <a href="#" class="active"><span class="icon folder"></span>Slides</a>
                <a href="#"><span class="icon picture"></span>Themes</a>
                <a href="#"><span class="icon settings"></span>Applications</a>
                <a href="#"><span class="icon users"></span>Friends</a>
                <a href="#"><span class="icon star-full"></span>Favorites</a>
            </nav>
        </div>
    </section>


    <!-- ========================== Widgets ========================== -->
    <section class="bck lightest">
        <div class="row ">
            <div class="column_10 offset_1 text center margin_bottom">
                <h1 class="text color theme">Widgets</h1>
                <h3 class="text thin">Isn't enough? Take a look how you can extending functionality in your projects.</h3>
             </div>
        </div>

        <div class="row">
            <div class="column_6">
                <h4>tuktuk.widget.<span class="text bold">icon</span>.css</h4>
                <div class="margin_bottom">A embeded and small library of icons in CSS.</div>
                <table>

                    <tbody>
                        <tr>
                            <td class="text center">
                                <span class="icon user"></span>
                                <span class="icon search"></span>
                                <span class="icon accept"></span>
                                <span class="icon cancel"></span>
                                <span class="icon locked"></span>
                                <span class="icon cog"></span>
                                <span class="icon tag"></span>

                                <span class="icon share"></span>
                                <span class="icon twitter"></span>
                                <span class="icon facebook"></span>
                                <span class="icon github"></span>
                                <span class="icon wordpress"></span>
                                <span class="icon dribbble"></span>

                                <span class="icon html5"></span>
                                <span class="icon css3"></span>
                                <span class="icon chrome"></span>
                                <span class="icon firefox"></span>
                                <span class="icon IE"></span>
                                <span class="icon opera"></span>
                                <span class="icon safari"></span>

                                <span class="icon heart"></span>
                                <span class="icon star"></span>
                                <span class="icon paper-plane"></span>
                                <span class="icon cube"></span>
                                <span class="icon upload"></span>
                                <span class="icon download"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="column_6">
                <h4>tuktuk.widget.<span class="text bold">modal</span> (.css & .js)</h4>
                <div class="margin_bottom">Modal notifications for any device.</div>
                <div class="row">
                    <button class="column_2" data-tuktuk-modal="default_modal">Default</button>
                    <button class="column_2 cancel" data-tuktuk-modal="small_modal">Small</button>
                    <button class="column_2 accept" data-tuktuk-modal="big_modal">Big</button>
                </div>

            </div>
        </div>
    </section>

    <!-- ========================== MODALS ========================== -->

    <div id="default_modal" data-tuktuk="modal">
        <h5 class="text bold">Default modal window</h5>
        <hr/>
        <div class="margin_bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.</div>
        <button data-action="close" class="button">Cancel</button>
    </div>

    <div id="small_modal" data-tuktuk="modal" class="small">
        <h5 class="text bold">Small modal window</h5>
        <hr/>
        <div class="margin_bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.</div>
        <button data-action="close" class="button anchor cancel">Cancel</button>
    </div>

    <div id="big_modal" data-tuktuk="modal" class="big">
        <h5 class="text bold">Big modal window</h5>
        <hr/>
        <div class="margin_bottom text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.</div>
        <button data-action="close" class="button large accept">Cancel</button>
    </div>

    <!-- ========================== AUTHOR ========================== -->
    <section class="bck dark">
        <div class="row margin_bottom">
            <div class="column_10 offset_1 text center color white">
                <h1>Author</h1>
                <h3 class="text thin"><NAME> is the CTO and CO-founder of <a href="http://tapquo.com">tapquo</a>. A restless mind that always strives for continuous improvement, able to create frameworks like <a href="http://lungo.tapquo.com">Lungo</a>, <a href="http://quojs.tapquo.com">QuoJS</a>, <a href="http://monocle.tapquo.com">Monocle</a> used by thousands of developers around the world.</h3>
             </div>
         </div>

        <div class="row margin_bottom">
            <div class="column_4 offset_4 text center white">
                <img src="http://tapquo.com/images/social/soyjavi.jpeg" class="responsive rounded margin_bottom"/>
                <br/>
                <a href="https://twitter.com/soyjavi" class="twitter-follow-button " data-show-count="true" data-dnt="true">Follow @soyjavi</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </div>
        </div>
    </section>


    <!-- ========================== FOOTER ========================== -->
    <footer class="bck darkest text color white">
        <div class="row margin_top margin_bottom">
            <div class="column_4">
                <p class="text bold">Made by TAPQUO</p>
                <small>We are a mobile user experiences company located in Bilbao, Spain. We've put over 12 years of experience building products.</small>
            </div>
            <div class="column_4">
                <p class="text bold">Join the team!</p>
                <small>
                    Do you want to be part of our team? Let us know how you're!
                    <br/>
                    <a href="mailto:<EMAIL>?subject=Join the team!">Get in touch →​</a>
                </small>
            </div>
            <div class="column_4">
                <p class="text bold">Connect with me in...</p>
                <h3>
                    <a href="https://twitter.com/soyjavi" class="icon twitter"></a>
                    <a href="http://dribbble.com/soyjavi" class="icon dribbble"></a>
                    <a href="https://github.com/soyjavi" class="icon github"></a>
                    <a href="https://www.facebook.com/javi.jimenez.villar" class="icon facebook"></a>
                </h3>
            </div>
        </div>
    </footer>

    <!-- TUKTUK.WIDGETS -->
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="package/widgets/tuktuk.widget.modal.js"></script>

</body>
</html>
<commit_msg>Improving the main copies<commit_after><!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Tuktuk - Simple (but powerful) RWD Framework</title>
    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <!-- TUKTUK -->
    <link rel="stylesheet" href="stylesheets/css/tuktuk.layout.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.grid.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.flexbox.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.font.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.form.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.button.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.nav.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.table.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.list.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.widget.css">
    <link rel="stylesheet" href="stylesheets/css/tuktuk.media.css">
    <!-- TUKTUK.THEME -->
    <link rel="stylesheet" href="stylesheets/css/tuktuk.theme.css">
    <!-- TUKTUK.WIDGETS -->
    <link rel="stylesheet" href="package/widgets/tuktuk.widget.icon.css">
    <link rel="stylesheet" href="package/widgets/tuktuk.widget.modal.css">
</head>

<body>
    <!-- ========================== HEADER ========================== -->
    <header class="bck darkest text color white">
        <div class="row ">
            <div class="column_3">
                <a href="http://tuktuk.tapquo.com" class="logo text normal color white">tuk<span class="text book">tuk</span></a>
            </div>
            <nav class="column_6 offset_3 text normal right">
                <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Ftuktuk.tapquo.com%2F&text=Tuktuk%20-%20Simple%20(but%20powerful)%20RWD%20Framework&tw_p=tweetbutton&url=http%3A%2F%2Ftuktuk.tapquo.com%2F"><span class="icon twitter"></span>Share</a>
                <a href="http://tuktuk.tapquo.com/download/tuktuk.0.3.zip" class="button small"><span class="icon download"></span>Download</a>
            </nav>
        </div>
    </header>


    <!-- ========================== LANDING ========================== -->
    <section class="landing bck dark text color white  center">
        <div class="row">
            <div class="column_10 offset_1">
                <h1 class="text normal">tuk<span class="text thin">tuk</span></h1>

                <h3 class="margin bottom">This isn't another frontend framework... it's a way to create sites and extend them with <span class="text normal">your own style</span>.</h3>

                <a href="http://tuktuk.tapquo.com/download/tuktuk.0.3.zip" class="button large margin bottom"><span class="icon download"></span>Download <span class="text bold">tuk</span><span class="text normal">tuk</span></a>

                <nav >
                    <a href="https://github.com/soyjavi/tuktuk" target="_blank" class="margin_right text color white"><span class="icon github"></span>GitHub Project</a>
                    <span class="margin_left"><span class="icon cube"></span> Version 0.3</span>
                </nav>
            </div>
        </div>
    </section>


    <!-- ========================== FEATURES ========================== -->
    <section class="bck light features">
        <div class="row text center margin_bottom">
            <div class="column_8 offset_2">
                <h1 class="text color theme">A new kid on the block</h1>
                <h3 class="text thin">
                    Not trying to compete with Bootstrap or Foundation because they play in another league. Just worry about creating responsive and fully extensible sites easily.
                </h3>
            </div>
        </div>
        <div class="row text center book margin_top">

            <div class="column_3">
                <h1 class="icon css3 text color theme"></h1>
                <h5>CSS3 Powered</h5>
                <small>The premise is to use as much as possible the features of the latest CSS specification. Don't try to use Tuktuk in your hated IE6.</small>
            </div>
            <div class="column_3">
                <h1 class="icon paper-plane text color theme"></h1>
                <h5>Lightweight & fast</h5>
                <small>You don't want to carry heavy stylesheets that only make for a slow loading site. Tuktuk is lightweight at just 15kb.</small>
            </div>
            <div class="column_3">
                <h1 class="icon cube text color theme"></h1>
                <h5>Object Oriented CSS</h5>
                <small>The purpose is to encourage code reuse plus faster and more efficient stylesheets that are easier to add to and maintain.</small>
            </div>
            <div class="column_3">
                <h1 class="icon github text color theme"></h1>
                <h5>Community Project</h5>
                <small>Each new line of code is welcomed, I hope that developers and restless minds help me improve this humble project day by day.</small>
            </div>
        </div>
    </section>


    <!-- ========================== COLUMNS ========================== -->
    <section class="bck lightest text center">
        <div class="row ">
            <div class="column_10 offset_1 margin_bottom">
                <h1 class="text color theme">Turn it up to 12 columns</h1>
                <h3 class="text thin">Tuktuk is divided horizontally into a series of 12 columns, and vertically into rows. 12 columns divide nicely into equal columns of two, three, four, or six columns.</h3>
             </div>
        </div>
        <div class="row margin_bottom">
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
            <div class="column_1 bck light padding_top padding_bottom">1</div>
        </div>
        <div class="row margin_bottom">
            <div class="column_4 bck light padding">4</div>
            <div class="column_4 bck light padding">4</div>
            <div class="column_4 bck light padding">4</div>
        </div>
        <div class="row margin_bottom">
            <div class="column_4 bck light padding ">4</div>
            <div class="column_8 bck light padding">8</div>
        </div>
        <div class="row margin_bottom">
            <div class="column_6 bck light padding">6</div>
            <div class="column_6 bck light padding">6</div>
        </div>
        <div class="row">
            <div class="column_12 bck light padding">12</div>
        </div>
    </section>


    <!-- ========================== OFFSETS ========================== -->
    <section class="bck light text center">
        <div class="row ">
            <div class="column_10 offset_1 margin_bottom">
                <h1 class="text color theme">Offsetting columns</h1>
                <h3 class="text thin">You have the option to offset a column, which should make life all the bit easier if you you need to add an extra bit of space between columns.</h3>
             </div>
        </div>

        <div class="row margin_bottom">
            <div class="column_4 bck lightest padding">4</div>
            <div class="column_4 offset_4 bck dark text color white padding">4 with 4 offset</div>
        </div>
        <div class="row margin_bottom">
            <div class="column_3 offset_3 bck dark text color white padding">3 with 3 offset</div>
            <div class="column_3 offset_3 bck dark text color white padding">3 with 3 offset</div>
        </div>
        <div class="row">
            <div class="column_8 offset_4 bck dark text color white padding">8 with 4 offset</div>
        </div>
    </section>


    <!-- ========================== HEADINGS ========================== -->
    <section class="bck lightest">
        <div class="row margin_bottom">
            <div class="column_10 offset_1 text center">
                <h1 class="text color theme">Headings</h1>
                <h3 class="text thin">You can use headings in a manner optimized for each device.</h3>
             </div>
         </div>

        <div class="row">
            <h1 class="column_2">H1</h1>
            <h2 class="column_2">H2</h2>
            <h3 class="column_2">H3</h3>
            <h4 class="column_2">H4</h4>
            <h5 class="column_2">H5</h5>
            <h6 class="column_2">H6</h6>
        </div>
    </section>


    <!-- ========================== BUTTONS ========================== -->
    <section class="bck light">
        <div class="row ">
            <div class="column_10 offset_1 text center margin_bottom">
                <h1 class="text color theme">Buttons</h1>
                <h3 class="text thin">a site without buttons? Tuktuk have a gallery of styles and sizes that will be enough to interact with your site.</h3>
             </div>
        </div>
        <div class="row">
            <div class="column_8 ">
                  <a href="#" class="button large">Large</a>
                  <a href="#" class="button ">Normal</a>
                  <a href="#" class="button secondary">Secondary</a>
                  <a href="#" class="button accept">Accept</a>
                  <a href="#" class="button cancel">Cancel</a>
                  <a href="#" class="button small">Small</a>
                  <a href="#" class="button tiny">Tiny</a>
              </div>
            <div class="column_4">
                <a href="#" class="button anchor margin_top">Anchor</a>
            </div>
        </div>
        <div class="row">
            <div class="column_8 ">
                  <a href="#" class="button large"><span class="icon twitter"></span>Large</a>
                  <a href="#" class="button "><span class="icon facebook"></span>Normal</a>
                  <a href="#" class="button secondary"><span class="icon dribbble"></span>Secondary</a>
                  <a href="#" class="button accept"><span class="icon accept"></span>Accept</a>
                  <a href="#" class="button cancel"><span class="icon cancel"></span>Cancel</a>
                  <a href="#" class="button small"><span class="icon wordpress"></span>Small</a>
                  <a href="#" class="button tiny"><span class="icon github"></span>Tiny</a>
              </div>
            <div class="column_4">
                <a href="#" class="button anchor margin_top"><span class="icon accept"></span>Anchor</a>
            </div>
        </div>
    </section>


    <!-- ========================== LISTS ========================== -->
    <section>
        <div class="row">
            <div class="column_10 offset_1 text center margin_bottom">
                <h1 class="text color theme">Lists</h1>
                <h3 class="text thin">If the buttons are important, so are the lists. Tuktuk gives a group of styles easily usable.</h3>
             </div>
        </div>

        <div class="row">
            <div class="column_3">
                <h4>Normal Bullets </h4>
                <ul>
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                    <li>
                        Donec ullamcorper nulla non metus auctor fringilla.
                        <ul>
                            <li>Aenean eu leo quam.</li>
                            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
                            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
                        </ul>
                    </li>
                    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ul>
            </div>

            <div class="column_3">
                <h4>Ordered Bullets</h4>
                <ol class="square">
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                    <li>
                        Donec ullamcorper nulla non metus auctor fringilla.
                        <ol>
                            <li>Aenean eu leo quam.</li>
                            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
                            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
                        </ol>
                    </li>
                    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ol>
            </div>

            <div class="column_3">
                <h4>Circle Bullets</h4>
                <ul class="circle">
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                    <li>
                        Donec ullamcorper nulla non metus auctor fringilla.
                        <ul>
                            <li>Aenean eu leo quam.</li>
                            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
                            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
                        </ul>
                    </li>
                    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ul>

            </div>

            <div class="column_3">
                <h4>Square Bullets</h4>
                <ul class="square">
                    <li>Cras mattis consectetur purus sit amet fermentum.</li>
                    <li>
                        Donec ullamcorper nulla non metus auctor fringilla.
                        <ul>
                            <li>Aenean eu leo quam.</li>
                            <li>Pellentesque ornare sem lacinia quam venenatis vestibulum.</li>
                            <li>Nullam quis risus eget urna mollis ornare vel eu leo.</li>
                        </ul>
                    </li>
                    <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
                </ul>
            </div>
        </div>
    </section>


    <!-- ========================== FORMS & TABLES ========================== -->
    <section class="bck light">
         <div class="row margin_bottom">
                <div class="column_10 offset_1 text center">
                <h1 class="text color theme">Forms & Tables</h1>
                <h3 class="text thin">Get that forms & lists looks equally regardless of device and browser.</h3>
             </div>
         </div>

         <div class="row">
                <div class="column_6">
                    <div id="stylized-form">
                        <form id="form" name="form" method="post" action="index.html">
                            <label>Label example</label>
                            <input type="text" name="name" id="name" />
                            <fieldset>
                                <label>Required:<span>on .error class</span></label>
                                <input type="text" name="name" id="name" required />
                            </fieldset>

                            <fieldset>
                                <label>This is a Drop down:<span>Please select one option</span></label>
                                <select id="dropdown">
                                    <option>Select something...</option>
                                    <option>Drop down 01</option>
                                    <option>Drop down 02</option>
                                </select>
                            </fieldset>
                            <fieldset>
                                <label>Feedback:<span >You can write your comments here</span></label>
                                <textarea></textarea>
                            </fieldset>

                            <fieldset>
                                <label>Radio buttons:</label>
                                <input type="radio" name="radio1" /><span>Yes</span>
                                <input type="radio" name="radio2" /><span>No</span>
                            </fieldset>

                            <fieldset class="margin_bottom">
                                <label>Check Boxes:</label>
                                <input type="checkbox" name="radio1" /><span>One</span>
                                <input type="checkbox" name="radio2" /><span>Two</span>
                            </fieldset>

                            <button class="accept margin_right"><span class="icon accept"></span>Send</button>
                            <button class="cancel"><span class="icon cancel"></span>Cancel</button>
                        </form>
                    </div>
                </div>
                <div class="column_6">
                    <table>
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th>Category</th>
                                <th>Version</th>
                                <th >Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>iPhone</td>
                                <td>Mobile</td>
                                <td>5</td>
                                <td class="text right">$ 699</td>
                            </tr>
                            <tr>
                                <td>iPad Mini</td>
                                <td>Tablet</td>
                                <td>1</td>
                                <td class="text right">$ 399</td>
                            </tr>
                            <tr>
                                <td>iPad</td>
                                <td>Tablet</td>
                                <td>4</td>
                                <td class="text right">$ 499</td>
                            </tr>
                            <tr>
                                <td>Macbook Air 13"</td>
                                <td>Laptop</td>
                                <td>2</td>
                                <td class="text right">$ 1299</td>
                            </tr>
                            <tr>
                                <td>Macbook Pro 15"</td>
                                <td>Laptop</td>
                                <td class="highlight">Retina</td>
                                <td class="text right">$ 2299</td>
                            </tr>
                        </tbody>
                    </table>
                    In TukTuk I've included some styling for table elements like Table Headings (TH) and the option to have odd and even table rows as well as the ability to highlight a cell in your table..!
                </div>
            </div>
    </section>

    <!-- ========================== Show & hide ========================== -->
    <section class="bck lightest ">
        <div class="row margin_bottom">
            <div class="column_10 offset_1 text center ">
                <h1 class="text color theme">Show & Hide</h1>
                <h3 class="text thin">There are times when you may need to only show something on a desktop and not a tablet & phone or the reverse. I've done the work for you with some extra classes to hide & show content.</h3>
             </div>
        </div>

        <div class="row text center">
            <div class="column_4">
                <img src="images/laptop.png" class="responsive show-screen"/>
                <img src="images/laptop.png" class="responsive hide-screen" style="opacity:0.1;"/>
            </div>
            <div class="column_4">
                <img src="images/tablet.png" class="responsive show-tablet"/>
                <img src="images/tablet.png" class="responsive hide-tablet" style="opacity:0.1;"/>
            </div>
            <div class="column_4">
                <img src="images/smartphone.png" class="responsive show-phone"/>
                <img src="images/smartphone.png" class="responsive hide-phone" style="opacity:0.1;"/>
            </div>
        </div>

        <div class="row margin_top">
            <table class="text align center">
                <tbody>
                    <tr>
                        <td>hide-screen</td>
                        <td>hide-tablet</td>
                        <td>hide-phone</td>
                    </tr>
                    <tr>
                        <td>show-screen</td>
                        <td>show-tablet</td>
                        <td>show-phone</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>

    <!-- ========================== Typography ========================== -->
    <section class="bck light">
        <div class="row ">
            <div class="column_10 offset_1 text center margin_bottom">
                <h1 class="text color theme">Typography</h1>
                <h3 class="text thin">Discover how you can play with the style of any element using the style inheritance with ooCSS.</h3>
             </div>
        </div>

        <div class="row">
            <div class="column_3">
                <h4>Color (.text.color)</h4>
                <h6>color normal</h6>
                <h6 class="text color theme">color theme</h6>
                <h6 class="text color secondary">color secondary</h6>
                <h6 class="text color accept">color accept</h6>
                <h6 class="text color cancel">color cancel</h6>
            </div>
            <div class="column_3">
                <h4>Style (.text)</h4>
                <h6 class="text thin">thin</h6>
                <h6 class="text book">book</h6>
                <h6 class="text normal">normal</h6>
                <h6 class="text bold">bold</h6>
                <h6 class="text italic">italic</h6>
                <h6 class="text underline">underline</h6>
            </div>
            <div class="column_3">
                <h4>Alignment (.text)</h4>
                <h6 class="text left">left</h6>
                <h6 class="text right">right</h6>
                <h6 class="text center">center</h6>
                <h6 class="text justify">justify</h6>
            </div>
            <div class="column_3">
                <h4>Background (.bck)</h4>
                <h6>normal</h6>
                <h6 class="bck lightest">lightest</h6>
                <h6 class="bck light">light</h6>
                <h6 class="bck dark text color white">dark</h6>
                <h6 class="bck darkest text color white">darkest</h6>

                <h6 class="bck theme">theme</h6>
                <h6 class="bck accept">accept</h6>
                <h6 class="bck cancel">cancel</h6>
            </div>
        </div>
    </section>

    <!-- ========================== Navigation ========================== -->
    <section class="bck lightest">
        <div class="row ">
            <div class="column_10 offset_1 text center">
                <h1 class="text color theme">Navigation</h1>
                <h3 class="text thin">A navigation menu that works in a desktop or a mobile?</h3>
             </div>
        </div>
    </section>
    <section class="bck light underline navigation ">
        <div class="row text center">
            <nav class="group text bold">
                <a href="#" class="active"><span class="icon folder"></span>Slides</a>
                <a href="#"><span class="icon picture"></span>Themes</a>
                <a href="#"><span class="icon settings"></span>Applications</a>
                <a href="#"><span class="icon users"></span>Friends</a>
                <a href="#"><span class="icon star-full"></span>Favorites</a>
            </nav>
        </div>
    </section>


    <!-- ========================== Widgets ========================== -->
    <section class="bck lightest">
        <div class="row ">
            <div class="column_10 offset_1 text center margin_bottom">
                <h1 class="text color theme">Widgets</h1>
                <h3 class="text thin">Isn't enough? Take a look how you can extending functionality in your projects.</h3>
             </div>
        </div>

        <div class="row">
            <div class="column_6">
                <h4>tuktuk.widget.<span class="text bold">icon</span>.css</h4>
                <div class="margin_bottom">A embeded and small library of icons in CSS.</div>
                <table>

                    <tbody>
                        <tr>
                            <td class="text center">
                                <span class="icon user"></span>
                                <span class="icon search"></span>
                                <span class="icon accept"></span>
                                <span class="icon cancel"></span>
                                <span class="icon locked"></span>
                                <span class="icon cog"></span>
                                <span class="icon tag"></span>

                                <span class="icon share"></span>
                                <span class="icon twitter"></span>
                                <span class="icon facebook"></span>
                                <span class="icon github"></span>
                                <span class="icon wordpress"></span>
                                <span class="icon dribbble"></span>

                                <span class="icon html5"></span>
                                <span class="icon css3"></span>
                                <span class="icon chrome"></span>
                                <span class="icon firefox"></span>
                                <span class="icon IE"></span>
                                <span class="icon opera"></span>
                                <span class="icon safari"></span>

                                <span class="icon heart"></span>
                                <span class="icon star"></span>
                                <span class="icon paper-plane"></span>
                                <span class="icon cube"></span>
                                <span class="icon upload"></span>
                                <span class="icon download"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="column_6">
                <h4>tuktuk.widget.<span class="text bold">modal</span> (.css & .js)</h4>
                <div class="margin_bottom">Modal notifications for any device.</div>
                <div class="row">
                    <button class="column_2" data-tuktuk-modal="default_modal">Default</button>
                    <button class="column_2 cancel" data-tuktuk-modal="small_modal">Small</button>
                    <button class="column_2 accept" data-tuktuk-modal="big_modal">Big</button>
                </div>

            </div>
        </div>
    </section>

    <!-- ========================== MODALS ========================== -->

    <div id="default_modal" data-tuktuk="modal">
        <h5 class="text bold">Default modal window</h5>
        <hr/>
        <div class="margin_bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.</div>
        <button data-action="close" class="button">Cancel</button>
    </div>

    <div id="small_modal" data-tuktuk="modal" class="small">
        <h5 class="text bold">Small modal window</h5>
        <hr/>
        <div class="margin_bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.</div>
        <button data-action="close" class="button anchor cancel">Cancel</button>
    </div>

    <div id="big_modal" data-tuktuk="modal" class="big">
        <h5 class="text bold">Big modal window</h5>
        <hr/>
        <div class="margin_bottom text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nihil aut sit incidunt amet modi dolores a sed.</div>
        <button data-action="close" class="button large accept">Cancel</button>
    </div>

    <!-- ========================== AUTHOR ========================== -->
    <section class="bck dark">
        <div class="row margin_bottom">
            <div class="column_10 offset_1 text center color white">
                <h1>Author</h1>
                <h3 class="text thin"><NAME> is the CTO and CO-founder of <a href="http://tapquo.com">tapquo</a>. A restless mind that always strives for continuous improvement, able to create frameworks like <a href="http://lungo.tapquo.com">Lungo</a>, <a href="http://quojs.tapquo.com">QuoJS</a>, <a href="http://monocle.tapquo.com">Monocle</a> used by thousands of developers around the world.</h3>
             </div>
         </div>

        <div class="row margin_bottom">
            <div class="column_4 offset_4 text center white">
                <img src="http://tapquo.com/images/social/soyjavi.jpeg" class="responsive rounded margin_bottom"/>
                <br/>
                <a href="https://twitter.com/soyjavi" class="twitter-follow-button " data-show-count="true" data-dnt="true">Follow @soyjavi</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        </div>
        </div>
    </section>


    <!-- ========================== FOOTER ========================== -->
    <footer class="bck darkest text color white">
        <div class="row margin_top margin_bottom">
            <div class="column_4">
                <p class="text bold">Made by TAPQUO</p>
                <small>We are a mobile user experiences company located in Bilbao, Spain. We've put over 12 years of experience building products.</small>
            </div>
            <div class="column_4">
                <p class="text bold">Join the team!</p>
                <small>
                    Do you want to be part of our team? Let us know how you're!
                    <br/>
                    <a href="mailto:<EMAIL>?subject=Join the team!">Get in touch →​</a>
                </small>
            </div>
            <div class="column_4">
                <p class="text bold">Connect with me in...</p>
                <h3>
                    <a href="https://twitter.com/soyjavi" class="icon twitter"></a>
                    <a href="http://dribbble.com/soyjavi" class="icon dribbble"></a>
                    <a href="https://github.com/soyjavi" class="icon github"></a>
                    <a href="https://www.facebook.com/javi.jimenez.villar" class="icon facebook"></a>
                </h3>
            </div>
        </div>
    </footer>

    <!-- TUKTUK.WIDGETS -->
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="package/widgets/tuktuk.widget.modal.js"></script>

</body>
</html>

{'fraction_non_alphanumeric': 0.15437293341482144, 'fraction_numerical': 0.01206650682462821, 'mean_word_length': 1.5696222920190062, 'pattern_counts': {'":': 0, '<': 1815, '<?xml version=': 0, '>': 1815, 'https://': 12, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 46, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5229967', 'n_tokens_mistral': 18051, 'n_tokens_neox': 16899, 'n_words': 4333}