Advertisement
edwinkr

Starter Template

Jan 28th, 2020
529
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.98 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5.     <title>Azzara Bootstrap 4 Admin Dashboard</title>
  6.     <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
  7.     <link rel="icon" href="../assets/img/icon.ico" type="image/x-icon"/>
  8.  
  9.     <!-- Fonts and icons -->
  10.     <script src="../assets/js/plugin/webfont/webfont.min.js"></script>
  11.     <script>
  12.         WebFont.load({
  13.             google: {"families":["Open+Sans:300,400,600,700"]},
  14.             custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands"], urls: ['../assets/css/fonts.css']},
  15.             active: function() {
  16.                 sessionStorage.fonts = true;
  17.             }
  18.         });
  19.     </script>
  20.  
  21.     <!-- CSS Files -->
  22.     <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
  23.     <link rel="stylesheet" href="../assets/css/azzara.min.css">
  24.  
  25.     <!-- CSS Just for demo purpose, don't include it in your project -->
  26.     <link rel="stylesheet" href="../assets/css/demo.css">
  27. </head>
  28. <body>
  29.     <div class="wrapper">
  30.         <!--
  31.                 Tip 1: You can change the background color of the main header using: data-background-color="blue | purple | light-blue | green | orange | red"
  32.         -->
  33.         <div class="main-header" data-background-color="purple">
  34.             <!-- Logo Header -->
  35.             <div class="logo-header">
  36.                
  37.                 <a href="index.html" class="logo">
  38.                     <img src="../assets/img/logoazzara.svg" alt="navbar brand" class="navbar-brand">
  39.                 </a>
  40.                 <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
  41.                     <span class="navbar-toggler-icon">
  42.                         <i class="fa fa-bars"></i>
  43.                     </span>
  44.                 </button>
  45.                 <button class="topbar-toggler more"><i class="fa fa-ellipsis-v"></i></button>
  46.                 <div class="navbar-minimize">
  47.                     <button class="btn btn-minimize btn-rounded">
  48.                         <i class="fa fa-bars"></i>
  49.                     </button>
  50.                 </div>
  51.             </div>
  52.             <!-- End Logo Header -->
  53.  
  54.             <!-- Navbar Header -->
  55.             <nav class="navbar navbar-header navbar-expand-lg">
  56.                
  57.                 <div class="container-fluid">
  58.                     <div class="collapse" id="search-nav">
  59.                         <form class="navbar-left navbar-form nav-search mr-md-3">
  60.                             <div class="input-group">
  61.                                 <div class="input-group-prepend">
  62.                                     <button type="submit" class="btn btn-search pr-1">
  63.                                         <i class="fa fa-search search-icon"></i>
  64.                                     </button>
  65.                                 </div>
  66.                                 <input type="text" placeholder="Search ..." class="form-control">
  67.                             </div>
  68.                         </form>
  69.                     </div>
  70.                     <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
  71.                         <li class="nav-item toggle-nav-search hidden-caret">
  72.                             <a class="nav-link" data-toggle="collapse" href="#search-nav" role="button" aria-expanded="false" aria-controls="search-nav">
  73.                                 <i class="fa fa-search"></i>
  74.                             </a>
  75.                         </li>
  76.                         <li class="nav-item dropdown hidden-caret">
  77.                             <a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  78.                                 <i class="fa fa-envelope"></i>
  79.                             </a>
  80.                             <ul class="dropdown-menu messages-notif-box animated fadeIn" aria-labelledby="messageDropdown">
  81.                                 <li>
  82.                                     <div class="dropdown-title d-flex justify-content-between align-items-center">
  83.                                         Messages                                   
  84.                                         <a href="#" class="small">Mark all as read</a>
  85.                                     </div>
  86.                                 </li>
  87.                                 <li>
  88.                                     <div class="message-notif-scroll scrollbar-outer">
  89.                                         <div class="notif-center">
  90.                                             <a href="#">
  91.                                                 <div class="notif-img">
  92.                                                     <img src="../assets/img/jm_denis.jpg" alt="Img Profile">
  93.                                                 </div>
  94.                                                 <div class="notif-content">
  95.                                                     <span class="subject">Jimmy Denis</span>
  96.                                                     <span class="block">
  97.                                                         How are you ?
  98.                                                     </span>
  99.                                                     <span class="time">5 minutes ago</span>
  100.                                                 </div>
  101.                                             </a>
  102.                                             <a href="#">
  103.                                                 <div class="notif-img">
  104.                                                     <img src="../assets/img/chadengle.jpg" alt="Img Profile">
  105.                                                 </div>
  106.                                                 <div class="notif-content">
  107.                                                     <span class="subject">Chad</span>
  108.                                                     <span class="block">
  109.                                                         Ok, Thanks !
  110.                                                     </span>
  111.                                                     <span class="time">12 minutes ago</span>
  112.                                                 </div>
  113.                                             </a>
  114.                                             <a href="#">
  115.                                                 <div class="notif-img">
  116.                                                     <img src="../assets/img/mlane.jpg" alt="Img Profile">
  117.                                                 </div>
  118.                                                 <div class="notif-content">
  119.                                                     <span class="subject">Jhon Doe</span>
  120.                                                     <span class="block">
  121.                                                         Ready for the meeting today...
  122.                                                     </span>
  123.                                                     <span class="time">12 minutes ago</span>
  124.                                                 </div>
  125.                                             </a>
  126.                                             <a href="#">
  127.                                                 <div class="notif-img">
  128.                                                     <img src="../assets/img/talha.jpg" alt="Img Profile">
  129.                                                 </div>
  130.                                                 <div class="notif-content">
  131.                                                     <span class="subject">Talha</span>
  132.                                                     <span class="block">
  133.                                                         Hi, Apa Kabar ?
  134.                                                     </span>
  135.                                                     <span class="time">17 minutes ago</span>
  136.                                                 </div>
  137.                                             </a>
  138.                                         </div>
  139.                                     </div>
  140.                                 </li>
  141.                                 <li>
  142.                                     <a class="see-all" href="javascript:void(0);">See all messages<i class="fa fa-angle-right"></i> </a>
  143.                                 </li>
  144.                             </ul>
  145.                         </li>
  146.                         <li class="nav-item dropdown hidden-caret">
  147.                             <a class="nav-link dropdown-toggle" href="#" id="notifDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  148.                                 <i class="fa fa-bell"></i>
  149.                                 <span class="notification">4</span>
  150.                             </a>
  151.                             <ul class="dropdown-menu notif-box animated fadeIn" aria-labelledby="notifDropdown">
  152.                                 <li>
  153.                                     <div class="dropdown-title">You have 4 new notification</div>
  154.                                 </li>
  155.                                 <li>
  156.                                     <div class="notif-center">
  157.                                         <a href="#">
  158.                                             <div class="notif-icon notif-primary"> <i class="fa fa-user-plus"></i> </div>
  159.                                             <div class="notif-content">
  160.                                                 <span class="block">
  161.                                                     New user registered
  162.                                                 </span>
  163.                                                 <span class="time">5 minutes ago</span>
  164.                                             </div>
  165.                                         </a>
  166.                                         <a href="#">
  167.                                             <div class="notif-icon notif-success"> <i class="fa fa-comment"></i> </div>
  168.                                             <div class="notif-content">
  169.                                                 <span class="block">
  170.                                                     Rahmad commented on Admin
  171.                                                 </span>
  172.                                                 <span class="time">12 minutes ago</span>
  173.                                             </div>
  174.                                         </a>
  175.                                         <a href="#">
  176.                                             <div class="notif-img">
  177.                                                 <img src="../assets/img/profile2.jpg" alt="Img Profile">
  178.                                             </div>
  179.                                             <div class="notif-content">
  180.                                                 <span class="block">
  181.                                                     Reza send messages to you
  182.                                                 </span>
  183.                                                 <span class="time">12 minutes ago</span>
  184.                                             </div>
  185.                                         </a>
  186.                                         <a href="#">
  187.                                             <div class="notif-icon notif-danger"> <i class="fa fa-heart"></i> </div>
  188.                                             <div class="notif-content">
  189.                                                 <span class="block">
  190.                                                     Farrah liked Admin
  191.                                                 </span>
  192.                                                 <span class="time">17 minutes ago</span>
  193.                                             </div>
  194.                                         </a>
  195.                                     </div>
  196.                                 </li>
  197.                                 <li>
  198.                                     <a class="see-all" href="javascript:void(0);">See all notifications<i class="fa fa-angle-right"></i> </a>
  199.                                 </li>
  200.                             </ul>
  201.                         </li>
  202.                         <li class="nav-item dropdown hidden-caret">
  203.                             <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
  204.                                 <div class="avatar-sm">
  205.                                     <img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
  206.                                 </div>
  207.                             </a>
  208.                             <ul class="dropdown-menu dropdown-user animated fadeIn">
  209.                                 <li>
  210.                                     <div class="user-box">
  211.                                         <div class="avatar-lg"><img src="../assets/img/profile.jpg" alt="image profile" class="avatar-img rounded"></div>
  212.                                         <div class="u-text">
  213.                                             <h4>Hizrian</h4>
  214.                                             <p class="text-muted">hello@example.com</p><a href="profile.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a>
  215.                                         </div>
  216.                                     </div>
  217.                                 </li>
  218.                                 <li>
  219.                                     <div class="dropdown-divider"></div>
  220.                                     <a class="dropdown-item" href="#">My Profile</a>
  221.                                     <a class="dropdown-item" href="#">My Balance</a>
  222.                                     <a class="dropdown-item" href="#">Inbox</a>
  223.                                     <div class="dropdown-divider"></div>
  224.                                     <a class="dropdown-item" href="#">Account Setting</a>
  225.                                     <div class="dropdown-divider"></div>
  226.                                     <a class="dropdown-item" href="#">Logout</a>
  227.                                 </li>
  228.                             </ul>
  229.                         </li>
  230.                        
  231.                     </ul>
  232.                 </div>
  233.             </nav>
  234.             <!-- End Navbar -->
  235.         </div>
  236.  
  237.         <!-- Sidebar -->
  238.         <div class="sidebar">
  239.            
  240.             <div class="sidebar-background"></div>
  241.             <div class="sidebar-wrapper scrollbar-inner">
  242.                 <div class="sidebar-content">
  243.                     <div class="user">
  244.                         <div class="avatar-sm float-left mr-2">
  245.                             <img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
  246.                         </div>
  247.                         <div class="info">
  248.                             <a data-toggle="collapse" href="#collapseExample" aria-expanded="true">
  249.                                 <span>
  250.                                     Hizrian
  251.                                     <span class="user-level">Administrator</span>
  252.                                     <span class="caret"></span>
  253.                                 </span>
  254.                             </a>
  255.                             <div class="clearfix"></div>
  256.  
  257.                             <div class="collapse in" id="collapseExample">
  258.                                 <ul class="nav">
  259.                                     <li>
  260.                                         <a href="#profile">
  261.                                             <span class="link-collapse">My Profile</span>
  262.                                         </a>
  263.                                     </li>
  264.                                     <li>
  265.                                         <a href="#edit">
  266.                                             <span class="link-collapse">Edit Profile</span>
  267.                                         </a>
  268.                                     </li>
  269.                                     <li>
  270.                                         <a href="#settings">
  271.                                             <span class="link-collapse">Settings</span>
  272.                                         </a>
  273.                                     </li>
  274.                                 </ul>
  275.                             </div>
  276.                         </div>
  277.                     </div>
  278.                     <ul class="nav">
  279.                         <li class="nav-item active">
  280.                             <a href="index.html">
  281.                                 <i class="fas fa-home"></i>
  282.                                 <p>Dashboard</p>
  283.                                 <span class="badge badge-count">5</span>
  284.                             </a>
  285.                         </li>
  286.                         <li class="nav-section">
  287.                             <span class="sidebar-mini-icon">
  288.                                 <i class="fa fa-ellipsis-h"></i>
  289.                             </span>
  290.                             <h4 class="text-section">Components</h4>
  291.                         </li>
  292.                         <li class="nav-item">
  293.                             <a data-toggle="collapse" href="#base">
  294.                                 <i class="fas fa-layer-group"></i>
  295.                                 <p>Base</p>
  296.                                 <span class="caret"></span>
  297.                             </a>
  298.                             <div class="collapse" id="base">
  299.                                 <ul class="nav nav-collapse">
  300.                                     <li>
  301.                                         <a href="components/avatars.html">
  302.                                             <span class="sub-item">Avatars</span>
  303.                                         </a>
  304.                                     </li>
  305.                                     <li>
  306.                                         <a href="components/buttons.html">
  307.                                             <span class="sub-item">Buttons</span>
  308.                                         </a>
  309.                                     </li>
  310.                                     <li>
  311.                                         <a href="components/gridsystem.html">
  312.                                             <span class="sub-item">Grid System</span>
  313.                                         </a>
  314.                                     </li>
  315.                                     <li>
  316.                                         <a href="components/panels.html">
  317.                                             <span class="sub-item">Panels</span>
  318.                                         </a>
  319.                                     </li>
  320.                                     <li>
  321.                                         <a href="components/notifications.html">
  322.                                             <span class="sub-item">Notifications</span>
  323.                                         </a>
  324.                                     </li>
  325.                                     <li>
  326.                                         <a href="components/sweetalert.html">
  327.                                             <span class="sub-item">Sweet Alert</span>
  328.                                         </a>
  329.                                     </li>
  330.                                     <li>
  331.                                         <a href="components/font-awesome-icons.html">
  332.                                             <span class="sub-item">Font Awesome Icons</span>
  333.                                         </a>
  334.                                     </li>
  335.                                     <li>
  336.                                         <a href="components/flaticons.html">
  337.                                             <span class="sub-item">Flaticons</span>
  338.                                         </a>
  339.                                     </li>
  340.                                     <li>
  341.                                         <a href="components/typography.html">
  342.                                             <span class="sub-item">Typography</span>
  343.                                         </a>
  344.                                     </li>
  345.                                 </ul>
  346.                             </div>
  347.                         </li>
  348.                         <li class="nav-item">
  349.                             <a data-toggle="collapse" href="#forms">
  350.                                 <i class="fas fa-pen-square"></i>
  351.                                 <p>Forms</p>
  352.                                 <span class="caret"></span>
  353.                             </a>
  354.                             <div class="collapse" id="forms">
  355.                                 <ul class="nav nav-collapse">
  356.                                     <li>
  357.                                         <a href="forms/forms.html">
  358.                                             <span class="sub-item">Basic Form</span>
  359.                                         </a>
  360.                                     </li>
  361.                                    
  362.                                 </ul>
  363.                             </div>
  364.                         </li>
  365.                         <li class="nav-item">
  366.                             <a data-toggle="collapse" href="#tables">
  367.                                 <i class="fas fa-table"></i>
  368.                                 <p>Tables</p>
  369.                                 <span class="caret"></span>
  370.                             </a>
  371.                             <div class="collapse" id="tables">
  372.                                 <ul class="nav nav-collapse">
  373.                                     <li>
  374.                                         <a href="tables/tables.html">
  375.                                             <span class="sub-item">Basic Table</span>
  376.                                         </a>
  377.                                     </li>
  378.                                     <li>
  379.                                         <a href="tables/datatables.html">
  380.                                             <span class="sub-item">Datatables</span>
  381.                                         </a>
  382.                                     </li>
  383.                                 </ul>
  384.                             </div>
  385.                         </li>
  386.                         <li class="nav-item">
  387.                             <a data-toggle="collapse" href="#maps">
  388.                                 <i class="fas fa-map-marker-alt"></i>
  389.                                 <p>Maps</p>
  390.                                 <span class="caret"></span>
  391.                             </a>
  392.                             <div class="collapse" id="maps">
  393.                                 <ul class="nav nav-collapse">
  394.                                     <li>
  395.                                         <a href="maps/googlemaps.html">
  396.                                             <span class="sub-item">Google Maps</span>
  397.                                         </a>
  398.                                     </li>
  399.                                     <li>
  400.                                         <a href="maps/fullscreenmaps.html">
  401.                                             <span class="sub-item">Full Screen Maps</span>
  402.                                         </a>
  403.                                     </li>
  404.                                     <li>
  405.                                         <a href="maps/jqvmap.html">
  406.                                             <span class="sub-item">JQVMap</span>
  407.                                         </a>
  408.                                     </li>
  409.                                 </ul>
  410.                             </div>
  411.                         </li>
  412.                         <li class="nav-item">
  413.                             <a data-toggle="collapse" href="#charts">
  414.                                 <i class="far fa-chart-bar"></i>
  415.                                 <p>Charts</p>
  416.                                 <span class="caret"></span>
  417.                             </a>
  418.                             <div class="collapse" id="charts">
  419.                                 <ul class="nav nav-collapse">
  420.                                     <li>
  421.                                         <a href="charts/charts.html">
  422.                                             <span class="sub-item">Chart Js</span>
  423.                                         </a>
  424.                                     </li>
  425.                                     <li>
  426.                                         <a href="charts/sparkline.html">
  427.                                             <span class="sub-item">Sparkline</span>
  428.                                         </a>
  429.                                     </li>
  430.                                 </ul>
  431.                             </div>
  432.                         </li>
  433.                        
  434.                         <li class="nav-item">
  435.                             <a href="widgets.html">
  436.                                 <i class="fas fa-desktop"></i>
  437.                                 <p>Widgets</p>
  438.                                 <span class="badge badge-count badge-success">4</span>
  439.                             </a>
  440.                         </li>
  441.                         <li class="nav-item">
  442.                             <a data-toggle="collapse" href="#custompages">
  443.                                 <i class="fas fa-paint-roller"></i>
  444.                                 <p>Custom Pages</p>
  445.                                 <span class="caret"></span>
  446.                             </a>
  447.                             <div class="collapse" id="custompages">
  448.                                 <ul class="nav nav-collapse">
  449.                                     <li>
  450.                                         <a href="login.html">
  451.                                             <span class="sub-item">Login & Register 1</span>
  452.                                         </a>
  453.                                     </li>
  454.                                     <li>
  455.                                         <a href="login2.html">
  456.                                             <span class="sub-item">Login & Register 2</span>
  457.                                         </a>
  458.                                     </li>
  459.                                     <li>
  460.                                         <a href="userprofile.html">
  461.                                             <span class="sub-item">User Profile</span>
  462.                                         </a>
  463.                                     </li>
  464.                                     <li>
  465.                                         <a href="404.html">
  466.                                             <span class="sub-item">404</span>
  467.                                         </a>
  468.                                     </li>
  469.                                 </ul>
  470.                             </div>
  471.                         </li>
  472.                         <li class="nav-item">
  473.                             <a data-toggle="collapse" href="#submenu">
  474.                                 <i class="fas fa-bars"></i>
  475.                                 <p>Menu Levels</p>
  476.                                 <span class="caret"></span>
  477.                             </a>
  478.                             <div class="collapse" id="submenu">
  479.                                 <ul class="nav nav-collapse">
  480.                                     <li>
  481.                                         <a data-toggle="collapse" href="#subnav1">
  482.                                             <span class="sub-item">Level 1</span>
  483.                                             <span class="caret"></span>
  484.                                         </a>
  485.                                         <div class="collapse" id="subnav1">
  486.                                             <ul class="nav nav-collapse subnav">
  487.                                                 <li>
  488.                                                     <a href="#">
  489.                                                         <span class="sub-item">Level 2</span>
  490.                                                     </a>
  491.                                                 </li>
  492.                                                 <li>
  493.                                                     <a href="#">
  494.                                                         <span class="sub-item">Level 2</span>
  495.                                                     </a>
  496.                                                 </li>
  497.                                             </ul>
  498.                                         </div>
  499.                                     </li>
  500.                                     <li>
  501.                                         <a data-toggle="collapse" href="#subnav2">
  502.                                             <span class="sub-item">Level 1</span>
  503.                                             <span class="caret"></span>
  504.                                         </a>
  505.                                         <div class="collapse" id="subnav2">
  506.                                             <ul class="nav nav-collapse subnav">
  507.                                                 <li>
  508.                                                     <a href="#">
  509.                                                         <span class="sub-item">Level 2</span>
  510.                                                     </a>
  511.                                                 </li>
  512.                                             </ul>
  513.                                         </div>
  514.                                     </li>
  515.                                     <li>
  516.                                         <a href="#">
  517.                                             <span class="sub-item">Level 1</span>
  518.                                         </a>
  519.                                     </li>
  520.                                 </ul>
  521.                             </div>
  522.                         </li>
  523.                     </ul>
  524.                 </div>
  525.             </div>
  526.         </div>
  527.         <!-- End Sidebar -->
  528.  
  529.         <div class="main-panel">
  530.             <div class="content">
  531.                 <div class="page-inner">
  532.                     <div class="page-header">
  533.                         <h4 class="page-title">Starter Template</h4>
  534.                     </div>
  535.                     <div class="page-category">Starter Description</div>
  536.                 </div>
  537.             </div>
  538.            
  539.         </div>
  540.        
  541.     </div>
  542.     <!--   Core JS Files   -->
  543.     <script src="../assets/js/core/jquery.3.2.1.min.js"></script>
  544.     <script src="../assets/js/core/popper.min.js"></script>
  545.     <script src="../assets/js/core/bootstrap.min.js"></script>
  546.  
  547.     <!-- jQuery UI -->
  548.     <script src="../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
  549.     <script src="../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
  550.  
  551.     <!-- jQuery Scrollbar -->
  552.     <script src="../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
  553.  
  554.     <!-- Moment JS -->
  555.     <script src="../assets/js/plugin/moment/moment.min.js"></script>
  556.  
  557.     <!-- Chart JS -->
  558.     <script src="../assets/js/plugin/chart.js/chart.min.js"></script>
  559.  
  560.     <!-- jQuery Sparkline -->
  561.     <script src="../assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>
  562.  
  563.     <!-- Chart Circle -->
  564.     <script src="../assets/js/plugin/chart-circle/circles.min.js"></script>
  565.  
  566.     <!-- Datatables -->
  567.     <script src="../assets/js/plugin/datatables/datatables.min.js"></script>
  568.  
  569.     <!-- Bootstrap Notify -->
  570.     <script src="../assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
  571.  
  572.     <!-- Bootstrap Toggle -->
  573.     <script src="../assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
  574.  
  575.     <!-- jQuery Vector Maps -->
  576.     <script src="../assets/js/plugin/jqvmap/jquery.vmap.min.js"></script>
  577.     <script src="../assets/js/plugin/jqvmap/maps/jquery.vmap.world.js"></script>
  578.  
  579.     <!-- Google Maps Plugin -->
  580.     <script src="../assets/js/plugin/gmaps/gmaps.js"></script>
  581.  
  582.     <!-- Sweet Alert -->
  583.     <script src="../assets/js/plugin/sweetalert/sweetalert.min.js"></script>
  584.  
  585.     <!-- Azzara JS -->
  586.     <script src="../assets/js/ready.min.js"></script>
  587. </body>
  588. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement