You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
867 lines
50 KiB
HTML
867 lines
50 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Colors | Notika - Notika Admin Template</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- favicon
|
|
============================================ -->
|
|
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
|
|
<!-- Google Fonts
|
|
============================================ -->
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700,900" rel="stylesheet">
|
|
<!-- Bootstrap CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<!-- font awesome CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/font-awesome.min.css">
|
|
<!-- owl.carousel CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/owl.carousel.css">
|
|
<link rel="stylesheet" href="css/owl.theme.css">
|
|
<link rel="stylesheet" href="css/owl.transitions.css">
|
|
<!-- meanmenu CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/meanmenu/meanmenu.min.css">
|
|
<!-- animate CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/animate.css">
|
|
<!-- normalize CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/normalize.css">
|
|
<!-- wave CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/wave/waves.min.css">
|
|
<link rel="stylesheet" href="css/wave/button.css">
|
|
<!-- mCustomScrollbar CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/scrollbar/jquery.mCustomScrollbar.min.css">
|
|
<!-- Notika icon CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/notika-custom-icon.css">
|
|
<!-- main CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/main.css">
|
|
<!-- style CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="style.css">
|
|
<!-- responsive CSS
|
|
============================================ -->
|
|
<link rel="stylesheet" href="css/responsive.css">
|
|
<!-- modernizr JS
|
|
============================================ -->
|
|
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
<!-- Start Header Top Area -->
|
|
<div class="header-top-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
|
|
<div class="logo-area">
|
|
<a href="#"><img src="img/logo/logo.png" alt="" /></a>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
|
|
<div class="header-top-menu">
|
|
<ul class="nav navbar-nav notika-top-nav">
|
|
<li class="nav-item dropdown">
|
|
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-search"></i></span></a>
|
|
<div role="menu" class="dropdown-menu search-dd animated flipInX">
|
|
<div class="search-input">
|
|
<i class="notika-icon notika-left-arrow"></i>
|
|
<input type="text" />
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-mail"></i></span></a>
|
|
<div role="menu" class="dropdown-menu message-dd animated zoomIn">
|
|
<div class="hd-mg-tt">
|
|
<h2>Messages</h2>
|
|
</div>
|
|
<div class="hd-message-info">
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Jonathan Morris</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/4.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Fredric Mitchell</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Glenn Jecobs</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="hd-mg-va">
|
|
<a href="#">View All</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item nc-al"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-alarm"></i></span><div class="spinner4 spinner-4"></div><div class="ntd-ctn"><span>3</span></div></a>
|
|
<div role="menu" class="dropdown-menu message-dd notification-dd animated zoomIn">
|
|
<div class="hd-mg-tt">
|
|
<h2>Notification</h2>
|
|
</div>
|
|
<div class="hd-message-info">
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Jonathan Morris</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/4.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Fredric Mitchell</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Glenn Jecobs</h3>
|
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="hd-mg-va">
|
|
<a href="#">View All</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-menus"></i></span><div class="spinner4 spinner-4"></div><div class="ntd-ctn"><span>2</span></div></a>
|
|
<div role="menu" class="dropdown-menu message-dd task-dd animated zoomIn">
|
|
<div class="hd-mg-tt">
|
|
<h2>Tasks</h2>
|
|
</div>
|
|
<div class="hd-message-info hd-task-info">
|
|
<div class="skill">
|
|
<div class="progress">
|
|
<div class="lead-content">
|
|
<p>HTML5 Validation Report</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="95%" style="width: 95%;" data-wow-duration="1.5s" data-wow-delay="1.2s"> <span>95%</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="lead-content">
|
|
<p>Google Chrome Extension</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="85%" style="width: 85%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>85%</span> </div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="lead-content">
|
|
<p>Social Internet Projects</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="93%" style="width: 93%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>93%</span> </div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="lead-content">
|
|
<p>Bootstrap Admin Template</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="93%" style="width: 93%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>93%</span> </div>
|
|
</div>
|
|
<div class="progress progress-bt">
|
|
<div class="lead-content">
|
|
<p>Youtube Client App</p>
|
|
</div>
|
|
<div class="progress-bar wow fadeInLeft" data-progress="93%" style="width: 93%;" data-wow-duration="1.5s" data-wow-delay="1.2s"><span>93%</span> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hd-mg-va">
|
|
<a href="#">View All</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle"><span><i class="notika-icon notika-chat"></i></span></a>
|
|
<div role="menu" class="dropdown-menu message-dd chat-dd animated zoomIn">
|
|
<div class="hd-mg-tt">
|
|
<h2>Chat</h2>
|
|
</div>
|
|
<div class="search-people">
|
|
<i class="notika-icon notika-left-arrow"></i>
|
|
<input type="text" placeholder="Search People" />
|
|
</div>
|
|
<div class="hd-message-info">
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
<div class="chat-avaible"><i class="notika-icon notika-dot"></i></div>
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Available</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Jonathan Morris</h3>
|
|
<p>Last seen 3 hours ago</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/4.jpg" alt="" />
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Fredric Mitchell</h3>
|
|
<p>Last seen 2 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/1.jpg" alt="" />
|
|
<div class="chat-avaible"><i class="notika-icon notika-dot"></i></div>
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>David Belle</h3>
|
|
<p>Available</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#">
|
|
<div class="hd-message-sn">
|
|
<div class="hd-message-img chat-img">
|
|
<img src="img/post/2.jpg" alt="" />
|
|
<div class="chat-avaible"><i class="notika-icon notika-dot"></i></div>
|
|
</div>
|
|
<div class="hd-mg-ctn">
|
|
<h3>Glenn Jecobs</h3>
|
|
<p>Available</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="hd-mg-va">
|
|
<a href="#">View All</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Header Top Area -->
|
|
<!-- Mobile Menu start -->
|
|
<div class="mobile-menu-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="mobile-menu">
|
|
<nav id="dropdown">
|
|
<ul class="mobile-menu-nav">
|
|
<li><a data-toggle="collapse" data-target="#Charts" href="#">Home</a>
|
|
<ul class="collapse dropdown-header-top">
|
|
<li><a href="index.html">Dashboard One</a></li>
|
|
<li><a href="index-2.html">Dashboard Two</a></li>
|
|
<li><a href="index-3.html">Dashboard Three</a></li>
|
|
<li><a href="index-4.html">Dashboard Four</a></li>
|
|
<li><a href="analytics.html">Analytics</a></li>
|
|
<li><a href="widgets.html">Widgets</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#demoevent" href="#">Email</a>
|
|
<ul id="demoevent" class="collapse dropdown-header-top">
|
|
<li><a href="inbox.html">Inbox</a></li>
|
|
<li><a href="view-email.html">View Email</a></li>
|
|
<li><a href="compose-email.html">Compose Email</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#democrou" href="#">Interface</a>
|
|
<ul id="democrou" class="collapse dropdown-header-top">
|
|
<li><a href="animations.html">Animations</a></li>
|
|
<li><a href="google-map.html">Google Map</a></li>
|
|
<li><a href="data-map.html">Data Maps</a></li>
|
|
<li><a href="code-editor.html">Code Editor</a></li>
|
|
<li><a href="image-cropper.html">Images Cropper</a></li>
|
|
<li><a href="wizard.html">Wizard</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#demolibra" href="#">Charts</a>
|
|
<ul id="demolibra" class="collapse dropdown-header-top">
|
|
<li><a href="flot-charts.html">Flot Charts</a></li>
|
|
<li><a href="bar-charts.html">Bar Charts</a></li>
|
|
<li><a href="line-charts.html">Line Charts</a></li>
|
|
<li><a href="area-charts.html">Area Charts</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#demodepart" href="#">Tables</a>
|
|
<ul id="demodepart" class="collapse dropdown-header-top">
|
|
<li><a href="normal-table.html">Normal Table</a></li>
|
|
<li><a href="data-table.html">Data Table</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#demo" href="#">Forms</a>
|
|
<ul id="demo" class="collapse dropdown-header-top">
|
|
<li><a href="form-elements.html">Form Elements</a></li>
|
|
<li><a href="form-components.html">Form Components</a></li>
|
|
<li><a href="form-examples.html">Form Examples</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#Miscellaneousmob" href="#">App views</a>
|
|
<ul id="Miscellaneousmob" class="collapse dropdown-header-top">
|
|
<li><a href="notification.html">Notifications</a>
|
|
</li>
|
|
<li><a href="alert.html">Alerts</a>
|
|
</li>
|
|
<li><a href="modals.html">Modals</a>
|
|
</li>
|
|
<li><a href="buttons.html">Buttons</a>
|
|
</li>
|
|
<li><a href="tabs.html">Tabs</a>
|
|
</li>
|
|
<li><a href="accordion.html">Accordion</a>
|
|
</li>
|
|
<li><a href="dialog.html">Dialogs</a>
|
|
</li>
|
|
<li><a href="popovers.html">Popovers</a>
|
|
</li>
|
|
<li><a href="tooltips.html">Tooltips</a>
|
|
</li>
|
|
<li><a href="dropdown.html">Dropdowns</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li><a data-toggle="collapse" data-target="#Pagemob" href="#">Pages</a>
|
|
<ul id="Pagemob" class="collapse dropdown-header-top">
|
|
<li><a href="contact.html">Contact</a>
|
|
</li>
|
|
<li><a href="invoice.html">Invoice</a>
|
|
</li>
|
|
<li><a href="typography.html">Typography</a>
|
|
</li>
|
|
<li><a href="color.html">Color</a>
|
|
</li>
|
|
<li><a href="login-register.html">Login Register</a>
|
|
</li>
|
|
<li><a href="404.html">404 Page</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu end -->
|
|
<!-- Main Menu area start-->
|
|
<div class="main-menu-area mg-tb-40">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<ul class="nav nav-tabs notika-menu-wrap menu-it-icon-pro">
|
|
<li><a data-toggle="tab" href="#Home"><i class="notika-icon notika-house"></i> Home</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#mailbox"><i class="notika-icon notika-mail"></i> Email</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Interface"><i class="notika-icon notika-edit"></i> Interface</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Charts"><i class="notika-icon notika-bar-chart"></i> Charts</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Tables"><i class="notika-icon notika-windows"></i> Tables</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Forms"><i class="notika-icon notika-form"></i> Forms</a>
|
|
</li>
|
|
<li><a data-toggle="tab" href="#Appviews"><i class="notika-icon notika-app"></i> App views</a>
|
|
</li>
|
|
<li class="active"><a data-toggle="tab" href="#Page"><i class="notika-icon notika-support"></i> Pages</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content custom-menu-content">
|
|
<div id="Home" class="tab-pane in notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="index.html">Dashboard One</a>
|
|
</li>
|
|
<li><a href="index-2.html">Dashboard Two</a>
|
|
</li>
|
|
<li><a href="index-3.html">Dashboard Three</a>
|
|
</li>
|
|
<li><a href="index-4.html">Dashboard Four</a>
|
|
</li>
|
|
<li><a href="analytics.html">Analytics</a>
|
|
</li>
|
|
<li><a href="widgets.html">Widgets</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="mailbox" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="inbox.html">Inbox</a>
|
|
</li>
|
|
<li><a href="view-email.html">View Email</a>
|
|
</li>
|
|
<li><a href="compose-email.html">Compose Email</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Interface" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="animations.html">Animations</a>
|
|
</li>
|
|
<li><a href="google-map.html">Google Map</a>
|
|
</li>
|
|
<li><a href="data-map.html">Data Maps</a>
|
|
</li>
|
|
<li><a href="code-editor.html">Code Editor</a>
|
|
</li>
|
|
<li><a href="image-cropper.html">Images Cropper</a>
|
|
</li>
|
|
<li><a href="wizard.html">Wizard</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Charts" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="flot-charts.html">Flot Charts</a>
|
|
</li>
|
|
<li><a href="bar-charts.html">Bar Charts</a>
|
|
</li>
|
|
<li><a href="line-charts.html">Line Charts</a>
|
|
</li>
|
|
<li><a href="area-charts.html">Area Charts</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Tables" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="normal-table.html">Normal Table</a>
|
|
</li>
|
|
<li><a href="data-table.html">Data Table</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Forms" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="form-elements.html">Form Elements</a>
|
|
</li>
|
|
<li><a href="form-components.html">Form Components</a>
|
|
</li>
|
|
<li><a href="form-examples.html">Form Examples</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Appviews" class="tab-pane notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="notification.html">Notifications</a>
|
|
</li>
|
|
<li><a href="alert.html">Alerts</a>
|
|
</li>
|
|
<li><a href="modals.html">Modals</a>
|
|
</li>
|
|
<li><a href="buttons.html">Buttons</a>
|
|
</li>
|
|
<li><a href="tabs.html">Tabs</a>
|
|
</li>
|
|
<li><a href="accordion.html">Accordion</a>
|
|
</li>
|
|
<li><a href="dialog.html">Dialogs</a>
|
|
</li>
|
|
<li><a href="popovers.html">Popovers</a>
|
|
</li>
|
|
<li><a href="tooltips.html">Tooltips</a>
|
|
</li>
|
|
<li><a href="dropdown.html">Dropdowns</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="Page" class="tab-pane active notika-tab-menu-bg animated flipInX">
|
|
<ul class="notika-main-menu-dropdown">
|
|
<li><a href="contact.html">Contact</a>
|
|
</li>
|
|
<li><a href="invoice.html">Invoice</a>
|
|
</li>
|
|
<li><a href="typography.html">Typography</a>
|
|
</li>
|
|
<li><a href="color.html">Color</a>
|
|
</li>
|
|
<li><a href="login-register.html">Login Register</a>
|
|
</li>
|
|
<li><a href="404.html">404 Page</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Menu area End-->
|
|
<!-- Breadcomb area Start-->
|
|
<div class="breadcomb-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="breadcomb-list">
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
|
|
<div class="breadcomb-wp">
|
|
<div class="breadcomb-icon">
|
|
<i class="notika-icon notika-support"></i>
|
|
</div>
|
|
<div class="breadcomb-ctn">
|
|
<h2>Color</h2>
|
|
<p>Welcome to Notika <span class="bread-ntd">Admin Template</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-3">
|
|
<div class="breadcomb-report">
|
|
<button data-toggle="tooltip" data-placement="left" title="Download Report" class="btn"><i class="notika-icon notika-sent"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Breadcomb area End-->
|
|
<!-- Color area Start-->
|
|
<div class="colr-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="color-wrap">
|
|
<div class="color-hd">
|
|
<h2>Colors from Material Design</h2>
|
|
<p>These colors are inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights.
|
|
Introduce unexpected and vibrant colors. (Taken by Google's color page)</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-red">
|
|
<h2>RED</h2>
|
|
<p>#F44336</p>
|
|
<span>.nk-red</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-pink sm-res-mg-t-30 tb-res-mg-t-30 tb-res-mg-t-0">
|
|
<h2>PINK</h2>
|
|
<p>#E91E63</p>
|
|
<span>.nk-pink</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-purple sm-res-mg-t-30 tb-res-mg-t-30 tb-res-mg-t-0">
|
|
<h2>purple</h2>
|
|
<p>#9C27B0</p>
|
|
<span>.nk-purple</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-deep-purple sm-res-mg-t-30 tb-res-mg-t-30 tb-res-mg-t-0">
|
|
<h2>Deep Purple</h2>
|
|
<p>#673AB7</p>
|
|
<span>.nk-deep-purple</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-indigo mg-t-30">
|
|
<h2>Indigo</h2>
|
|
<p>#3F51B5</p>
|
|
<span>.nk-indigo</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-blue mg-t-30">
|
|
<h2>Blue</h2>
|
|
<p>#2196F3</p>
|
|
<span>.nk-blue</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-light-blue mg-t-30">
|
|
<h2>Light Blue</h2>
|
|
<p>#03A9F4</p>
|
|
<span>.nk-light-blue</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-cyan mg-t-30">
|
|
<h2>Cyan</h2>
|
|
<p>#673AB7</p>
|
|
<span>.nk-cyan</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-teal mg-t-30">
|
|
<h2>Teal</h2>
|
|
<p>#009688</p>
|
|
<span>.nk-teal</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-green mg-t-30">
|
|
<h2>Green</h2>
|
|
<p>#4CAF50</p>
|
|
<span>.nk-green</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-light-green mg-t-30">
|
|
<h2>Light Green</h2>
|
|
<p>#8BC34A</p>
|
|
<span>.nk-light-green</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-lime mg-t-30">
|
|
<h2>Lime</h2>
|
|
<p>#CDDC39</p>
|
|
<span>.nk-lime</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-yellow mg-t-30">
|
|
<h2>Yellow</h2>
|
|
<p>#FFEB3B</p>
|
|
<span>.nk-yellow</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-amber mg-t-30">
|
|
<h2>Amber</h2>
|
|
<p>#FFC107</p>
|
|
<span>.nk-amber</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-orange mg-t-30">
|
|
<h2>Orange</h2>
|
|
<p>#FF9800</p>
|
|
<span>.nk-orange</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-deep-orange mg-t-30">
|
|
<h2>Deep Orange</h2>
|
|
<p>#FF5722</p>
|
|
<span>.nk-deep-orange</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-brown mg-t-30">
|
|
<h2>Brown</h2>
|
|
<p>#795548</p>
|
|
<span>.nk-brown</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-gray mg-t-30">
|
|
<h2>Gray</h2>
|
|
<p>#9E9E9E</p>
|
|
<span>.nk-gray</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-blue-gray mg-t-30">
|
|
<h2>Blue Gray</h2>
|
|
<p>#607D8B</p>
|
|
<span>.nk-blue-gray</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
|
|
<div class="color-single nk-black mg-t-30">
|
|
<h2>Black</h2>
|
|
<p>#000000</p>
|
|
<span>.nk-black</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Color area End-->
|
|
<!-- Start Footer area-->
|
|
<div class="footer-copyright-area">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
|
<div class="footer-copy-right">
|
|
<p>Copyright © 2018
|
|
. All rights reserved. Template by <a href="https://colorlib.com">Colorlib</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End Footer area-->
|
|
<!-- jquery
|
|
============================================ -->
|
|
<script src="js/vendor/jquery-1.12.4.min.js"></script>
|
|
<!-- bootstrap JS
|
|
============================================ -->
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<!-- wow JS
|
|
============================================ -->
|
|
<script src="js/wow.min.js"></script>
|
|
<!-- price-slider JS
|
|
============================================ -->
|
|
<script src="js/jquery-price-slider.js"></script>
|
|
<!-- owl.carousel JS
|
|
============================================ -->
|
|
<script src="js/owl.carousel.min.js"></script>
|
|
<!-- scrollUp JS
|
|
============================================ -->
|
|
<script src="js/jquery.scrollUp.min.js"></script>
|
|
<!-- meanmenu JS
|
|
============================================ -->
|
|
<script src="js/meanmenu/jquery.meanmenu.js"></script>
|
|
<!-- counterup JS
|
|
============================================ -->
|
|
<script src="js/counterup/jquery.counterup.min.js"></script>
|
|
<script src="js/counterup/waypoints.min.js"></script>
|
|
<script src="js/counterup/counterup-active.js"></script>
|
|
<!-- mCustomScrollbar JS
|
|
============================================ -->
|
|
<script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
|
|
<!-- sparkline JS
|
|
============================================ -->
|
|
<script src="js/sparkline/jquery.sparkline.min.js"></script>
|
|
<script src="js/sparkline/sparkline-active.js"></script>
|
|
<!-- flot JS
|
|
============================================ -->
|
|
<script src="js/flot/jquery.flot.js"></script>
|
|
<script src="js/flot/jquery.flot.resize.js"></script>
|
|
<script src="js/flot/flot-active.js"></script>
|
|
<!-- knob JS
|
|
============================================ -->
|
|
<script src="js/knob/jquery.knob.js"></script>
|
|
<script src="js/knob/jquery.appear.js"></script>
|
|
<script src="js/knob/knob-active.js"></script>
|
|
<!-- Chat JS
|
|
============================================ -->
|
|
<script src="js/chat/jquery.chat.js"></script>
|
|
<!-- todo JS
|
|
============================================ -->
|
|
<script src="js/todo/jquery.todo.js"></script>
|
|
<!-- wave JS
|
|
============================================ -->
|
|
<script src="js/wave/waves.min.js"></script>
|
|
<script src="js/wave/wave-active.js"></script>
|
|
<!-- plugins JS
|
|
============================================ -->
|
|
<script src="js/plugins.js"></script>
|
|
<!-- main JS
|
|
============================================ -->
|
|
<script src="js/main.js"></script>
|
|
<!-- tawk chat JS
|
|
============================================ -->
|
|
<script src="js/tawk-chat.js"></script>
|
|
</body>
|
|
|
|
</html> |