<!doctype html>
<html class="no-js" lang="en-gb">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico in the root directory -->
</head>

<body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <!-- Add your site or application content here -->
    <h2>Communities</h2>
    <!-- Featured -->
    <hr />
    <h6>Featured</h6>
    <div class="mdl-card mdl-shadow--2dp" id="amk-comm">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Ang Mo Kio</h2>
        </div>
    </div>

    <div class="mdl-card mdl-shadow--2dp" id="bedok-comm">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Bedok</h2>
        </div>
    </div>

    <div class="mdl-card mdl-shadow--2dp" id="bt-comm">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Bukit Timah</h2>
        </div>
    </div>
    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
        <div class="mdl-tabs__tab-bar">
            <a href="#district-panel" class="mdl-tabs__tab is-active">By district</a>
            <a href="#name-panel" class="mdl-tabs__tab">By name</a>
        </div>
        <div class="mdl-tabs__panel  is-active" id="district-panel">
            <!-- By District -->
            <div class="district-grid">
                <div class="mdl-shadow--2dp">D1</div>
                <div class="mdl-shadow--2dp">D2</div>
                <div class="mdl-shadow--2dp">D3</div>
                <div class="mdl-shadow--2dp">D4</div>
                <div class="mdl-shadow--2dp">D5</div>
                <div class="mdl-shadow--2dp">D6</div>
                <div class="mdl-shadow--2dp">D7</div>
                <div class="mdl-shadow--2dp">D8</div>
                <div class="mdl-shadow--2dp">D9</div>
                <div class="mdl-shadow--2dp">D10</div>
                <div class="mdl-shadow--2dp">D11</div>
                <div class="mdl-shadow--2dp">D12</div>
                <div class="mdl-shadow--2dp">D13</div>
                <div class="mdl-shadow--2dp">D14</div>
                <div class="mdl-shadow--2dp">D15</div>
                <div class="mdl-shadow--2dp">D16</div>
                <div class="mdl-shadow--2dp">D17</div>
                <div class="mdl-shadow--2dp">D18</div>
                <div class="mdl-shadow--2dp">D19</div>
                <div class="mdl-shadow--2dp">D20</div>
                <div class="mdl-shadow--2dp">D21</div>
                <div class="mdl-shadow--2dp">D22</div>
                <div class="mdl-shadow--2dp">D23</div>
                <div class="mdl-shadow--2dp">D24</div>
                <div class="mdl-shadow--2dp">D25</div>
                <div class="mdl-shadow--2dp">D26</div>
                <div class="mdl-shadow--2dp">D27</div>
                <div class="mdl-shadow--2dp">D28</div>
            </div>

        </div>

        <div class="mdl-tabs__panel" id="name-panel">
            <div class="mdl-card mdl-shadow--2dp">
                <h4>A</h4>
                <ul>
                    <li>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect">
                          Ang Mo Kio
                        </button>
                    </li>
                </ul>
            </div>
            <div class="mdl-card mdl-shadow--2dp">
                <h4>B</h4>
                <ul>
                    <li>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect">
                          Bedok
                        </button>
                    </li>
                    <li>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect">
                          Bishan
                        </button>
                    </li>
                </ul>
            </div>
            <div class="mdl-card mdl-shadow--2dp">
                <h4>C</h4>
                <ul>
                    <li>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect">
                          Changi
                        </button>
                    </li>
                    <li>
                        <button class="mdl-button mdl-js-button mdl-js-ripple-effect">
                          Choa Chu Kang
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <!-- css -->
        <link rel="stylesheet" href="../includes/core/normalize/normalize.css" />
        <link rel="stylesheet" href="../includes/core/fontawesome/css/font-awesome.min.css" />
        <link rel="stylesheet" href="../includes/core/mdl/material.min.css" />
        <link rel="stylesheet" href="../includes/core/material-icons/material-icons.css" />
        <link rel="stylesheet" href="css/main.min.css" />
        <link rel="stylesheet" href="css/communites.min.css" />


        <!-- js -->
        <script src="../includes/core/modernizr/modernizr-2.8.3.min.js"></script>
        <script src="../includes/core/jquery/jquery-3.1.1.min.js"></script>
        <script src="../includes/core/mdl/material.min.js"></script>
        <script src="../includes/core/d3/d3.min.js"></script>
        <script src="js/main.min.js"></script>
</body>

</html>
