equation-admin-template
Version:
Booststrap 4 admin template made by equation
2,532 lines • 185 kB
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, maximum-scale=1, shrink-to-fit=no">
<title>Ecommerce | Equation - Multipurpose Bootstrap Dashboard Template </title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="assets/css/loader.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/plugins.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES -->
<link href="assets/css/ecommerce-dashboard/timeline.css" rel="stylesheet" type="text/css" />
<link href="assets/css/ecommerce-dashboard/style.css" rel="stylesheet" type="text/css" />
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES -->
</head>
<body>
<div id="eq-loader">
<div class="eq-loader-div">
<div class="eq-loading dual-loader mx-auto mb-5"></div>
</div>
</div>
<!-- BEGIN NAVBAR -->
<header class="desktop-nav header navbar fixed-top">
<div class="nav-logo mr-sm-5 ml-sm-4">
<a href="javascript:void(0);" class="nav-link sidebarCollapse d-inline-block mr-sm-5" data-placement="bottom">
<i class="flaticon-menu-line-3"></i>
</a>
<a href="index.html" class=""> <img src="assets/img/1.png" class="img-fluid" alt="logo"></a>
</div>
<ul class="navbar-nav flex-row mr-auto">
<li class="nav-item ml-4 d-lg-none d-sm-block d-none">
<form class="form-inline search-full form-inline search animated-search" role="search">
<i class="flaticon-search-1 d-lg-none d-block"></i>
<input type="text" class="form-control search-form-control ml-lg-auto" placeholder="Search...">
</form>
</li>
<li class="nav-item d-lg-block d-none">
<form class="form-inline form-inline search animated-search" role="search">
<i class="flaticon-search-1 d-lg-none d-block"></i>
<input type="text" class="form-control search-form-control" placeholder="Search here...">
</form>
</li>
</ul>
<ul class="navbar-nav flex-row ml-lg-auto">
<li class="nav-item dropdown language-dropdown ml-4 mr-4 pr-3 pl-3 align-self-center d-lg-inline-block d-none">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="flagDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="">EN</span>
</a>
<div class="dropdown-menu position-absolute eq-animated eq-fadeInUp" aria-labelledby="flagDropdown">
<a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/fr.svg" class="flag-width" alt=""> FR</a>
<a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/jp.svg" class="flag-width" alt=""> JP</a>
<a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/ru.svg" class="flag-width" alt=""> RU</a>
<a class="dropdown-item" href="javascript:void(0);"><img src="assets/img/ca.svg" class="flag-width" alt=""> EN</a>
</div>
</li>
<li class="nav-item dropdown message-dropdown ml-lg-4 mr-lg-4 d-sm-block d-none align-self-center">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="message-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon flaticon-mail-25"></span><span class="badge badge-primary">13</span>
</a>
<div class="dropdown-menu position-absolute p-0 eq-animated eq-fadeInUp" aria-labelledby="message-dropdown">
<div class="">
<a class="dropdown-item">
<div class="">
<div class="media notification-new">
<div class="usr-img align-self-center mr-3">
<img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile">
</div>
<div class="media-body">
<div class="d-flex justify-content-between">
<p class="meta-user-name mr-3 mb-0">Kara Young</p>
<p class="meta-time align-self-center mb-0">04.02.19</p>
</div>
<p class="message-text mb-0 ">Simple and clean! Nice I'd like to </p>
</div>
</div>
</div>
</a>
<a class="dropdown-item">
<div class="">
<div class="media notification-new">
<div class="notification-icon align-self-center mr-3">
<i class="flaticon-mailbox"></i>
</div>
<div class="media-body">
<div class="d-flex justify-content-between">
<p class="meta-title mr-3 mb-0">1 new email</p>
<p class="meta-time align-self-center mb-0">04.02.19</p>
</div>
<p class="message-text mb-0 ">Anderson.Daisy@mail.com</p>
</div>
</div>
</div>
</a>
<a class="dropdown-item">
<div class="">
<div class="media">
<div class="usr-img align-self-center mr-3">
<img class="usr-img rounded-circle" src="assets/img/90x90.jpg" alt="profile">
</div>
<div class="media-body">
<div class="d-flex justify-content-between">
<p class="meta-user-name mr-3 mb-0">Oscar Garner</p>
<p class="meta-time align-self-center mb-0">04.02.19</p>
</div>
<p class="message-text mb-0 ">Simple and clean! Nice I'd like to </p>
</div>
</div>
</div>
</a>
</div>
</div>
</li>
<li class="nav-item dropdown notification-dropdown ml-3 mr-lg-4 align-self-center">
<a href="javascript:void(0);" class="nav-link dropdown-toggle" id="notification-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="icon flaticon-bell-4"></span><span class="badge badge-success">15</span>
</a>
<div class="dropdown-menu position-absolute eq-animated eq-fadeInUp" aria-labelledby="notification-dropdown">
<div class="notification-scroll">
<div class="dropdown-item">
<a href="">
<div class="media">
<div class="user-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<div class="media-body">
<span>Alan Green</span>
</div>
</div>
</a>
</div>
<div class="dropdown-item">
<a href="">
<div class="media">
<div class="user-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<div class="media-body">
<span>Irene Collins</span>
</div>
</div>
</a>
</div>
<div class="dropdown-item">
<a href="">
<div class="media">
<div class="user-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<div class="media-body">
<span>Sonia Shaw</span>
</div>
</div>
</a>
</div>
<div class="dropdown-item">
<a href="">
<div class="media">
<div class="user-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<div class="media-body">
<span>Xavier</span>
</div>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown user-profile-dropdown pl-4 pr-lg-0 pr-2 ml-lg-2 mr-lg-4 align-self-center">
<a href="javascript:void(0);" class="nav-link dropdown-toggle user">
<div class="user-profile d-lg-block d-none">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<i class="flaticon-user-7 d-lg-none d-block"></i>
</a>
</li>
</ul>
</header>
<!-- END NAVBAR -->
<!-- BEGIN MAIN CONTAINER -->
<div class="main-container" id="container">
<div class="overlay"></div>
<div class="ps-overlay"></div>
<div class="search-overlay"></div>
<!-- BEGIN MODERN -->
<div class="modernSidebar-nav header navbar">
<div class="">
<nav id="modernSidebar">
<ul class="menu-categories pl-0 m-0" id="topAccordion">
<li class="menu">
<a href="#dashboard" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">
<div class="">
<i class="flaticon-computer-6"></i>
<span>Dashboard</span>
</div>
</a>
<div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="dashboard" data-parent="#topAccordion">
<ul class="submenu-scroll">
<li>
<ul class="list-unstyled sub-submenu" id="dashboards">
<li>
<a href="index.html"> <div><i class="flaticon-computer-4"></i> Default</div> </a>
</li>
<li class="active">
<a href="ecommerce_dashboard.html"> <div><i class="flaticon-cart-2"></i> Ecommerce</div> </a>
</li>
<li>
<a href="accounting_dashboard.html"> <div><i class="flaticon-chart-line"></i> Accounting</div> </a>
</li>
<li>
<a href="analytics_dashboard.html"> <div><i class="flaticon-computer-2"></i> Analytics</div> </a>
</li>
<li>
<a href="car_dashboard.html"> <div><i class="flaticon-car"></i> Car</div> </a>
</li>
<li>
<a href="classic_dashboard.html"> <div><i class="flaticon-computer-8"></i> Classic</div> </a>
</li>
<li>
<a href="stock_market_dashboard.html"> <div><i class="flaticon-up-chart"></i> Stock Market</div> </a>
</li>
<li>
<a href="cryptocurrency_dashboard.html"> <div><i class="flaticon-bitcoin-circle"></i> Cryptocurrency</div> </a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="menu">
<a href="#uiAndComponents" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<div class="">
<i class="flaticon-3d-cube"></i>
<span>Components</span>
</div>
</a>
<div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="uiAndComponents" data-parent="#topAccordion">
<div class="submenu-scroll">
<ul class="list-unstyled">
<li>
<a href="#ui-features" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">UI KIT</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="ui-features">
<li>
<a href="ui_helper_classes.html"> Helper Classes </a>
</li>
<li>
<a href="ui_color_library.html"> Color Library </a>
</li>
<li>
<a href="ui_grid.html"> Grid System </a>
</li>
<li>
<a href="ui_typography.html"> Typography </a>
</li>
<li>
<a href="ui_shadows.html"> Shadow </a>
</li>
<li>
<a href="ui_miscellaneous.html"> Miscellaneous </a>
</li>
<li>
<a href="ui_pagination.html">Pagination</a>
</li>
<li>
<a href="ui_alert.html"> Alerts </a>
</li>
<li>
<a href="ui_tooltips_and_popovers.html"> Tooltips And Popovers </a>
</li>
<li>
<a href="ui_loader.html"> Loaders </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#ui-buttons" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Buttons <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-buttons" data-parent="#ui-features">
<li>
<a href="ui_buttons.html"> Bootstrap </a>
</li>
<li>
<a href="ui_creative.html"> Creative </a>
</li>
<li>
<a href="ui_switches.html"> Switches </a>
</li>
<li>
<a href="ui_social_button.html"> Social </a>
</li>
</ul>
</li>
<li>
<a href="ui_sweetalert.html"> Sweet Alerts </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#ui-font-icons" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Font Icons <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-font-icons" data-parent="#ui-features">
<li>
<a href="ui_flaticon_icon.html"> Flaticon </a>
</li>
<li>
<a href="ui_linea_icon.html"> Linea </a>
</li>
<li>
<a href="ui_themify_icon.html"> Themify </a>
</li>
<li>
<a href="ui_pixeden_icon.html"> Pixeden </a>
</li>
<li>
<a href="ui_fontawesome_icon.html"> Fontawesome </a>
</li>
<li>
<a href="ui_metro_icon.html"> Metro </a>
</li>
<li>
<a href="ui_weather_icon.html"> Weather </a>
</li>
</ul>
</li>
<li>
<a href="ui_tabs.html"> Tabs </a>
</li>
<li>
<a href="ui_accordion.html"> Accordions </a>
</li>
<li>
<a href="ui_modal.html"> Modals </a>
</li>
<li>
<a href="ui_sliders.html"> Range Sliders </a>
</li>
<li>
<a href="ui_timeline.html"> Timeline </a>
</li>
<li>
<a href="ui_tree.html"> Tree View </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#ui-progress" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Progress Bar <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-progress" data-parent="#ui-features">
<li>
<a href="ui_bootstrap_progress_bar.html"> Bootstrap </a>
</li>
<li>
<a href="ui_material_progress_bar.html"> Custom </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#ui-notification" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Notifications <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="ui-notification" data-parent="#ui-features">
<li>
<a href="ui_toastr.html"> Toastr </a>
</li>
<li>
<a href="ui_notification.html"> Creative </a>
</li>
<li>
<a href="ui_snackbar.html"> Snackbar </a>
</li>
</ul>
</li>
<li>
<a href="ui_session_timeout.html"> Session Timeout </a>
</li>
<li>
<a href="ui_media_object.html"> Media Object </a>
</li>
<li>
<a href="ui_list_group.html"> List Group </a>
</li>
<li>
<a href="ui_nestable_list.html"> Nested List </a>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#components" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">COMPONENTS</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="components">
<li>
<a href="component_portlet.html"> Portlets </a>
</li>
<li>
<a href="component_keypad.html"> Keypad </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-carousel" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Carousel <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-carousel" data-parent="#components">
<li>
<a href="component_bootstrap_carousel.html">Bootstrap</a>
</li>
<li>
<a href="component_carousel.html">Metro</a>
</li>
<li>
<a href="component_sliders.html">Swiper</a>
</li>
</ul>
</li>
<li>
<a href="component_rating.html"> Rating </a>
</li>
<li>
<a href="component_blockui.html"> Block UI </a>
</li>
<li>
<a href="component_popup.html"> Popup </a>
</li>
<li>
<a href="component_scroll_bars_basic.html"> Scrollbar </a>
</li>
<li>
<a href="component_todo_list.html"> Todo List </a>
</li>
<li>
<a href="component_scrollspy.html"> Scrollspy </a>
</li>
<li>
<a href="component_countdown.html"> Countdown </a>
</li>
<li>
<a href="component_counter.html"> Counter </a>
</li>
<li>
<a href="component_datetime_picker.html"> Date & Time Picker </a>
</li>
<li>
<a href="component_lightbox.html"> LightBox </a>
</li>
<li>
<a href="component_color_picker.html"> Color Picker </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-media" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Media <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-media" data-parent="#components">
<li>
<a href="component_video_player.html"> Video Player </a>
</li>
<li>
<a href="component_audio_player.html"> Audio Player </a>
</li>
</ul>
</li>
<li>
<a href="component_clipboard.html"> Clipboard </a>
</li>
<li>
<a href="component_typeahead.html"> Typeahead </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-search" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Search <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-search" data-parent="#components">
<li>
<a href="component_search_multiple.html"> Multiple </a>
</li>
<li>
<a href="component_search_web.html"> Web </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-animation" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Animations <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-animation" data-parent="#components">
<li>
<a href="component_animation_buttons.html"> Buttons </a>
</li>
<li>
<a href="component_animation_css.html"> CSS </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#component-img-crop" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Image Cropping <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="component-img-crop" data-parent="#components">
<li>
<a href="component_image_cropping_basic.html"> Basic </a>
</li>
<li>
<a href="component_image_cropping_advanced.html"> Advanced </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#element" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">ELEMENTS</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="element">
<li>
<a href="element_steps.html"> Steps </a>
</li>
<li>
<a href="element_ribbon.html"> Ribbons </a>
</li>
<li>
<a href="element_testimonial.html"> Testimonials </a>
</li>
<li>
<a href="element_team.html"> Team </a>
</li>
<li>
<a href="element_contacts.html"> Contacts </a>
</li>
<li>
<a href="element_blog.html"> Blog Elements </a>
</li>
<li>
<a href="element_pricing_table.html"> Pricing Tables </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="menu">
<a href="#tables-forms" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<div class="">
<i class="flaticon-table"></i>
<span>Tables & Forms</span>
</div>
</a>
<div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="tables-forms" data-parent="#topAccordion">
<div class="submenu-scroll">
<ul class="list-unstyled">
<li>
<a href="#tables" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">TABLES</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="tables">
<li>
<a href="table_basic.html"> Basic </a>
</li>
<li>
<a href="table_tablesaw.html"> Tablesaw</a>
</li>
<li>
<a href="table_sticky_table_header.html"> Sticky Headers</a>
</li>
<li class="sub-sub-submenu-list">
<a href="#tables-editable" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Editable <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="tables-editable" data-parent="#tables">
<li>
<a href="table_jq_spreadsheet.html"> Spreadsheet </a>
</li>
<li>
<a href="table_jquery_tabledit.html"> TableEdit </a>
</li>
<li>
<a href="table_editablegrid.html"> Editable Grid </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#tables-data-tables" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> DataTables <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="tables-data-tables" data-parent="#tables">
<li>
<a href="table_dt_zero_configuration.html"> Basic </a>
</li>
<li>
<a href="table_dt_ordering_sorting.html"> Order Sorting </a>
</li>
<li>
<a href="table_dt_multi-column_ordering.html"> Multi-Column </a>
</li>
<li>
<a href="table_dt_multiple_tables.html"> Multiple Tables</a>
</li>
<li>
<a href="table_dt_alternative_pagination.html"> Alternative Pagination</a>
</li>
<li>
<a href="table_dt_miscellaneous.html"> Miscellaneous </a>
</li>
<li>
<a href="table_dt_custom.html"> Custom </a>
</li>
<li>
<a href="table_dt_scrollable.html"> Scrollable </a>
</li>
<li>
<a href="table_dt_range_search.html"> Range Search </a>
</li>
<li>
<a href="table_dt_html5.html"> HTML5 Export </a>
</li>
<li>
<a href="table_dt_live_dom_ordering.html"> Live DOM ordering </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#forms" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">FORMS</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="forms" style="">
<li class="sub-sub-submenu-list">
<a href="#forms-bootstrap" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Bootstrap <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-bootstrap" data-parent="#forms">
<li>
<a href="form_bootstrap_basic.html"> Basic </a>
</li>
<li>
<a href="form_bootstrap_rounded.html"> Rounded </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#forms-input-group" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Input Group <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-input-group" data-parent="#forms">
<li>
<a href="form_input_group_basic.html"> Basic </a>
</li>
<li>
<a href="form_input_group_rounded.html"> Rounded </a>
</li>
</ul>
</li>
<li>
<a href="form_bootstrap_material.html"> Material </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#forms-layout" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Layouts <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-layout" data-parent="#forms">
<li>
<a href="form_layouts.html"> Basic </a>
</li>
<li>
<a href="form_layouts_rounded.html"> Rounded </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#forms-validation" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Validation <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-validation" data-parent="#forms">
<li>
<a href="form_validation.html"> Bootstrap </a>
</li>
<li>
<a href="form_jqvalidation.html"> jQuery </a>
</li>
<li>
<a href="form_validation_material.html"> Custom </a>
</li>
</ul>
</li>
<li>
<a href="form_input_mask.html"> Input Mask </a>
</li>
<li>
<a href="form_bootstrap_select.html"> Bootstrap Select </a>
</li>
<li>
<a href="form_select2.html"> Select2 </a>
</li>
<li>
<a href="form_bootstrap_touchspin.html"> TouchSpin </a>
</li>
<li>
<a href="form_multiselect.html"> Multi Select </a>
</li>
<li>
<a href="form_maxlength.html"> Maxlength </a>
</li>
<li>
<a href="form_repeater.html"> Repeater </a>
</li>
<li>
<a href="form_checkbox_radio.html"> Checkbox and Radio </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#forms-wizard" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Wizards <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="forms-wizard" data-parent="#forms">
<li>
<a href="form_bs_wizard.html"> Bootstrap </a>
</li>
<li>
<a href="form_wizard.html"> jQuery Steps </a>
</li>
</ul>
</li>
<li>
<a href="form_fileupload.html"> File Upload </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="menu">
<a href="#pages" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<div class="">
<i class="flaticon-copy"></i>
<span>Pages</span>
</div>
</a>
<div class="submenu list-unstyled collapse eq-animated eq-fadeInUp" id="pages" data-parent="#topAccordion">
<div class="submenu-scroll">
<ul class="list-unstyled">
<li>
<a href="#ecommerce" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">ECOMMERCE</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="ecommerce">
<li>
<a href="ecommerce_orders.html"> Orders </a>
</li>
<li>
<a href="ecommerce_product.html"> Products </a>
</li>
<li>
<a href="ecommerce_product_catalog.html"> Product Catalog </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#product-details" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" data-parent="#ecommerce"> Product Details <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="product-details">
<li>
<a href="ecommerce_product_details_1.html"> Product Details 1 </a>
</li>
<li>
<a href="ecommerce_product_details_2.html"> Product Details 2 </a>
</li>
</ul>
</li>
<li>
<a href="ecommerce_addedit_product.html"> Add/Edit Products </a>
</li>
<li>
<a href="ecommerce_addedit_categories.html"> Add/Edit Categories </a>
</li>
<li>
<a href="ecommerce_view_cart.html"> View Cart </a>
</li>
<li>
<a href="ecommerce_view_payments.html"> View Payments </a>
</li>
<li>
<a href="ecommerce_view_customers.html"> View Customers </a>
</li>
<li>
<a href="ecommerce_checkout.html"> Checkout </a>
</li>
<li>
<a href="ecommerce_invoices.html"> Invoice </a>
</li>
<li>
<a href="ecommerce_shipments.html"> Shipments </a>
</li>
<li>
<a href="ecommerce_products_cart.html"> Products in Cart </a>
</li>
<li>
<a href="ecommerce_coupons.html"> Coupons </a>
</li>
<li>
<a href="ecommerce_low_stock.html"> Low Stock </a>
</li>
<li>
<a href="ecommerce_best_sellers.html"> Best Sellers </a>
</li>
<li>
<a href="ecommerce_refunds.html"> Refunds </a>
</li>
<li>
<a href="ecommerce_search_terms.html"> Search Terms </a>
</li>
<li>
<a href="ecommerce_newsletters.html"> Newsletters </a>
</li>
<li>
<a href="ecommerce_wizards.html"> Payment Wizard </a>
</li>
<li>
<a href="ecommerce_reviews.html"> Reviews </a>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#page" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">PAGES</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="page">
<li>
<a href="pages_blank_page.html"> Blank Page</a>
</li>
<li>
<a href="pages_helpdesk.html"> Helpdesk </a>
</li>
<li>
<a href="pages_contact_us.html"> Contact Form </a>
</li>
<li>
<a href="pages_faq.html"> FAQ </a>
</li>
<li>
<a href="pages_blog.html"> Blog </a>
</li>
<li>
<a href="pages_privacy.html"> Privacy Policy </a>
</li>
<li>
<a href="pages_cookie_consent.html"> Cookie Consent </a>
</li>
<li>
<a href="pages_landing_page.html" target="_blank"> Landing Page </a>
</li>
<li>
<a href="pages_coming_soon.html"> Coming Soon </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#pages-error" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Error <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="pages-error" data-parent="#pages">
<li>
<a href="pages_error404.html"> 404 1 </a>
</li>
<li>
<a href="pages_error404-2.html"> 404 2 </a>
</li>
<li>
<a href="pages_error500.html"> 500 1 </a>
</li>
<li>
<a href="pages_error500-2.html"> 500 2 </a>
</li>
<li>
<a href="pages_error503.html"> 503 1 </a>
</li>
<li>
<a href="pages_error503-2.html"> 503 2 </a>
</li>
<li>
<a href="pages_maintenence.html"> Maintanence </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#users" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">USERS</span> </a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="users">
<li>
<a href="user_profile.html"> Profile </a>
</li>
<li>
<a href="user_account_setting.html"> Account Settings </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#user-login" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Login <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-login" data-parent="#users">
<li>
<a href="user_login_1.html"> Login 1 </a>
</li>
<li>
<a href="user_login_2.html"> Login 2 </a>
</li>
<li>
<a href="user_login_3.html"> Login 3 </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#user-register" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Register <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-register" data-parent="#users">
<li>
<a href="user_register_1.html"> Register 1 </a>
</li>
<li>
<a href="user_register_2.html"> Register 2 </a>
</li>
<li>
<a href="user_register_3.html"> Register 3 </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#user-passRecovery" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Password Recovery <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-passRecovery" data-parent="#users">
<li>
<a href="user_pass_recovery_1.html"> Password Recovery 1 </a>
</li>
<li>
<a href="user_pass_recovery_2.html"> Password Recovery 2 </a>
</li>
<li>
<a href="user_pass_recovery_3.html"> Password Recovery 3 </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#user-lockscreen" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Lockscreen <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="user-lockscreen" data-parent="#users">
<li>
<a href="user_lockscreen_1.html"> Lockscreen 1 </a>
</li>
<li>
<a href="user_lockscreen_2.html"> Lockscreen 2 </a>
</li>
<li>
<a href="user_lockscreen_3.html"> Lockscreen 3 </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="menu">
<a href="#app" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
<div class="">
<i class="flaticon-mail-19"></i>
<span>Apps</span>
</div>
</a>
<div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="app" data-parent="#topAccordion">
<ul class="submenu-scroll">
<li>
<ul class="list-unstyled mt-4">
<li>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="apps">
<li>
<a href="apps_chat.html"> Chat </a>
</li>
<li>
<a href="apps_mailbox.html"> Mailbox </a>
</li>
<li>
<a href="apps_mailbox_with_chat.html"> Mailbox With Chat </a>
</li>
<li>
<a href="apps_newsletter.html"> Newsletter </a>
</li>
<li>
<a href="apps_scheduler.html"> Scheduler </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#apps-calendars" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Calendar <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="apps-calendars" data-parent="#apps-calendars">
<li>
<a href="apps_basic_calendar.html"> Basic </a>
</li>
<li>
<a href="apps_full_calendar.html"> Full Calendar </a>
</li>
<li>
<a href="apps_drag_n_drop_calendar.html"> Drag n Drop </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="menu">
<a href="#more" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<div class="">
<i class="flaticon-plus"></i>
<span class="">More</span>
</div>
</a>
<div class="collapse submenu list-unstyled eq-animated eq-fadeInUp" id="more" data-parent="#topAccordion">
<div class="submenu-scroll">
<ul class="list-unstyled">
<li>
<a href="#modules" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">MODULES</span></a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="modules">
<li>
<a href="modules_widgets.html"> Widgets </a>
</li>
<li>
<a href="modules_table_and_event.html"> Tables & Events </a>
</li>
<li>
<a href="modules_charts_and_maps.html"> Charts & Maps </a>
</li>
<li>
<a href="modules_weather_and_calendar.html"> Weather & Calendar </a>
</li>
<li>
<a href="modules_cards.html"> Cards </a>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#dragndrop" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">DRAG AND DROP</span></a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="dragndrop">
<li>
<a href="dragndrop_gridstack.html"> Grid Stack</a>
</li>
<li>
<a href="dragndrop_dragula.html"> Dragula</a>
</li>
<li class="sub-sub-submenu-list">
<a href="#dragndrop-jqueryui" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> jQuery UI <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="dragndrop-jqueryui" data-parent="#dragndrop">
<li>
<a href="dragndrop_ui_product_cart.html"> Shopping Cart </a>
</li>
<li>
<a href="dragndrop_scrumboard.html"> Scrum Task Board</a>
</li>
<li>
<a href="dragndrop_scroll_bars.html"> Scrollbar</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#charts" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">CHARTS</span></a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="charts">
<li class="sub-sub-submenu-list">
<a href="#chart-amcharts" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> amCharts <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="chart-amcharts" data-parent="#charts">
<li>
<a href="am_column_and_barchart.html"> Column & Bar </a>
</li>
<li>
<a href="am_line_and_areachart.html"> Line & Area </a>
</li>
<li>
<a href="am_pie_and_donutchart.html"> Pie & Donut </a>
</li>
<li>
<a href="am_gauge_and_otherchart.html"> Gauges & Other </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#chart-c3chart" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> C3 <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="chart-c3chart" data-parent="#charts">
<li>
<a href="charts_c3_chart.html"> Simple</a>
</li>
<li>
<a href="charts_c3_api.html"> Api </a>
</li>
</ul>
</li>
<li>
<a href="charts_cssplot.html"> CSS Plot </a>
</li>
<li>
<a href="charts_morris.html"> Morris </a>
</li>
<li>
<a href="charts_jQuery_sparklines.html"> jQuery Sparklines </a>
</li>
<li class="sub-sub-submenu-list">
<a href="#chart-chartist" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Chartist <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="chart-chartist" data-parent="#charts">
<li>
<a href="charts_chartist_bar.html"> Bar </a>
</li>
<li>
<a href="charts_chartist_line.html"> Line & Area </a>
</li>
<li>
<a href="charts_chartist_pie.html"> Pie </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="list-unstyled">
<li>
<a href="#maps" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle"> <span class="">MAPS</span></a>
<ul class="list-unstyled sub-submenu collapse show eq-animated eq-fadeInUp" id="maps">
<li class="sub-sub-submenu-list">
<a href="#map-jqMapael" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> jquery Mapael <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="map-jqMapael" data-parent="#maps">
<li>
<a href="map_jquerymapael_basic.html"> Basic </a>
</li>
<li>
<a href="map_jquerymapael_advanced.html"> Advanced </a>
</li>
</ul>
</li>
<li class="sub-sub-submenu-list">
<a href="#map-vMaps" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"> Vector Maps <i class="flaticon-right-arrow"></i> </a>
<ul class="collapse list-unstyled sub-submenu eq-animated eq-fadeInUp" id="map-vMaps" data-parent="#maps">
<li>
<a href="map_amvector.html"> amVector</a>
</li>
<li>
<a href="map_jvector.html"> jVector</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
<!-- END MODERN -->
<!-- BEGIN CONTENT PART -->
<div id="content" class="main-content">
<div class="container">
<div class="page-header">
<div class="page-title">
<h3>eCommerce Dashboard</h3>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-lg-12 col-md-6 col-sm-12">
<div class="row">
<div class="col-xl-12 col-lg-6">
<div class="widget-content-area br-4 mb-4 layout-spacing">
<div class="widget t-order-widget">
<div class="row">
<div class="col-md-5 col-sm-5 col-12 text-md-left text-center pr-0 mt-sm-0 mt-4 order-1 order-sm-0">
<p class="t-o-txt mb-3 mb-sm-5 mt-3">Total Orders</p>
<p class="t-o-value">1596 <i class="flaticon-arrow-up"></i></p>
<div class="t-o-icon">
<i class="flaticon-cart-2"></i>
</div>
</div>
<div class="col-md-7 col-sm-7 col-12">
<div class="cogs mt-sm-5 mt-3 ml-md-auto mx-auto"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-lg-6">
<div class="widget-content-area br-4 layout-spacing">
<div class="widget t-sales-widget">
<i class="flaticon-close-fill cancel-row"></i>
<div class="row">
<div class="col-md-7 col-sm-7 col-12">
<div class="trading-time mt-4">
<div class="d-flex date-content justify-content-center">
<div class="text-center">
<div id="week" class="d-inline"></div>
<div id="day" class="d-inline"> </div>
<div id="month" class="d-inline"></div>
</div>
</div>
<div class="d-flex timer-content justify-content-center mt-2">
<div id="hour" class=""></div>
<div id="minut" class=""></div>
<div id="sec" class=""></div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-5 col-12 text-center text-center">
<i class="flaticon-wall-clock icon mt-3"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-12 col-md-6 col-sm-12">
<div class="statbox widget box box-shadow layout-spacing br-4">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Sales Statistics</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area p-0 sale-statistics">
<div id="sale-statistics" class="mb-4"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 layout-spacing">
<div class="statbox widget box box-shadow br-4">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Top 5 Products</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area p-0 h-100">
<div class="col-md-12">
<div id="radarchartdiv"></div>
</div>
<a href="http://www.amcharts.com/javascript-charts/" title="JavaScript charts" target="_blank" style="position: absolute; text-decoration: none; color: rgb(0, 0, 0); font-family: Verdana; font-size: 11px; opacity: 0.7; display: block; left: 8px; bottom: 8px;">JS chart by amCharts</a>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 layout-spacing">
<div class="row">
<div class="col-xl-12 mb-4">
<div class="widget-content widget-content-area br-4">
<div class="total-visits">
<div class="row">
<div class="col-md-6 col-sm-6 col-6 mb-3">
<p class="t-v-value mb-0">26789</p>
</div>
<div class="col-md-6 col-sm-6 col-6">
<div class="total-visits-charts"></div>
</div>
<div class="col-md-12">
<p class="t-v-txt d-flex">Total Visits <i class="flaticon-profits-1 align-self-center ml-2"></i></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 mb-4">
<div class="widget-content widget-content-area br-4">
<div class="unique-visits">
<div class="row">
<div class="col-md-6 col-sm-6 col-6 mb-3">
<p class="u-v-value mb-0 d-flex">18678</p>
</div>
<div class="col-md-6 col-sm-6 col-6">
<div id="unique-visits-charts"></div>
</div>
<div class="col-md-12">
<p class="u-v-txt mb-0">Unique Visits <i class="flaticon-arrows-1 align-self-center ml-2"></i></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-sm-">
<div class="widget-content widget-content-area br-4">
<div class="page-views">
<div class="row">
<div class="col-md-6 col-sm-6 col-6 mb-3">
<p class="p-v-value mb-0 d-flex">8225</p>
</div>
<div class="col-md-6 col-sm-6 col-6">
<div id="page-views"></div>
</div>
<div class="col-md-12">
<p class="p-v-txt mb-0">Page Views <i class="flaticon-up-arrow-3 align-self-center ml-2"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area p-0 traffic-sources h-100 br-4">
<div class="traffic-sources">
<div class="traffic-sources-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h6>Traffic Sources</h6>
</div>
</div>
</div>
<div class="traffic-sources-body">
<div class="table-responsive mt-4 traffic-sources-scroll">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Organic</span>
</div>
</td>
<td> <div id="t-s-organic-chart"></div> </td>
<td class="text-right"> 1700 </td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Direct</span>
</div>
</td>
<td> <div id="t-s-direct-chart"></div> </td>
<td class="text-right"> 1560 </td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Social</span>
</div>
</td>
<td> <div id="t-s-social-chart"></div> </td>
<td class="text-right"> 1390 </td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Referral</span>
</div>
</td>
<td> <div id="t-s-referral-chart"></div> </td>
<td class="text-right"> 1990 </td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Mail</span>
</div>
</td>
<td> <div id="t-s-mail-chart"></div> </td>
<td class="text-right"> 1500 </td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-sources mr-1 data-marker"></div>
<span class="t-s-name">Other</span>
</div>
</td>
<td> <div id="t-s-other-chart"></div> </td>
<td class="text-right"> 875 </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 mb-xl-12 col-lg-12 col-md-12 col-sm-12">
<div class="statbox widget box box-shadow layout-spacing br-4">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Traffic By Country</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area traffic-country">
<div class="row">
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12">
<a href="http://www.amcharts.com/javascript-maps/" title="Interactive JavaScript maps" target="_blank" style="position: absolute; text-decoration: none; color: rgb(0, 0, 0); font-family: Verdana; font-size: 11px; opacity: 0.7; display: block; left: 5px; bottom: 0;">JS map by amCharts</a>
<div id="mapdiv"></div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="table-responsive table-data traffic-country-scroll">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-country mr-1 data-marker"></div>
<span>USA</span>
</div>
</td>
<td>
<p class="mb-1">41.30%</p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 41.30%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<p class="mb-0"><i class="flaticon-arrows-1"></i> 3.67%</p>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-country mr-1 data-marker"></div>
<span>China</span>
</div>
</td>
<td>
<p class="mb-1">22.74%</p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 30.74%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<p class="mb-0"><i class="flaticon-down-arrow"></i> 3.88%</p>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-country mr-1 data-marker"></div>
<span>Japan</span>
</div>
</td>
<td>
<p class="mb-1">16.60%</p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 16.60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<p class="mb-0"><i class="flaticon-arrows-1"></i> 1.67%</p>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-country mr-1 data-marker"></div>
<span>India</span>
</div>
</td>
<td>
<p class="mb-1">10.50%</p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 10.50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<p class="mb-0"><i class="flaticon-arrows-1"></i> 0.54%</p>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-country mr-1 data-marker"></div>
<span>Russia</span>
</div>
</td>
<td>
<p class="mb-1">6.00%</p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 6.00%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<p class="mb-0"><i class="flaticon-down-arrow"></i> 2.13%</p>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class=" align-self-center d-m-traffic-country mr-1 data-marker"></div>
<span>Other</span>
</div>
</td>
<td>
<p class="mb-1">2.86%</p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 2.86%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td class="text-center">
<p class="mb-0"><i class="flaticon-down-arrow"></i> 2.13%</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area br-4 h-100">
<div class="newsletter-performance">
<div class="newsletter-performance-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h6 class="mb-4">Newsletter Performance</h6>
</div>
</div>
</div>
<div class="newsletter-performance-body">
<div class="row">
<div class="col-xl-6 col-sm-6 col-12 pr-0">
<div class="media">
<img alt="image-product" src="assets/img/100x100.jpg" class="img-fluid mr-2">
<div class="media-body">
<p class="mt-2">5% off on all Samsung Phones</p>
</div>
</div>
</div>
<div class="col-xl-6 col-sm-6 col-12 text-center">
<p class="email-count mb-0 mt-2">Total email send <span class="badge badge-primary badge-pill ml-2">9,647</span> </p>
</div>
</div>
<div class="row mt-5">
<div class="col-xl-4 col-md-4 col-sm-4 col-12 text-sm-left text-center">
<h6 class="mb-0">Total Views</h6>
<p class="n-p-views-count mb-0 d-flex justify-content-sm-start justify-content-center">3.9k <i class="flaticon-profits-1 align-self-center ml-3"></i></p>
<p class="n-p-weekend-calc">+2% This week</p>
</div>
<div class="col-xl-6 col-md-6 col-sm-6 col-12 ml-sm-auto mx-auto">
<span id="n-p-t-v-charts"></span>
</div>
</div>
<div class="row mt-5 mb-4">
<div class="col-xl-4 col-md-4 col-sm-4 col-12 text-sm-left text-center">
<h6 class="mb-0">Total Conversions</h6>
<p class="n-p-conversions mb-0 d-flex justify-content-sm-start justify-content-center">148 <i class="flaticon-arrows-1 align-self-center ml-3"></i></p>
<p class="n-p-t-c-weekend-calc">+0.7% This week</p>
</div>
<div class="col-xl-6 col-md-6 col-sm-6 col-12 ml-sm-auto mx-auto">
<span id="n-p-t-c-charts"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area br-4 h-100">
<div class="visitor-engagement">
<div class="visitor-engagement-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h6 class="mb-4">Visitor Engagement</h6>
</div>
</div>
</div>
<div class="visitor-engagement-body">
<div class="row">
<div class="col-md-12">
<a href="http://www.amcharts.com/javascript-charts/" title="JavaScript charts" target="_blank" style="text-decoration: none; color: rgb(0, 0, 0); font-family: Verdana; font-size: 11px; opacity: 0.7; display: block;">JS chart by amCharts</a>
<div id="visitor-engagement-chart"></div>
</div>
<div class="col-md-12">
<ul class="list-unstyled mx-auto mt-5">
<li class="v-e-product-name pn-1">Electronic
<span class="v-e-product-stats">
<i class=" ml-2 flaticon-up-arrow-3"></i>
</span>
</li>
<li class="v-e-product-name pn-2">News & Media
<span class="v-e-product-stats">
<i class=" ml-2 flaticon-up-arrow-3"></i>
</span>
</li>
<li class="v-e-product-name pn-3">Software
<span class="v-e-product-stats">
<i class=" ml-2 flaticon-arrow-down"></i>
</span>
</li>
<li class="v-e-product-name pn-4">Home Appliances
<span class="v-e-product-stats ">
<i class=" ml-2 flaticon-arrow-down"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row layout-spacing">
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
<div class="widget-content widget-content-area br-4 p-0">
<div class="customer-satisfaction text-center">
<h6 class="c-s-title mt-3 mb-3">Customer Satisfaction</h6>
<p class="c-s-stats mb-4">76.5%</p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="c-s-stats-data mt-5 d-flex justify-content-around">
<div class="mb-3">
<p class="mb-0">Previous</p>
<span class="">79.85%</span>
</div>
<div class="mb-3">
<p class="mb-0">New</p>
<span class="">+ 14.29%</span>
</div>
<div class="mb-3">
<p class="mb-0">Trend</p>
<i class="flaticon-profits-1 mt-1"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
<div class="widget-content widget-content-area br-4">
<div class="invoices">
<h6>Invoices</h6>
<i class="flaticon-bill"></i>
<div class="row text-center mt-4">
<div class="col-md-12 mt-2 mb-4">
<div class="d-flex justify-content-center">
<div class=" align-self-center d-m-i-due mr-1 data-marker"></div>
<span class="i-due">DUE</span>
</div>
<p class="i-due-value mt-1">$18765</p>
</div>
<div class="col-md-12">
<div class="d-flex justify-content-center">
<div class=" align-self-center d-m-i-overdue mr-1 data-marker"></div>
<span class="i-overdue">OVERDUE</span>
</div>
<p class="i-overdue-value mt-1">$56784</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-lg-12 mb-4 mt-2">
<div class="widget-content widget-content-area br-4 p-0">
<div class="widget weather-widget">
<div class="">
<div class="d-flex justify-content-between">
<div class="w-location">London</div>
<div class="w-condition">Rain</div>
</div>
<div class="d-flex justify-content-between mt-3">
<div class="w-temperature">
<span class="w-t-value">-2 </span><span class="w-t-unit">c</span>
</div>
<div class="w-icon-locator">
<i class="flaticon-weather"></i>
</div>
</div>
</div>
<div class="d-flex weather-stats">
<div class="mr-3 wind-speed">
<i class="flaticon-wind-1"></i>
<span>25 KM/H</span>
</div>
<div class="stats">
<i class="flaticon-weather-4"></i>
<span>Humidity</span>
<span class="ml-3">65%</span>
</div>
</div>
<div class="text-center">
<div class="row">
<div class="col-md-2 col-sm-2 col-6 mb-sm-0 mb-4">
<div class="">
<i class="w-icon mb-2 flaticon-cloud"></i>
<br/>
<span class="w-temp">
<span class="w-temp-value">13</span>
<span class="w-temp-unit">c</span>
</span>
</div>
</div>
<div class="col-md-2 col-sm-2 col-6 mb-sm-0 mb-4">
<div class="">
<i class="w-icon mb-2 flaticon-summer"></i>
<br/>
<span class="w-temp">
<span class="w-temp-value">15</span>
<span class="w-temp-unit">c</span>
</span>
</div>
</div>
<div class="col-md-2 col-sm-2 col-6 mb-sm-0 mb-4">
<div class="">
<i class="w-icon mb-2 flaticon-sky-rain"></i>
<br/>
<span class="w-temp">
<span class="w-temp-value">7</span>
<span class="w-temp-unit">c</span>
</span>
</div>
</div>
<div class="col-md-2 col-sm-2 col-6 mb-sm-0 mb-4">
<div class="">
<i class="w-icon mb-2 flaticon-storm"></i>
<br/>
<span class="w-temp">
<span class="w-temp-value">5</span>
<span class="w-temp-unit">c</span>
</span>
</div>
</div>
<div class="col-md-2 col-sm-2 col-6 mb-sm-0 mb-4">
<div class="">
<i class="w-icon mb-2 flaticon-wind"></i>
<br/>
<span class="w-temp">
<span class="w-temp-value">2</span>
<span class="w-temp-unit">c</span>
</span>
</div>
</div>
<div class="col-md-2 col-sm-2 col-6 mb-sm-0 mb-4">
<div class="">
<i class="w-icon mb-2 flaticon-moon-1"></i>
<br/>
<span class="w-temp">
<span class="w-temp-value">-1</span>
<span class="w-temp-unit">c</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="widget-content widget-content-area br-4 p-0">
<div class="recent-activity">
<div class="recent-activity-header">
<h6 class="mb-0">Notifications</h6>
</div>
<div class="recent-activity-body">
<div class="table-responsive mt-3">
<table class="table">
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="user">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">
<span class="usr-name">Lara Young</span> Invited to join official meeting.
</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Shaun Park</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 2 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="user">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">Assigned a new project</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Kristen</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 5 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="user">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">Invited you to like page.</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Thomas Granger</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 35 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="user">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">Completed project.</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Angie Lamb</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 30 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="user">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">Commented on your post.</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Xavier</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 10 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="f-head">
<img src="assets/img/90x90.jpg" class="rounded-circle mr-4 mCS_img_loaded" alt="user">
</div>
<div class="f-body">
<p class="a-f-comment mb-1">Created a new group for Jesse's project.</p>
<p class="meta-info mb-0">
<span class="a-f-meta-usr-name mr-2"><i class="flaticon-user-9"></i> Iris Hubbard</span>
<span class="a-f-meta-time"><i class="flaticon-stopwatch-1"></i> 15 mins</span>
</p>
</div>
</div>
</td>
<td class="text-right">
<button class="btn btn-outline-primary btn-reply-action mb-3">Reply</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-12 text-center pb-4">
<button class="btn btn-primary btn-rounded mt-1">View More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-7 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area br-4 p-0">
<div class="recent-sales">
<div class="recent-sales-header">
<div class="row">
<div class="col-md-6 col-6">
<h6 class="mb-0">Recent Sales</h6>
</div>
<div class="col-md-6 col-6 text-right">
<i class="flaticon-circle-cross"></i>
</div>
</div>
</div>
<div class="recent-sales-body">
<div class="table-responsive">
<div class=" recent-sales-scroll">
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Order Id</th>
<th>Date</th>
<th class="text-center">Performance</th>
<th class="text-center">Unit/$</th>
<th class="">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Camera</td>
<td>#0100</td>
<td>23 Dec</td>
<td class="align-center"><div id="m-a-s-chart-1"></div></td>
<td class="text-center">
<span>1</span>
<br/>
<span>$25.80</span>
</td>
<td>$51.60</td>
</tr>
<tr>
<td>Iphone</td>
<td>#0200</td>
<td>22 Dec</td>
<td class="align-center"><div id="m-a-s-chart-2"></div> </td>
<td class="text-center">
<span>2</span>
<br/>
<span>$90.50</span>
</td>
<td>$90.50</td>
</tr>
<tr>
<td>Headphone</td>
<td>#0300</td>
<td>20 Dec</td>
<td class="align-center"><div id="m-a-s-chart-3"></div> </td>
<td class="text-center">
<span>3</span>
<br/>
<span>$50.00</span>
</td>
<td>$150.00</td>
</tr>
<tr>
<td>Speakers</td>
<td>#0400</td>
<td>18 Dec</td>
<td class="align-center"><div id="m-a-s-chart-4"></div> </td>
<td class="text-center">
<span>4</span>
<br/>
<span>$43.60</span>
</td>
<td>$43.60</td>
</tr>
<tr>
<td>Watch</td>
<td>#0500</td>
<td>15 Dec</td>
<td class="align-center"><div id="m-a-s-chart-5"></div> </td>
<td class="text-center">
<span>5</span>
<br/>
<span>$49.60</span>
</td>
<td>$49.60</td>
</tr>
<tr>
<td>Sunglasses</td>
<td>#0600</td>
<td>12 Dec</td>
<td class="align-center"><div id="m-a-s-chart-6"></div> </td>
<td class="text-center">
<span>6</span>
<br/>
<span>$60.35</span>
</td>
<td>$120.75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="r-s-bottom-section text-center">
<a href="javascript:void(0);">View all</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area h-100 br-4 p-0 pb-xl-0 pb-3">
<div class="chat">
<div class="chat-header">
<div class="row">
<div class="col-md-4">
<h6 class="mb-0">Chat</h6>
</div>
<div class="col-md-8">
<div class="chat-usr-img text-center d-flex justify-content-end">
<div class="mr-3">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0 bs-tooltip">
</div>
<ul class="list-inline badge-collapsed-img mb-0 text-right">
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="ml-0 bs-tooltip">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="bs-tooltip">
</li>
<li class="list-inline-item chat-online-usr">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="bs-tooltip">
</li>
<li class="list-inline-item badge-notify mr-0">
<div class="notification">
<span class="">+5</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="chat-body">
<div class="chat-system">
<div class="chat_window">
<div class="chat-scroll">
<ul class="chat-messages pl-0"></ul>
</div>
<div class="chat-bottom-section clearfix">
<div class="input-group message_input_wrapper w-75 mx-auto">
<input type="text" class="message_input form-control br-left-30" placeholder="Type Here : )" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append mr-2">
<span class="input-group-text br-0"><i class="flaticon-smile-fill"></i></span>
<span class="input-group-text br-right-30 br-0"><i class="flaticon-send-fill"></i></span>
</div>
</div>
</div>
</div>
<div class="message_template d-none">
<div class="message">
<div class="avatar"></div>
<div class="text_wrapper">
<div class="text"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
<div class="widget-content-area br-4">
<div class="timeline-widget">
<div class="col-md-12">
<p class="heading-title timeline-title"><span>Timeline</span></p>
<section class="cd-horizontal-timeline">
<div class="timeline timeline1">
<div class="events-wrapper">
<div class="events">
<ol>
<li><a href="#0" data-date="16/01/2018" class="selected">16 Jan</a></li>
<li><a href="#0" data-date="28/02/2018">28 Feb</a></li>
<li><a href="#0" data-date="20/04/2018">20 Mar</a></li>
<li><a href="#0" data-date="20/05/2018">20 May</a></li>
<li><a href="#0" data-date="09/07/2018">09 Jul</a></li>
<li><a href="#0" data-date="30/08/2018">30 Aug</a></li>
<li><a href="#0" data-date="15/09/2018" style="width: 140px;">15 Sep</a></li>
<li><a href="#0" data-date="01/11/2018">01 Nov</a></li>
<li><a href="#0" data-date="10/12/2018">10 Dec</a></li>
<li><a href="#0" data-date="19/01/2019">29 Jan</a></li>
<li><a href="#0" data-date="03/03/2019">3 Mar</a></li>
</ol>
<span class="filling-line" aria-hidden="true"></span>
</div>
</div>
<ul class="cd-timeline-navigation">
<li><a href="#0" class="prev inactive">Prev</a></li>
<li><a href="#0" class="next">Next</a></li>
</ul>
</div>
<div class="events-content">
<ol>
<li class="selected" data-date="16/01/2017">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Horizontal Timeline</h2>
<em class="mb-5">16 January 2017</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="28/02/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">28 February 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="20/04/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="20/05/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="09/07/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="30/08/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="15/09/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="01/11/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="10/12/2018">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2018</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="19/01/2019">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2019</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
<li data-date="03/03/2019">
<div class="row">
<div class="col-md-4 timeline-right-section">
<p class="thumb-img"><img src="assets/img/350x350.jpg" class="img-thumbnail" alt="image-timeline"></p>
</div>
<div class="col-md-8">
<h2 class="mt-3">Event title here</h2>
<em class="mb-5">20 March 2019</em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.</p>
<h3><button class="btn btn-default">More...</button></h3>
</div>
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing product-cat8">
<div class="card br-4">
<div class="wrapper">
<div class="row">
<div class="col-sm-12">
<div class="product_inner text-center">
<div class="d-flex justify-content-between px-4 pt-3 pb-5 mb-2">
<span class="badge badge-pill badge-primary">Smart Watch</span>
<div>
<i class="add-to-fav flaticon-like-1"></i>
</div>
</div>
<div class="card-title text-left mt-5">
<p><span class="product-name">Fossil</span> <br/> <span class="product-quality">Pearl White</span></p>
</div>
<div class="row">
<div class="col-sm-12 mt-5">
<img alt="image-product" src="assets/img/270x270.jpg" width="300" class="img-fluid">
</div>
<div class="col-sm-12">
<p class="product-price">$ 75.99</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
<div class="row">
<div class="col-md-12">
<div class="widget-content-area br-4 mb-4">
<div class="d-flex justify-content-between t-likes">
<div class="">
<p class="mb-0">Total Likes</p>
<h5 class="mb-0">20989</h5>
</div>
<div class="">
<i class="flaticon-like-3"></i>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="widget-content-area br-4 mb-4">
<div class="d-flex justify-content-between t-shares">
<div class="">
<p class="mb-0">Total Shares</p>
<h5 class="mb-0">9325</h5>
</div>
<div class="">
<i class="flaticon-share-1"></i>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="widget-content-area br-4 mb-4">
<div class="d-flex justify-content-between t-comments">
<div class="">
<p class="mb-0">Total Comments</p>
<h5 class="mb-0">5789</h5>
</div>
<div class="">
<i class="flaticon-chat-2"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
<div class="widget-content-area br-4 mb-4 layout-spacing p-0">
<div id="user-profile-card-2" class="card br-4">
<div class="card-top-section br-4">
<div class="usr-profile-meta text-center">
<img alt="admin-profile" src="assets/img/120x120.jpg" class="img-fluid usr-profile rounded-circle">
</div>
</div>
<div class="card-body mt-4">
<div class="row mt-4">
<div class="col-md-12 text-center">
<div class="d-flex justify-content-around">
<span class="badge badge-pill badge-dark mt-2">Ecommerce</span>
<div class="usr-info-meta">
<p class="usr-name mb-0 mt-2">Sonia Shaw</p>
</div>
</div>
<h4 class="mt-5">Ideas For Online Store</h4>
<p class="mt-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="card-bottom-section">
<div class="row">
<div class="col-md-12 text-center">
<button class="btn btn-gradient-danger btn-rounded">Read More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CONTENT PART -->
</div>
<!-- END MAIN CONTAINER -->
<!-- BEGIN FOOTER -->
<footer class="footer-section theme-footer">
<div class="footer-section-1 sidebar-theme">
</div>
<div class="footer-section-2 container-fluid">
<div class="row">
<div id="toggle-grid" class="col-xl-7 col-md-6 col-sm-6 col-12 text-sm-left text-center">
<ul class="list-inline links ml-sm-5">
<li class="list-inline-item">
<a target="_blank" href="https://themeforest.net/item/equation-responsive-admin-dashboard-template/23191987">Buy</a>
</li>
</ul>
</div>
<div class="col-xl-5 col-md-6 col-sm-6 col-12">
<ul class="list-inline mb-0 d-flex justify-content-sm-end justify-content-center mr-sm-3 ml-sm-0 mx-3">
<li class="list-inline-item mr-3">
<p class="bottom-footer">© 2019 <a target="_blank" href="https://designreset.com/equation">Equation Admin Theme</a></p>
</li>
<li class="list-inline-item align-self-center">
<div class="scrollTop"><i class="flaticon-up-arrow-fill-1"></i></div>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- END FOOTER -->
<!-- BEGIN PROFILE SIDEBAR -->
<aside class="profile-sidebar text-center">
<div class="profile-content profile-content-scroll">
<div class="usr-profile">
<img src="assets/img/90x90.jpg" alt="admin-profile" class="img-fluid">
</div>
<p class="user-name mt-4 mb-4">Vincent Carpenter</p>
<div class="">
<div class="accordion" id="user-stats">
<div class="card">
<div class="card-header pb-4 mb-4" id="status">
<h6 class="mb-0" data-toggle="collapse" data-target="#user-status" aria-expanded="true" aria-controls="user-status"><i class="flaticon-view-3 mr-2"></i> Status <i class="flaticon-down-arrow ml-2"></i> </h6>
</div>
<div id="user-status" class="collapse show" aria-labelledby="status" data-parent="#user-stats">
<div class="card-body text-left">
<ul class="list-unstyled pb-4">
<li class="status-online"><a href="javascript:void(0);">Online</a></li>
<li class="status-away"><a href="javascript:void(0);">Away</a></li>
<li class="status-no-disturb"><a href="javascript:void(0);">Not Disturb</a></li>
<li class="status-invisible"><a href="javascript:void(0);">Invisible</a></li>
<li class="status-offline"><a href="javascript:void(0);">Offline</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="user-links text-left">
<ul class="list-unstyled">
<li><a href="apps_mailbox.html"><i class="flaticon-mail-22"></i> Inbox</a></li>
<li><a href="user_profile.html"><i class="flaticon-user-11"></i> My Profile</a></li>
<li><a href="user_login_1.html"><i class="flaticon-power-off"></i> Logout</a></li>
</ul>
</div>
</div>
</aside>
<!-- BEGIN PROFILE SIDEBAR -->
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="assets/js/libs/jquery-3.1.1.min.js"></script>
<script src="assets/js/loader.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="plugins/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/js/app.js"></script>
<script>
$(document).ready(function() {
App.init();
});
</script>
<script src="assets/js/custom.js"></script>
<!-- END GLOBAL MANDATORY SCRIPTS -->
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
<script src="assets/js/ui-kit/timeline/horizontal-main.js"></script>
<script src="plugins/progressbar/progressbar.min.js"></script>
<script src="plugins/charts/amcharts/amcharts.js"></script>
<script src="plugins/maps/vector/ammaps/ammap_amcharts_extension.js"></script>
<script src="plugins/maps/vector/ammaps/worldLow.js"></script>
<script src="plugins/charts/amcharts/radar.js"></script>
<script src="plugins/charts/amcharts/pie.js"></script>
<script src="plugins/charts/sparklines/jquery.sparkline.min.js"></script>
<script src="plugins/charts/amcharts/serial.js"></script>
<script src="plugins/charts/amcharts/light.js"></script>
<script src="assets/js/ecommerce-dashboard/ecommerce-custom.js"></script>
<!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
</body>
</html>