<!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 agent-header">
        <div class="mdl-card__title agent-profile-bg">
        </div>
        <div class="agent-profile-img mdl-shadow--3dp">
            <img src="http://www.clker.com/cliparts/5/9/4/c/12198090531909861341man%20silhouette.svg" />
        </div>
        <div class="agent-title-card">
            <span id="name">Jordan</span>
            <span id="id">R053285E</span>
            <span id="agency">PropNex</span>
        </div>
        <div class="list-conn-stats mdl-card--border">
            <div class="list-stats">
                1
            </div>
            <div class="conn-stats">
                1
            </div>
        </div>
    </div>

    <div class="mdl-card mdl-shadow--2dp agents-contact">
        <div class="agents-contact-btns">
            <div class="email">
                <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                <i class="material-icons">mail</i>
                <span>E-Mail</span>
              </button>
            </div>
            <div class="call">
                <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                <i class="material-icons">phone</i>
                <span>Phone</span>

              </button>
            </div>
            <div class="text">
                <button class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                <i class="material-icons">textsms</i>
                <span>SMS</span>
              </button>
            </div>
        </div>
    </div>
    <!-- Colored FAB button with ripple -->
    <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored agent-fab">
      <i class="material-icons">add</i>
    </button>
    <hr />
    <h6>About Me</h6>

    <div class="mdl-card mdl-shadow--2dp agents-about-me">
        <div class="mdl-card__supporting-text agents-about-me-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...
        </div>
        <div class="mdl-card__actions mdl-card--border">
            <a class="mdl-button mdl-js-button mdl-js-ripple-effect">
    Read More
  </a>
        </div>
    </div>

    <hr />
    <h6>Listings</h6>
    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
        <div class="mdl-tabs__tab-bar">
            <a href="#sale-panel" class="mdl-tabs__tab is-active">FOR SALE</a>
            <a href="#rent-panel" class="mdl-tabs__tab">FOR RENT</a>
        </div>

        <div class="mdl-tabs__panel is-active" id="sale-panel">
            <div class="agent-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__actions mdl-card--border">
                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
          Buy Now
        </a>
                </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="agent-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__actions mdl-card--border">
                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
          Buy Now
        </a>
                </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="rent-panel">
            <div class="agent-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__actions mdl-card--border">
                    <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
          Rent Now
        </a>
                </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/agent.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>
