API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 21st, 2019
94
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  6.   <title>Layout &rsaquo; Top Navigation &mdash; Stisla</title>
  7.  
  8.   <!-- General CSS Files -->
  9.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  10.   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  11.  
  12.   <!-- CSS Libraries -->
  13.  
  14.   <!-- Template CSS -->
  15.   <link rel="stylesheet" href="../assets/css/style.css">
  16.   <link rel="stylesheet" href="../assets/css/components.css">
  17. </head>
  18.  
  19. <body class="layout-3">
  20.   <div id="app">
  21.     <div class="main-wrapper container">
  22.       <div class="navbar-bg"></div>
  23.       <nav class="navbar navbar-expand-lg main-navbar">
  24.         <a href="index.html" class="navbar-brand sidebar-gone-hide">Stisla</a>
  25.         <div class="navbar-nav">
  26.           <a href="#" class="nav-link sidebar-gone-show" data-toggle="sidebar"><i class="fas fa-bars"></i></a>
  27.         </div>
  28.         <div class="nav-collapse">
  29.           <a class="sidebar-gone-show nav-collapse-toggle nav-link" href="#">
  30.             <i class="fas fa-ellipsis-v"></i>
  31.           </a>
  32.           <ul class="navbar-nav">
  33.             <li class="nav-item active"><a href="#" class="nav-link">Application</a></li>
  34.             <li class="nav-item"><a href="#" class="nav-link">Report Something</a></li>
  35.             <li class="nav-item"><a href="#" class="nav-link">Server Status</a></li>
  36.           </ul>
  37.         </div>
  38.         <form class="form-inline ml-auto">
  39.           <ul class="navbar-nav">
  40.             <li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
  41.           </ul>
  42.           <div class="search-element">
  43.             <input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="250">
  44.             <button class="btn" type="submit"><i class="fas fa-search"></i></button>
  45.             <div class="search-backdrop"></div>
  46.             <div class="search-result">
  47.               <div class="search-header">
  48.                 Histories
  49.               </div>
  50.               <div class="search-item">
  51.                 <a href="#">How to hack NASA using CSS</a>
  52.                 <a href="#" class="search-close"><i class="fas fa-times"></i></a>
  53.               </div>
  54.               <div class="search-item">
  55.                 <a href="#">Kodinger.com</a>
  56.                 <a href="#" class="search-close"><i class="fas fa-times"></i></a>
  57.               </div>
  58.               <div class="search-item">
  59.                 <a href="#">#Stisla</a>
  60.                 <a href="#" class="search-close"><i class="fas fa-times"></i></a>
  61.               </div>
  62.               <div class="search-header">
  63.                 Result
  64.               </div>
  65.               <div class="search-item">
  66.                 <a href="#">
  67.                   <img class="mr-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
  68.                   oPhone S9 Limited Edition
  69.                 </a>
  70.               </div>
  71.               <div class="search-item">
  72.                 <a href="#">
  73.                   <img class="mr-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
  74.                   Drone X2 New Gen-7
  75.                 </a>
  76.               </div>
  77.               <div class="search-item">
  78.                 <a href="#">
  79.                   <img class="mr-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
  80.                   Headphone Blitz
  81.                 </a>
  82.               </div>
  83.               <div class="search-header">
  84.                 Projects
  85.               </div>
  86.               <div class="search-item">
  87.                 <a href="#">
  88.                   <div class="search-icon bg-danger text-white mr-3">
  89.                     <i class="fas fa-code"></i>
  90.                   </div>
  91.                   Stisla Admin Template
  92.                 </a>
  93.               </div>
  94.               <div class="search-item">
  95.                 <a href="#">
  96.                   <div class="search-icon bg-primary text-white mr-3">
  97.                     <i class="fas fa-laptop"></i>
  98.                   </div>
  99.                   Create a new Homepage Design
  100.                 </a>
  101.               </div>
  102.             </div>
  103.           </div>
  104.         </form>
  105.         <ul class="navbar-nav navbar-right">
  106.           <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
  107.             <div class="dropdown-menu dropdown-list dropdown-menu-right">
  108.               <div class="dropdown-header">Messages
  109.                 <div class="float-right">
  110.                   <a href="#">Mark All As Read</a>
  111.                 </div>
  112.               </div>
  113.               <div class="dropdown-list-content dropdown-list-message">
  114.                 <a href="#" class="dropdown-item dropdown-item-unread">
  115.                   <div class="dropdown-item-avatar">
  116.                     <img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
  117.                     <div class="is-online"></div>
  118.                   </div>
  119.                   <div class="dropdown-item-desc">
  120.                     <b>Kusnaedi</b>
  121.                     <p>Hello, Bro!</p>
  122.                     <div class="time">10 Hours Ago</div>
  123.                   </div>
  124.                 </a>
  125.                 <a href="#" class="dropdown-item dropdown-item-unread">
  126.                   <div class="dropdown-item-avatar">
  127.                     <img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
  128.                   </div>
  129.                   <div class="dropdown-item-desc">
  130.                     <b>Dedik Sugiharto</b>
  131.                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  132.                     <div class="time">12 Hours Ago</div>
  133.                   </div>
  134.                 </a>
  135.                 <a href="#" class="dropdown-item dropdown-item-unread">
  136.                   <div class="dropdown-item-avatar">
  137.                     <img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
  138.                     <div class="is-online"></div>
  139.                   </div>
  140.                   <div class="dropdown-item-desc">
  141.                     <b>Agung Ardiansyah</b>
  142.                     <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  143.                     <div class="time">12 Hours Ago</div>
  144.                   </div>
  145.                 </a>
  146.                 <a href="#" class="dropdown-item">
  147.                   <div class="dropdown-item-avatar">
  148.                     <img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
  149.                   </div>
  150.                   <div class="dropdown-item-desc">
  151.                     <b>Ardian Rahardiansyah</b>
  152.                     <p>Duis aute irure dolor in reprehenderit in voluptate velit ess</p>
  153.                     <div class="time">16 Hours Ago</div>
  154.                   </div>
  155.                 </a>
  156.                 <a href="#" class="dropdown-item">
  157.                   <div class="dropdown-item-avatar">
  158.                     <img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
  159.                   </div>
  160.                   <div class="dropdown-item-desc">
  161.                     <b>Alfa Zulkarnain</b>
  162.                     <p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
  163.                     <div class="time">Yesterday</div>
  164.                   </div>
  165.                 </a>
  166.               </div>
  167.               <div class="dropdown-footer text-center">
  168.                 <a href="#">View All <i class="fas fa-chevron-right"></i></a>
  169.               </div>
  170.             </div>
  171.           </li>
  172.           <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
  173.             <div class="dropdown-menu dropdown-list dropdown-menu-right">
  174.               <div class="dropdown-header">Notifications
  175.                 <div class="float-right">
  176.                   <a href="#">Mark All As Read</a>
  177.                 </div>
  178.               </div>
  179.               <div class="dropdown-list-content dropdown-list-icons">
  180.                 <a href="#" class="dropdown-item dropdown-item-unread">
  181.                   <div class="dropdown-item-icon bg-primary text-white">
  182.                     <i class="fas fa-code"></i>
  183.                   </div>
  184.                   <div class="dropdown-item-desc">
  185.                     Template update is available now!
  186.                     <div class="time text-primary">2 Min Ago</div>
  187.                   </div>
  188.                 </a>
  189.                 <a href="#" class="dropdown-item">
  190.                   <div class="dropdown-item-icon bg-info text-white">
  191.                     <i class="far fa-user"></i>
  192.                   </div>
  193.                   <div class="dropdown-item-desc">
  194.                     <b>You</b> and <b>Dedik Sugiharto</b> are now friends
  195.                     <div class="time">10 Hours Ago</div>
  196.                   </div>
  197.                 </a>
  198.                 <a href="#" class="dropdown-item">
  199.                   <div class="dropdown-item-icon bg-success text-white">
  200.                     <i class="fas fa-check"></i>
  201.                   </div>
  202.                   <div class="dropdown-item-desc">
  203.                     <b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
  204.                     <div class="time">12 Hours Ago</div>
  205.                   </div>
  206.                 </a>
  207.                 <a href="#" class="dropdown-item">
  208.                   <div class="dropdown-item-icon bg-danger text-white">
  209.                     <i class="fas fa-exclamation-triangle"></i>
  210.                   </div>
  211.                   <div class="dropdown-item-desc">
  212.                     Low disk space. Let's clean it!
  213.                     <div class="time">17 Hours Ago</div>
  214.                   </div>
  215.                 </a>
  216.                 <a href="#" class="dropdown-item">
  217.                   <div class="dropdown-item-icon bg-info text-white">
  218.                     <i class="fas fa-bell"></i>
  219.                   </div>
  220.                   <div class="dropdown-item-desc">
  221.                     Welcome to Stisla template!
  222.                     <div class="time">Yesterday</div>
  223.                   </div>
  224.                 </a>
  225.               </div>
  226.               <div class="dropdown-footer text-center">
  227.                 <a href="#">View All <i class="fas fa-chevron-right"></i></a>
  228.               </div>
  229.             </div>
  230.           </li>
  231.           <li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
  232.             <img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
  233.             <div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
  234.             <div class="dropdown-menu dropdown-menu-right">
  235.               <div class="dropdown-title">Logged in 5 min ago</div>
  236.               <a href="features-profile.html" class="dropdown-item has-icon">
  237.                 <i class="far fa-user"></i> Profile
  238.               </a>
  239.               <a href="features-activities.html" class="dropdown-item has-icon">
  240.                 <i class="fas fa-bolt"></i> Activities
  241.               </a>
  242.               <a href="features-settings.html" class="dropdown-item has-icon">
  243.                 <i class="fas fa-cog"></i> Settings
  244.               </a>
  245.               <div class="dropdown-divider"></div>
  246.               <a href="#" class="dropdown-item has-icon text-danger">
  247.                 <i class="fas fa-sign-out-alt"></i> Logout
  248.               </a>
  249.             </div>
  250.           </li>
  251.         </ul>
  252.       </nav>
  253.  
  254.       <nav class="navbar navbar-secondary navbar-expand-lg">
  255.         <div class="container">
  256.           <ul class="navbar-nav">
  257.             <li class="nav-item dropdown">
  258.               <a href="#" data-toggle="dropdown" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
  259.               <ul class="dropdown-menu">
  260.                 <li class="nav-item"><a href="index-0.html" class="nav-link">General Dashboard</a></li>
  261.                 <li class="nav-item"><a href="index.html" class="nav-link">Ecommerce Dashboard</a></li>
  262.               </ul>
  263.             </li>
  264.             <li class="nav-item active">
  265.               <a href="#" class="nav-link"><i class="far fa-heart"></i><span>Top Navigation</span></a>
  266.             </li>
  267.             <li class="nav-item dropdown">
  268.               <a href="#" data-toggle="dropdown" class="nav-link has-dropdown"><i class="far fa-clone"></i><span>Multiple Dropdown</span></a>
  269.               <ul class="dropdown-menu">
  270.                 <li class="nav-item"><a href="#" class="nav-link">Not Dropdown Link</a></li>
  271.                 <li class="nav-item dropdown"><a href="#" class="nav-link has-dropdown">Hover Me</a>
  272.                   <ul class="dropdown-menu">
  273.                     <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
  274.                     <li class="nav-item dropdown"><a href="#" class="nav-link has-dropdown">Link 2</a>
  275.                       <ul class="dropdown-menu">
  276.                         <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
  277.                         <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
  278.                         <li class="nav-item"><a href="#" class="nav-link">Link</a></li>
  279.                       </ul>
  280.                     </li>
  281.                     <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
  282.                   </ul>
  283.                 </li>
  284.               </ul>
  285.             </li>
  286.           </ul>
  287.         </div>
  288.       </nav>
  289.  
  290.       <!-- Main Content -->
  291.       <div class="main-content">
  292.         <section class="section">
  293.           <div class="section-header">
  294.             <h1>Top Navigation</h1>
  295.             <div class="section-header-breadcrumb">
  296.               <div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
  297.               <div class="breadcrumb-item"><a href="#">Layout</a></div>
  298.               <div class="breadcrumb-item">Top Navigation</div>
  299.             </div>
  300.           </div>
  301.  
  302.           <div class="section-body">
  303.             <h2 class="section-title">This is Example Page</h2>
  304.             <p class="section-lead">This page is just an example for you to create your own page.</p>
  305.             <div class="card">
  306.               <div class="card-header">
  307.                 <h4>Example Card</h4>
  308.               </div>
  309.               <div class="card-body">
  310.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  311.                 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  312.                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  313.                 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  314.                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  315.                 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  316.               </div>
  317.               <div class="card-footer bg-whitesmoke">
  318.                 This is card footer
  319.               </div>
  320.             </div>
  321.           </div>
  322.         </section>
  323.       </div>
  324.       <footer class="main-footer">
  325.         <div class="footer-left">
  326.           Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
  327.         </div>
  328.         <div class="footer-right">
  329.           2.3.0
  330.         </div>
  331.       </footer>
  332.     </div>
  333.   </div>
  334.  
  335.   <!-- General JS Scripts -->
  336.   <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  337.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  338.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  339.   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
  340.   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  341.   <script src="../assets/js/stisla.js"></script>
  342.  
  343.   <!-- JS Libraies -->
  344.  
  345.   <!-- Page Specific JS File -->
  346.  
  347.   <!-- Template JS File -->
  348.   <script src="../assets/js/scripts.js"></script>
  349.   <script src="../assets/js/custom.js"></script>
  350. </body>
  351. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!