materialize
/
css-color.html

<!DOCTYPE html>
<html lang="en">

<!--================================================================================
	Item Name: Materialize - Material Design Admin Template
	Version: 3.0
	Author: GeeksLabs
	Author URL: http://www.themeforest.net/user/geekslabs
================================================================================ -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. ">
    <meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template,">
    <title>Colors | Materialize - Material Design Admin Template</title>

    <!-- Favicons-->
    <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
    <!-- Favicons-->
    <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
    <!-- For iPhone -->
    <meta name="msapplication-TileColor" content="#00bcd4">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <!-- For Windows Phone -->


    <!-- CORE CSS-->

    <link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <!-- Custome CSS-->
    <link href="css/custom/custom-style.css" type="text/css" rel="stylesheet" media="screen,projection">


    <!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
    <link href="js/plugins/prism/prism.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="js/plugins/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="js/plugins/chartist-js/chartist.min.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>

<body>
    <!-- Start Page Loading -->
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>
    <!-- End Page Loading -->

    <!-- //////////////////////////////////////////////////////////////////////////// -->

    <!-- START HEADER -->
    <header id="header" class="page-topbar">
        <!-- start header nav-->
        <div class="navbar-fixed">
            <nav class="navbar-color">
                <div class="nav-wrapper">
                    <ul class="left">
                      <li><h1 class="logo-wrapper"><a href="index.html" class="brand-logo darken-1"><img src="images/materialize-logo.png" alt="materialize logo"></a> <span class="logo-text">Materialize</span></h1></li>
                    </ul>
                    <div class="header-search-wrapper hide-on-med-and-down">
                        <i class="mdi-action-search"></i>
                        <input type="text" name="Search" class="header-search-input z-depth-2" placeholder="Explore Materialize"/>
                    </div>
                    <ul class="right hide-on-med-and-down">
                        <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light translation-button"  data-activates="translation-dropdown"><img src="images/flag-icons/United-States.png" alt="USA" /></a>
                        </li>
                        <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light toggle-fullscreen"><i class="mdi-action-settings-overscan"></i></a>
                        </li>
                        <li><a href="javascript:void(0);" class="waves-effect waves-block waves-light notification-button" data-activates="notifications-dropdown"><i class="mdi-social-notifications"><small class="notification-badge">5</small></i>

                        </a>
                        </li>
                        <li><a href="#" data-activates="chat-out" class="waves-effect waves-block waves-light chat-collapse"><i class="mdi-communication-chat"></i></a>
                        </li>
                    </ul>
                    <!-- translation-button -->
                    <ul id="translation-dropdown" class="dropdown-content">
                      <li>
                        <a href="#!"><img src="images/flag-icons/United-States.png" alt="English" />  <span class="language-select">English</span></a>
                      </li>
                      <li>
                        <a href="#!"><img src="images/flag-icons/France.png" alt="French" />  <span class="language-select">French</span></a>
                      </li>
                      <li>
                        <a href="#!"><img src="images/flag-icons/China.png" alt="Chinese" />  <span class="language-select">Chinese</span></a>
                      </li>
                      <li>
                        <a href="#!"><img src="images/flag-icons/Germany.png" alt="German" />  <span class="language-select">German</span></a>
                      </li>

                    </ul>
                    <!-- notifications-dropdown -->
                    <ul id="notifications-dropdown" class="dropdown-content">
                      <li>
                        <h5>NOTIFICATIONS <span class="new badge">5</span></h5>
                      </li>
                      <li class="divider"></li>
                      <li>
                        <a href="#!"><i class="mdi-action-add-shopping-cart"></i> A new order has been placed!</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">2 hours ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-action-stars"></i> Completed the task</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">3 days ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-action-settings"></i> Settings updated</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">4 days ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-editor-insert-invitation"></i> Director meeting started</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">6 days ago</time>
                      </li>
                      <li>
                        <a href="#!"><i class="mdi-action-trending-up"></i> Generate monthly report</a>
                        <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">1 week ago</time>
                      </li>
                    </ul>
                </div>
            </nav>
        </div>
        <!-- end header nav-->
  </header>
    <!-- END HEADER -->

    <!-- //////////////////////////////////////////////////////////////////////////// -->

    <!-- START MAIN -->
    <div id="main">
        <!-- START WRAPPER -->
        <div class="wrapper">

            <!-- START LEFT SIDEBAR NAV-->
            <aside id="left-sidebar-nav">
        <ul id="slide-out" class="side-nav fixed leftside-navigation">
            <li class="user-details cyan darken-2">
            <div class="row">
                <div class="col col s4 m4 l4">
                    <img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image">
                </div>
                <div class="col col s8 m8 l8">
                    <ul id="profile-dropdown" class="dropdown-content">
                        <li><a href="#"><i class="mdi-action-face-unlock"></i> Profile</a>
                        </li>
                        <li><a href="#"><i class="mdi-action-settings"></i> Settings</a>
                        </li>
                        <li><a href="#"><i class="mdi-communication-live-help"></i> Help</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="mdi-action-lock-outline"></i> Lock</a>
                        </li>
                        <li><a href="#"><i class="mdi-hardware-keyboard-tab"></i> Logout</a>
                        </li>
                    </ul>
                    <a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn" href="#" data-activates="profile-dropdown">John Doe<i class="mdi-navigation-arrow-drop-down right"></i></a>
                    <p class="user-roal">Administrator</p>
                </div>
            </div>
            </li>
            <li class="bold"><a href="index.html" class="waves-effect waves-cyan"><i class="mdi-action-dashboard"></i> Dashboard</a>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-view-carousel"></i> Layouts</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="layout-fullscreen.html">Full Screen</a>
                                </li>
                                <li><a href="layout-horizontal-menu.html">Horizontal Menu</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="bold"><a href="app-email.html" class="waves-effect waves-cyan"><i class="mdi-communication-email"></i> Mailbox <span class="new badge">4</span></a>
            </li>
            <li class="bold"><a href="app-calendar.html" class="waves-effect waves-cyan"><i class="mdi-editor-insert-invitation"></i> Calender</a>
            </li>
            <li class="no-padding">
                <ul class="collapsible collapsible-accordion">
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-invert-colors"></i> CSS</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="css-typography.html">Typography</a>
                                </li>
                                <li><a href="css-icons.html">Icons</a>
                                </li>
                                <li><a href="css-animations.html">Animations</a>
                                </li>
                                <li><a href="css-shadow.html">Shadow</a>
                                </li>
                                <li><a href="css-media.html">Media</a>
                                </li>
                                <li><a href="css-sass.html">Sass</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-image-palette"></i> UI Elements</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="ui-alerts.html">Alerts</a>
                                </li>
                                <li><a href="ui-buttons.html">Buttons</a>
                                </li>
                                <li><a href="ui-badges.html">Badges</a>
                                </li>
                                <li><a href="ui-breadcrumbs.html">Breadcrumbs</a>
                                </li>
                                <li><a href="ui-collections.html">Collections</a>
                                </li>
                                <li><a href="ui-collapsibles.html">Collapsibles</a>
                                </li>
                                <li><a href="ui-tabs.html">Tabs</a>
                                </li>
                                <li><a href="ui-navbar.html">Navbar</a>
                                </li>
                                <li><a href="ui-pagination.html">Pagination</a>
                                </li>
                                <li><a href="ui-preloader.html">Preloader</a>
                                </li>
                                <li><a href="ui-toasts.html">Toasts</a>
                                </li>
                                <li><a href="ui-tooltip.html">Tooltip</a>
                                </li>
                                <li><a href="ui-waves.html">Waves</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-av-queue"></i> Advanced UI <span class="new badge"></span></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="advanced-ui-chips.html">Chips</a>
                                </li>
                                <li><a href="advanced-ui-cards.html">Cards</a>
                                </li>
                                <li><a href="advanced-ui-modals.html">Modals</a>
                                </li>
                                <li><a href="advanced-ui-media.html">Media</a>
                                </li>
                                <li><a href="advanced-ui-range-slider.html">Range Slider</a>
                                </li>
                                <li><a href="advanced-ui-sweetalert.html">SweetAlert</a>
                                </li>
                                <li><a href="advanced-ui-nestable.html">Shortable & Nestable</a>
                                </li>
                                <li><a href="advanced-ui-translation.html">Language Translation</a>
                                </li>
                                <li><a href="advanced-ui-highlight.html">Highlight</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a href="app-widget.html" class="waves-effect waves-cyan"><i class="mdi-device-now-widgets"></i> Widgets</a>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-editor-border-all"></i> Tables</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="table-basic.html">Basic Tables</a>
                                </li>
                                <li><a href="table-data.html">Data Tables</a>
                                </li>
                                <li><a href="table-jsgrid.html">jsGrid</a>
                                </li>
                                <li><a href="table-editable.html">Editable Table</a>
                                </li>
                                <li><a href="table-floatThead.html">floatThead</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-editor-insert-comment"></i> Forms <span class="new badge"></span></a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="form-elements.html">Form Elements</a>
                                </li>
                                <li><a href="form-layouts.html">Form Layouts</a>
                                </li>
                                <li><a href="form-validation.html">Form Validations</a>
                                </li>
                                <li><a href="form-masks.html">Form Masks</a>
                                </li>
                                <li><a href="form-file-uploads.html">File Uploads</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-social-pages"></i> Pages</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="page-contact.html">Contact Page</a>
                                </li>
                                <li><a href="page-todo.html">ToDos</a>
                                </li>
                                <li><a href="page-blog-1.html">Blog Type 1</a>
                                </li>
                                <li><a href="page-blog-2.html">Blog Type 2</a>
                                </li>
                                <li><a href="page-404.html">404</a>
                                </li>
                                <li><a href="page-500.html">500</a>
                                </li>
                                <li><a href="page-blank.html">Blank</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-action-shopping-cart"></i> eCommers</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="eCommerce-products-page.html">Products Page</a>
                                </li>
                                <li><a href="eCommerce-pricing.html">Pricing Table</a>
                                </li>
                                <li><a href="eCommerce-invoice.html">Invoice</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-image-image"></i> Medias</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="media-gallary-page.html">Gallery Page</a>
                                </li>
                                <li><a href="media-hover-effects.html">Image Hover Effects</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="bold"><a class="collapsible-header  waves-effect waves-cyan"><i class="mdi-action-account-circle"></i> User</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="user-profile-page.html">User Profile</a>
                                </li>
                                <li><a href="user-login.html">Login</a>
                                </li>
                                <li><a href="user-register.html">Register</a>
                                </li>
                                <li><a href="user-forgot-password.html">Forgot Password</a>
                                </li>
                                <li><a href="user-lock-screen.html">Lock Screen</a>
                                </li>

                            </ul>
                        </div>
                    </li>

                    <li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-editor-insert-chart"></i> Charts</a>
                        <div class="collapsible-body">
                            <ul>
                                <li><a href="charts-chartjs.html">Chart JS</a>
                                </li>
                                <li><a href="charts-chartist.html">Chartist</a>
                                </li>
                                <li><a href="charts-morris.html">Morris Charts</a>
                                </li>
                                <li><a href="charts-xcharts.html">xCharts</a>
                                </li>
                                <li><a href="charts-flotcharts.html">Flot Charts</a>
                                </li>
                                <li><a href="charts-sparklines.html">Sparkline Charts</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="li-hover"><div class="divider"></div></li>
            <li class="li-hover"><p class="ultra-small margin more-text">MORE</p></li>
            <li><a href="angular-ui.html"><i class="mdi-action-verified-user"></i> Angular UI  <span class="new badge"></span></a>
            </li>
            <li><a href="css-grid.html"><i class="mdi-image-grid-on"></i> Grid</a>
            </li>
            <li class="active"><a href="css-color.html"><i class="mdi-editor-format-color-fill"></i> Color</a>
            </li>
            <li><a href="css-helpers.html"><i class="mdi-communication-live-help"></i> Helpers</a>
            </li>
            <li><a href="changelogs.html"><i class="mdi-action-swap-vert-circle"></i> Changelogs</a>
            </li>
            <li class="li-hover"><div class="divider"></div></li>
            <li class="li-hover"><p class="ultra-small margin more-text">Daily Sales</p></li>
            <li class="li-hover">
                <div class="row">
                    <div class="col s12 m12 l12">
                        <div class="sample-chart-wrapper">
                            <div class="ct-chart ct-golden-section" id="ct2-chart"></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <a href="#" data-activates="slide-out" class="sidebar-collapse btn-floating btn-medium waves-effect waves-light hide-on-large-only cyan"><i class="mdi-navigation-menu"></i></a>
        </aside>
            <!-- END LEFT SIDEBAR NAV-->

            <!-- //////////////////////////////////////////////////////////////////////////// -->

            <!-- START CONTENT -->
            <section id="content">

                <!--breadcrumbs start-->
                <div id="breadcrumbs-wrapper">
            <!-- Search for small screen -->
            <div class="header-search-wrapper grey hide-on-large-only">
                <i class="mdi-action-search active"></i>
                <input type="text" name="Search" class="header-search-input z-depth-2" placeholder="Explore Materialize">
            </div>
                    <div class="container">
                        <div class="row">
                            <div class="col s12 m12 l12">
                                <h5 class="breadcrumbs-title">Colors</h5>
                                <ol class="breadcrumbs">
                                    <li><a href="index.html">Dashboard</a>
                                    </li>
                                    <li><a href="#">CSS</a>
                                    </li>
                                    <li class="active">Colors</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <!--breadcrumbs end-->


                <!--start container-->
                <div class="container">


                    <div class="section">
                        <p class="caption">Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class.</p>
                        <div class="divider"></div>

                        <!--Color Usage-->
                        <div id="color-usage">
                            <div class="row">
                                <div class="col s12 m4 l3">
                                    <h4 class="header">Background Color</h4>
                                    <p>To apply a background color, just add the color name and light/darkness as a class to the element.</p>
                                </div>
                                <div class="col s12 m8 l9">
                                    <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col s12 m4 l3">
                                    <h4 class="header">Text Color</h4>
                                    <p>To apply a text color, just append <code class="languague-markup">-text</code> to the color class like this:</p>
                                </div>
                                <div class="col s12 m8 l9">
                                    <div class="card-panel"><span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--Dynamic Color-->
                    <div class="divider"></div>
                    <div id="dynamic-color" class="section">
                        <div class="row">
                            <div class="dynamic-color">
                                <div class="col s12 m12 l12">
                                    <h4 class="header">Color Palette</h4>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="red lighten-5">#ffebee red lighten-5</div>
                                    <div class="red lighten-4">#ffcdd2 red lighten-4</div>
                                    <div class="red lighten-3">#ef9a9a red lighten-3</div>
                                    <div class="red lighten-2">#e57373 red lighten-2</div>
                                    <div class="red lighten-1">#ef5350 red lighten-1</div>
                                    <div class="red">#f44336 red</div>
                                    <div class="red darken-1" style="color: rgba(255, 255, 255, 0.901961);">#e53935 red darken-1</div>
                                    <div class="red darken-2" style="color: rgba(255, 255, 255, 0.901961);">#d32f2f red darken-2</div>
                                    <div class="red darken-3" style="color: rgba(255, 255, 255, 0.901961);">#c62828 red darken-3</div>
                                    <div class="red darken-4" style="color: rgba(255, 255, 255, 0.901961);">#b71c1c red darken-4</div>
                                    <div class="red accent-1">#ff8a80 red accent-1</div>
                                    <div class="red accent-2">#ff5252 red accent-2</div>
                                    <div class="red accent-3">#ff1744 red accent-3</div>
                                    <div class="red accent-4">#d50000 red accent-4</div>
                                </div>

                                <div class="col s12 m6 l4">
                                    <div class="pink lighten-5">#fce4ec pink lighten-5</div>
                                    <div class="pink lighten-4">#f8bbd0 pink lighten-4</div>
                                    <div class="pink lighten-3">#f48fb1 pink lighten-3</div>
                                    <div class="pink lighten-2">#f06292 pink lighten-2</div>
                                    <div class="pink lighten-1">#ec407a pink lighten-1</div>
                                    <div class="pink">#e91e63 pink</div>
                                    <div class="pink darken-1" style="color: rgba(255, 255, 255, 0.901961);">#d81b60 pink darken-1</div>
                                    <div class="pink darken-2" style="color: rgba(255, 255, 255, 0.901961);">#c2185b pink darken-2</div>
                                    <div class="pink darken-3" style="color: rgba(255, 255, 255, 0.901961);">#ad1457 pink darken-3</div>
                                    <div class="pink darken-4" style="color: rgba(255, 255, 255, 0.901961);">#880e4f pink darken-4</div>
                                    <div class="pink accent-1">#ff80ab pink accent-1</div>
                                    <div class="pink accent-2">#ff4081 pink accent-2</div>
                                    <div class="pink accent-3">#f50057 pink accent-3</div>
                                    <div class="pink accent-4">#c51162 pink accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="purple lighten-5">#f3e5f5 purple lighten-5</div>
                                    <div class="purple lighten-4">#e1bee7 purple lighten-4</div>
                                    <div class="purple lighten-3">#ce93d8 purple lighten-3</div>
                                    <div class="purple lighten-2">#ba68c8 purple lighten-2</div>
                                    <div class="purple lighten-1">#ab47bc purple lighten-1</div>
                                    <div class="purple">#9c27b0 purple</div>
                                    <div class="purple darken-1" style="color: rgba(255, 255, 255, 0.901961);">#8e24aa purple darken-1</div>
                                    <div class="purple darken-2" style="color: rgba(255, 255, 255, 0.901961);">#7b1fa2 purple darken-2</div>
                                    <div class="purple darken-3" style="color: rgba(255, 255, 255, 0.901961);">#6a1b9a purple darken-3</div>
                                    <div class="purple darken-4" style="color: rgba(255, 255, 255, 0.901961);">#4a148c purple darken-4</div>
                                    <div class="purple accent-1">#ea80fc purple accent-1</div>
                                    <div class="purple accent-2">#e040fb purple accent-2</div>
                                    <div class="purple accent-3">#d500f9 purple accent-3</div>
                                    <div class="purple accent-4">#aa00ff purple accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="deep-purple lighten-5">#ede7f6 deep-purple lighten-5</div>
                                    <div class="deep-purple lighten-4">#d1c4e9 deep-purple lighten-4</div>
                                    <div class="deep-purple lighten-3">#b39ddb deep-purple lighten-3</div>
                                    <div class="deep-purple lighten-2">#9575cd deep-purple lighten-2</div>
                                    <div class="deep-purple lighten-1">#7e57c2 deep-purple lighten-1</div>
                                    <div class="deep-purple">#673ab7 deep-purple</div>
                                    <div class="deep-purple darken-1" style="color: rgba(255, 255, 255, 0.901961);">#5e35b1 deep-purple darken-1</div>
                                    <div class="deep-purple darken-2" style="color: rgba(255, 255, 255, 0.901961);">#512da8 deep-purple darken-2</div>
                                    <div class="deep-purple darken-3" style="color: rgba(255, 255, 255, 0.901961);">#4527a0 deep-purple darken-3</div>
                                    <div class="deep-purple darken-4" style="color: rgba(255, 255, 255, 0.901961);">#311b92 deep-purple darken-4</div>
                                    <div class="deep-purple accent-1">#b388ff deep-purple accent-1</div>
                                    <div class="deep-purple accent-2">#7c4dff deep-purple accent-2</div>
                                    <div class="deep-purple accent-3">#651fff deep-purple accent-3</div>
                                    <div class="deep-purple accent-4">#6200ea deep-purple accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="indigo lighten-5">#e8eaf6 indigo lighten-5</div>
                                    <div class="indigo lighten-4">#c5cae9 indigo lighten-4</div>
                                    <div class="indigo lighten-3">#9fa8da indigo lighten-3</div>
                                    <div class="indigo lighten-2">#7986cb indigo lighten-2</div>
                                    <div class="indigo lighten-1">#5c6bc0 indigo lighten-1</div>
                                    <div class="indigo">#3f51b5 indigo</div>
                                    <div class="indigo darken-1" style="color: rgba(255, 255, 255, 0.901961);">#3949ab indigo darken-1</div>
                                    <div class="indigo darken-2" style="color: rgba(255, 255, 255, 0.901961);">#303f9f indigo darken-2</div>
                                    <div class="indigo darken-3" style="color: rgba(255, 255, 255, 0.901961);">#283593 indigo darken-3</div>
                                    <div class="indigo darken-4" style="color: rgba(255, 255, 255, 0.901961);">#1a237e indigo darken-4</div>
                                    <div class="indigo accent-1">#8c9eff indigo accent-1</div>
                                    <div class="indigo accent-2">#536dfe indigo accent-2</div>
                                    <div class="indigo accent-3">#3d5afe indigo accent-3</div>
                                    <div class="indigo accent-4">#304ffe indigo accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="blue lighten-5">#e3f2fd blue lighten-5</div>
                                    <div class="blue lighten-4">#bbdefb blue lighten-4</div>
                                    <div class="blue lighten-3">#90caf9 blue lighten-3</div>
                                    <div class="blue lighten-2">#64b5f6 blue lighten-2</div>
                                    <div class="blue lighten-1">#42a5f5 blue lighten-1</div>
                                    <div class="blue">#2196f3 blue</div>
                                    <div class="blue darken-1" style="color: rgba(255, 255, 255, 0.901961);">#1e88e5 blue darken-1</div>
                                    <div class="blue darken-2" style="color: rgba(255, 255, 255, 0.901961);">#1976d2 blue darken-2</div>
                                    <div class="blue darken-3" style="color: rgba(255, 255, 255, 0.901961);">#1565c0 blue darken-3</div>
                                    <div class="blue darken-4" style="color: rgba(255, 255, 255, 0.901961);">#0d47a1 blue darken-4</div>
                                    <div class="blue accent-1">#82b1ff blue accent-1</div>
                                    <div class="blue accent-2">#448aff blue accent-2</div>
                                    <div class="blue accent-3">#2979ff blue accent-3</div>
                                    <div class="blue accent-4">#2962ff blue accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="light-blue lighten-5">#e1f5fe light-blue lighten-5</div>
                                    <div class="light-blue lighten-4">#b3e5fc light-blue lighten-4</div>
                                    <div class="light-blue lighten-3">#81d4fa light-blue lighten-3</div>
                                    <div class="light-blue lighten-2">#4fc3f7 light-blue lighten-2</div>
                                    <div class="light-blue lighten-1">#29b6f6 light-blue lighten-1</div>
                                    <div class="light-blue">#03a9f4 light-blue</div>
                                    <div class="light-blue darken-1" style="color: rgba(255, 255, 255, 0.901961);">#039be5 light-blue darken-1</div>
                                    <div class="light-blue darken-2" style="color: rgba(255, 255, 255, 0.901961);">#0288d1 light-blue darken-2</div>
                                    <div class="light-blue darken-3" style="color: rgba(255, 255, 255, 0.901961);">#0277bd light-blue darken-3</div>
                                    <div class="light-blue darken-4" style="color: rgba(255, 255, 255, 0.901961);">#01579b light-blue darken-4</div>
                                    <div class="light-blue accent-1">#80d8ff light-blue accent-1</div>
                                    <div class="light-blue accent-2">#40c4ff light-blue accent-2</div>
                                    <div class="light-blue accent-3">#00b0ff light-blue accent-3</div>
                                    <div class="light-blue accent-4">#0091ea light-blue accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="cyan lighten-5">#e0f7fa cyan lighten-5</div>
                                    <div class="cyan lighten-4">#b2ebf2 cyan lighten-4</div>
                                    <div class="cyan lighten-3">#80deea cyan lighten-3</div>
                                    <div class="cyan lighten-2">#4dd0e1 cyan lighten-2</div>
                                    <div class="cyan lighten-1">#26c6da cyan lighten-1</div>
                                    <div class="cyan">#00bcd4 cyan</div>
                                    <div class="cyan darken-1" style="color: rgba(255, 255, 255, 0.901961);">#00acc1 cyan darken-1</div>
                                    <div class="cyan darken-2" style="color: rgba(255, 255, 255, 0.901961);">#0097a7 cyan darken-2</div>
                                    <div class="cyan darken-3" style="color: rgba(255, 255, 255, 0.901961);">#00838f cyan darken-3</div>
                                    <div class="cyan darken-4" style="color: rgba(255, 255, 255, 0.901961);">#006064 cyan darken-4</div>
                                    <div class="cyan accent-1">#84ffff cyan accent-1</div>
                                    <div class="cyan accent-2">#18ffff cyan accent-2</div>
                                    <div class="cyan accent-3">#00e5ff cyan accent-3</div>
                                    <div class="cyan accent-4">#00b8d4 cyan accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="teal lighten-5">#e0f2f1 teal lighten-5</div>
                                    <div class="teal lighten-4">#b2dfdb teal lighten-4</div>
                                    <div class="teal lighten-3">#80cbc4 teal lighten-3</div>
                                    <div class="teal lighten-2">#4db6ac teal lighten-2</div>
                                    <div class="teal lighten-1">#26a69a teal lighten-1</div>
                                    <div class="teal">#009688 teal</div>
                                    <div class="teal darken-1" style="color: rgba(255, 255, 255, 0.901961);">#00897b teal darken-1</div>
                                    <div class="teal darken-2" style="color: rgba(255, 255, 255, 0.901961);">#00796b teal darken-2</div>
                                    <div class="teal darken-3" style="color: rgba(255, 255, 255, 0.901961);">#00695c teal darken-3</div>
                                    <div class="teal darken-4" style="color: rgba(255, 255, 255, 0.901961);">#004d40 teal darken-4</div>
                                    <div class="teal accent-1">#a7ffeb teal accent-1</div>
                                    <div class="teal accent-2">#64ffda teal accent-2</div>
                                    <div class="teal accent-3">#1de9b6 teal accent-3</div>
                                    <div class="teal accent-4">#00bfa5 teal accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="green lighten-5">#e8f5e9 green lighten-5</div>
                                    <div class="green lighten-4">#c8e6c9 green lighten-4</div>
                                    <div class="green lighten-3">#a5d6a7 green lighten-3</div>
                                    <div class="green lighten-2">#81c784 green lighten-2</div>
                                    <div class="green lighten-1">#66bb6a green lighten-1</div>
                                    <div class="green">#4caf50 green</div>
                                    <div class="green darken-1" style="color: rgba(255, 255, 255, 0.901961);">#43a047 green darken-1</div>
                                    <div class="green darken-2" style="color: rgba(255, 255, 255, 0.901961);">#388e3c green darken-2</div>
                                    <div class="green darken-3" style="color: rgba(255, 255, 255, 0.901961);">#2e7d32 green darken-3</div>
                                    <div class="green darken-4" style="color: rgba(255, 255, 255, 0.901961);">#1b5e20 green darken-4</div>
                                    <div class="green accent-1">#b9f6ca green accent-1</div>
                                    <div class="green accent-2">#69f0ae green accent-2</div>
                                    <div class="green accent-3">#00e676 green accent-3</div>
                                    <div class="green accent-4">#00c853 green accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="light-green lighten-5">#f1f8e9 light-green lighten-5</div>
                                    <div class="light-green lighten-4">#dcedc8 light-green lighten-4</div>
                                    <div class="light-green lighten-3">#c5e1a5 light-green lighten-3</div>
                                    <div class="light-green lighten-2">#aed581 light-green lighten-2</div>
                                    <div class="light-green lighten-1">#9ccc65 light-green lighten-1</div>
                                    <div class="light-green">#8bc34a light-green</div>
                                    <div class="light-green darken-1" style="color: rgba(255, 255, 255, 0.901961);">#7cb342 light-green darken-1</div>
                                    <div class="light-green darken-2" style="color: rgba(255, 255, 255, 0.901961);">#689f38 light-green darken-2</div>
                                    <div class="light-green darken-3" style="color: rgba(255, 255, 255, 0.901961);">#558b2f light-green darken-3</div>
                                    <div class="light-green darken-4" style="color: rgba(255, 255, 255, 0.901961);">#33691e light-green darken-4</div>
                                    <div class="light-green accent-1">#ccff90 light-green accent-1</div>
                                    <div class="light-green accent-2">#b2ff59 light-green accent-2</div>
                                    <div class="light-green accent-3">#76ff03 light-green accent-3</div>
                                    <div class="light-green accent-4">#64dd17 light-green accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="lime lighten-5">#f9fbe7 lime lighten-5</div>
                                    <div class="lime lighten-4">#f0f4c3 lime lighten-4</div>
                                    <div class="lime lighten-3">#e6ee9c lime lighten-3</div>
                                    <div class="lime lighten-2">#dce775 lime lighten-2</div>
                                    <div class="lime lighten-1">#d4e157 lime lighten-1</div>
                                    <div class="lime">#cddc39 lime</div>
                                    <div class="lime darken-1" style="color: rgba(255, 255, 255, 0.901961);">#c0ca33 lime darken-1</div>
                                    <div class="lime darken-2" style="color: rgba(255, 255, 255, 0.901961);">#afb42b lime darken-2</div>
                                    <div class="lime darken-3" style="color: rgba(255, 255, 255, 0.901961);">#9e9d24 lime darken-3</div>
                                    <div class="lime darken-4" style="color: rgba(255, 255, 255, 0.901961);">#827717 lime darken-4</div>
                                    <div class="lime accent-1">#f4ff81 lime accent-1</div>
                                    <div class="lime accent-2">#eeff41 lime accent-2</div>
                                    <div class="lime accent-3">#c6ff00 lime accent-3</div>
                                    <div class="lime accent-4">#aeea00 lime accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="yellow lighten-5">#fffde7 yellow lighten-5</div>
                                    <div class="yellow lighten-4">#fff9c4 yellow lighten-4</div>
                                    <div class="yellow lighten-3">#fff59d yellow lighten-3</div>
                                    <div class="yellow lighten-2">#fff176 yellow lighten-2</div>
                                    <div class="yellow lighten-1">#ffee58 yellow lighten-1</div>
                                    <div class="yellow">#ffeb3b yellow</div>
                                    <div class="yellow darken-1" style="color: rgba(255, 255, 255, 0.901961);">#fdd835 yellow darken-1</div>
                                    <div class="yellow darken-2" style="color: rgba(255, 255, 255, 0.901961);">#fbc02d yellow darken-2</div>
                                    <div class="yellow darken-3" style="color: rgba(255, 255, 255, 0.901961);">#f9a825 yellow darken-3</div>
                                    <div class="yellow darken-4" style="color: rgba(255, 255, 255, 0.901961);">#f57f17 yellow darken-4</div>
                                    <div class="yellow accent-1">#ffff8d yellow accent-1</div>
                                    <div class="yellow accent-2">#ffff00 yellow accent-2</div>
                                    <div class="yellow accent-3">#ffea00 yellow accent-3</div>
                                    <div class="yellow accent-4">#ffd600 yellow accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="amber lighten-5">#fff8e1 amber lighten-5</div>
                                    <div class="amber lighten-4">#ffecb3 amber lighten-4</div>
                                    <div class="amber lighten-3">#ffe082 amber lighten-3</div>
                                    <div class="amber lighten-2">#ffd54f amber lighten-2</div>
                                    <div class="amber lighten-1">#ffca28 amber lighten-1</div>
                                    <div class="amber">#ffc107 amber</div>
                                    <div class="amber darken-1" style="color: rgba(255, 255, 255, 0.901961);">#ffb300 amber darken-1</div>
                                    <div class="amber darken-2" style="color: rgba(255, 255, 255, 0.901961);">#ffa000 amber darken-2</div>
                                    <div class="amber darken-3" style="color: rgba(255, 255, 255, 0.901961);">#ff8f00 amber darken-3</div>
                                    <div class="amber darken-4" style="color: rgba(255, 255, 255, 0.901961);">#ff6f00 amber darken-4</div>
                                    <div class="amber accent-1">#ffe57f amber accent-1</div>
                                    <div class="amber accent-2">#ffd740 amber accent-2</div>
                                    <div class="amber accent-3">#ffc400 amber accent-3</div>
                                    <div class="amber accent-4">#ffab00 amber accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="orange lighten-5">#fff3e0 orange lighten-5</div>
                                    <div class="orange lighten-4">#ffe0b2 orange lighten-4</div>
                                    <div class="orange lighten-3">#ffcc80 orange lighten-3</div>
                                    <div class="orange lighten-2">#ffb74d orange lighten-2</div>
                                    <div class="orange lighten-1">#ffa726 orange lighten-1</div>
                                    <div class="orange">#ff9800 orange</div>
                                    <div class="orange darken-1" style="color: rgba(255, 255, 255, 0.901961);">#fb8c00 orange darken-1</div>
                                    <div class="orange darken-2" style="color: rgba(255, 255, 255, 0.901961);">#f57c00 orange darken-2</div>
                                    <div class="orange darken-3" style="color: rgba(255, 255, 255, 0.901961);">#ef6c00 orange darken-3</div>
                                    <div class="orange darken-4" style="color: rgba(255, 255, 255, 0.901961);">#e65100 orange darken-4</div>
                                    <div class="orange accent-1">#ffd180 orange accent-1</div>
                                    <div class="orange accent-2">#ffab40 orange accent-2</div>
                                    <div class="orange accent-3">#ff9100 orange accent-3</div>
                                    <div class="orange accent-4">#ff6d00 orange accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="deep-orange lighten-5">#fbe9e7 deep-orange lighten-5</div>
                                    <div class="deep-orange lighten-4">#ffccbc deep-orange lighten-4</div>
                                    <div class="deep-orange lighten-3">#ffab91 deep-orange lighten-3</div>
                                    <div class="deep-orange lighten-2">#ff8a65 deep-orange lighten-2</div>
                                    <div class="deep-orange lighten-1">#ff7043 deep-orange lighten-1</div>
                                    <div class="deep-orange">#ff5722 deep-orange</div>
                                    <div class="deep-orange darken-1" style="color: rgba(255, 255, 255, 0.901961);">#f4511e deep-orange darken-1</div>
                                    <div class="deep-orange darken-2" style="color: rgba(255, 255, 255, 0.901961);">#e64a19 deep-orange darken-2</div>
                                    <div class="deep-orange darken-3" style="color: rgba(255, 255, 255, 0.901961);">#d84315 deep-orange darken-3</div>
                                    <div class="deep-orange darken-4" style="color: rgba(255, 255, 255, 0.901961);">#bf360c deep-orange darken-4</div>
                                    <div class="deep-orange accent-1">#ff9e80 deep-orange accent-1</div>
                                    <div class="deep-orange accent-2">#ff6e40 deep-orange accent-2</div>
                                    <div class="deep-orange accent-3">#ff3d00 deep-orange accent-3</div>
                                    <div class="deep-orange accent-4">#dd2c00 deep-orange accent-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="brown lighten-5">#efebe9 brown lighten-5</div>
                                    <div class="brown lighten-4">#d7ccc8 brown lighten-4</div>
                                    <div class="brown lighten-3">#bcaaa4 brown lighten-3</div>
                                    <div class="brown lighten-2">#a1887f brown lighten-2</div>
                                    <div class="brown lighten-1">#8d6e63 brown lighten-1</div>
                                    <div class="brown">#795548 brown</div>
                                    <div class="brown darken-1" style="color: rgba(255, 255, 255, 0.901961);">#6d4c41 brown darken-1</div>
                                    <div class="brown darken-2" style="color: rgba(255, 255, 255, 0.901961);">#5d4037 brown darken-2</div>
                                    <div class="brown darken-3" style="color: rgba(255, 255, 255, 0.901961);">#4e342e brown darken-3</div>
                                    <div class="brown darken-4" style="color: rgba(255, 255, 255, 0.901961);">#3e2723 brown darken-4</div>
                                </div>
                                <div class="col s12 m6 l4">
                                    <div class="grey lighten-5">#fafafa grey lighten-5</div>
                                    <div class="grey lighten-4">#f5f5f5 grey lighten-4</div>
                                    <div class="grey lighten-3">#eeeeee grey lighten-3</div>
                                    <div class="grey lighten-2">#e0e0e0 grey lighten-2</div>
                                    <div class="grey lighten-1">#bdbdbd grey lighten-1</div>
                                    <div class="grey">#9e9e9e grey</div>
                                    <div class="grey darken-1" style="color: rgba(255, 255, 255, 0.901961);">#757575 grey darken-1</div>
                                    <div class="grey darken-2" style="color: rgba(255, 255, 255, 0.901961);">#616161 grey darken-2</div>
                                    <div class="grey darken-3" style="color: rgba(255, 255, 255, 0.901961);">#424242 grey darken-3</div>
                                    <div class="grey darken-4" style="color: rgba(255, 255, 255, 0.901961);">#212121 grey darken-4</div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- Floating Action Button -->
            <div class="fixed-action-btn" style="bottom: 50px; right: 19px;">
                <a class="btn-floating btn-large">
                  <i class="mdi-action-stars"></i>
                </a>
                <ul>
                  <li><a href="css-helpers.html" class="btn-floating red"><i class="large mdi-communication-live-help"></i></a></li>
                  <li><a href="app-widget.html" class="btn-floating yellow darken-1"><i class="large mdi-device-now-widgets"></i></a></li>
                  <li><a href="app-calendar.html" class="btn-floating green"><i class="large mdi-editor-insert-invitation"></i></a></li>
                  <li><a href="app-email.html" class="btn-floating blue"><i class="large mdi-communication-email"></i></a></li>
                </ul>
            </div>
            <!-- Floating Action Button -->

                </div>
                <!--end container-->

            </section>
            <!-- END CONTENT -->

            <!-- //////////////////////////////////////////////////////////////////////////// -->
            <!-- START RIGHT SIDEBAR NAV-->
            <aside id="right-sidebar-nav">
        <ul id="chat-out" class="side-nav rightside-navigation">
            <li class="li-hover">
            <a href="#" data-activates="chat-out" class="chat-close-collapse right"><i class="mdi-navigation-close"></i></a>
            <div id="right-search" class="row">
                <form class="col s12">
                    <div class="input-field">
                        <i class="mdi-action-search prefix"></i>
                        <input id="icon_prefix" type="text" class="validate">
                        <label for="icon_prefix">Search</label>
                    </div>
                </form>
            </div>
            </li>
            <li class="li-hover">
                <ul class="chat-collapsible" data-collapsible="expandable">
                <li>
                    <div class="collapsible-header teal white-text active"><i class="mdi-social-whatshot"></i>Recent Activity</div>
                    <div class="collapsible-body recent-activity">
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-add-shopping-cart"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">just now</a>
                                <p>Jim Doe Purchased new equipments for zonal office.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-device-airplanemode-on"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">Yesterday</a>
                                <p>Your Next flight for USA will be on 15th August 2015.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">5 Days Ago</a>
                                <p>Natalya Parker Send you a voice mail for next conference.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-store"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">Last Week</a>
                                <p>Jessy Jay open a new store at S.G Road.</p>
                            </div>
                        </div>
                        <div class="recent-activity-list chat-out-list row">
                            <div class="col s3 recent-activity-list-icon"><i class="mdi-action-settings-voice"></i>
                            </div>
                            <div class="col s9 recent-activity-list-text">
                                <a href="#">5 Days Ago</a>
                                <p>Natalya Parker Send you a voice mail for next conference.</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header light-blue white-text active"><i class="mdi-editor-attach-money"></i>Sales Repoart</div>
                    <div class="collapsible-body sales-repoart">
                        <div class="sales-repoart-list  chat-out-list row">
                            <div class="col s8">Target Salse</div>
                            <div class="col s4"><span id="sales-line-1"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Payment Due</div>
                            <div class="col s4"><span id="sales-bar-1"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Total Delivery</div>
                            <div class="col s4"><span id="sales-line-2"></span>
                            </div>
                        </div>
                        <div class="sales-repoart-list chat-out-list row">
                            <div class="col s8">Total Progress</div>
                            <div class="col s4"><span id="sales-bar-2"></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="collapsible-header red white-text"><i class="mdi-action-stars"></i>Favorite Associates</div>
                    <div class="collapsible-body favorite-associates">
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Eileen Sideways</p>
                                <p class="place">Los Angeles, CA</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Zaham Sindil</p>
                                <p class="place">San Francisco, CA</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Renov Leongal</p>
                                <p class="place">Cebu City, Philippines</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img online-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Weno Carasbong</p>
                                <p>Tokyo, Japan</p>
                            </div>
                        </div>
                        <div class="favorite-associate-list chat-out-list row">
                            <div class="col s4"><img src="images/avatar.jpg" alt="" class="circle responsive-img offline-user valign profile-image">
                            </div>
                            <div class="col s8">
                                <p>Nusja Nawancali</p>
                                <p class="place">Bangkok, Thailand</p>
                            </div>
                        </div>
                    </div>
                </li>
                </ul>
            </li>
        </ul>
      </aside>
            <!-- LEFT RIGHT SIDEBAR NAV-->

        </div>
        <!-- END WRAPPER -->

    </div>
    <!-- END MAIN -->


    <!-- //////////////////////////////////////////////////////////////////////////// -->

    <!-- START FOOTER -->
    <footer class="page-footer">
    <div class="footer-copyright">
      <div class="container">
        <span>Copyright © 2015 <a class="grey-text text-lighten-4" href="http://themeforest.net/user/geekslabs/portfolio?ref=geekslabs" target="_blank">GeeksLabs</a> All rights reserved.</span>
        <span class="right"> Design and Developed by <a class="grey-text text-lighten-4" href="http://geekslabs.com/">GeeksLabs</a></span>
        </div>
    </div>
  </footer>
    <!-- END FOOTER -->


    <!-- ================================================
    Scripts
    ================================================ -->

    <!-- jQuery Library -->
    <script type="text/javascript" src="js/plugins/jquery-1.11.2.min.js"></script>
    <!--materialize js-->
    <script type="text/javascript" src="js/materialize.min.js"></script>
    <!--prism-->
    <script type="text/javascript" src="js/plugins/prism/prism.js"></script>
    <!--scrollbar-->
    <script type="text/javascript" src="js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <!-- chartist -->
    <script type="text/javascript" src="js/plugins/chartist-js/chartist.min.js"></script>

    <!--plugins.js - Some Specific JS codes for Plugin Settings-->
    <script type="text/javascript" src="js/plugins.min.js"></script>
    <!--custom-script.js - Add your own theme custom JS-->
    <script type="text/javascript" src="js/custom-script.js"></script>

</body>

</html>