[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
Backup
/
05122024
/
htdocs
/
siakad
/
mahasiswa
/
[
Home
]
File: ui-typography.html
<!DOCTYPE html> <html lang="en"> <!-- Mirrored from coderthemes.com/minton_html/layouts/default/ui-typography.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 11 Jul 2022 06:08:10 GMT --> <head> <meta charset="utf-8" /> <title>Typography | Minton - Admin & Dashboard Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" /> <meta content="Coderthemes" name="author" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- App favicon --> <link rel="shortcut icon" href="assets/images/favicon.ico"> <!-- App css --> <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bs-stylesheet" /> <link href="assets/css/app.min.css" rel="stylesheet" type="text/css" id="app-stylesheet" /> <!-- icons --> <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" /> </head> <body class="loading" data-layout='{"mode": "light", "width": "fluid", "menuPosition": "fixed", "sidebar": { "color": "light", "size": "default", "showuser": false}, "topbar": {"color": "dark"}, "showRightSidebarOnPageLoad": true}'> <!-- Begin page --> <div id="wrapper"> <!-- Topbar Start --> <div class="navbar-custom"> <div class="container-fluid"> <ul class="list-unstyled topnav-menu float-end mb-0"> <li class="d-none d-lg-block"> <form class="app-search"> <div class="app-search-box dropdown"> <div class="input-group"> <input type="search" class="form-control" placeholder="Search..." id="top-search"> <button class="btn" type="submit"> <i class="fe-search"></i> </button> </div> <div class="dropdown-menu dropdown-lg" id="search-dropdown"> <!-- item--> <div class="dropdown-header noti-title"> <h5 class="text-overflow mb-2">Found <span class="text-danger">09</span> results</h5> </div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-home me-1"></i> <span>Analytics Report</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-aperture me-1"></i> <span>How can I help you?</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-settings me-1"></i> <span>User profile settings</span> </a> <!-- item--> <div class="dropdown-header noti-title"> <h6 class="text-overflow mb-2 text-uppercase">Users</h6> </div> <div class="notification-list"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="d-flex"> <img class="d-flex me-2 rounded-circle" src="assets/images/users/avatar-2.jpg" alt="Generic placeholder image" height="32"> <div> <h5 class="m-0 font-14">Erwin E. Brown</h5> <span class="font-12 mb-0">UI Designer</span> </div> </div> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="d-flex"> <img class="d-flex me-2 rounded-circle" src="assets/images/users/avatar-5.jpg" alt="Generic placeholder image" height="32"> <div> <h5 class="m-0 font-14">Jacob Deo</h5> <span class="font-12 mb-0">Developer</span> </div> </div> </a> </div> </div> </div> </form> </li> <li class="dropdown d-inline-block d-lg-none"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="fe-search noti-icon"></i> </a> <div class="dropdown-menu dropdown-lg dropdown-menu-end p-0"> <form class="p-3"> <input type="text" class="form-control" placeholder="Search ..." aria-label="Search"> </form> </div> </li> <li class="dropdown d-none d-lg-inline-block"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-toggle="fullscreen" href="#"> <i class="fe-maximize noti-icon"></i> </a> </li> <li class="dropdown d-none d-lg-inline-block topbar-dropdown"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="fe-grid noti-icon"></i> </a> <div class="dropdown-menu dropdown-lg dropdown-menu-end p-0"> <div class="p-2"> <div class="row g-0"> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/github.png" alt="Github"> <span>GitHub</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/dribbble.png" alt="dribbble"> <span>Dribbble</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/slack.png" alt="slack"> <span>Slack</span> </a> </div> </div> <div class="row g-0"> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/g-suite.png" alt="G Suite"> <span>G Suite</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/bitbucket.png" alt="bitbucket"> <span>Bitbucket</span> </a> </div> <div class="col"> <a class="dropdown-icon-item" href="#"> <img src="assets/images/brands/dropbox.png" alt="dropbox"> <span>Dropbox</span> </a> </div> </div> </div> </div> </li> <li class="dropdown d-none d-lg-inline-block topbar-dropdown"> <a class="nav-link dropdown-toggle arrow-none waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <img src="assets/images/flags/us.jpg" alt="user-image" height="14"> </a> <div class="dropdown-menu dropdown-menu-end"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/germany.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">German</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/italy.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Italian</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/spain.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Spanish</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <img src="assets/images/flags/russia.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Russian</span> </a> </div> </li> <li class="dropdown notification-list topbar-dropdown"> <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <i class="fe-bell noti-icon"></i> <span class="badge bg-danger rounded-circle noti-icon-badge">5</span> </a> <div class="dropdown-menu dropdown-menu-end dropdown-lg"> <!-- item--> <div class="dropdown-item noti-title"> <h5 class="m-0"> <span class="float-end"> <a href="#" class="text-dark"> <small>Clear All</small> </a> </span>Notification </h5> </div> <div class="noti-scroll" data-simplebar> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item active"> <div class="notify-icon bg-soft-primary text-primary"> <i class="mdi mdi-comment-account-outline"></i> </div> <p class="notify-details">Doug Dukes commented on Admin Dashboard <small class="text-muted">1 min ago</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon"> <img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div> <p class="notify-details">Mario Drummond</p> <p class="text-muted mb-0 user-msg"> <small>Hi, How are you? What about our next meeting</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon"> <img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div> <p class="notify-details">Karen Robinson</p> <p class="text-muted mb-0 user-msg"> <small>Wow ! this admin looks good and awesome design</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon bg-soft-warning text-warning"> <i class="mdi mdi-account-plus"></i> </div> <p class="notify-details">New user registered. <small class="text-muted">5 hours ago</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon bg-info"> <i class="mdi mdi-comment-account-outline"></i> </div> <p class="notify-details">Caleb Flakelar commented on Admin <small class="text-muted">4 days ago</small> </p> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <div class="notify-icon bg-secondary"> <i class="mdi mdi-heart"></i> </div> <p class="notify-details">Carlos Crouch liked <b>Admin</b> <small class="text-muted">13 days ago</small> </p> </a> </div> <!-- All--> <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all"> View all <i class="fe-arrow-right"></i> </a> </div> </li> <li class="dropdown notification-list topbar-dropdown"> <a class="nav-link dropdown-toggle nav-user me-0 waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> <img src="assets/images/users/avatar-1.jpg" alt="user-image" class="rounded-circle"> <span class="pro-user-name ms-1"> Nik Patel <i class="mdi mdi-chevron-down"></i> </span> </a> <div class="dropdown-menu dropdown-menu-end profile-dropdown "> <!-- item--> <div class="dropdown-header noti-title"> <h6 class="text-overflow m-0">Welcome !</h6> </div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-account-circle-line"></i> <span>My Account</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-settings-3-line"></i> <span>Settings</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-wallet-line"></i> <span>My Wallet <span class="badge bg-success float-end">3</span> </span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-lock-line"></i> <span>Lock Screen</span> </a> <div class="dropdown-divider"></div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="ri-logout-box-line"></i> <span>Logout</span> </a> </div> </li> <li class="dropdown notification-list"> <a href="javascript:void(0);" class="nav-link right-bar-toggle waves-effect waves-light"> <i class="fe-settings noti-icon"></i> </a> </li> </ul> <!-- LOGO --> <div class="logo-box"> <a href="index.html" class="logo logo-dark text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm-dark.png" alt="" height="24"> <!-- <span class="logo-lg-text-light">Minton</span> --> </span> <span class="logo-lg"> <img src="assets/images/logo-dark.png" alt="" height="20"> <!-- <span class="logo-lg-text-light">M</span> --> </span> </a> <a href="index.html" class="logo logo-light text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm.png" alt="" height="24"> </span> <span class="logo-lg"> <img src="assets/images/logo-light.png" alt="" height="20"> </span> </a> </div> <ul class="list-unstyled topnav-menu topnav-menu-left m-0"> <li> <button class="button-menu-mobile waves-effect waves-light"> <i class="fe-menu"></i> </button> </li> <li> <!-- Mobile menu toggle (Horizontal Layout)--> <a class="navbar-toggle nav-link" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content"> <div class="lines"> <span></span> <span></span> <span></span> </div> </a> <!-- End mobile menu toggle--> </li> <li class="dropdown d-none d-xl-block"> <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> Create New <i class="mdi mdi-chevron-down"></i> </a> <div class="dropdown-menu"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-briefcase me-1"></i> <span>New Projects</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-user me-1"></i> <span>Create Users</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-bar-chart-line- me-1"></i> <span>Revenue Report</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-settings me-1"></i> <span>Settings</span> </a> <div class="dropdown-divider"></div> <!-- item--> <a href="javascript:void(0);" class="dropdown-item"> <i class="fe-headphones me-1"></i> <span>Help & Support</span> </a> </div> </li> <li class="dropdown dropdown-mega d-none d-xl-block"> <a class="nav-link dropdown-toggle waves-effect waves-light" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false"> Mega Menu <i class="mdi mdi-chevron-down"></i> </a> <div class="dropdown-menu dropdown-megamenu"> <div class="row"> <div class="col-sm-8"> <div class="row"> <div class="col-md-4"> <h5 class="text-dark mt-0">UI Components</h5> <ul class="list-unstyled megamenu-list"> <li> <a href="javascript:void(0);">Widgets</a> </li> <li> <a href="javascript:void(0);">Nestable List</a> </li> <li> <a href="javascript:void(0);">Range Sliders</a> </li> <li> <a href="javascript:void(0);">Masonry Items</a> </li> <li> <a href="javascript:void(0);">Sweet Alerts</a> </li> <li> <a href="javascript:void(0);">Treeview Page</a> </li> <li> <a href="javascript:void(0);">Tour Page</a> </li> </ul> </div> <div class="col-md-4"> <h5 class="text-dark mt-0">Applications</h5> <ul class="list-unstyled megamenu-list"> <li> <a href="javascript:void(0);">eCommerce Pages</a> </li> <li> <a href="javascript:void(0);">CRM Pages</a> </li> <li> <a href="javascript:void(0);">Email</a> </li> <li> <a href="javascript:void(0);">Calendar</a> </li> <li> <a href="javascript:void(0);">Team Contacts</a> </li> <li> <a href="javascript:void(0);">Task Board</a> </li> <li> <a href="javascript:void(0);">Email Templates</a> </li> </ul> </div> <div class="col-md-4"> <h5 class="text-dark mt-0">Extra Pages</h5> <ul class="list-unstyled megamenu-list"> <li> <a href="javascript:void(0);">Left Sidebar with User</a> </li> <li> <a href="javascript:void(0);">Menu Collapsed</a> </li> <li> <a href="javascript:void(0);">Small Left Sidebar</a> </li> <li> <a href="javascript:void(0);">New Header Style</a> </li> <li> <a href="javascript:void(0);">Search Result</a> </li> <li> <a href="javascript:void(0);">Gallery Pages</a> </li> <li> <a href="javascript:void(0);">Maintenance & Coming Soon</a> </li> </ul> </div> </div> </div> <div class="col-sm-4"> <div class="text-center mt-3"> <h3 class="text-dark">Special Discount Sale!</h3> <h4>Save up to 70% off.</h4> <button class="btn btn-primary rounded-pill mt-3">Download Now</button> </div> </div> </div> </div> </li> </ul> <div class="clearfix"></div> </div> </div> <!-- end Topbar --> <!-- ========== Left Sidebar Start ========== --> <div class="left-side-menu"> <!-- LOGO --> <div class="logo-box"> <a href="index.html" class="logo logo-dark text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm-dark.png" alt="" height="24"> <!-- <span class="logo-lg-text-light">Minton</span> --> </span> <span class="logo-lg"> <img src="assets/images/logo-dark.png" alt="" height="20"> <!-- <span class="logo-lg-text-light">M</span> --> </span> </a> <a href="index.html" class="logo logo-light text-center"> <span class="logo-sm"> <img src="assets/images/logo-sm.png" alt="" height="24"> </span> <span class="logo-lg"> <img src="assets/images/logo-light.png" alt="" height="20"> </span> </a> </div> <div class="h-100" data-simplebar> <!-- User box --> <div class="user-box text-center"> <img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="rounded-circle avatar-md"> <div class="dropdown"> <a href="#" class="text-reset dropdown-toggle h5 mt-2 mb-1 d-block" data-bs-toggle="dropdown">Nik Patel</a> <div class="dropdown-menu user-pro-dropdown"> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-user me-1"></i> <span>My Account</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-settings me-1"></i> <span>Settings</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-lock me-1"></i> <span>Lock Screen</span> </a> <!-- item--> <a href="javascript:void(0);" class="dropdown-item notify-item"> <i class="fe-log-out me-1"></i> <span>Logout</span> </a> </div> </div> <p class="text-reset">Admin Head</p> </div> <!--- Sidemenu --> <div id="sidebar-menu"> <ul id="side-menu"> <li class="menu-title">Navigation</li> <li> <a href="#sidebarDashboards" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarDashboards" class="waves-effect"> <i class="ri-dashboard-line"></i> <span class="badge bg-success rounded-pill float-end">3</span> <span> Dashboards </span> </a> <div class="collapse" id="sidebarDashboards"> <ul class="nav-second-level"> <li> <a href="index.html">Sales</a> </li> <li> <a href="dashboard-crm.html">CRM</a> </li> <li> <a href="dashboard-analytics.html">Analytics</a> </li> </ul> </div> </li> <li> <a href="#sidebarLayouts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarLayouts"> <i class="ri-layout-line"></i> <span> Layouts </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarLayouts"> <ul class="nav-second-level"> <li> <a href="layouts-horizontal.html">Horizontal</a> </li> <li> <a href="layouts-detached.html">Detached</a> </li> <li> <a href="layouts-two-column.html">Two Column Menu</a> </li> <li> <a href="layouts-preloader.html">Preloader</a> </li> </ul> </div> </li> <li class="menu-title mt-2">Apps</li> <li> <a href="apps-chat.html"> <i class="ri-message-2-line"></i> <span> Chat </span> </a> </li> <li> <a href="#sidebarEcommerce" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarEcommerce"> <i class="ri-shopping-cart-2-line"></i> <span class="badge bg-danger float-end">New</span> <span> Ecommerce </span> </a> <div class="collapse" id="sidebarEcommerce"> <ul class="nav-second-level"> <li> <a href="ecommerce-products.html">Products List</a> </li> <li> <a href="ecommerce-products-grid.html">Products Grid</a> </li> <li> <a href="ecommerce-product-detail.html">Product Detail</a> </li> <li> <a href="ecommerce-product-create.html">Create Product</a> </li> <li> <a href="ecommerce-customers.html">Customers</a> </li> <li> <a href="ecommerce-orders.html">Orders</a> </li> <li> <a href="ecommerce-orders-detail.html">Order Detail</a> </li> <li> <a href="ecommerce-sellers.html">Sellers</a> </li> <li> <a href="ecommerce-cart.html">Shopping Cart</a> </li> <li> <a href="ecommerce-checkout.html">Checkout</a> </li> </ul> </div> </li> <li> <a href="apps-calendar.html"> <i class="ri-calendar-2-line"></i> <span> Calendar </span> </a> </li> <li> <a href="#sidebarEmail" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarEmail"> <i class="ri-mail-line"></i> <span> Email </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarEmail"> <ul class="nav-second-level"> <li> <a href="email-inbox.html">Inbox</a> </li> <li> <a href="email-read.html">Read Email</a> </li> <li> <a href="email-templates.html">Email Templates</a> </li> </ul> </div> </li> <li> <a href="apps-companies.html"> <i class="ri-building-4-line"></i> <span> Companies </span> </a> </li> <li> <a href="#sidebarTasks" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarTasks"> <i class="ri-task-line"></i> <span> Tasks </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarTasks"> <ul class="nav-second-level"> <li> <a href="task-list.html">List</a> </li> <li> <a href="task-details.html">Details</a> </li> <li> <a href="task-kanban-board.html">Kanban Board</a> </li> </ul> </div> </li> <li> <a href="apps-tickets.html"> <i class="ri-customer-service-2-line"></i> <span> Tickets </span> </a> </li> <li> <a href="#sidebarContacts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarContacts"> <i class="ri-profile-line"></i> <span> Contacts </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarContacts"> <ul class="nav-second-level"> <li> <a href="contacts-list.html">Members List</a> </li> <li> <a href="contacts-profile.html">Profile</a> </li> </ul> </div> </li> <li> <a href="apps-file-manager.html"> <i class="ri-folders-line"></i> <span> File Manager </span> </a> </li> <li class="menu-title mt-2">Custom</li> <li> <a href="#sidebarAuth" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarAuth"> <i class="ri-shield-user-line"></i> <span> Auth Pages </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarAuth"> <ul class="nav-second-level"> <li> <a href="auth-login.html">Log In</a> </li> <li> <a href="auth-login-2.html">Log In 2</a> </li> <li> <a href="auth-register.html">Register</a> </li> <li> <a href="auth-register-2.html">Register 2</a> </li> <li> <a href="auth-signin-signup.html">Signin - Signup</a> </li> <li> <a href="auth-signin-signup-2.html">Signin - Signup 2</a> </li> <li> <a href="auth-recoverpw.html">Recover Password</a> </li> <li> <a href="auth-recoverpw-2.html">Recover Password 2</a> </li> <li> <a href="auth-lock-screen.html">Lock Screen</a> </li> <li> <a href="auth-lock-screen-2.html">Lock Screen 2</a> </li> <li> <a href="auth-logout.html">Logout</a> </li> <li> <a href="auth-logout-2.html">Logout 2</a> </li> <li> <a href="auth-confirm-mail.html">Confirm Mail</a> </li> <li> <a href="auth-confirm-mail-2.html">Confirm Mail 2</a> </li> </ul> </div> </li> <li> <a href="#sidebarExpages" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarExpages"> <i class="ri-pages-line"></i> <span> Extra Pages </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarExpages"> <ul class="nav-second-level"> <li> <a href="pages-starter.html">Starter</a> </li> <li> <a href="pages-timeline.html">Timeline</a> </li> <li> <a href="pages-sitemap.html">Sitemap</a> </li> <li> <a href="pages-invoice.html">Invoice</a> </li> <li> <a href="pages-faqs.html">FAQs</a> </li> <li> <a href="pages-search-results.html">Search Results</a> </li> <li> <a href="pages-pricing.html">Pricing</a> </li> <li> <a href="pages-maintenance.html">Maintenance</a> </li> <li> <a href="pages-coming-soon.html">Coming Soon</a> </li> <li> <a href="pages-gallery.html">Gallery</a> </li> <li> <a href="pages-404.html">Error 404</a> </li> <li> <a href="pages-404-alt.html">Error 404-alt</a> </li> <li> <a href="pages-500.html">Error 500</a> </li> </ul> </div> </li> <li class="menu-title mt-2">Components</li> <li> <a href="#sidebarBaseui" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarBaseui"> <i class="ri-pencil-ruler-2-line"></i> <span> Base UI </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarBaseui"> <ul class="nav-second-level"> <li> <a href="ui-avatars.html">Avatars</a> </li> <li> <a href="ui-buttons.html">Buttons</a> </li> <li> <a href="ui-cards.html">Cards</a> </li> <li> <a href="ui-carousel.html">Carousel</a> </li> <li> <a href="ui-dropdowns.html">Dropdowns</a> </li> <li> <a href="ui-video.html">Embed Video</a> </li> <li> <a href="ui-general.html">General UI</a> </li> <li> <a href="ui-grid.html">Grid</a> </li> <li> <a href="ui-images.html">Images</a> </li> <li> <a href="ui-list-group.html">List Group</a> </li> <li> <a href="ui-modals.html">Modals</a> </li> <li> <a href="ui-notifications.html">Notifications</a> </li> <li> <a href="ui-offcanvas.html">Offcanvas</a> </li> <li> <a href="ui-placeholders.html">Placeholders</a> </li> <li> <a href="ui-portlets.html">Portlets</a> </li> <li> <a href="ui-progress.html">Progress</a> </li> <li> <a href="ui-ribbons.html">Ribbons</a> </li> <li> <a href="ui-spinners.html">Spinners</a> </li> <li> <a href="ui-tabs-accordions.html">Tabs & Accordions</a> </li> <li> <a href="ui-tooltips-popovers.html">Tooltips & Popovers</a> </li> <li> <a href="ui-typography.html">Typography</a> </li> </ul> </div> </li> <li> <a href="#sidebarExtendedui" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarExtendedui"> <i class="ri-stack-line"></i> <span class="badge bg-info float-end">Hot</span> <span> Extended UI </span> </a> <div class="collapse" id="sidebarExtendedui"> <ul class="nav-second-level"> <li> <a href="extended-nestable.html">Nestable List</a> </li> <li> <a href="extended-range-slider.html">Range Slider</a> </li> <li> <a href="extended-sweet-alert.html">Sweet Alert</a> </li> <li> <a href="extended-tour.html">Tour Page</a> </li> <li> <a href="extended-treeview.html">Treeview</a> </li> <li> <a href="extended-scrollspy.html">Scrollspy</a> </li> </ul> </div> </li> <li> <a href="widgets.html"> <i class="ri-honour-line"></i> <span> Widgets </span> </a> </li> <li> <a href="#sidebarIcons" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarIcons"> <i class="ri-markup-line"></i> <span> Icons </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarIcons"> <ul class="nav-second-level"> <li> <a href="icons-feather.html">Feather</a> </li> <li> <a href="icons-remix.html">Remix</a> </li> <li> <a href="icons-boxicons.html">Boxicons</a> </li> <li> <a href="icons-mdi.html">Material Design</a> </li> <li> <a href="icons-font-awesome.html">Font Awesome 5</a> </li> <li> <a href="icons-weather.html">Weather</a> </li> </ul> </div> </li> <li> <a href="#sidebarForms" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarForms"> <i class="ri-eraser-line"></i> <span> Forms </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarForms"> <ul class="nav-second-level"> <li> <a href="forms-elements.html">General Elements</a> </li> <li> <a href="forms-advanced.html">Advanced</a> </li> <li> <a href="forms-validation.html">Validation</a> </li> <li> <a href="forms-pickers.html">Pickers</a> </li> <li> <a href="forms-wizard.html">Wizard</a> </li> <li> <a href="forms-masks.html">Masks</a> </li> <li> <a href="forms-quilljs.html">Quilljs Editor</a> </li> <li> <a href="forms-file-uploads.html">File Uploads</a> </li> <li> <a href="forms-x-editable.html">X Editable</a> </li> </ul> </div> </li> <li> <a href="#sidebarTables" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarTables"> <i class="ri-table-line"></i> <span> Tables </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarTables"> <ul class="nav-second-level"> <li> <a href="tables-basic.html">Basic Tables</a> </li> <li> <a href="tables-datatables.html">Data Tables</a> </li> <li> <a href="tables-editable.html">Editable Tables</a> </li> <li> <a href="tables-responsive.html">Responsive Tables</a> </li> <li> <a href="tables-footables.html">FooTable</a> </li> <li> <a href="tables-tablesaw.html">Tablesaw Tables</a> </li> </ul> </div> </li> <li> <a href="#sidebarCharts" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarCharts"> <i class="ri-bar-chart-line"></i> <span> Charts </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarCharts"> <ul class="nav-second-level"> <li> <a href="charts-flot.html">Flot</a> </li> <li> <a href="charts-apex.html">Apex</a> </li> <li> <a href="charts-morris.html">Morris</a> </li> <li> <a href="charts-chartjs.html">Chartjs</a> </li> <li> <a href="charts-c3.html">C3</a> </li> <li> <a href="charts-peity.html">Peity</a> </li> <li> <a href="charts-chartist.html">Chartist</a> </li> <li> <a href="charts-sparklines.html">Sparklines</a> </li> <li> <a href="charts-knob.html">Jquery Knob</a> </li> </ul> </div> </li> <li> <a href="#sidebarMaps" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMaps"> <i class="ri-map-pin-line"></i> <span> Maps </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMaps"> <ul class="nav-second-level"> <li> <a href="maps-google.html">Google</a> </li> <li> <a href="maps-vector.html">Vector</a> </li> <li> <a href="maps-mapael.html">Mapael</a> </li> </ul> </div> </li> <li> <a href="#sidebarMultilevel" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel"> <i class="ri-share-line"></i> <span> Multi Level </span> <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel"> <ul class="nav-second-level"> <li> <a href="#sidebarMultilevel2" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel2"> Second Level <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel2"> <ul class="nav-second-level"> <li> <a href="javascript: void(0);">Item 1</a> </li> <li> <a href="javascript: void(0);">Item 2</a> </li> </ul> </div> </li> <li> <a href="#sidebarMultilevel3" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel3"> Third Level <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel3"> <ul class="nav-second-level"> <li> <a href="javascript: void(0);">Item 1</a> </li> <li> <a href="#sidebarMultilevel4" data-bs-toggle="collapse" aria-expanded="false" aria-controls="sidebarMultilevel4"> Item 2 <span class="menu-arrow"></span> </a> <div class="collapse" id="sidebarMultilevel4"> <ul class="nav-second-level"> <li> <a href="javascript: void(0);">Item 1</a> </li> <li> <a href="javascript: void(0);">Item 2</a> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> </ul> </div> <!-- End Sidebar --> <div class="clearfix"></div> </div> <!-- Sidebar -left --> </div> <!-- Left Sidebar End --> <!-- ============================================================== --> <!-- Start Page Content here --> <!-- ============================================================== --> <div class="content-page"> <div class="content"> <!-- Start Content--> <div class="container-fluid"> <!-- start page title --> <div class="row"> <div class="col-12"> <div class="page-title-box"> <h4 class="page-title">Typography</h4> <div class="page-title-right"> <ol class="breadcrumb m-0"> <li class="breadcrumb-item"><a href="javascript: void(0);">Minton</a></li> <li class="breadcrumb-item"><a href="javascript: void(0);">Base UI</a></li> <li class="breadcrumb-item active">Typography</li> </ol> </div> </div> </div> </div> <!-- end page title --> <div class="row"> <div class="col-12"> <div class="card"> <div class="card-body"> <h4 class="header-title">Display headings</h4> <p class="sub-header"> Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. </p> <h1 class="display-1">Display 1</h1> <p class="text-muted">Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros hendrerit est consequat posuere et at velit.</p> <div class="clearfix"></div> <h1 class="display-2">Display 2</h1> <p class="text-muted">In nec rhoncus eros. Vestibulum eu mattis nisl. Quisque viverra viverra magna nec pulvinar. Maecenas pellentesque porta augue, consectetur facilisis diam porttitor sed. Suspendisse tempor est sodales augue rutrum tincidunt. Quisque a malesuada purus.</p> <div class="clearfix"></div> <h1 class="display-3">Display 3</h1> <p class="text-muted">Vestibulum auctor tincidunt semper. Phasellus ut vulputate lacus. Suspendisse ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.</p> <div class="clearfix"></div> <h1 class="display-4">Display 4</h1> <p class="text-muted mb-0">Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget ultrices arcu eros vel erat.</p> <div class="clearfix"></div> <h1 class="display-5">Display 5</h1> <p class="text-muted mb-0">Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget.</p> <div class="clearfix"></div> <h1 class="display-6">Display 6</h1> <p class="text-muted mb-0">Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas.</p> <div class="clearfix"></div> </div> </div> <!-- end card --> <div class="card"> <div class="card-body"> <h4 class="header-title">Headings</h4> <p class="sub-header"> All HTML headings, <code class="highlighter-rouge"><h1></code> through <code><h6></code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline. </p> <h1>This is a Heading 1</h1> <p class="text-muted">Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros hendrerit est consequat posuere et at velit.</p> <div class="clearfix"></div> <h2>This is a Heading 2</h2> <p class="text-muted">In nec rhoncus eros. Vestibulum eu mattis nisl. Quisque viverra viverra magna nec pulvinar. Maecenas pellentesque porta augue, consectetur facilisis diam porttitor sed. Suspendisse tempor est sodales augue rutrum tincidunt. Quisque a malesuada purus.</p> <div class="clearfix"></div> <h3>This is a Heading 3</h3> <p class="text-muted">Vestibulum auctor tincidunt semper. Phasellus ut vulputate lacus. Suspendisse ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.</p> <div class="clearfix"></div> <h4>This is a Heading 4</h4> <p class="text-muted">Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget ultrices arcu eros vel erat.</p> <div class="clearfix"></div> <h5>This is a Heading 5</h5> <p class="text-muted">Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. Vivamus pretium nec odio cursus elementum. Suspendisse molestie ullamcorper ornare.</p> <div class="clearfix"></div> <h6>This is a Heading 6</h6> <p class="text-muted mb-0">Donec ultricies, lacus id tempor condimentum, orci leo faucibus sem, a molestie libero lectus ac justo. ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.</p> </div> </div> <!-- end card --> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-xl-6"> <h4 class="header-title">Inline text elements</h4> <p class="sub-header"> Your awesome text goes here. </p> <p class="lead"> Your title goes here </p> <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 class="col-xl-6 mt-3 mt-xl-0"> <h4 class="header-title">Contextual Text Colors</h4> <p class="sub-header"> Your awesome text goes here. </p> <p class="text-custom"> Etiam porta sem malesuada magna mollis euismod. </p> <p class="text-pink"> Donec ullamcorper nulla non metus auctor fringilla. </p> <p class="text-muted"> Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> <p class="text-primary"> Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p class="text-success"> Duis mollis, est non commodo luctus, nisi erat porttitor ligula. </p> <p class="text-info"> Maecenas sed diam eget risus varius blandit sit amet non magna. </p> <p class="text-warning"> Etiam porta sem malesuada magna mollis euismod. </p> <p class="text-danger"> Donec ullamcorper nulla non metus auctor fringilla. </p> <p class="text-dark"> Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p class="text-purple m-b-0"> Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> </div> <!-- end col --> </div> <!-- end row --> </div> </div> <!-- end card --> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-xl-4"> <h4 class="header-title">Unordered</h4> <p class="sub-header"> A list of items in which the order does not explicitly matter. </p> <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> <!-- end col --> <div class="col-xl-4 mt-3 mt-xl-0"> <h4 class="header-title">Ordered</h4> <p class="sub-header"> A list of items in which the order does explicitly matter. </p> <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 <ol> <li> Phasellus iaculis neque </li> <li> Purus sodales ultricies </li> <li> Vestibulum laoreet porttitor sem </li> <li> Ac tristique libero volutpat at </li> </ol> </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ol> </div> <!-- end col --> <div class="col-xl-4 mt-3 mt-xl-0"> <h4 class="header-title">Unstyled</h4> <p class="sub-header"> <strong>This only applies to immediate children list items</strong>, meaning you will need to add the class for any nested lists as well. </p> <ul class="list-unstyled"> <li> Lorem ipsum dolor sit amet </li> <li> Integer molestie lorem at massa <ul> <li> Phasellus iaculis neque </li> </ul> </li> <li> Faucibus porta lacus fringilla vel </li> <li> Eget porttitor lorem </li> </ul> <h5>Inline</h5> <p class="text-muted "> Place all list items on a single line with <code> display: inline-block;</code> and some light padding. </p> <ul class="list-inline mb-0"> <li class="list-inline-item"> Lorem ipsum </li> <li class="list-inline-item"> Phasellus iaculis </li> <li class="list-inline-item"> Nulla volutpat </li> </ul> </div> <!-- end col --> </div> <!-- end row --> </div> </div> <!-- end card --> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-xl-6"> <h4 class="header-title">Blockquotes</h4> <p class="sub-header"> Your awesome text goes here. </p> <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> <p class="text-muted"> Use text utilities as needed to change the alignment of your blockquote. </p> <blockquote class="blockquote text-center border-0"> <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> <blockquote class="blockquote blockquote-reverse mb-0"> <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> <!-- end col --> <div class="col-xl-6 mt-3 mt-xl-0"> <h4 class="header-title">Description list alignment</h4> <p class="sub-header"> Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code class="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis. </p> <dl class="row mb-0"> <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> <!-- end col --> </div> <!-- end row --> </div> </div> <!-- end card --> </div> <!-- end col --> </div> <!-- end row --> </div> <!-- container --> </div> <!-- content --> <!-- Footer Start --> <footer class="footer"> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <script>document.write(new Date().getFullYear())</script> © Minton theme by <a href="#">Coderthemes</a> </div> <div class="col-md-6"> <div class="text-md-end footer-links d-none d-sm-block"> <a href="javascript:void(0);">About Us</a> <a href="javascript:void(0);">Help</a> <a href="javascript:void(0);">Contact Us</a> </div> </div> </div> </div> </footer> <!-- end Footer --> </div> <!-- ============================================================== --> <!-- End Page content --> <!-- ============================================================== --> </div> <!-- END wrapper --> <!-- Right Sidebar --> <div class="right-bar"> <div data-simplebar class="h-100"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-bordered nav-justified" role="tablist"> <li class="nav-item"> <a class="nav-link py-2" data-bs-toggle="tab" href="#chat-tab" role="tab"> <i class="mdi mdi-message-text-outline d-block font-22 my-1"></i> </a> </li> <li class="nav-item"> <a class="nav-link py-2" data-bs-toggle="tab" href="#tasks-tab" role="tab"> <i class="mdi mdi-format-list-checkbox d-block font-22 my-1"></i> </a> </li> <li class="nav-item"> <a class="nav-link py-2 active" data-bs-toggle="tab" href="#settings-tab" role="tab"> <i class="mdi mdi-cog-outline d-block font-22 my-1"></i> </a> </li> </ul> <!-- Tab panes --> <div class="tab-content pt-0"> <div class="tab-pane" id="chat-tab" role="tabpanel"> <form class="search-bar p-3"> <div class="position-relative"> <input type="text" class="form-control" placeholder="Search..."> <span class="mdi mdi-magnify"></span> </div> </form> <h6 class="fw-medium px-3 mt-2 text-uppercase">Group Chats</h6> <div class="p-2"> <a href="javascript: void(0);" class="text-reset notification-item ps-3 mb-2 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1 text-success"></i> <span class="mb-0 mt-1">App Development</span> </a> <a href="javascript: void(0);" class="text-reset notification-item ps-3 mb-2 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1 text-warning"></i> <span class="mb-0 mt-1">Office Work</span> </a> <a href="javascript: void(0);" class="text-reset notification-item ps-3 mb-2 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1 text-danger"></i> <span class="mb-0 mt-1">Personal Group</span> </a> <a href="javascript: void(0);" class="text-reset notification-item ps-3 d-block"> <i class="mdi mdi-checkbox-blank-circle-outline me-1"></i> <span class="mb-0 mt-1">Freelance</span> </a> </div> <h6 class="fw-medium px-3 mt-3 text-uppercase">Favourites <a href="javascript: void(0);" class="font-18 text-danger"><i class="float-end mdi mdi-plus-circle"></i></a></h6> <div class="p-2"> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status"></span> <img src="assets/images/users/avatar-10.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Andrew Mackie</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">It will seem like simplified English.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status"></span> <img src="assets/images/users/avatar-1.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Rory Dalyell</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">To an English person, it will seem like simplified</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status busy"></span> <img src="assets/images/users/avatar-9.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Jaxon Dunhill</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">To achieve this, it would be necessary.</p> </div> </div> </div> </a> </div> <h6 class="fw-medium px-3 mt-3 text-uppercase">Other Chats <a href="javascript: void(0);" class="font-18 text-danger"><i class="float-end mdi mdi-plus-circle"></i></a></h6> <div class="p-2 pb-4"> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status online"></span> <img src="assets/images/users/avatar-2.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Jackson Therry</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">Everyone realizes why a new common language.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status away"></span> <img src="assets/images/users/avatar-4.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Charles Deakin</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">The languages only differ in their grammar.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status online"></span> <img src="assets/images/users/avatar-5.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Ryan Salting</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">If several languages coalesce the grammar of the resulting.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status online"></span> <img src="assets/images/users/avatar-6.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Sean Howse</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">It will seem like simplified English.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status busy"></span> <img src="assets/images/users/avatar-7.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Dean Coward</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">The new common language will be more simple.</p> </div> </div> </div> </a> <a href="javascript: void(0);" class="text-reset notification-item"> <div class="d-flex align-items-start"> <div class="position-relative me-2"> <span class="user-status away"></span> <img src="assets/images/users/avatar-8.jpg" class="rounded-circle avatar-sm" alt="user-pic"> </div> <div class="flex-1 overflow-hidden"> <h6 class="mt-0 mb-1 font-14">Hayley East</h6> <div class="font-13 text-muted"> <p class="mb-0 text-truncate">One could refuse to pay expensive translators.</p> </div> </div> </div> </a> <div class="text-center mt-3"> <a href="javascript:void(0);" class="btn btn-sm btn-white"> <i class="mdi mdi-spin mdi-loading me-2"></i> Load more </a> </div> </div> </div> <div class="tab-pane" id="tasks-tab" role="tabpanel"> <h6 class="fw-medium p-3 m-0 text-uppercase">Working Tasks</h6> <div class="px-2"> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">App Development<span class="float-end">75%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Database Repair<span class="float-end">37%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-info" role="progressbar" style="width: 37%" aria-valuenow="37" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Backup Create<span class="float-end">52%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-warning" role="progressbar" style="width: 52%" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> </div> <h6 class="fw-medium px-3 mb-0 mt-4 text-uppercase">Upcoming Tasks</h6> <div class="p-2"> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Sales Reporting<span class="float-end">12%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-danger" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">Redesign Website<span class="float-end">67%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-primary" role="progressbar" style="width: 67%" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> <a href="javascript: void(0);" class="text-reset item-hovered d-block p-2"> <p class="text-muted mb-0">New Admin Design<span class="float-end">84%</span></p> <div class="progress mt-2" style="height: 4px;"> <div class="progress-bar bg-success" role="progressbar" style="width: 84%" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div> </div> </a> </div> <div class="d-grid p-3 mt-2"> <a href="javascript: void(0);" class="btn btn-success waves-effect waves-light">Create Task</a> </div> </div> <div class="tab-pane active" id="settings-tab" role="tabpanel"> <h6 class="fw-medium px-3 m-0 py-2 font-13 text-uppercase bg-light"> <span class="d-block py-1">Theme Settings</span> </h6> <div class="p-3"> <div class="alert alert-warning" role="alert"> <strong>Customize </strong> the overall color scheme, sidebar menu, etc. </div> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Color Scheme</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="color-scheme-mode" value="light" id="light-mode-check" checked> <label class="form-check-label" for="light-mode-check">Light Mode</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="color-scheme-mode" value="dark" id="dark-mode-check"> <label class="form-check-label" for="dark-mode-check">Dark Mode</label> </div> <!-- Width --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Width</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="width" value="fluid" id="fluid-check" checked> <label class="form-check-label" for="fluid-check">Fluid</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="width" value="boxed" id="boxed-check"> <label class="form-check-label" for="boxed-check">Boxed</label> </div> <!-- Topbar --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Topbar</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="topbar-color" value="dark" id="darktopbar-check" checked> <label class="form-check-label" for="darktopbar-check">Dark</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="topbar-color" value="light" id="lighttopbar-check"> <label class="form-check-label" for="lighttopbar-check">Light</label> </div> <!-- Menu positions --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Menus Positon <small>(Leftsidebar and Topbar)</small></h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="menus-position" value="fixed" id="fixed-check" checked> <label class="form-check-label" for="fixed-check">Fixed</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="menus-position" value="scrollable" id="scrollable-check"> <label class="form-check-label" for="scrollable-check">Scrollable</label> </div> <!-- Left Sidebar--> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Color</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="light" id="light-check" checked> <label class="form-check-label" for="light-check">Light</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="dark" id="dark-check"> <label class="form-check-label" for="dark-check">Dark</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="brand" id="brand-check"> <label class="form-check-label" for="brand-check">Brand</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-color" value="gradient" id="gradient-check"> <label class="form-check-label" for="gradient-check">Gradient</label> </div> <!-- size --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Left Sidebar Size</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-size" value="default" id="default-size-check" checked> <label class="form-check-label" for="default-size-check">Default</label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-size" value="condensed" id="condensed-check"> <label class="form-check-label" for="condensed-check">Condensed <small>(Extra Small size)</small></label> </div> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-size" value="compact" id="compact-check"> <label class="form-check-label" for="compact-check">Compact <small>(Small size)</small></label> </div> <!-- User info --> <h6 class="fw-medium font-14 mt-4 mb-2 pb-1">Sidebar User Info</h6> <div class="form-check form-switch mb-1"> <input class="form-check-input" type="checkbox" name="leftsidebar-user" value="fixed" id="sidebaruser-check"> <label class="form-check-label" for="sidebaruser-check">Enable</label> </div> <div class="d-grid mt-4"> <button class="btn btn-primary" id="resetBtn">Reset to Default</button> <a href="#" class="btn btn-danger mt-2" ><i class="mdi mdi-basket me-1"></i> Purchase Now</a> </div> </div> </div> </div> </div> <!-- end slimscroll-menu--> </div> <!-- /Right-bar --> <!-- Right bar overlay--> <div class="rightbar-overlay"></div> <!-- Vendor js --> <script src="assets/js/vendor.min.js"></script> <!-- App js --> <script src="assets/js/app.min.js"></script> </body> <!-- Mirrored from coderthemes.com/minton_html/layouts/default/ui-typography.html by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 11 Jul 2022 06:08:10 GMT --> </html>