Mobile Bet Mockup

by amindunited

HTML

<!-- Home -->
<div data-role="page" id="page1"  data-theme="a">
    <div data-theme="a" data-role="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">
        <div data-role="navbar" data-iconpos="top">
            <ul>
                <li>
                    <a href="#page1" data-transition="slide" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="slide" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="slide" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#page1" data-transition="slide" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible-set">
            <div data-role="collapsible" data-collapsed="true">
                <h3>
                    Section Header
                </h3>
                <div class="ui-grid-b" data-theme="a">
                    <div class="ui-block-a">
                        Horse Racing
                    </div>
                    <div class="ui-block-b">
                        Harness Racing
                    </div>
                    <div class="ui-block-c">
                        Greyhound Racing
                    </div>
                    <div class="ui-block-a">
                    </div>
                    <div class="ui-block-b">
                    </div>
                    <div class="ui-block-c">
                    </div>
                    <div class="ui-block-a">
                    </div>
                    <div class="ui-block-b">
                    </div>
                ...

CSS

.ui-bar-a{border:1px solid #65823b ;background:#65823b ;color:#ffffff ;font-weight:bold;text-shadow:0  1px  0  #444444 ;background-image:-webkit-gradient(linear,left top,left bottom,from( #6f8f40 ),to( #5a7535 )); background-image:-webkit-linear-gradient( #6f8f40,#5a7535 ); background-image:   -moz-linear-gradient( #6f8f40,#5a7535 ); background-image:    -ms-linear-gradient( #6f8f40,#5a7535 ); background-image:     -o-linear-gradient( #6f8f40,#5a7535 ); background-image:        linear-gradient( #6f8f40,#5a7535 );}.ui-bar-a .ui-link-inherit{color:#ffffff ;}.ui-bar-a a.ui-link{color:#7cc4e7 ;font-weight:bold;}.ui-bar-a a.ui-link:visited{   color:#2489ce ;}.ui-bar-a a.ui-link:hover{color:#2489ce ;}.ui-bar-a a.ui-link:active{color:#2489ce ;}.ui-bar-a,.ui-bar-a input,.ui-bar-a select,.ui-bar-a textarea,.ui-bar-a button{  font-family:Helvetica,Arial,sans-serif ;}.ui-body-a,.ui-overlay-a{border:1px solid #aaaaaa ;color:#333333 ;text-shadow:0  1px  0  #ffffff ;background:#f9f9f9 ;background-image:-webkit-gradient(linear,left top,left bottom,from( #f9f9f9 ),to( #eeeeee )); background-image:-webkit-linear-gradient( #f9f9f9,#eeeeee ); background-image:   -moz-linear-gradient( #f9f9f9,#eeeeee ); background-image:    -ms-linear-gradient( #f9f9f9,#eeeeee ); background-image:     -o-linear-gradient( #f9f9f9,#eeeeee ); background-image:        linear-gradient( #f9f9f9,#eeeeee );}.ui-overlay-a{background-image:none;border-width:0;}.ui-body-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a button{  font-family:Helvetica,Arial,sans-serif ;}.ui-body-a .ui-link-inherit{color:#333333 ;}.ui-body-a .ui-link{color:#2489ce ;font-weight:bold;}.ui-body-a .ui-link:visited{   color:#2489ce ;}.ui-body-a .ui-link:hover{color:#2489ce ;}.ui-body-a .ui-link:active{color:#2489ce ;}.ui-btn-up-a{border:1px solid #65823b ;background:#65823b ;font-weight:bold;color:#ffffff ;text-shadow:0  1px  0  #444444 ;background-image:-webkit-gradient(linear,left top,left bottom,from( #6f8f40...