admint
Version:
Open source admin dashboard template
716 lines (712 loc) • 31.7 kB
HTML
<html class="no-js" lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="theme_bubble" />
<!-- Page Title -->
<title>UI Kits- Alert</title>
<!-- Favicon Icon -->
<link rel="icon" href="assets/img/favicon.png">
<!-- Plugins css -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/material-icons.css">
<link rel="stylesheet" type="text/css" href="assets/css/jqvmap.min.css" />
<link id="mode-option" rel="stylesheet" type="text/css" href="assets/css/style.css" />
</head>
<body>
<div class="yoo-height-b60 yoo-height-lg-b60"></div>
<header class="yoo-header yoo-style1 yoo-sticky-menu">
<div class="yoo-main-header">
<div class="yoo-main-header-in">
<div class="yoo-main-header-left">
<a href="index.html" class="yoo-logo-link yoo-light-logo"><img src="assets/img/logo-light.svg" alt="logo-light" /></a>
<!-- For Site Title -->
<!-- <span class="yoo-site-title">
<a href="index.html">Logo</a>
</span> -->
</div>
<div class="yoo-main-header-right">
<div class="yoo-nav-wrap yoo-fade-up">
<div class="yoo-nav-toggle">
<i class="material-icons-outlined">more_vert</i>
</div>
<nav class="yoo-nav yoo-desktop-nav">
<ul class="yoo-nav-list">
<li>
<a href="#"><i class="material-icons-outlined">home</i> Home</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">subscriptions</i> Features</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">folder</i> Apps</a>
</li>
</ul>
</nav>
<!-- .yoo-nav -->
</div>
<!-- .yoo-nav-wrap -->
<ul class="yoo-ex-nav yoo-style1 yoo-flex yoo-mp0">
<li>
<div class="yoo-toggle-body yoo-search-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-search-btn">
<i class="material-icons-outlined">search</i>
</span>
<div class="yoo-dropdown yoo-search-dropdown">
<form action="#" class="yoo-search yoo-style1">
<input type="text" placeholder="Search..." class="yoo-search-input">
<div class="yoo-toggle-cross">
<i class="material-icons-outlined">close</i>
</div>
<button class="yoo-search-submit"><i class="material-icons-outlined">search</i></button>
</form>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-message-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-message-btn">
<i class="material-icons-outlined">email</i>
<span class="yoo-ex-nav-label">9</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">
<span class="yoo-nofify-title-left">Messages</span>
<span class="yoo-nofify-title-right"><a href="#">Mark All as Read</a></span>
</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg1.png" alt="msg1">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Bob Dylan
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#" class="active">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg2.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
David Gilmour
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg3.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Jeff Beck
<span class="yoo-online-status yoo-live"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg4.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Guthrie Govan
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-thumb">
<img src="assets/img/msg/msg5.png" alt="">
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">
Eric Johnson
<span class="yoo-online-status"></span>
</h3>
<div class="yoo-msg">
Contrary to popular belief, Lorem Ipsum is...
</div>
<span class="yoo-notify-time">12:23</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-notice-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-notice-btn">
<i class="material-icons-outlined">notifications</i>
<span class="yoo-ex-nav-label">3</span>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">
<span class="yoo-nofify-title-left">Notifications</span>
</h2>
<ul class="yoo-nofify-list yoo-style1 yoo-mp0">
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">supervisor_account</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Invite your friends to dashboard.</h3>
<span class="yoo-notify-time">5 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color4">
<i class="material-icons-outlined">calendar_today</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">3 Tasks pending this month.</h3>
<span class="yoo-notify-time">6 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color3">
<i class="material-icons-outlined">favorite_border</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">7 People loved your activity.</h3>
<span class="yoo-notify-time">9 hour ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">chat_bubble_outline</i>
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">John commented on activity.</h3>
<span class="yoo-notify-time">1 day ago</span>
</div>
</a>
</li>
<li>
<a href="#" class="yoo-nofify-list-in">
<div class="yoo-nofify-icon yoo-icon-color1">
<img src="assets/img/msg/msg1.png" alt="msg1" />
</div>
<div class="yoo-nofify-text">
<h3 class="yoo-nofify-text-head">Click your picture or add an account.</h3>
<span class="yoo-notify-time">2 days ago</span>
</div>
</a>
</li>
</ul>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-app-area yoo-style1">
<span class="yoo-toggle-btn yoo-ex-nav-btn yoo-sidebar-btn">
<i class="material-icons-outlined">apps</i>
</span>
<div class="yoo-dropdown yoo-notify-dropdown">
<h2 class="yoo-nofify-title">Quick Navigation</h2>
<ul class="yoo-nofify-list yoo-style2 yoo-mp0">
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color1">
<i class="material-icons-outlined">bar_chart</i>
</div>
<div class="yoo-nofify-text">
<h3>Chart</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">bubble_chart</i>
</div>
<div class="yoo-nofify-text">
<h3>Big Data</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color3">
<i class="material-icons-outlined">folder_open</i>
</div>
<div class="yoo-nofify-text">
<h3>Storage</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color4">
<i class="material-icons-outlined">security</i>
</div>
<div class="yoo-nofify-text">
<h3>Security</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color3">
<i class="material-icons-outlined">layers</i>
</div>
<div class="yoo-nofify-text">
<h3>Themes</h3>
</div>
</a>
</li>
<li>
<a href="#">
<div class="yoo-nofify-icon yoo-icon-color2">
<i class="material-icons-outlined">attach_file</i>
</div>
<div class="yoo-nofify-text">
<h3>Upload</h3>
</div>
</a>
</li>
</ul>
<hr>
<a href="#" class="yoo-btn yoo-style2">SEE ALL <i class="material-icons-outlined">navigate_next</i></a>
</div>
</div>
</li>
<li>
<div class="yoo-toggle-body yoo-profile-nav yoo-style1">
<div class="yoo-toggle-btn yoo-profile-nav-btn">
<div class="yoo-profile-nav-text">
<span>Welcome,</span>
<h4>Thom Yorke</h4>
</div>
<div class="yoo-profile-nav-img">
<img src="assets/img/profile-pic.png" alt="profile">
</div>
</div>
<ul class="yoo-dropdown yoo-style1">
<li>
<a href="#"><i class="material-icons-outlined">account_circle</i>My Profile</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">settings</i>Settings</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">videocam</i>Upload</a>
</li>
<li>
<a href="#"><i class="material-icons-outlined">help</i>Help</a>
</li>
<li class="yoo-dropdown-cta"><a href="#">Sign Out</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</header><!-- .yoo-header -->
<div class="yoo-sidebarheader-toggle">
<div class="yoo-button-bar1"></div>
<div class="yoo-button-bar2"></div>
<div class="yoo-button-bar3"></div>
</div><!-- .yoo-sidebarheader-toggle -->
<div class="yoo-sidebarheader yoo-white-bg">
<div class="yoo-add">
<div class="yoo-add-in">
<a target="_blank" href="https://yookits.com/product/admint-pro-bootstrap-admin-dashboard-template/" class="yoo-add-thumb">
<img src="assets/img/admint-litee.png" alt="Admint">
</a>
<h2 class="yoo-add-title"><a target="_blank" href="https://yookits.com/product/admint-pro-bootstrap-admin-dashboard-template/">Go Pro & unlock 100+ more UI components & pages.</a></h2>
<a target="_blank" href="https://yookits.com/product/admint-pro-bootstrap-admin-dashboard-template/" class="yoo-add-btn btn btn-success btn-sm">Show Me</a>
</div>
</div>
<div class="yoo-sidebarheader-in" data-scrollbar>
<div class="yoo-sidebar-nav">
<ul class="yoo-sidebar-nav-list yoo-mp0">
<li>
<a href="index.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">dashboard</i></span>
<span class="yoo-sidebar-link-text">Dashboard</span>
</span>
</a>
</li>
<li>
<a href="profile-settings.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">settings</i></span>
<span class="yoo-sidebar-link-text">Profile Settings</span>
</span>
</a>
</li>
<li>
<a href="calendar.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">event_note</i></span>
<span class="yoo-sidebar-link-text">Calender</span>
</span>
</a>
</li>
<li class="yoo-sidebar-has-children">
<a href="#">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">account_circle</i></span>
<span class="yoo-sidebar-link-text">Log In/Sign Up</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="login.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Log In</span>
</span>
</a>
</li>
<li>
<a href="sighup.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Sign Up</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-dropdown -->
</li>
<li>
<a href="alerts.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">cloud</i></span>
<span class="yoo-sidebar-link-text">Notifications</span>
</span>
</a>
</li>
<li>
<a href="buttons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">folder</i></span>
<span class="yoo-sidebar-link-text">Buttons</span>
</span>
</a>
</li>
<li>
<a href="tabs.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">table_chart</i></span>
<span class="yoo-sidebar-link-text">Tabs</span>
</span>
</a>
</li>
<li>
<a href="form-element.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">add_to_photos</i></span>
<span class="yoo-sidebar-link-text">Forms</span>
</span>
</a>
</li>
<li>
<a href="pagination.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">flag</i></span>
<span class="yoo-sidebar-link-text">Pagination</span>
</span>
</a>
</li>
<li>
<a href="accordion.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">horizontal_split</i></span>
<span class="yoo-sidebar-link-text">Accordion</span>
</span>
</a>
</li>
<li>
<a href="badge.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">date_range</i></span>
<span class="yoo-sidebar-link-text">Badge</span>
</span>
</a>
</li>
<li>
<a href="breadcrumb.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">aspect_ratio</i></span>
<span class="yoo-sidebar-link-text">Breadcrumb</span>
</span>
</a>
</li>
<li>
<a href="card.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">account_balance_wallet</i></span>
<span class="yoo-sidebar-link-text">Card</span>
</span>
</a>
</li>
<li class="active">
<a href="typography.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">font_download</i></span>
<span class="yoo-sidebar-link-text">Typography</span>
</span>
</a>
</li>
<li>
<a href="color-plate.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">opacity</i></span>
<span class="yoo-sidebar-link-text">Color Plate</span>
</span>
</a>
</li>
<li class="yoo-sidebar-has-children">
<a href="#">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">archive</i></span>
<span class="yoo-sidebar-link-text">Icons</span>
</span>
</a>
<ul class="yoo-sidebar-nav-dropdown">
<li>
<a href="material-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Material Icons</span>
</span>
</a>
</li>
<li>
<a href="font-awesome-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">FontAwesome Icons</span>
</span>
</a>
</li>
<li>
<a href="line-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Line Icons</span>
</span>
</a>
</li>
<li>
<a href="themify-icons.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-text">Themify Icons</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-dropdown -->
</li>
<li>
<a href="svg-maps.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">explore</i></span>
<span class="yoo-sidebar-link-text">SVG Maps</span>
</span>
</a>
</li>
<li>
<a href="documentation.html">
<span class="yoo-sidebar-link-title">
<span class="yoo-sidebar-link-icon"><i class="material-icons-outlined">library_books</i></span>
<span class="yoo-sidebar-link-text">Documentation</span>
</span>
</a>
</li>
</ul><!-- .yoo-sidebar-nav-list -->
</div>
</div>
</div><!-- .yoo-sidebarheader -->
<div class="yoo-content yoo-style1">
<div class="yoo-padd-lr-30 yoo-uikits-heading">
<h2 class="yoo-uikits-title">Color Palettes</h2>
<ul class="yoo-breadcamb yoo-style1 yoo-mp0">
<li><a href="#">Home</a></li>
<li><a href="#">UI Kits</a></li>
<li>Color Palettes</li>
</ul>
</div>
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Header</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<h1>Header one</h1>
<h2>Header two</h2>
<h3>Header three</h3>
<h4>Header four</h4>
<h5>Header five</h5>
<h6>Header six</h6>
<div class="yoo-height-b20 yoo-height-lg-b20"></div>
</div>
</div>
</div>
</div><!-- .col -->
<div class="col-lg-6">
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Pagraph</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b30 yoo-height-lg-b30"></div>
<p>Lorenzo Fernando Lamas was born in Santa Monica, California, the son of actors Arlene Dahl and Fernando Lamas. His father was Argentinian and his mother was American, of Norwegian descent. He is most known for his roles on television, notably as Lance Cumson on CBS' Falcon Crest</p>
<p>Lorenzo Fernando Lamas was born in Santa Monica, California, the son of actors Arlene Dahl and Fernando Lamas. His father was Argentinian and his mother was American, of Norwegian descent.</p>
<p>Lorenzo Fernando Lamas was born in Santa Monica, California, the son of actors Arlene Dahl and Fernando Lamas. His father was Argentinian and his mother was American, of Norwegian descent. He is most known for his roles on television, notably as Lance Cumson on CBS' Falcon Crest</p>
<p>Lorenzo Fernando Lamas was born in Santa Monica, California, the son of actors.</p>
<div class="yoo-height-b15 yoo-height-lg-b15"></div>
</div>
</div>
</div>
</div><!-- .col -->
<div class="col-lg-6">
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Unordered List</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
<ul class="yoo-un-list">
<li>List item one
<ul>
<li>List item one
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
</div>
</div>
</div>
</div><!-- .col -->
<div class="col-lg-6">
<div class="yoo-card yoo-style1">
<div class="yoo-card-heading">
<div class="yoo-card-heading-left">
<h2 class="yoo-card-title">Ordered List</h2>
</div>
</div>
<div class="yoo-card-body">
<div class="yoo-padd-lr-30 yoo-alert-wrap">
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
<ol class="yoo-un-list">
<li>List item one
<ol>
<li>List item one
<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>
</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>
</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>
<div class="yoo-height-b25 yoo-height-lg-b25"></div>
</div>
</div>
</div>
</div><!-- .col -->
</div>
</div>
<div class="yoo-height-b60 yoo-height-lg-b60"></div>
<div class="yoo-footer yoo-style1">
<div class="container-fluid">
<div class="yoo-footer-content">
<div class="yoo-copyride">
Made with coffee & love by <a href="#">ThemeBubble</a> &
<a href="#">Weebfy</a> ©All rights reserved.
</div>
<ul class="yoo-footer-nav yoo-mp0 yoo-flex">
<li><a href="#">About</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/vendor/modernizr-3.5.0.min.js"></script>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/Chart.min.js"></script>
<script src="assets/js/chartjs.light.js"></script>
<script src="assets/js/smooth-scrollbar.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>