801 lines
58 KiB
HTML
801 lines
58 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Mirrored from technext.github.io/concept/pages/typography.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 09 Oct 2021 09:53:30 GMT -->
|
||
|
|
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
|
||
|
|
<head>
|
||
|
|
<!-- Required meta tags -->
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
|
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
|
||
|
|
<!-- Bootstrap CSS -->
|
||
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
|
||
|
|
<link href="../assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="../assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
|
||
|
|
<link rel="stylesheet" href="../assets/libs/css/style.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- main wrapper -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="dashboard-main-wrapper">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- navbar -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="dashboard-header">
|
||
|
|
<nav class="navbar navbar-expand-lg bg-white fixed-top">
|
||
|
|
<a class="navbar-brand" href="../index.html">Concept</a>
|
||
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
||
|
|
<ul class="navbar-nav ml-auto navbar-right-top">
|
||
|
|
<li class="nav-item">
|
||
|
|
<div id="custom-search" class="top-search-bar">
|
||
|
|
<input class="form-control" type="text" placeholder="Search..">
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item dropdown notification">
|
||
|
|
<a class="nav-link nav-icons" href="#" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-fw fa-bell"></i> <span class="indicator"></span></a>
|
||
|
|
<ul class="dropdown-menu dropdown-menu-right notification-dropdown">
|
||
|
|
<li>
|
||
|
|
<div class="notification-title"> Notification</div>
|
||
|
|
<div class="notification-list">
|
||
|
|
<div class="list-group">
|
||
|
|
<a href="#" class="list-group-item list-group-item-action active">
|
||
|
|
<div class="notification-info">
|
||
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-2.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
||
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">Jeremy Rakestraw</span>accepted your invitation to join the team.
|
||
|
|
<div class="notification-date">2 min ago</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="list-group-item list-group-item-action">
|
||
|
|
<div class="notification-info">
|
||
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-3.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
||
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">John Abraham</span>is now following you
|
||
|
|
<div class="notification-date">2 days ago</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="list-group-item list-group-item-action">
|
||
|
|
<div class="notification-info">
|
||
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-4.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
||
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">Monaan Pechi</span> is watching your main repository
|
||
|
|
<div class="notification-date">2 min ago</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="list-group-item list-group-item-action">
|
||
|
|
<div class="notification-info">
|
||
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-5.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
||
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">Jessica Caruso</span>accepted your invitation to join the team.
|
||
|
|
<div class="notification-date">2 min ago</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="list-footer"> <a href="#">View all notifications</a></div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item dropdown connection">
|
||
|
|
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-fw fa-th"></i> </a>
|
||
|
|
<ul class="dropdown-menu dropdown-menu-right connection-dropdown">
|
||
|
|
<li class="connection-list">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
||
|
|
<a href="#" class="connection-item"><img src="../assets/images/github.png" alt="" > <span>Github</span></a>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
||
|
|
<a href="#" class="connection-item"><img src="../assets/images/dribbble.png" alt="" > <span>Dribbble</span></a>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
||
|
|
<a href="#" class="connection-item"><img src="../assets/images/dropbox.png" alt="" > <span>Dropbox</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
||
|
|
<a href="#" class="connection-item"><img src="../assets/images/bitbucket.png" alt=""> <span>Bitbucket</span></a>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
||
|
|
<a href="#" class="connection-item"><img src="../assets/images/mail_chimp.png" alt="" ><span>Mail chimp</span></a>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
||
|
|
<a href="#" class="connection-item"><img src="../assets/images/slack.png" alt="" > <span>Slack</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<div class="conntection-footer"><a href="#">More</a></div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item dropdown nav-user">
|
||
|
|
<a class="nav-link nav-user-img" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/avatar-1.jpg" alt="" class="user-avatar-md rounded-circle"></a>
|
||
|
|
<div class="dropdown-menu dropdown-menu-right nav-user-dropdown" aria-labelledby="navbarDropdownMenuLink2">
|
||
|
|
<div class="nav-user-info">
|
||
|
|
<h5 class="mb-0 text-white nav-user-name">John Abraham</h5>
|
||
|
|
<span class="status"></span><span class="ml-2">Available</span>
|
||
|
|
</div>
|
||
|
|
<a class="dropdown-item" href="#"><i class="fas fa-user mr-2"></i>Account</a>
|
||
|
|
<a class="dropdown-item" href="#"><i class="fas fa-cog mr-2"></i>Setting</a>
|
||
|
|
<a class="dropdown-item" href="#"><i class="fas fa-power-off mr-2"></i>Logout</a>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end navbar -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- left sidebar -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="nav-left-sidebar sidebar-dark">
|
||
|
|
<div class="menu-list">
|
||
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
||
|
|
<a class="d-xl-none d-lg-none" href="#">Dashboard</a>
|
||
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
|
|
<span class="navbar-toggler-icon"></span>
|
||
|
|
</button>
|
||
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||
|
|
<ul class="navbar-nav flex-column">
|
||
|
|
<li class="nav-divider">
|
||
|
|
Menu
|
||
|
|
</li>
|
||
|
|
<li class="nav-item ">
|
||
|
|
<a class="nav-link active" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1" aria-controls="submenu-1"><i class="fa fa-fw fa-user-circle"></i>Dashboard <span class="badge badge-success">6</span></a>
|
||
|
|
<div id="submenu-1" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="index.html" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2" aria-controls="submenu-1-2">E-Commerce</a>
|
||
|
|
<div id="submenu-1-2" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../index.html">E Commerce Dashboard</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../ecommerce-product.html">Product List</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../ecommerce-product-single.html">Product Single</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../ecommerce-product-checkout.html">Product Checkout</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../dashboard-finance.html">Finance</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../dashboard-sales.html">Sales</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-1" aria-controls="submenu-1-1">Infulencer</a>
|
||
|
|
<div id="submenu-1-1" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../dashboard-influencer.html">Influencer</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../influencer-finder.html">Influencer Finder</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="../influencer-profile.html">Influencer Profile</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2"><i class="fa fa-fw fa-rocket"></i>UI Elements</a>
|
||
|
|
<div id="submenu-2" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="cards.html">Cards <span class="badge badge-secondary">New</span></a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="general.html">General</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="carousel.html">Carousel</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="listgroup.html">List Group</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="typography.html">Typography</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="accordions.html">Accordions</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="tabs.html">Tabs</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3"><i class="fas fa-fw fa-chart-pie"></i>Chart</a>
|
||
|
|
<div id="submenu-3" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="chart-c3.html">C3 Charts</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="chart-chartist.html">Chartist Charts</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="chart-charts.html">Chart</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="chart-morris.html">Morris</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="chart-sparkline.html">Sparkline</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="chart-gauge.html">Guage</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item ">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-4" aria-controls="submenu-4"><i class="fab fa-fw fa-wpforms"></i>Forms</a>
|
||
|
|
<div id="submenu-4" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="form-elements.html">Form Elements</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="form-validation.html">Parsely Validations</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="multiselect.html">Multiselect</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-5" aria-controls="submenu-5"><i class="fas fa-fw fa-table"></i>Tables</a>
|
||
|
|
<div id="submenu-5" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="general-table.html">General Tables</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="data-tables.html">Data Tables</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-divider">
|
||
|
|
Features
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-6" aria-controls="submenu-6"><i class="fas fa-fw fa-file"></i>Pages</a>
|
||
|
|
<div id="submenu-6" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="invoice.html">Invoice</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="blank-page.html">Blank Page</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="blank-page-header.html">Blank Page Header</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="login.html">Login</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="404-page.html">404 page</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="sign-up.html">Sign up Page</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="forgot-password.html">Forgot Password</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="pricing.html">Pricing Tables</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="timeline.html">Timeline</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="calendar.html">Calendar</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="sortable-nestable-lists.html">Sortable/Nestable List</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="widgets.html">Widgets</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="media-object.html">Media Objects</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="cropper-image.html">Cropper</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="color-picker.html">Color Picker</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-7" aria-controls="submenu-7"><i class="fas fa-fw fa-inbox"></i>Apps <span class="badge badge-secondary">New</span></a>
|
||
|
|
<div id="submenu-7" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="inbox.html">Inbox</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="email-details.html">Email Detail</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="email-compose.html">Email Compose</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="message-chat.html">Message Chat</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-8" aria-controls="submenu-8"><i class="fas fa-fw fa-columns"></i>Icons</a>
|
||
|
|
<div id="submenu-8" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="icon-fontawesome.html">FontAwesome Icons</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="icon-material.html">Material Icons</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="icon-simple-lineicon.html">Simpleline Icon</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="icon-themify.html">Themify Icon</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="icon-flag.html">Flag Icons</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="icon-weather.html">Weather Icon</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-9" aria-controls="submenu-9"><i class="fas fa-fw fa-map-marker-alt"></i>Maps</a>
|
||
|
|
<div id="submenu-9" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="map-google.html">Google Maps</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="map-vector.html">Vector Maps</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-10" aria-controls="submenu-10"><i class="fas fa-f fa-folder"></i>Menu Level</a>
|
||
|
|
<div id="submenu-10" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#">Level 1</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-11" aria-controls="submenu-11">Level 2</a>
|
||
|
|
<div id="submenu-11" class="collapse submenu" style="">
|
||
|
|
<ul class="nav flex-column">
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#">Level 1</a>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#">Level 2</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li class="nav-item">
|
||
|
|
<a class="nav-link" href="#">Level 3</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end left sidebar -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- wrapper -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="dashboard-wrapper">
|
||
|
|
<div class="container-fluid dashboard-content ">
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-10">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- pageheader -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<div class="page-header" id="top">
|
||
|
|
<h2 class="pageheader-title">Typography </h2>
|
||
|
|
<p class="pageheader-text">Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit amet vestibulum mi. Morbi lobortis pulvinar quam.</p>
|
||
|
|
<div class="page-breadcrumb">
|
||
|
|
<nav aria-label="breadcrumb">
|
||
|
|
<ol class="breadcrumb">
|
||
|
|
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></li>
|
||
|
|
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">UI Elements</a></li>
|
||
|
|
<li class="breadcrumb-item active" aria-current="page">Typography</li>
|
||
|
|
</ol>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end pageheader -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- overview -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="page-section" id="overview">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<h2>Overview</h2>
|
||
|
|
<p class="lead">Nam pulvinar interdum turpis a mattis. Etiam augue leo, mollis a massa sagittis, egestas pretium risus. Aliquam auctor nibh mauris, at fringilla elit lobortis sodales. Praesent volutpat felis et placerat elementum. </p>
|
||
|
|
<ul class="list-unstyled arrow">
|
||
|
|
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||
|
|
<li>Mauris bibendum massa ut porttitor congue.</li>
|
||
|
|
<li>Morbi condimentum magna eget facilisis accumsan.</li>
|
||
|
|
<li>Proin euismod eros nec libero efficitur, a dapibus mauris condimentum. </li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end overview -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- headings -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="card" id="headings">
|
||
|
|
<h5 class="card-header">Headings</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<h1>h1. Bootstrap heading</h1>
|
||
|
|
<h2>h2. Bootstrap heading</h2>
|
||
|
|
<h3>h3. Bootstrap heading</h3>
|
||
|
|
<h4>h4. Bootstrap heading</h4>
|
||
|
|
<h5>h5. Bootstrap heading</h5>
|
||
|
|
<h6>h6. Bootstrap heading</h6>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end headings -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- display headings -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<div class="card" id="d-heading">
|
||
|
|
<h5 class="card-header">Display Headings</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<h1 class="display-1">Display 1</h1>
|
||
|
|
<h1 class="display-2">Display 2</h1>
|
||
|
|
<h1 class="display-3">Display 3</h1>
|
||
|
|
<h1 class="display-4">Display 4</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end display headings -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="row">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- body text -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<div class="card" id="text">
|
||
|
|
<h5 class="card-header">Body Text</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<p class="lead"> Maecenas eget metus quis justo semper malesuada id id leo. Mauris tristique libero mauris, vitae rutrum mi ultricies a. Vestibulum volutpat eu leo sit amet feugiat. </p>
|
||
|
|
<p>Pellentesque pellentesque elementum sem, eu interdum magna. Aenean vestibulum, erat vel tincidunt luctus, ex orci interdum est, ut vehicula erat massa ut purus. Nam sit amet odio quis ante bibendum faucibus. Mauris eleifend lobortis justo vel dictum. Aenean lobortis eleifend turpis, sit amet ullamcorper dui euismod at. </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end body text -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- alignment -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<div class="card" id="align">
|
||
|
|
<h5 class="card-header">Alignment</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<h3 class="text-left">Left aligned text.</h3>
|
||
|
|
<p class="text-left">Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-body border-top">
|
||
|
|
<h3 class="text-center">Center aligned text.</h3>
|
||
|
|
<p class="text-center">Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .</p>
|
||
|
|
</div>
|
||
|
|
<div class="card-body border-top">
|
||
|
|
<h3 class="text-right">Right aligned text.</h3>
|
||
|
|
<p class="text-right">Pellentesque vulputate arcu sed risus auctor tincidunt. Morbi eget massa turpis. Fusce aliquet dolor eu posuere tincidunt. Fusce ultricies luctus dui, dapibus pharetra risus semper non. .</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end alignment -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="row">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- unordered list -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<div class="card" id="u-list">
|
||
|
|
<h5 class="card-header">Unordered list</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<ul>
|
||
|
|
<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
|
||
|
|
<ul>
|
||
|
|
<li>Phasellus iaculis neque</li>
|
||
|
|
<li>Purus sodales ultricies</li>
|
||
|
|
<li>Vestibulum laoreet porttitor sem</li>
|
||
|
|
<li>Ac tristique libero volutpat at</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
||
|
|
<li>Aenean sit amet erat nunc</li>
|
||
|
|
<li>Eget porttitor lorem</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end unorderd list -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- ordered list -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<div class="card" id="o-list">
|
||
|
|
<h5 class="card-header">Ordered list</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<ol>
|
||
|
|
<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>Phasellus iaculis neque</li>
|
||
|
|
<li>Purus sodales ultricies</li>
|
||
|
|
<li>Vestibulum laoreet porttitor sem</li>
|
||
|
|
<li>Ac tristique libero volutpat at</li>
|
||
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
||
|
|
<li>Aenean sit amet erat nunc</li>
|
||
|
|
<li>Eget porttitor lorem</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end ordered list -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- unstyled -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="card" id="un-list">
|
||
|
|
<h5 class="card-header">Unstyled</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<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>Phasellus iaculis neque</li>
|
||
|
|
<li>Purus sodales ultricies</li>
|
||
|
|
<li>Vestibulum laoreet porttitor sem</li>
|
||
|
|
<li>Ac tristique libero volutpat at</li>
|
||
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
||
|
|
<li>Aenean sit amet erat nunc</li>
|
||
|
|
<li>Eget porttitor lorem</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end unstyled -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- list styled -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="card" id="styled-list">
|
||
|
|
<h5 class="card-header">List Styled</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<ul class="list-unstyled arrow">
|
||
|
|
<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>Phasellus iaculis neque</li>
|
||
|
|
<li>Purus sodales ultricies</li>
|
||
|
|
<li>Vestibulum laoreet porttitor sem</li>
|
||
|
|
<li>Ac tristique libero volutpat at</li>
|
||
|
|
<li>Faucibus porta lacus fringilla vel</li>
|
||
|
|
<li>Aenean sit amet erat nunc</li>
|
||
|
|
<li>Eget porttitor lorem</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end list styled -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- text elements -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="card" id="text-elements">
|
||
|
|
<h5 class="card-header">Text Elements</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<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><em>This line rendered as italicized text.</em></p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end text elements -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- blockquote -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
||
|
|
<div class="card" id="blockquote">
|
||
|
|
<h5 class="card-header">Blockquote</h5>
|
||
|
|
<div class="card-body">
|
||
|
|
<blockquote class="blockquote">
|
||
|
|
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
<div class="card-body border-top">
|
||
|
|
<blockquote class="blockquote">
|
||
|
|
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
|
|
<footer class="blockquote-footer">Someone famous in
|
||
|
|
<cite title="Source Title">Source Title</cite>
|
||
|
|
</footer>
|
||
|
|
</blockquote>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end blockquote -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-2 col-lg-2 col-md-6 col-sm-12 col-12 ">
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!--side navbar -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="sidebar-nav-fixed">
|
||
|
|
<ul class="list-unstyled">
|
||
|
|
<li><a href="#overview" class="active">Overview</a></li>
|
||
|
|
<li><a href="#headings">Headings</a></li>
|
||
|
|
<li><a href="#d-heading">Display Headings</a></li>
|
||
|
|
<li><a href="#text">Body Text</a></li>
|
||
|
|
<li><a href="#align">Alignment</a></li>
|
||
|
|
<li><a href="#u-list">Unordered list</a></li>
|
||
|
|
<li><a href="#o-list">Ordered list</a></li>
|
||
|
|
<li><a href="#un-list">Unstyled list</a></li>
|
||
|
|
<li><a href="#styled-list">Styled list</a></li>
|
||
|
|
<li><a href="#text-elements">Inline text elements</a></li>
|
||
|
|
<li><a href="#blockquote">Blockquote</a></li>
|
||
|
|
<li><a href="#top">Back to Top</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- side navbar -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- footer -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<div class="footer">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
||
|
|
Copyright © 2018 Concept. All rights reserved. Dashboard by <a href="https://colorlib.com/wp/">Colorlib</a>.
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
||
|
|
<div class="text-md-right footer-links d-none d-sm-block">
|
||
|
|
<a href="javascript: void(0);">About</a>
|
||
|
|
<a href="javascript: void(0);">Support</a>
|
||
|
|
<a href="javascript: void(0);">Contact Us</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end footer -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- end main wrapper -->
|
||
|
|
<!-- ============================================================== -->
|
||
|
|
<!-- Optional JavaScript -->
|
||
|
|
<script src="../assets/vendor/jquery/jquery-3.3.1.min.js"></script>
|
||
|
|
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
|
||
|
|
<script src="../assets/vendor/slimscroll/jquery.slimscroll.js"></script>
|
||
|
|
<script src="../assets/libs/js/main-js.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Mirrored from technext.github.io/concept/pages/typography.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 09 Oct 2021 09:53:30 GMT -->
|
||
|
|
</html>
|