equation-admin-template
Version:
Booststrap 4 admin template made by equation
2,347 lines • 172 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>Typography | 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' type='text/css'>
<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 CUSTOM STYLE FILE -->
<link href="assets/css/ui-kit/custom-typography.css" rel="stylesheet" type="text/css" />
<!-- END CUSTOM STYLE FILE -->
</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="false" 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>
<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="true" 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 class="active">
<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>Typography</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Heading </h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="example">
<div class="table-responsive">
<table class="table bordered mb-4">
<tbody>
<tr>
<td>
<h1>h1. Equation heading</h1>
</td>
<td class="align-right">2.5 rem</td>
</tr>
<tr>
<td>
<h2>h2. Equation heading</h2>
</td>
<td class="align-right">2 rem</td>
</tr>
<tr>
<td>
<h3>h3. Equation heading</h3>
</td>
<td class="align-right">1.75 rem</td>
</tr>
<tr>
<td>
<h4>h4. Equation heading</h4>
</td>
<td class="align-right">1.5 rem</td>
</tr>
<tr>
<td>
<h5>h5. Equation heading</h5>
</td>
<td class="align-right">1.25 rem</td>
</tr>
<tr>
<td>
<h6>h6. Equation heading</h6>
</td>
<td class="align-right">1 rem</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Heading </h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<blockquote class="blockquote"> Create lighter, secondary text in any heading with a generic <small> tag or the <span class="tag">.small </span> class.
</blockquote>
<div class="example">
<div class="table-responsive">
<table class="table bordered mb-4">
<tbody>
<tr>
<td>
<h1>h1. Equation heading <small>Secondary text</small></h1>
</td>
</tr>
<tr>
<td>
<h2>h2. Equation heading <small>Secondary text</small></h2>
</td>
</tr>
<tr>
<td>
<h3>h3. Equation heading <small>Secondary text</small></h3>
</td>
</tr>
<tr>
<td>
<h4>h4. Equation heading <small>Secondary text</small></h4>
</td>
</tr>
<tr>
<td>
<h5>h5. Equation heading <small>Secondary text</small></h5>
</td>
</tr>
<tr>
<td>
<h6>h6. Equation heading <small>Secondary text</small></h6>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Paragraph</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="row mb-4">
<div class="col-lg-12">
<h4 class="mb-4">Default paragraph</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
<p>Praesent molestie bibendum consequat. Suspendisse a felis eu augue venenatis egestas nec ac lectus. Nam nec felis lorem. Maecenas luctus est et nulla cursus vestibulum. Curabitur suscipit adipiscing dui eget sollicitudin. Sed accumsan tincidunt enim, in feugiat ligula ornare et.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<h4 class="mb-4">Indent paragraph</h4>
<span class="badge badge-primary mb-4 code">class .indent</span>
<p class="indent">Nullam libero odio, lacinia vel dignissim sed, consequat ac nisi. Ut at mauris sit amet sem dapibus pretium sit amet sed orci. Quisque tincidunt sodales sollicitudin. Ut purus odio, imperdiet ut laoreet ac, placerat vel ante. Nulla tincidunt sapien in metus tincidunt imperdiet. Vestibulum a dui nisi. Morbi vestibulum nulla lacinia enim tempus ullamcorper.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Additional Text</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .t-default</span>
<p class="t-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .t-major</span>
<p class="t-major">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .t-secondary</span>
<p class="t-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .t-small</span>
<p class="t-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .t-dashed</span>
<br/>
<p class="t-dashed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Transform</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .t-lowercase</span>
<p class="t-lowercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .t-uppercase</span>
<p class="t-uppercase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .t-capital</span>
<p class="t-capital">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Align</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .align-left</span>
<p class="align-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .align-right</span>
<p class="align-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .align-justify</span>
<p class="align-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
<hr/>
<div class="row mb-4">
<div class="col-lg-12">
<span class="badge badge-primary mb-4 code">class .align-center</span>
<p class="align-center mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida. Pellentesque sagittis, tellus id sagittis accumsan, augue velit pretium urna, ac interdum dui nibh et orci. Quisque dapibus elit ut metus varius ac bibendum sem luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis sagittis lorem. Praesent ac eros quam.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>V-Align</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="row align-center">
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="" style="border: 1px solid #888ea8; height: 25px; border-radius: 5px; margin-bottom: 5px;">
<span class="v-a-top" style="position: relative; bottom: 4px;">top</span>
</div>
<span class="badge badge-primary mt-2 mb-4" style="margin-bottom: 10px;">class .v-a-top</span>
</div>
<br/>
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="" style="border: 1px solid #888ea8; height: 25px; border-radius: 5px; margin-bottom: 5px;">
<span class="v-a-baseline" style="position: relative; top: 1px;">baseline</span>
</div>
<span class="badge badge-primary mt-2 mb-4" style="margin-bottom: 10px;">class .v-a-baseline</span>
</div>
<br/>
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="" style="border: 1px solid #888ea8; height: 25px; border-radius: 5px; margin-bottom: 5px;">
<span class="v-a-middle" style="position: relative; top: 1px;">middle</span>
</div>
<span class="badge badge-primary mt-2 mb-4" style="margin-bottom: 10px;">class .v-a-middle</span>
</div>
<br/>
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="" style="border: 1px solid #888ea8; height: 25px; border-radius: 5px; margin-bottom: 5px;">
<span class="v-a-bottom" style="position: relative; top: 7px;">bottom</span>
</div>
<span class="badge badge-primary mt-2 mb-4" style="margin-bottom: 10px;">class .v-a-bottom</span>
</div>
<br/>
<div class="col-lg-3 col-md-3 col-sm-6 mb-4">
<div class="" style="border: 1px solid #888ea8; height: 25px; border-radius: 5px; margin-bottom: 5px; margin-top: 25px;">
<span class="v-a-super" style="position: relative; bottom: 5px;">super</span>
</div>
<span class="badge badge-primary mt-2 mb-4" style="margin-bottom: 10px;">class .v-a-super</span>
</div>
<br/>
<div class="col-lg-3 col-md-3 col-sm-6 mb-4">
<div class="" style="border: 1px solid #888ea8; height: 25px; border-radius: 5px; margin-bottom: 5px; margin-top: 25px;">
<span class="v-a-sub" style="position: relative; top: 3px;">sub</span>
</div>
<span class="badge badge-primary mt-2 mb-4" style="margin-bottom: 10px;">class .v-a-sub</span>
</div>
<br/>
<div class="col-lg-3 col-md-3 col-sm-6 mb-4">
<div class="" style="border: 1px solid #888ea8; height: 25px; border-radius: 5px; margin-bottom: 5px; margin-top: 25px;">
<span class="v-a-top-text" style="position: relative; top: 0px;">text-top</span>
</div>
<span class="badge badge-primary mt-2 mb-4" style="margin-bottom: 10px;">class .v-a-top-txt</span>
</div>
<br/>
<div class="col-lg-3 col-md-3 col-sm-6 mb-4">
<div class="" style="border: 1px solid #888ea8; height: 25px; border-radius: 5px; margin-bottom: 5px; margin-top: 25px;">
<span class="v-a-bottom-text" style="position: relative; top: 6px;">text-bottom</span>
</div>
<span class="badge badge-primary mt-2 mb-4" style="margin-bottom: 10px;">class .v-a-bottom-txt</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Abbr</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area abbr typo-section">
<div class="row">
<div class="col-lg-12 mb-4">
<p>Lorem ipsum dolor sit amet, <abbr title="this is a abbreviation">consectetur</abbr> adipisicing elit, sed do incididunt ut labore dolore magna aliqua. Ut enim ad veniam, quis exercitation ullamco laboris nisi ut aliquip ex ea <abbr title="this is a abbreviation">commodo</abbr> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur cupidatat non <abbr title="this is a abbreviation">proident</abbr>, officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <abbr title="this is a abbreviation">incididunt</abbr> ut labore dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Highlight</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="row">
<div class="col-lg-12 mb-4">
<p class="t-lh2em">Lorem ipsum dolor sit <mark class="bg-primary">amet</mark>, consectetur adipisicing elit, sed do incididunt ut labore dolore magna aliqua. Ut enim ad veniam, quis <mark class="bg-info">exercitation</mark> ullamco laboris nisi ut <mark class="bg-success">aliquip</mark> ex ea <mark class="bg-warning">commodo</mark> consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur <mark class="bg-secondary">cupidatat</mark> non proident.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Addr</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area addr typo-section">
<div class="row">
<div class="col-lg-12 mb-4">
<address class="mb-5">
<strong class="text-primary">Theme CSS</strong><br>
121 King Street Melborurne<br>
Victoria 3000, Australia<br>
<abbr title="Phone">P:</abbr> +61 3 837 66284
</address>
<address>
<strong class="text-primary">Kindest Regards</strong><br>
<strong class="text-primary">John Doe</strong><br>
<a class="mail" href="mailto:#">theme@mail.com</a>
</address>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Blockquote</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="row">
<div class="col-lg-12 mb-4">
<blockquote class="blockquote">
<p class="d-inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
</div>
</div>
<hr/>
<div class="row">
<div class="col-lg-12 mb-4">
<span class="badge badge-primary mb-3" style="">class .place-right</span>
<br/>
<blockquote class="place-right blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-12 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .basic-blockquote</span>
<br/>
<blockquote class="basic-blockquote">
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<cite title="Source Title">Shaun Park</cite>
</blockquote>
</div>
</div>
<hr/>
<div class="row">
<div class="col-lg-6 mb-4">
<blockquote class="blockquote media-object">
<div class="media">
<div class="usr-img mr-2">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="br-30">
</div>
<div class="media-body align-self-center">
<p class="d-inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<small class="text-right">Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
</div>
<div class="col-lg-6 mb-4">
<blockquote class="blockquote media-object m-o-border-right">
<div class="media">
<div class="media-body align-self-center">
<p class="d-inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
<div class="usr-img ml-2">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="br-30">
</div>
</div>
<small class="">Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
</div>
</div>
<hr/>
<div class="row">
<div class="col-lg-6 mb-4">
<blockquote class="blockquote media-object">
<div class="media">
<div class="usr-img mr-2">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="br-6">
</div>
<div class="media-body align-self-center">
<p class="d-inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
</div>
<small class="text-right">Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
</div>
<div class="col-lg-6 mb-4">
<blockquote class="blockquote media-object m-o-border-right">
<div class="media">
<div class="media-body align-self-center">
<p class="d-inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</div>
<div class="usr-img ml-2">
<img alt="admin-profile" src="assets/img/90x90.jpg" class="br-6">
</div>
</div>
<small class="">Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="statbox widget box box-shadow">
<div class="widget-header widget-heading">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Lists</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 layout-spacing">
<div class="row">
<div class="col-lg-12 mb-4">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4 class="mb-4">Unordered list</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="container">
<ul>
<li class="mb-1">Lorem ipsum dolor sit amet</li>
<li class="mb-1">Consectetur adipiscing elit</li>
<li class="mb-1">Integer molestie lorem at massa</li>
<li class="mb-1">Facilisis in pretium nisl aliquet</li>
<li class="mb-1">Nulla volutpat aliquam velit</li>
<li>
<ul>
<li class="mb-1 mt-1">Phasellus iaculis neque</li>
<li class="mb-1">Purus sodales ultricies</li>
<li class="mb-1">Vestibulum laoreet porttitor sem</li>
<li class="mb-1">Ac tristique libero volutpat at
<ul>
<li class="mb-1 mt-1">Phasellus iaculis neque</li>
<li class="mb-1">Purus sodales ultricies</li>
<li class="mb-1">Vestibulum laoreet porttitor sem</li>
<li class="mb-1">Ac tristique libero volutpat at</li>
</ul>
</li>
</ul>
</li>
<li class="mb-1 mt-1">Faucibus porta lacus fringilla vel</li>
<li class="mb-1">Aenean sit amet erat nunc</li>
<li class="mb-1">Eget porttitor lorem</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 layout-spacing">
<div class="row">
<div class="col-lg-12 mb-4">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4 class="mb-4">Ordered list</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="container">
<ol>
<li class="mb-1">Lorem ipsum dolor sit amet</li>
<li class="mb-1">Consectetur adipiscing elit</li>
<li class="mb-1">Integer molestie lorem at massa</li>
<li class="mb-1">Facilisis in pretium nisl aliquet</li>
<li class="mb-1">Nulla volutpat aliquam velit
<ol>
<li class="mb-1 mt-1">Phasellus iaculis neque</li>
<li class="mb-1">Purus sodales ultricies</li>
<li class="mb-1">Vestibulum laoreet porttitor sem</li>
<li class="mb-1">Ac tristique libero volutpat at
<ol>
<li class="mb-1 mt-1">Phasellus iaculis neque</li>
<li class="mb-1">Purus sodales ultricies</li>
<li class="mb-1">Vestibulum laoreet porttitor sem</li>
<li class="mb-1">Ac tristique libero volutpat at</li>
</ol>
</li>
</ol>
</li>
<li class="mb-1 mt-1">Faucibus porta lacus fringilla vel</li>
<li class="mb-1">Aenean sit amet erat nunc</li>
<li class="mb-1">Eget porttitor lorem</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 layout-spacing">
<div class="row">
<div class="col-lg-12 mb-4">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4 class="mb-4">Inline</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="container">
<ul class="list-inline">
<li class="list-inline-item mb-1">Nougat</li>
<li class="list-inline-item mb-1">Oreo</li>
<li class="list-inline-item mb-1">Pie</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 layout-spacing">
<div class="row">
<div class="col-lg-12 mb-4">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4 class="mb-4">with Icons</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="container">
<ul class="list-inline list-icon">
<li class="list-inline-item mb-1"> <i class="flaticon-like-circle mr-2"></i>Like</li>
<li class="list-inline-item mb-1"> <i class="flaticon-share-5 mr-2"></i>Share</li>
<li class="list-inline-item mb-1"> <i class="flaticon-comment mr-2"></i>Comment</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 layout-spacing">
<div class="row">
<div class="col-lg-12 mb-4">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4 class="mb-4">with Numbers</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="container">
<ul class="list-inline inline-ordered-list">
<li class="list-inline-item mb-1">Like</li>
<li class="list-inline-item mb-1">Share</li>
<li class="list-inline-item mb-1">Comment</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Stylized lists</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="container">
<div class="row mb-5">
<div class="col-lg-12 mb-4">
<h5>Default bullets</h5>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .simple-list</span>
<ul class="simple-list">
<li class="mb-1">Lorem ipsum dolor sit amet</li>
<li class="mb-1">Consectetur adipiscing elit</li>
<li class="mb-1">Integer molestie lorem at massa</li>
<li class="mb-1">Facilisis in pretium nisl aliquet</li>
<li class="mb-1">Nulla volutpat aliquam velit</li>
<li class="mb-1">Faucibus porta lacus fringilla vel</li>
<li class="mb-1">Aenean sit amet erat nunc</li>
<li class="mb-1">Eget porttitor lorem</li>
</ul>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .numeric-list</span>
<ol class="numeric-list">
<li class="mb-1">Lorem ipsum dolor sit amet</li>
<li class="mb-1">Consectetur adipiscing elit</li>
<li class="mb-1">Integer molestie lorem at massa</li>
<li class="mb-1">Facilisis in pretium nisl aliquet</li>
<li class="mb-1">Nulla volutpat aliquam velit</li>
<li class="mb-1">Faucibus porta lacus fringilla vel</li>
<li class="mb-1">Aenean sit amet erat nunc</li>
<li class="mb-1">Eget porttitor lorem</li>
</ol>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .numeric-list .square-marker</span>
<ol class="numeric-list square-marker">
<li class="mb-1">Lorem ipsum dolor sit amet</li>
<li class="mb-1">Consectetur adipiscing elit</li>
<li class="mb-1">Integer molestie lorem at massa</li>
<li class="mb-1">Facilisis in pretium nisl aliquet</li>
<li class="mb-1">Nulla volutpat aliquam velit</li>
<li class="mb-1">Faucibus porta lacus fringilla vel</li>
<li class="mb-1">Aenean sit amet erat nunc</li>
<li class="mb-1">Eget porttitor lorem</li>
</ol>
</div>
</div>
<div class="row mb-5">
<div class="col-lg-12 mb-4">
<h5>Colored bullets <span class="badge badge-primary text-lowercase mb-4" style="">class .bullet-*</span></h5>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .bullet-primary</span>
<ul class="simple-list bullet-primary">
<li class="mb-1">Lorem ipsum dolor sit amet</li>
<li class="mb-1">Consectetur adipiscing elit</li>
<li class="mb-1">Integer molestie lorem at massa</li>
<li class="mb-1">Facilisis in pretium nisl aliquet</li>
<li class="mb-1">Nulla volutpat aliquam velit</li>
<li class="mb-1">Faucibus porta lacus fringilla vel</li>
<li class="mb-1">Aenean sit amet erat nunc</li>
<li class="mb-1">Eget porttitor lorem</li>
</ul>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .bullet-danger</span>
<ol class="numeric-list bullet-danger">
<li class="mb-1">Lorem ipsum dolor sit amet</li>
<li class="mb-1">Consectetur adipiscing elit</li>
<li class="mb-1">Integer molestie lorem at massa</li>
<li class="mb-1">Facilisis in pretium nisl aliquet</li>
<li class="mb-1">Nulla volutpat aliquam velit</li>
<li class="mb-1">Faucibus porta lacus fringilla vel</li>
<li class="mb-1">Aenean sit amet erat nunc</li>
<li class="mb-1">Eget porttitor lorem</li>
</ol>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .bullet-warning</span>
<ol class="numeric-list square-marker bullet-warning">
<li class="mb-1">Lorem ipsum dolor sit amet</li>
<li class="mb-1">Consectetur adipiscing elit</li>
<li class="mb-1">Integer molestie lorem at massa</li>
<li class="mb-1">Facilisis in pretium nisl aliquet</li>
<li class="mb-1">Nulla volutpat aliquam velit</li>
<li class="mb-1">Faucibus porta lacus fringilla vel</li>
<li class="mb-1">Aenean sit amet erat nunc</li>
<li class="mb-1">Eget porttitor lorem</li>
</ol>
</div>
</div>
<div class="row mb-5">
<div class="col-lg-12 mb-4">
<h5>Large bullets</h5>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .simple-list .large-bullet</span>
<ul class="simple-list large-bullet bullet-success">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .numeric-list .large-bullet</span>
<ol class="numeric-list large-bullet bullet-dark">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .numeric-list .square-marker .large-bullet</span>
<ol class="numeric-list square-marker large-bullet bullet-info">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
</div>
</div>
<div class="row mb-5">
<div class="col-lg-12 mb-4">
<h5>Icon bullets</h5>
</div>
<div class="col-lg-4 col-md-6">
<span class="badge badge-primary mb-4 code" style="">class .simple-list .icon-list</span>
<ul class="simple-list bullet-primary icon-list">
<li><i class="flaticon-star-outline"></i> Lorem ipsum</li>
<li><i class="flaticon-check"></i> Lorem ipsum</li>
<li><i class="flaticon-warning"></i> Lorem ipsum</li>
<li><i class="flaticon-circle-cross"></i> Lorem ipsum</li>
</ul>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<strong class="text-secondary mb-4" style="">Icons Right Aligned</strong>
<ul class="simple-list bullet-primary icon-list mt-4">
<li>Lorem ipsum <i class="flaticon-star-fill"></i></li>
<li>Lorem ipsum sit amnet <i class="flaticon-fill-tick"></i></li>
<li>Lorem ipsum <i class="flaticon-danger-4"></i></li>
<li>Lorem ipsum sit <i class="flaticon-close-fill"></i></li>
</ul>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<strong class="text-secondary mb-4" style="">Multi-Color</strong>
<ul class="simple-list bullet-primary icon-list mt-3">
<li><i class="flaticon-star-fill text-info"></i> Lorem ipsum <span class="badge badge-primary" style="">class .text-info</span></li>
<li><i class="flaticon-fill-tick text-success"></i> Lorem ipsum <span class="badge badge-primary" style="">class .text-success</span></li>
<li><i class="flaticon-danger-4 text-warning"></i> Lorem ipsum <span class="badge badge-primary" style="">class .text-warning</span></li>
<li><i class="flaticon-close-fill text-danger"></i> Lorem ipsum <span class="badge badge-primary" style="">class .text-danger</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-7 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Description</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="row mb-4">
<div class="col-lg-12">
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4> Inline text elements</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p class="mb-5"><em>This line rendered as italicized text.</em></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 layout-spacing">
<div class="statbox widget box box-shadow">
<div class="widget-header">
<div class="row">
<div class="col-xl-12 col-md-12 col-sm-12 col-12">
<h4>Dropcap</h4>
</div>
</div>
</div>
<div class="widget-content widget-content-area typo-section">
<div class="container">
<div class="row">
<!-- Different Sizes -->
<div class="col-lg-4 mb-5">
<span class="badge badge-primary mb-4 code" style="">class .dc-large</span>
<p class="dropcap dc-large">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-lg-4 mb-5">
<span class="badge badge-primary mb-4 code" style="">class .dropcap</span>
<p class="dropcap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-lg-4 mb-5">
<span class="badge badge-primary mb-4 code" style="">class .dc-small</span>
<p class="dropcap dc-small">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- Outlines -->
<div class="col-xl-4 col-lg-6 mb-5">
<span class="badge badge-primary mb-4 code" style="">class .dc-outline-primary</span>
<p class="dropcap dc-outline-primary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-xl-4 col-lg-6 mb-5">
<span class="badge badge-primary mb-4 code" style="">class .dc-outline-info .dc-square</span>
<p class="dropcap dc-outline-info dc-square">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-xl-4 col-lg-6 mb-5">
<span class="badge badge-primary mb-4 code" style="">class .dc-outline-danger .dc-circle</span>
<p class="dropcap dc-outline-danger dc-circle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- Background -->
<div class="col-xl-4 col-lg-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .dc-bg-primary</span>
<p class="dropcap dc-bg-primary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-xl-4 col-lg-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .dc-bg-info .dc-square</span>
<p class="dropcap dc-bg-info dc-square">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-xl-4 col-lg-6 mb-4">
<span class="badge badge-primary mb-4 code" style="">class .dc-bg-danger .dc-circle</span>
<p class="dropcap dc-bg-danger dc-circle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</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 STYLES -->
<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 STYLES -->
</body>
</html>