Template Structure

Template Structure

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="explore is fully responsive admin dashboard template built with Bootstrap 5, jQuery and SASS">
    <title>explore - Bootstrap 5 Admin Dashboard Responsive HTML Template</title>

    <meta property="og:type" content="website">
    <meta property="og:site_name" content="explore">
    <meta property="og:title" content="Bootstrap 5 Admin Dashboard Responsive HTML Template">
    <meta property="og:version" content="1.0.0">
    <meta property="og:url" content="https://templateclub.co.in/">
    <meta property="og:image" content="Bootstrap 5 Admin Dashboard Responsive HTML Template">
    <meta property="og:description" content="explore is fully responsive admin dashboard template built with Bootstrap 5, jQuery and SASS">

    <meta name="theme-color" content="#1C2B36" />

    <link href="../../../assets/images/favicon.ico" rel="apple-touch-icon" type="image/png" sizes="144x144">
	<link href="../../../assets/images/favicon.ico" rel="apple-touch-icon" type="image/png" sizes="114x114">
	<link href="../../../assets/images/favicon.ico" rel="apple-touch-icon" type="image/png" sizes="72x72">
	<link href="../../../assets/images/favicon.ico" rel="apple-touch-icon" type="image/png">
	<link href="../../../assets/images/favicon.ico" rel="icon" type="image/png">
	<link href="../../../assets/images/favicon.ico" rel="shortcut icon">

    <link rel="stylesheet" type="text/css" href="../../../assets/css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../../assets/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../../../assets/icons/style.css">

    <!-- TEMPLATE CSS -->
    <link rel="stylesheet" type="text/css" href="assets/css/core.css">
    <link rel="stylesheet" type="text/css" href="assets/css/layout.css">
    <!-- /TEMPLATE CSS -->
</head>
Header

Below is the code for the header part of the template

<!-- HEADER -->
<!-- HEADER -->
<header id="header" class="header fixed-header">
    <a class="brand-logo" href="index.php">
        <img class="full-logo" src="../../../assets/images/logo.png" alt="explore"/>
        <img class="icon-logo" src="../../../assets/images/favicon.png" alt="explore"/>
    </a>

    <!-- MENU TOGGLE -->
    <a id="menu-toggle" class="sidebar-toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"><i class="ico-menu-4"></i></a>
    <!-- /MENU TOGGLE -->

    <!-- MINI MENU -->
    <div class="mini-menu">
        <div class="menu-link"><a class="sidebar-toggle tooltip-right" href="#" data-toggle="sidebar" aria-label="Hide Sidebar" data-tooltip="Toggle Menu"><i class="ico-menu-4"></i></a></div>
        <div class="menu-link dropdown">
            <a class="dropdown-toggle tooltip-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-tooltip="Language"><i class="ico-flag-2"></i></a>
            <ul class="dropdown-menu dropdown-mini">
                <li><a href="#" class="dropdown-item"><img src="../../../assets/images/flags/uk.png" alt="Germany"/>English</a></li>
                <li><a href="#" class="dropdown-item"><img src="../../../assets/images/flags/germany.png" alt="Germany"/>German</a></li>
                <li><a href="#" class="dropdown-item"><img src="../../../assets/images/flags/spain.png" alt="Germany"/>Spanish</a></li>
                <li><a href="#" class="dropdown-item"><img src="../../../assets/images/flags/russia.png" alt="Germany"/>Russian</a></li>
            </ul>
        </div>
        <div class="menu-link dropdown">
            <a class="dropdown-toggle tooltip-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-tooltip="Apps"><i class="ico-cube-2"></i></a>
            <ul class="dropdown-menu dropdown-mini">
                <li><a href="apps_emails.php" class="dropdown-item"><i class="ico-email"></i>Emails</a></li>
                <li><a href="apps_people.php" class="dropdown-item"><i class="ico-user-group"></i>Contacts</a></li>
                <li><a href="apps_messages.php" class="dropdown-item"><i class="ico-speech-3"></i>Conversations</a></li>
            </ul>
        </div>

        <div class="menu-link dropdown">
            <a class="dropdown-toggle tooltip-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-tooltip="Search"><i class="ico-search"></i></a>
            <ul class="dropdown-menu search-form">
                <form action="page_search.php" method="post">
                    <i class="ico-search"></i><input class="search-input" type="search" placeholder="Search...">
                </form>
            </ul>
        </div>
    </div>        
    <!-- /MINI MENU -->

    <div class="topbar-nav">

        <div class="topbar-link"><a href="#" onclick="open_chats()" class="bubble-mini"><i class="ico-chat"></i></a></div>            

        <!-- QUICK ACTIONS -->
        <div class="topbar-link quick-apps topbar-dropdown hidden-sm-down">
            <a href="#" data-toggle="dropdown"><i class="ico-menu-6"></i></a>
            <div class="dropdown-menu animate fadeUp quick">
                <div class="dropdown-header">
                    <span>Quick Actions</span>
                </div>
                <ul class="quick-links">
                    <li><a href="#"><i class="ico-portfolio display-block"></i>Projects</a></li>
                    <li><a href="#"><i class="ico-invoice display-block"></i>Invoices</a></li>
                    <li><a href="#"><i class="ico-ticket display-block"></i>Tickets</a></li>
                    <li><a href="#"><i class="ico-calendar-3 display-block"></i>Calendar</a></li>
                </ul>
            </div>
        </div>
        <!-- /QUICK ACTIONS -->

        <!-- NOTIFICATIONS -->
        <div class="topbar-link notifications topbar-dropdown dropdown" id="notifications-dropdown">
            <a href="#" data-toggle="dropdown" class="bubble-mini"><i class="ico-bell"></i></a>
            <div class="dropdown-menu animate fadeUp quick">
                <div class="dropdown-header">
                    <span>Notifications</span>

                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item"><a href="#alerts" class="nav-link active" data-toggle="tab" role="tab">Alerts</a></li>
                        <li class="nav-item"><a href="#logs" class="nav-link" data-toggle="tab" role="tab">Logs</a></li>
                        <li class="nav-item"><a href="#activity" class="nav-link" data-toggle="tab" role="tab"><span class="bubble-mini"></span>Activity</a></li>
                    </ul>
                </div>                                        

                <div class="tab-content">
                    <div class="tab-pane active" id="alerts" role="tabpanel">
                        <div class="card-block collapse show" id="notifications">
                            <div class="media-container">
                                <ul class="clearfix">
                                    <li class="clearfix">
                                        <a href="#" class="media-thumb"><i class="ico-cart"></i>
                                        </a><a href="#" class="media-title"><div>You have new order</div><span class="media-time">Just now</span></a>
                                    </li>
                                    <li class="clearfix">
                                        <a href="#" class="media-thumb"><i class="ico-chart-1"></i>
                                        </a><a href="#" class="media-title"><div>Sales report generated</div><span class="media-time">20 minutes ago</span></a>
                                    </li>
                                    <li class="clearfix">
                                        <a href="#" class="media-thumb"><i class="ico-tick"></i>
                                        </a><a href="#" class="media-title"><div>Task completed</div><span class="media-time">Yesterday at 2:23 pm</span></a>
                                    </li>
                                    <li class="clearfix">
                                        <a href="#" class="media-thumb"><i class="ico-server"></i>
                                        </a><a href="#" class="media-title"><div>Server load (80%)</div><span class="media-time">Currently</span></a>
                                    </li>
                                    <li class="clearfix">
                                        <a href="#" class="media-thumb"><i class="ico-user"></i>
                                        </a><a href="#" class="media-title"><div>New user registered</div><span class="media-time">currently</span></a>
                                    </li>
                                    <li class="clearfix">
                                        <a href="#" class="media-thumb"><i class="ico-upload-1"></i>
                                        </a><a href="#" class="media-title"><div>New file uploaded</div><span class="media-time">Currently</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="logs" role="tabpanel">
                        <div class="card-block collapse show" id="notifications">
                            <ul class="list logs">
                                <li class="border-left border-xlg border-danger">Server overloaded at 87%<small>Few minutes ago</small></li>
                                <li class="border-left border-xlg border-info">New user registered<small>Yesterday</small></li>
                                <li class="border-left border-xlg border-warning">New order received<small>Yesterday</small></li>
                                <li class="border-left border-xlg border-success">System updated<small>2 days ago</small></li>
                                <li class="border-left border-xlg border-info">New user registered<small>3 days ago</small></li>
                            </ul>
                        </div>
                    </div>

                    <div class="tab-pane" id="activity" role="tabpanel">
                        <div class="timeline">
                            <div class="timeline-items">
                                <div class="timeline-item">
                                    <span class="timeline-item-time">10:00</span>
                                    <div class="timeline-item-cricle">
                                        <i class="ico-circle text-danger"></i>
                                    </div>
                                    <div class="timeline-item-text  pt5">
                                        Lorem ipsum dolor sit amit,consectetur
                                    </div>
                                </div>                                    
                                <div class="timeline-item">
                                    <span class="timeline-item-time">14:00</span>
                                    <div class="timeline-item-cricle">
                                        <i class="ico-circle text-primary"></i>
                                    </div>
                                    <div class="timeline-item-text pt5">
                                        New item purchased <span>Watch</span>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <span class="timeline-item-time">16:00</span>
                                    <div class="timeline-item-cricle">
                                        <i class="ico-circle text-warning"></i>
                                    </div>
                                    <div class="timeline-item-text pt5">
                                        Lorem ipsum dolor sit amit,consectetur eiusmdd..
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <span class="timeline-item-time">17:00</span>
                                    <div class="timeline-item-cricle">
                                        <i class="ico-circle text-danger"></i>
                                    </div>
                                    <div class="timeline-item-text pt5">
                                        Received a new feedback from <span>Eugine Turner</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- /NOTIFICATIONS -->                                   

        <!-- USER MENU -->
        <div class="topbar-link topbar-dropdown user-dropdown hidden-sm-down">
            <a href="#" data-toggle="dropdown"><img src="../../../assets/images/demo/img8.jpg" alt="user-avatar" class="user-avatar"/></a>
            <div class="dropdown-menu animate fadeUp quick no-padding">
                <div class="user-info">
                    <img src="../../../assets/images/demo/img8.jpg" alt="John Doe">
                    <div class="username">John Doe</div>
                    <div class="useremail">[email protected]</div>
                    <div class="clearfix"></div>
                </div>
                <ul class="user-links">
                    <li><a href="user_profile.php"><i class="ico-user"></i> My profile</a></li>
                    <li><a href="apps_emails.php"><i class="ico-inbox"></i> Inbox <span class="badge badge-danger float-right">4</span></a></li>
                    <li><a href="user_settings.php"><i class="ico-gear"></i> Profile settings</a></li>
                    <li><a href="user_unlock.php"><i class="ico-lock"></i> Lock screen</a></li>
                </ul>
                <div class="text-center p-10"><a href="user_login.php" class="btn btn-block btn-labeled"><b><i class="ico-switch-off"></i></b> Logout</a></div>
            </div>
        </div>
        <!-- /USER MENU -->

    </div>
</header>
<!-- /HEADER -->
Main Body

Below is the code for main body part of the template

<!-- MAIN CONTAINER -->
<main class="app-content">

    <!-- Your code will come here... -->

</main>
<!-- /MAIN CONTAINER -->
Footer

Below is the code for footer part of the template

<footer id="footer" class="footer-container">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="float-left">
                    © 2020 - <a href="https://templateclub.co.in" target="_blank">Template Club</a>.</div>
                <div class="float-right">
                    <div class="badge badge-pill badge-info">v 1.0.0</div>
                </div>
            </div>
        </div>
    </div>
</footer>
Rightbar

Below is the code for rightbar (Chat) of the template

<!-- RIGHTBAR -->
<div id="chats" class="chats">
    <div class="rightbar-header">
        <ul class="menu">
            <li id="people" class="active">People</li>
            <li id="activities">Activity</li>
            <li id="settings">Settings</li>
        </ul>
        <div class="close"><a onclick="close_chats()"><i class="ico-close"></i></a></div>
    </div>
    <div class="rightbar-wrapper">
        <div class="wrap">
            <div class="invite">
                <input type="text" class="form-control m-b-20" placeholder="Invite someone">
            </div>
            <!-- ONLINE FRIENDS -->
            <div class="card friend-list">
                <div class="card-block collapse show">

                    <div id="friends">
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img1.jpg" />
                            <div class="detail">
                                <span>Jane Elliott</span>
                            </div>
                            <div class="status available"></div>
                            <div class="badge badge-pill badge-danger">4</div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img2.jpg" />
                            <div class="detail">
                                <span>Florence Douglas</span>
                            </div>
                            <div class="status available"></div>
                            <div class="badge badge-pill badge-danger">23</div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img3.jpg" />
                            <div class="detail">
                                <span>Jacqueline Howell</span>
                            </div>
                            <div class="status busy"></div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img4.jpg" />
                            <div class="detail">
                                <span>Eugine Turner</span>
                            </div>
                            <div class="status away"></div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img1.jpg" />
                            <div class="detail">
                                <span>Jane Elliott</span>
                            </div>
                            <div class="status available"></div>
                            <div class="badge badge-pill badge-danger">4</div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img2.jpg" />
                            <div class="detail">
                                <span>Florence Douglas</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img3.jpg" />
                            <div class="detail">
                                <span>Jacqueline Howell</span>
                            </div>
                            <div class="status busy"></div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img4.jpg" />
                            <div class="detail">
                                <span>Eugine Turner</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img1.jpg" />
                            <div class="detail">
                                <span>Jane Elliott</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img2.jpg" />
                            <div class="detail">
                                <span>Florence Douglas</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img3.jpg" />
                            <div class="detail">
                                <span>Jacqueline Howell</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img4.jpg" />
                            <div class="detail">
                                <span>Eugine Turner</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img1.jpg" />
                            <div class="detail">
                                <span>Jane Elliott</span>
                            </div>
                            <div class="badge badge-pill badge-danger">4</div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img2.jpg" />
                            <div class="detail">
                                <span>Florence Douglas</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img3.jpg" />
                            <div class="detail">
                                <span>Jacqueline Howell</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img4.jpg" />
                            <div class="detail">
                                <span>Eugine Turner</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img1.jpg" />
                            <div class="detail">
                                <span>Jane Elliott</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img2.jpg" />
                            <div class="detail">
                                <span>Florence Douglas</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img3.jpg" />
                            <div class="detail">
                                <span>Jacqueline Howell</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="friend">
                            <img alt="user" src="../../../assets/images/demo/img4.jpg" />
                            <div class="detail">
                                <span>Eugine Turner</span>
                            </div>
                            <div class="actions">
                                <i class="ico-chat"></i>
                                <i class="ico-user-profile-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
                                <div class="dropdown-menu profile-card animate fadeUp quick">
                                    <div>
                                        <img src="../../../assets/images/demo/img1.jpg" alt="user"/>
                                        <div class="user-details">
                                            <div class="name">Jane Elliott</div>
                                            <div class="designation">Designer</div>
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="followers">
                                                        218<cite>Followers</cite>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="following">
                                                        409<cite>Following</cite>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="user-actions">
                                            <i class="ico-eye"></i>
                                            <i class="ico-user-add-2"></i>
                                            <i class="ico-user-remove-2"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- /ONLINE FRIENDS -->

        </div>
    </div>

    <!-- CHAT CONVERSATION -->
    <div id="conversation">

        <div class="conversation-header">
            <i class="ico-previous" id="back"></i>
            <div class="user-info">
                <img alt="user" src="../../../assets/images/demo/img1.jpg" />
                <div class="name">Jane Elliott</div>
                <div class="status available"></div>    
            </div>
            <div class="actions">
                <i class="ico-paperclip" data-toggle="dropdown"></i>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#" class="dropdown-item"><i class="ico-pdf"></i>Document</a></li>
                    <li><a href="#" class="dropdown-item"><i class="ico-camera-2"></i>Camera</a></li>
                    <li><a href="#" class="dropdown-item"><i class="ico-image"></i>Gallery</a></li>
                    <li><a href="#" class="dropdown-item"><i class="ico-music"></i>Audio</a></li>
                    <li><a href="#" class="dropdown-item"><i class="ico-map-marker"></i>Location</a></li>
                    <li><a href="#" class="dropdown-item"><i class="ico-user-profile-2"></i>Contact</a></li>
                </ul>
                <i class="ico-close" onclick="close_chats()"></i>
            </div>

        </div>

        <div class='chat-wrapper'>
            <div class='chat-message'>
                <div class='chat-message-wrapper'>
                    <div>
                        Sushi tonight?
                    </div>
                    <cite>10:14 am</cite>
                </div>
            </div>

            <div class='chat-message sent'>
                <div class='chat-message-wrapper'>
                    <div>
                        Pizza?
                    </div>
                    <div>
                        We had sushi last time!
                    </div>
                    <div>
                        For me one Vegetariana! Plus some chili oil on it!
                    </div>
                    <cite>10:15 am</cite>
                </div>
            </div>

            <div class='chat-message'>
                <div class='chat-message-wrapper'>
                    <div>
                        Done. Delivery takes 5 minutes!
                    </div>
                    <cite>10:16 am</cite>
                </div>
            </div>

            <div class='chat-message sent'>
                <div class='chat-message-wrapper'>
                    <div>
                        Awesome! See you later! : )
                    </div>
                    <cite>Just now</cite>
                </div>
            </div>
        </div>

        <div class="conversation-compose">
            <input class="input-msg" name="input" placeholder="Type a message..." autocomplete="off">
            <button class="send">
                <i class="ico-paper-plane"></i>
            </button>
        </div>

    </div>
    <!-- /CHAT CONVERSATION -->


    <div class="rightbar-activity" style="display: none">

        <div class="timeline">
            <div class="timeline-items p-t-10 p-b-10">
                <div class="timeline-item">
                    <span class="timeline-item-time">10:00</span>
                    <div class="timeline-item-cricle">
                        <i class="ico-circle text-danger"></i>
                    </div>
                    <div class="timeline-item-text">
                        Lorem ipsum dolor sit amit,consectetur
                    </div>
                </div>
                <div class="timeline-item m-t-20">
                    <span class="timeline-item-time">12:45</span>
                    <div class="timeline-item-cricle">
                        <i class="ico-circle text-success"></i>
                    </div>
                    <div class="timeline-item-text">
                        <span>Meeting With</span>
                    </div>
                    <div class="thumbs p-l-20">
                        <a href="#"><img src="../../../assets/images/demo/img4.jpg" title="" alt=""></a>
                        <a href="#"><img src="../../../assets/images/demo/img3.jpg" title="" alt=""></a>
                        <a href="#"><img src="../../../assets/images/demo/img1.jpg" title="" alt=""></a>
                    </div>
                </div>
                <div class="timeline-item m-t-20">
                    <span class="timeline-item-time">14:00</span>
                    <div class="timeline-item-cricle">
                        <i class="ico-circle text-primary"></i>
                    </div>
                    <div class="timeline-item-text">
                        New item purchased <span>Watch</span>
                    </div>
                </div>
                <div class="timeline-item m-t-20">
                    <span class="timeline-item-time">16:00</span>
                    <div class="timeline-item-cricle">
                        <i class="ico-circle text-warning"></i>
                    </div>
                    <div class="timeline-item-text">
                        Lorem ipsum dolor sit amit,consectetur eiusmdd tempor incididunt ut labore et dolore magna elit enim at minim veniam.
                    </div>
                </div>
                <div class="timeline-item m-t-20">
                    <span class="timeline-item-time">17:00</span>
                    <div class="timeline-item-cricle">
                        <i class="ico-circle text-danger"></i>
                    </div>
                    <div class="timeline-item-text">
                        Received a new feedback from <span>Eugine Turner</span>.
                    </div>
                </div>
                <div class="hidden-xxl-down">
                    <div class="timeline-item m-t-20">
                        <span class="timeline-item-time">19:00</span>
                        <div class="timeline-item-cricle">
                            <i class="ico-circle text-success"></i>
                        </div>
                        <div class="timeline-item-text">
                            <span>Jacqueline Howell</span> commented on your status
                        </div>
                    </div>
                    <div class="timeline-item m-t-20">
                        <span class="timeline-item-time">19:30</span>
                        <div class="timeline-item-cricle">
                            <i class="ico-circle text-info"></i>
                        </div>
                        <div class="timeline-item-text">
                            Lorem ipsum dolor sit amit,consectetur
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <div class="rightbar-settings" style="display: none">
        <div class="title">General Settings</div>

        <div class="checkbox checkbox-switchery checkbox-right">
            <label>
                <input type="checkbox" class="switchery" checked="checked">
                Notifications
            </label>
        </div>

        <div class="checkbox checkbox-switchery checkbox-right">
            <label>
                <input type="checkbox" class="switchery">
                Notification Sounds
            </label>
        </div>

        <div class="checkbox checkbox-switchery checkbox-right">
            <label>
                <input type="checkbox" class="switchery">
                Show Online
            </label>
        </div>

        <div class="checkbox checkbox-switchery checkbox-right">
            <label>
                <input type="checkbox" class="switchery">
                Activities
            </label>
        </div>
    </div>

</div>

<!-- /RIGHTBAR -->
Main Scripts

Below is the code for main js dependencies included in the template

<!-- SCRIPTS -->
<script src="../../../assets/js/jquery.min.js"></script>
<script src="../../../assets/js/jquery.ui.js"></script>
<script src="../../../assets/js/popper.min.js"></script>
<script src="../../../assets/js/bootstrap/bootstrap.min.js"></script>
<script src="../../../assets/js/jquery.slimscroll.js"></script>
<script src="../../../assets/js/pace.min.js"></script>
<script src="../../../assets/js/plugins/blockui.min.js"></script>
<script src="../../../assets/js/plugins/forms/uniform.min.js"></script>
<script src="../../../assets/js/charts/colors.js"></script>
<script src="../../../assets/js/plugins/forms/select2.min.js"></script>
<script src="../../../assets/js/plugins/forms/select2.js"></script>
<script src="../../../assets/js/plugins/forms/switchery.js"></script>
<!-- /SCRIPTS -->
<script src="https://www.google.com/jsapi"></script>
<script src="assets/js/dashboard.js"></script>

<!-- TEMPLATE SCRIPT -->
<script src="../../../assets/js/vendor.js"></script>
<!-- /TEMPLATE SCRIPT -->