383 lines
27 KiB
HTML
Executable File
383 lines
27 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html class="loading" lang="en" data-textdirection="ltr">
|
|
<!-- BEGIN: Head-->
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
|
|
<meta name="description" content="Vuesax admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
|
|
<meta name="keywords" content="admin template, Vuesax admin template, dashboard template, flat admin template, responsive admin template, web app">
|
|
<meta name="author" content="PIXINVENT">
|
|
<title>Static Layout - Vuesax - Bootstrap HTML admin template</title>
|
|
<link rel="apple-touch-icon" href="../../../app-assets/images/ico/apple-icon-120.png">
|
|
<link rel="shortcut icon" type="image/x-icon" href="../../../app-assets/images/ico/favicon.ico">
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
|
|
|
|
<!-- BEGIN: Vendor CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/vendors.min.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/css/ui/prism.min.css">
|
|
<!-- END: Vendor CSS-->
|
|
|
|
<!-- BEGIN: Theme CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/bootstrap-extended.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/colors.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/components.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/dark-layout.css">
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/semi-dark-layout.css">
|
|
|
|
<!-- BEGIN: Page CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../app-assets/css/core/menu/menu-types/vertical-menu.css">
|
|
<!-- END: Page CSS-->
|
|
|
|
<!-- BEGIN: Custom CSS-->
|
|
<link rel="stylesheet" type="text/css" href="../../../assets/css/style.css">
|
|
<!-- END: Custom CSS-->
|
|
|
|
</head>
|
|
<!-- END: Head-->
|
|
|
|
<!-- BEGIN: Body-->
|
|
|
|
<body class="vertical-layout vertical-menu-modern 2-columns navbar-static footer-static " data-open="click" data-menu="vertical-menu-modern" data-col="2-columns">
|
|
|
|
<!-- BEGIN: Main Menu-->
|
|
<div class="main-menu menu-static menu-light menu-accordion menu-shadow" data-scroll-to-active="true">
|
|
<div class="navbar-header">
|
|
<ul class="nav navbar-nav flex-row">
|
|
<li class="nav-item mr-auto"><a class="navbar-brand" href="../../../html/ltr/vertical-menu-template/index.html">
|
|
<div class="brand-logo"></div>
|
|
<h2 class="brand-text mb-0">Vuesax</h2>
|
|
</a></li>
|
|
<li class="nav-item nav-toggle"><a class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"><i class="feather icon-x d-block d-xl-none font-medium-4 primary toggle-icon"></i><i class="toggle-icon feather icon-disc font-medium-4 d-none d-xl-block primary" data-ticon="icon-disc"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="shadow-bottom"></div>
|
|
<div class="main-menu-content">
|
|
<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
|
|
<li class=" nav-item"><a href="../../../html/ltr/vertical-menu-template/index.html"><i class="feather icon-home"></i><span class="menu-title" data-i18n="">Dashboard</span><span class="badge badge badge-warning badge-pill float-right">2</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="#"><i class="feather icon-zap"></i><span class="menu-title" data-i18n="">Starter kit</span></a>
|
|
<ul class="menu-content">
|
|
<li><a href="sk-layout-1-column.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.1_column">1 column</span></a>
|
|
</li>
|
|
<li><a href="sk-layout-2-columns.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.2_columns">2 columns</span></a>
|
|
</li>
|
|
<li><a href="sk-layout-fixed-navbar.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.fixed_navbar">Fixed navbar</span></a>
|
|
</li>
|
|
<li><a href="sk-layout-floating-navbar.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.fixed_navigation">Floating navbar</span></a>
|
|
</li>
|
|
<li><a href="sk-layout-fixed.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.fixed_layout">Fixed layout</span></a>
|
|
</li>
|
|
<li class="active"><a href="sk-layout-static.html"><i></i><span class="menu-item" data-i18n="nav.sk_starter_kit.static_layout">Static layout</span></a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class=" nav-item"><a href="changelog.html"><i class="feather icon-file"></i><span class="menu-title" data-i18n="">Changelog</span><span class="badge badge badge-pill badge-danger float-right">1.0</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="https://pixinvent.ticksy.com/"><i class="feather icon-life-buoy"></i><span class="menu-title" data-i18n="">Raise Support</span></a>
|
|
</li>
|
|
<li class=" nav-item"><a href="https://pixinvent.com/demo/vuesax-html-admin-dashboard-template/documentation"><i class="feather icon-folder"></i><span class="menu-title" data-i18n="">Documentation</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- END: Main Menu-->
|
|
|
|
<!-- BEGIN: Content-->
|
|
<div class="app-content content">
|
|
|
|
<!-- BEGIN: Header-->
|
|
<div class="content-overlay"></div>
|
|
<div class="header-navbar-shadow"></div>
|
|
<nav class="header-navbar navbar-expand-lg navbar navbar-with-menu navbar-static-top navbar-light navbar-shadow">
|
|
<div class="navbar-wrapper">
|
|
<div class="navbar-container content">
|
|
<div class="navbar-collapse" id="navbar-mobile">
|
|
<div class="mr-auto float-left bookmark-wrapper d-flex align-items-center">
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item mobile-menu d-xl-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"><i class="ficon feather icon-menu"></i></a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav bookmark-icons">
|
|
<!-- li.nav-item.mobile-menu.d-xl-none.mr-auto-->
|
|
<!-- a.nav-link.nav-menu-main.menu-toggle.hidden-xs(href='#')-->
|
|
<!-- i.ficon.feather.icon-menu-->
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="sk-layout-1-column.html" data-toggle="tooltip" data-placement="top" title="1-Column"><i class="ficon feather icon-file-text"></i></a></li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="sk-layout-2-columns.html" data-toggle="tooltip" data-placement="top" title="2-Columns"><i class="ficon feather icon-sidebar"></i></a></li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link" href="sk-layout-static.html" data-toggle="tooltip" data-placement="top" title="Static Layout"><i class="ficon feather icon-sliders"></i></a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link bookmark-star"><i class="ficon feather icon-star warning"></i></a>
|
|
<div class="bookmark-input search-input">
|
|
<div class="bookmark-input-icon"><i class="feather icon-search primary"></i></div>
|
|
<input class="form-control input" type="text" placeholder="Explore Vuesax..." tabindex="0" data-search="starter-list" />
|
|
<ul class="search-list"></ul>
|
|
</div>
|
|
<!-- select.bookmark-select-->
|
|
<!-- option 1-Column-->
|
|
<!-- option 2-Column-->
|
|
<!-- option Static Layout-->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<ul class="nav navbar-nav float-right">
|
|
<li class="dropdown dropdown-language nav-item"><a class="dropdown-toggle nav-link" id="dropdown-flag" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="flag-icon flag-icon-us"></i><span class="selected-language">English</span></a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdown-flag"><a class="dropdown-item" href="#" data-language="en"><i class="flag-icon flag-icon-us"></i> English</a><a class="dropdown-item" href="#" data-language="fr"><i class="flag-icon flag-icon-fr"></i> French</a><a class="dropdown-item" href="#" data-language="de"><i class="flag-icon flag-icon-de"></i> German</a><a class="dropdown-item" href="#" data-language="pt"><i class="flag-icon flag-icon-pt"></i> Portuguese</a></div>
|
|
</li>
|
|
<li class="nav-item d-none d-lg-block"><a class="nav-link nav-link-expand"><i class="ficon feather icon-maximize"></i></a></li>
|
|
<li class="nav-item nav-search"><a class="nav-link nav-link-search"><i class="ficon feather icon-search"></i></a>
|
|
<div class="search-input">
|
|
<div class="search-input-icon"><i class="feather icon-search primary"></i></div>
|
|
<input class="input" type="text" placeholder="Explore Vuesax..." tabindex="-1" data-search="starter-list" />
|
|
<div class="search-input-close"><i class="feather icon-x"></i></div>
|
|
<ul class="search-list"></ul>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown dropdown-notification nav-item"><a class="nav-link nav-link-label" href="#" data-toggle="dropdown"><i class="ficon feather icon-bell"></i><span class="badge badge-pill badge-primary badge-up">5</span></a>
|
|
<ul class="dropdown-menu dropdown-menu-media dropdown-menu-right">
|
|
<li class="dropdown-menu-header">
|
|
<div class="dropdown-header m-0 p-2">
|
|
<h3 class="white">5 New</h3><span class="grey darken-2">App Notifications</span>
|
|
</div>
|
|
</li>
|
|
<li class="scrollable-container media-list">
|
|
<!-- a(href='javascript:void(0)').d-flex.justify-content-between-->
|
|
<!-- .d-flex.align-items-start-->
|
|
<!-- i.feather.icon-plus-square-->
|
|
<!-- .mx-1-->
|
|
<!-- .font-medium.block.notification-title New Message-->
|
|
<!-- small Are your going to meet me tonight?-->
|
|
<!-- small 62 Days ago--><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-plus-square font-medium-5 primary"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="primary media-heading">You have new order!</h6><small class="notification-text"> Are your going to meet me tonight?</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">9 hours ago</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-download-cloud font-medium-5 success"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="success media-heading red darken-1">99% Server load</h6><small class="notification-text">You got new order of goods.</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">5 hour ago</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-alert-triangle font-medium-5 danger"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="danger media-heading yellow darken-3">Warning notifixation</h6><small class="notification-text">Server have 99% CPU usage.</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-check-circle font-medium-5 info"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="info media-heading">Complete the task</h6><small class="notification-text">Cake sesame snaps cupcake</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Last week</time></small>
|
|
</div>
|
|
</a><a class="d-flex justify-content-between" href="javascript:void(0)">
|
|
<div class="media d-flex align-items-start">
|
|
<div class="media-left"><i class="feather icon-file font-medium-5 warning"></i></div>
|
|
<div class="media-body">
|
|
<h6 class="warning media-heading">Generate monthly report</h6><small class="notification-text">Chocolate cake oat cake tiramisu marzipan</small>
|
|
</div><small>
|
|
<time class="media-meta" datetime="2015-06-11T18:29:20+08:00">Last month</time></small>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="dropdown-menu-footer"><a class="dropdown-item p-1 text-center" href="javascript:void(0)">Read all notifications</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-user nav-item"><a class="dropdown-toggle nav-link dropdown-user-link" href="#" data-toggle="dropdown">
|
|
<div class="user-nav d-sm-flex d-none"><span class="user-name text-bold-600">John Doe</span><span class="user-status">Available</span></div><span><img class="round" src="../../../app-assets/images/portrait/small/avatar-s-11.png" alt="avatar" height="40" width="40" /></span>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#"><i class="feather icon-user"></i> Edit Profile</a><a class="dropdown-item" href="#"><i class="feather icon-mail"></i> My Inbox</a><a class="dropdown-item" href="#"><i class="feather icon-check-square"></i> Task</a><a class="dropdown-item" href="#"><i class="feather icon-message-square"></i> Chats</a>
|
|
<div class="dropdown-divider"></div><a class="dropdown-item" href="#"><i class="feather icon-power"></i> Logout</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- END: Header-->
|
|
|
|
<div class="content-wrapper">
|
|
<div class="content-header row">
|
|
<div class="content-header-left col-md-9 col-12 mb-2">
|
|
<div class="row breadcrumbs-top">
|
|
<div class="col-12">
|
|
<h2 class="content-header-title float-left mb-0">Static Layout</h2>
|
|
<div class="breadcrumb-wrapper col-12">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="index.html">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item"><a href="#">Starter Kit</a>
|
|
</li>
|
|
<li class="breadcrumb-item active">Static Layout
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-header-right text-md-right col-md-3 col-12 d-md-block d-none">
|
|
<div class="form-group breadcrum-right">
|
|
<div class="dropdown">
|
|
<button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-settings"></i></button>
|
|
<div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Chat</a><a class="dropdown-item" href="#">Email</a><a class="dropdown-item" href="#">Calendar</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-body">
|
|
<!-- Description -->
|
|
<section id="description" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Description</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="card-text">
|
|
<p>This table contains all classes related to the static layout. This is a custom layout classes for static layout page requirements.</p>
|
|
<p>All these options can be set via following classes:</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Classes</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row"><code>.navbar-static</code></th>
|
|
<td>To set navbar static you need to add <code>navbar-static</code> class in <code><body></code> tag.</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><code>.navbar-static-top</code></th>
|
|
<td>To set navbar static you need to add <code>navbar-static-top</code> class in <code><nav></code> tag.</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><code>.menu-static</code></th>
|
|
<td>To set the main navigation static on page <code>menu-static</code> class needs to add in navigation wrapper.</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row"><code>.footer-static</code></th>
|
|
<td>To set the footer static on page <code>footer-static</code> class needs to add in footer wrapper.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--/ Description -->
|
|
<!-- CSS Classes -->
|
|
<section id="css-classes" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">CSS Classes</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="card-text">
|
|
<p>Default this template has a static layout elements, so there is no any specific classes need to add to create this layout.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--/ CSS Classes -->
|
|
<!-- HTML Markup -->
|
|
<section id="html-markup" class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">HTML Markup</h4>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="card-body">
|
|
<div class="card-text">
|
|
<p>This section contains HTML Markup to create static layout. This layout has a navigation, content and left sidebar sections with common header & footer.</p>
|
|
<p>Vuesax has a ready to use starter kit, you can use this layout directly by using the starter kit pages from the <code>vuesax-html-admin-dashboard-template/starter-kit</code> folder.</p>
|
|
<pre class="language-html">
|
|
<code class="language-html">
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head></head>
|
|
<body data-menu="vertical-menu-modern" class="vertical-layout vertical-menu-modern 2-columns navbar-static menu-expanded">
|
|
|
|
<!-- fixed-top-->
|
|
<nav class="header-navbar navbar-expand-lg navbar navbar-with-menu navbar-static-top navbar-light navbar-shadow">
|
|
...
|
|
</nav>
|
|
|
|
<!-- BEGIN Navigation-->
|
|
<div class="main-menu menu-static menu-light menu-accordion menu-shadow expanded">
|
|
...
|
|
</div>
|
|
<!-- END Navigation-->
|
|
|
|
<!-- BEGIN Content-->
|
|
<div class="content app-content">
|
|
....
|
|
</div>
|
|
<!-- END Content-->
|
|
|
|
<!-- START FOOTER LIGHT-->
|
|
<footer class="footer footer-static footer-light">
|
|
...
|
|
</footer>
|
|
<!-- START FOOTER LIGHT-->
|
|
|
|
</body>
|
|
</html>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--/ HTML Markup -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END: Content-->
|
|
|
|
<div class="sidenav-overlay"></div>
|
|
<div class="drag-target"></div>
|
|
|
|
<!-- BEGIN: Footer-->
|
|
<footer class="footer footer-static footer-light">
|
|
<p class="clearfix blue-grey lighten-2 mb-0"><span class="float-md-left d-block d-md-inline-block mt-25">COPYRIGHT © 2019<a class="text-bold-800 grey darken-2" href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent" target="_blank">Pixinvent,</a>All rights Reserved</span><span class="float-md-right d-none d-md-block">Hand-crafted & Made with<i class="feather icon-heart pink"></i></span>
|
|
<button class="btn btn-primary btn-icon scroll-top" type="button"><i class="feather icon-arrow-up"></i></button>
|
|
</p>
|
|
</footer>
|
|
<!-- END: Footer-->
|
|
|
|
|
|
<!-- BEGIN: Vendor JS-->
|
|
<script src="../../../app-assets/vendors/js/vendors.min.js"></script>
|
|
<script src="../../../app-assets/vendors/js/forms/select/select2.full.min.js"></script>
|
|
<!-- BEGIN Vendor JS-->
|
|
|
|
<!-- BEGIN: Page Vendor JS-->
|
|
<script src="../../../app-assets/vendors/js/ui/prism.min.js"></script>
|
|
<!-- END: Page Vendor JS-->
|
|
|
|
<!-- BEGIN: Theme JS-->
|
|
<script src="../../../app-assets/js/core/app-menu.js"></script>
|
|
<script src="../../../app-assets/js/core/app.js"></script>
|
|
<!-- END: Theme JS-->
|
|
|
|
<!-- BEGIN: Page JS-->
|
|
<!-- END: Page JS-->
|
|
|
|
</body>
|
|
<!-- END: Body-->
|
|
|
|
</html> |