<!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 -->

    <div class="mdl-card mdl-shadow--2dp user-header">
        <div class="user-profile-img mdl-shadow--3dp">
            <img src="http://www.clker.com/cliparts/5/9/4/c/12198090531909861341man%20silhouette.svg" />
        </div>
        <div class="user-title-card">
            <span id="name">Jordan Lim</span>
            <!-- Colored raised button -->
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored chat-btn">
              Chat
            </button>
        </div>
    </div>
    <hr />
    <h6>Recent</h6>
    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
        <div class="mdl-tabs__tab-bar">
            <a href="#prop-panel" class="mdl-tabs__tab is-active">Property</a>
            <a href="#list-panel" class="mdl-tabs__tab">Listings</a>
        </div>

        <div class="mdl-tabs__panel is-active" id="prop-panel">
            <div class="user-property mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title">
                    <h2 class="mdl-card__title-text">Soleil @ Sinaran</h2>
                </div>
                <div class="mdl-card__supporting-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
                </div>
                <div class="mdl-card__menu">
                    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                      <i class="material-icons">share</i>
                    </button>
                </div>
            </div>
        </div>
        <div class="mdl-tabs__panel" id="list-panel">
            <div class="user-listings mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title">
                    <h2 class="mdl-card__title-text">Soleil @ Sinaran</h2>
                </div>
                <div class="mdl-card__supporting-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
                </div>
                <div class="mdl-card__menu">
                    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
                </div>
            </div>
            <div class="user-listings mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title">
                    <h2 class="mdl-card__title-text">Soleil @ Sinaran</h2>
                </div>
                <div class="mdl-card__supporting-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
                </div>
                <div class="mdl-card__menu">
                    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
                </div>
            </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/user.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>
