API tools faq
paste
riandaka_

Untitled

riandaka_
Oct 27th, 2019
296
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 94.37 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. =========================================================
  4. * Argon Design System - v1.1.0
  5. =========================================================
  6.  
  7. * Product Page: https://www.creative-tim.com/product/argon-design-system
  8. * Copyright 2019 Creative Tim (https://www.creative-tim.com)
  9. * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)
  10.  
  11. * Coded by Creative Tim
  12.  
  13. =========================================================
  14.  
  15. * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
  16. <!DOCTYPE html>
  17. <html lang="en">
  18. <head>
  19.   <meta charset="utf-8">
  20.   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  21.   <meta name="description" content="Start your development with a Design System for Bootstrap 4.">
  22.   <meta name="author" content="Creative Tim">
  23.   <title>Argon Design System - Free Design System for Bootstrap 4</title>
  24.   <!-- Favicon -->
  25.   <link href="./assets/img/brand/favicon.png" rel="icon" type="image/png">
  26.   <!-- Fonts -->
  27.   <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
  28.   <!-- Icons -->
  29.   <link href="./assets/vendor/nucleo/css/nucleo.css" rel="stylesheet">
  30.   <link href="./assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  31.   <!-- Argon CSS -->
  32.   <link type="text/css" href="./assets/css/argon.css?v=1.1.0" rel="stylesheet">
  33. </head>
  34.  
  35. <body>
  36.   <header class="header-global">
  37.     <nav id="navbar-main" class="navbar navbar-main navbar-expand-lg navbar-transparent navbar-light headroom">
  38.       <div class="container">
  39.         <a class="navbar-brand mr-lg-5" href="./index.html">
  40.           <img alt="image" src="./assets/img/brand/white.png">
  41.         </a>
  42.         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
  43.           <span class="navbar-toggler-icon"></span>
  44.         </button>
  45.         <div class="navbar-collapse collapse" id="navbar_global">
  46.           <div class="navbar-collapse-header">
  47.             <div class="row">
  48.               <div class="col-6 collapse-brand">
  49.                 <a href="./index.html">
  50.                   <img alt="image" src="./assets/img/brand/blue.png">
  51.                 </a>
  52.               </div>
  53.               <div class="col-6 collapse-close">
  54.                 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
  55.                   <span></span>
  56.                   <span></span>
  57.                 </button>
  58.               </div>
  59.             </div>
  60.           </div>
  61.           <ul class="navbar-nav navbar-nav-hover align-items-lg-center">
  62.             <li class="nav-item dropdown">
  63.               <a href="#" class="nav-link" data-toggle="dropdown" role="button">
  64.                 <i class="ni ni-ui-04 d-lg-none"></i>
  65.                 <span class="nav-link-inner--text">Components</span>
  66.               </a>
  67.               <div class="dropdown-menu dropdown-menu-xl">
  68.                 <div class="dropdown-menu-inner">
  69.                   <a href="https://demos.creative-tim.com/argon-design-system/docs/getting-started/overview.html" class="media d-flex align-items-center">
  70.                     <div class="icon icon-shape bg-gradient-primary rounded-circle text-white">
  71.                       <i class="ni ni-spaceship"></i>
  72.                     </div>
  73.                     <div class="media-body ml-3">
  74.                       <h6 class="heading text-primary mb-md-1">Getting started</h6>
  75.                       <p class="description d-none d-md-inline-block mb-0">Learn how to use Argon compiling Scss, change brand colors and more.</p>
  76.                     </div>
  77.                   </a>
  78.                   <a href="https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html" class="media d-flex align-items-center">
  79.                     <div class="icon icon-shape bg-gradient-success rounded-circle text-white">
  80.                       <i class="ni ni-palette"></i>
  81.                     </div>
  82.                     <div class="media-body ml-3">
  83.                       <h6 class="heading text-primary mb-md-1">Foundation</h6>
  84.                       <p class="description d-none d-md-inline-block mb-0">Learn more about colors, typography, icons and the grid system we used for Argon.</p>
  85.                     </div>
  86.                   </a>
  87.                   <a href="https://demos.creative-tim.com/argon-design-system/docs/components/alerts.html" class="media d-flex align-items-center">
  88.                     <div class="icon icon-shape bg-gradient-warning rounded-circle text-white">
  89.                       <i class="ni ni-ui-04"></i>
  90.                     </div>
  91.                     <div class="media-body ml-3">
  92.                       <h5 class="heading text-warning mb-md-1">Components</h5>
  93.                       <p class="description d-none d-md-inline-block mb-0">Browse our 50 beautiful handcrafted components offered in the Free version.</p>
  94.                     </div>
  95.                   </a>
  96.                 </div>
  97.               </div>
  98.             </li>
  99.             <li class="nav-item dropdown">
  100.               <a href="#" class="nav-link" data-toggle="dropdown" role="button">
  101.                 <i class="ni ni-collection d-lg-none"></i>
  102.                 <span class="nav-link-inner--text">Examples</span>
  103.               </a>
  104.               <div class="dropdown-menu">
  105.                 <a href="./examples/landing.html" class="dropdown-item">Landing</a>
  106.                 <a href="./examples/profile.html" class="dropdown-item">Profile</a>
  107.                 <a href="./examples/login.html" class="dropdown-item">Login</a>
  108.                 <a href="./examples/register.html" class="dropdown-item">Register</a>
  109.               </div>
  110.             </li>
  111.           </ul>
  112.           <ul class="navbar-nav align-items-lg-center ml-lg-auto">
  113.             <li class="nav-item">
  114.               <a class="nav-link nav-link-icon" href="https://www.facebook.com/creativetim" target="_blank" data-toggle="tooltip" title="Like us on Facebook">
  115.                 <i class="fa fa-facebook-square"></i>
  116.                 <span class="nav-link-inner--text d-lg-none">Facebook</span>
  117.               </a>
  118.             </li>
  119.             <li class="nav-item">
  120.               <a class="nav-link nav-link-icon" href="https://www.instagram.com/creativetimofficial" target="_blank" data-toggle="tooltip" title="Follow us on Instagram">
  121.                 <i class="fa fa-instagram"></i>
  122.                 <span class="nav-link-inner--text d-lg-none">Instagram</span>
  123.               </a>
  124.             </li>
  125.             <li class="nav-item">
  126.               <a class="nav-link nav-link-icon" href="https://twitter.com/creativetim" target="_blank" data-toggle="tooltip" title="Follow us on Twitter">
  127.                 <i class="fa fa-twitter-square"></i>
  128.                 <span class="nav-link-inner--text d-lg-none">Twitter</span>
  129.               </a>
  130.             </li>
  131.             <li class="nav-item">
  132.               <a class="nav-link nav-link-icon" href="https://github.com/creativetimofficial/argon-design-system" target="_blank" data-toggle="tooltip" title="Star us on Github">
  133.                 <i class="fa fa-github"></i>
  134.                 <span class="nav-link-inner--text d-lg-none">Github</span>
  135.               </a>
  136.             </li>
  137.             <li class="nav-item d-none d-lg-block ml-lg-4">
  138.               <a href="https://www.creative-tim.com/product/argon-design-system" target="_blank" class="btn btn-neutral btn-icon">
  139.                 <span class="btn-inner--icon">
  140.                   <i class="fa fa-cloud-download mr-2"></i>
  141.                 </span>
  142.                 <span class="nav-link-inner--text">Download</span>
  143.               </a>
  144.             </li>
  145.           </ul>
  146.         </div>
  147.       </div>
  148.     </nav>
  149.   </header>
  150.   <main>
  151.     <!--
  152.  
  153. =========================================================
  154. * Argon Design System - v1.1.0
  155. =========================================================
  156.  
  157. * Product Page: https://www.creative-tim.com/product/argon-design-system
  158. * Copyright 2019 Creative Tim (https://www.creative-tim.com)
  159. * Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)
  160.  
  161. * Coded by Creative Tim
  162.  
  163. =========================================================
  164.  
  165. * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
  166.     <div class="position-relative">
  167.       <!-- Hero for FREE version -->
  168.       <section class="section section-lg section-hero section-shaped">
  169.         <!-- Background circles -->
  170.         <div class="shape shape-style-1 shape-primary">
  171.           <span class="span-150"></span>
  172.           <span class="span-50"></span>
  173.           <span class="span-50"></span>
  174.           <span class="span-75"></span>
  175.           <span class="span-100"></span>
  176.           <span class="span-75"></span>
  177.           <span class="span-50"></span>
  178.           <span class="span-100"></span>
  179.           <span class="span-50"></span>
  180.           <span class="span-100"></span>
  181.         </div>
  182.         <div class="container shape-container d-flex align-items-center py-lg">
  183.           <div class="col px-0">
  184.             <div class="row align-items-center justify-content-center">
  185.               <div class="col-lg-6 text-center">
  186.                 <img alt="image" src="./assets/img/brand/white.png" style="width: 200px;" class="img-fluid">
  187.                 <p class="lead text-white">A beautiful Design System for Bootstrap 4. It's Free and Open Source.</p>
  188.                <div class="btn-wrapper mt-5">
  189.                  <a href="https://www.creative-tim.com/product/argon-design-system" class="btn btn-lg btn-white btn-icon mb-3 mb-sm-0">
  190.                    <span class="btn-inner--icon"><i class="ni ni-cloud-download-95"></i></span>
  191.                    <span class="btn-inner--text">Download HTML</span>
  192.                  </a>
  193.                  <a href="https://github.com/creativetimofficial/argon-design-system" class="btn btn-lg btn-github btn-icon mb-3 mb-sm-0" target="_blank">
  194.                    <span class="btn-inner--icon"><i class="fa fa-github"></i></span>
  195.                    <span class="btn-inner--text"><span class="text-warning">Star us</span> on Github</span>
  196.                  </a>
  197.                </div>
  198.                <div class="mt-5">
  199.                  <small class="text-white font-weight-bold mb-0 mr-2">*proudly coded by</small>
  200.                  <img alt="image" src="./assets/img/brand/creativetim-white-slim.png" style="height: 28px;">
  201.                </div>
  202.              </div>
  203.            </div>
  204.          </div>
  205.        </div>
  206.        <!-- SVG separator -->
  207.        <div class="separator separator-bottom separator-skew zindex-100">
  208.          <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
  209.            <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon>
  210.          </svg>
  211.        </div>
  212.      </section>
  213.    </div>
  214.    <section class="section section-components pb-0" id="section-components">
  215.      <div class="container">
  216.        <div class="row justify-content-center">
  217.          <div class="col-lg-12">
  218.            <!-- Basic elements -->
  219.            <h2 class="mb-5">
  220.              <span>Basic Elements</span>
  221.            </h2>
  222.            <!-- Buttons -->
  223.            <h3 class="h4 text-success font-weight-bold mb-4">Buttons</h3>
  224.            <!-- Button styles -->
  225.            <div>
  226.              <button class="btn btn-primary" type="button">Button</button>
  227.              <button class="btn btn-icon btn-3 btn-primary" type="button">
  228.                <span class="btn-inner--icon"><i class="ni ni-bag-17"></i></span>
  229.                <span class="btn-inner--text">With icon</span>
  230.              </button>
  231.              <button class="btn btn-icon btn-2 btn-primary" type="button">
  232.                <span class="btn-inner--icon"><i class="ni ni-bag-17"></i></span>
  233.              </button>
  234.              <!-- Button wizes -->
  235.              <div class="mb-3 mt-5">
  236.                <small class="text-uppercase font-weight-bold">Pick your size</small>
  237.              </div>
  238.              <button class="btn btn-sm btn-primary" type="button">Small</button>
  239.              <button class="btn btn-1 btn-primary" type="button">Regular</button>
  240.              <button class="btn btn-lg btn-primary" type="button">Large Button</button>
  241.            </div>
  242.            <!-- Button colors -->
  243.            <div class="mb-3 mt-5">
  244.              <small class="text-uppercase font-weight-bold">Pick your color</small>
  245.            </div>
  246.            <button class="btn btn-1 btn-primary" type="button">Primary</button>
  247.            <button class="btn btn-1 btn-info" type="button">Info</button>
  248.            <button class="btn btn-1 btn-success" type="button">Success</button>
  249.            <button class="btn btn-1 btn-warning" type="button">Warning</button>
  250.            <button class="btn btn-1 btn-danger" type="button">Danger</button>
  251.            <button class="btn btn-1 btn-neutral" type="button">Neutral</button>
  252.            <div class="mb-3 mt-5">
  253.              <small class="text-uppercase font-weight-bold">Outline</small>
  254.            </div>
  255.            <button class="btn btn-1 btn-outline-primary" type="button">Outline-primary</button>
  256.            <button class="btn btn-1 btn-outline-info" type="button">Outline-info</button>
  257.            <button class="btn btn-1 btn-outline-success" type="button">Outline-success</button>
  258.            <button class="btn btn-1 btn-outline-warning" type="button">Outline-warning</button>
  259.            <button class="btn btn-1 btn-outline-danger" type="button">Outline-danger</button>
  260.            <!-- Button links -->
  261.            <div class="mb-3 mt-5">
  262.              <small class="text-uppercase font-weight-bold">Links</small>
  263.            </div>
  264.            <a href="#" class="btn btn-link text-default">Default</a>
  265.            <a href="#" class="btn btn-link text-primary">Primary</a>
  266.            <a href="#" class="btn btn-link text-info">Info</a>
  267.            <a href="#" class="btn btn-link text-success">Success</a>
  268.            <a href="#" class="btn btn-link text-warning">Warning</a>
  269.            <a href="#" class="btn btn-link text-danger">Danger</a>
  270.          </div>
  271.        </div>
  272.      </div>
  273.    </section>
  274.    <section class="section pb-0 section-components">
  275.      <div class="container mb-5">
  276.        <!-- Inputs -->
  277.        <h3 class="h4 text-success font-weight-bold mb-4">Inputs</h3>
  278.        <div class="mb-3">
  279.          <small class="text-uppercase font-weight-bold">Form controls</small>
  280.        </div>
  281.        <div class="row">
  282.          <div class="col-lg-4 col-sm-6">
  283.            <div class="form-group">
  284.              <input type="text" placeholder="Regular" class="form-control" />
  285.            </div>
  286.            <div class="form-group">
  287.              <div class="input-group mb-4">
  288.                <div class="input-group-prepend">
  289.                  <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
  290.                </div>
  291.                <input class="form-control" placeholder="Search" type="text">
  292.              </div>
  293.            </div>
  294.          </div>
  295.          <div class="col-lg-4 col-sm-6">
  296.            <div class="form-group">
  297.              <input type="text" placeholder="Regular" class="form-control" disabled />
  298.            </div>
  299.            <div class="form-group">
  300.              <div class="input-group mb-4">
  301.                <input class="form-control" placeholder="Birthday" type="text">
  302.                <div class="input-group-append">
  303.                  <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
  304.                </div>
  305.              </div>
  306.            </div>
  307.          </div>
  308.          <div class="col-lg-4 col-sm-6">
  309.            <div class="form-group has-success">
  310.              <input type="text" placeholder="Success" class="form-control is-valid" />
  311.            </div>
  312.            <div class="form-group has-danger">
  313.              <input type="email" placeholder="Error Input" class="form-control is-invalid" />
  314.            </div>
  315.          </div>
  316.        </div>
  317.      </div>
  318.      <div class="py-5 bg-secondary">
  319.        <div class="container">
  320.          <!-- Inputs (alternative) -->
  321.          <div class="mb-3">
  322.            <small class="text-uppercase font-weight-bold">Form controls (alternative)</small>
  323.          </div>
  324.          <div class="row">
  325.            <div class="col-lg-4 col-sm-6">
  326.              <div class="form-group">
  327.                <input type="text" placeholder="Regular" class="form-control form-control-alternative" />
  328.              </div>
  329.              <div class="form-group">
  330.                <div class="input-group input-group-alternative mb-4">
  331.                  <div class="input-group-prepend">
  332.                    <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
  333.                  </div>
  334.                  <input class="form-control" placeholder="Search" type="text">
  335.                </div>
  336.              </div>
  337.            </div>
  338.            <div class="col-lg-4 col-sm-6">
  339.              <div class="form-group">
  340.                <input type="text" placeholder="Regular" class="form-control form-control-alternative " disabled />
  341.              </div>
  342.              <div class="form-group">
  343.                <div class="input-group input-group-alternative mb-4">
  344.                  <input class="form-control" placeholder="Birthday" type="text">
  345.                  <div class="input-group-append">
  346.                    <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
  347.                  </div>
  348.                </div>
  349.              </div>
  350.            </div>
  351.            <div class="col-lg-4 col-sm-6">
  352.              <div class="form-group has-success">
  353.                <input type="text" placeholder="Success" class="form-control form-control-alternative is-valid" />
  354.              </div>
  355.              <div class="form-group has-danger">
  356.                <input type="email" placeholder="Error Input" class="form-control form-control-alternative is-invalid" />
  357.              </div>
  358.            </div>
  359.          </div>
  360.        </div>
  361.      </div>
  362.    </section>
  363.    <section class="section">
  364.      <div class="container">
  365.        <!-- Custom controls -->
  366.        <div class="row">
  367.          <div class="col-lg-3 col-md-6">
  368.            <!-- Checkboxes -->
  369.            <div class="mb-3">
  370.              <small class="text-uppercase font-weight-bold">Checkboxes</small>
  371.            </div>
  372.            <div class="custom-control custom-checkbox mb-3">
  373.              <input class="custom-control-input" id="customCheck1" type="checkbox">
  374.              <label class="custom-control-label" for="customCheck1">
  375.                <span>Unchecked</span>
  376.              </label>
  377.            </div>
  378.            <div class="custom-control custom-checkbox mb-3">
  379.              <input class="custom-control-input" id="customCheck2" type="checkbox" checked>
  380.              <label class="custom-control-label" for="customCheck2">
  381.                <span>Checked</span>
  382.              </label>
  383.            </div>
  384.            <div class="custom-control custom-checkbox mb-3">
  385.              <input class="custom-control-input" id="customCheck3" type="checkbox" disabled>
  386.              <label class="custom-control-label" for="customCheck3">
  387.                <span>Disabled Unchecked</span>
  388.              </label>
  389.            </div>
  390.            <div class="custom-control custom-checkbox mb-3">
  391.              <input class="custom-control-input" id="customCheck4" type="checkbox" checked disabled>
  392.              <label class="custom-control-label" for="customCheck4">
  393.                <span>Disabled Checked</span>
  394.              </label>
  395.            </div>
  396.          </div>
  397.          <div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
  398.            <!-- Radio buttons -->
  399.            <div class="mb-3">
  400.              <small class="text-uppercase font-weight-bold">Radios</small>
  401.            </div>
  402.            <div class="custom-control custom-radio mb-3">
  403.              <input name="custom-radio-1" class="custom-control-input" id="customRadio1" type="radio">
  404.              <label class="custom-control-label" for="customRadio1"><span>Unchecked</span></label>
  405.            </div>
  406.            <div class="custom-control custom-radio mb-3">
  407.              <input name="custom-radio-1" class="custom-control-input" id="customRadio2" checked type="radio">
  408.              <label class="custom-control-label" for="customRadio2"><span>Checked</span></label>
  409.            </div>
  410.            <div class="custom-control custom-radio mb-3">
  411.              <input name="custom-radio-2" class="custom-control-input" id="customRadio3" disabled type="radio">
  412.              <label class="custom-control-label" for="customRadio3"><span>Disabled unchecked</span></label>
  413.            </div>
  414.            <div class="custom-control custom-radio mb-3">
  415.              <input name="custom-radio-2" class="custom-control-input" id="customRadio4" checked disabled type="radio">
  416.              <label class="custom-control-label" for="customRadio4"><span>Disabled checkbox</span></label>
  417.            </div>
  418.          </div>
  419.          <div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
  420.            <!-- Toggle buttons -->
  421.            <div class="mb-3">
  422.              <small class="text-uppercase font-weight-bold">Toggle buttons</small>
  423.            </div>
  424.            <label class="custom-toggle">
  425.              <input type="checkbox">
  426.              <span class="custom-toggle-slider rounded-circle"></span>
  427.            </label>
  428.            <span class="clearfix"></span>
  429.            <label class="custom-toggle">
  430.              <input type="checkbox" checked>
  431.              <span class="custom-toggle-slider rounded-circle"></span>
  432.            </label>
  433.          </div>
  434.          <div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
  435.            <div class="mb-3">
  436.              <small class="text-uppercase font-weight-bold">Sliders</small>
  437.            </div>
  438.            <!-- Simple slider -->
  439.            <div class="input-slider-container">
  440.              <div id="input-slider" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
  441.              <!-- Input slider values -->
  442.              <div class="row mt-3 d-none">
  443.                <div class="col-6">
  444.                  <span id="input-slider-value" class="range-slider-value" data-range-value-low="100"></span>
  445.                </div>
  446.              </div>
  447.            </div>
  448.            <!-- Range slider -->
  449.            <div class="mt-5">
  450.              <!-- Range slider container -->
  451.              <div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
  452.              <!-- Range slider values -->
  453.              <div class="row d-none">
  454.                <div class="col-6">
  455.                  <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
  456.                </div>
  457.                <div class="col-6 text-right">
  458.                  <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
  459.                </div>
  460.              </div>
  461.            </div>
  462.          </div>
  463.        </div>
  464.        <div class="row justify-content-center mt-md">
  465.          <div class="col-lg-12">
  466.            <!-- Menu -->
  467.            <h3 class="h4 text-success font-weight-bold mb-4">Menu</h3>
  468.            <div class="row">
  469.              <div class="col-lg-6">
  470.                <div class="mb-3">
  471.                  <small class="text-uppercase font-weight-bold">With text</small>
  472.                </div>
  473.                <nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
  474.                  <div class="container">
  475.                    <a class="navbar-brand" href="#">Menu</a>
  476.                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-inner-primary" aria-controls="nav-inner-primary" aria-expanded="false" aria-label="Toggle navigation">
  477.                      <span class="navbar-toggler-icon"></span>
  478.                    </button>
  479.                    <div class="collapse navbar-collapse" id="nav-inner-primary">
  480.                      <div class="navbar-collapse-header">
  481.                        <div class="row">
  482.                          <div class="col-6 collapse-brand">
  483.                            <a href="./index.html">
  484.                              <img alt="image" src="./assets/img/brand/blue.png">
  485.                            </a>
  486.                          </div>
  487.                          <div class="col-6 collapse-close">
  488.                            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-inner-primary" aria-controls="nav-inner-primary" aria-expanded="false" aria-label="Toggle navigation">
  489.                              <span></span>
  490.                              <span></span>
  491.                            </button>
  492.                          </div>
  493.                        </div>
  494.                      </div>
  495.                      <ul class="navbar-nav ml-lg-auto">
  496.                        <li class="nav-item">
  497.                          <a class="nav-link" href="#">Discover <span class="sr-only">(current)</span></a>
  498.                        </li>
  499.                        <li class="nav-item">
  500.                          <a class="nav-link" href="#">Profile</a>
  501.                        </li>
  502.                        <li class="nav-item dropdown">
  503.                          <a class="nav-link" href="#" id="nav-inner-primary_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
  504.                          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-inner-primary_dropdown_1">
  505.                            <a class="dropdown-item" href="#">Action</a>
  506.                            <a class="dropdown-item" href="#">Another action</a>
  507.                            <div class="dropdown-divider"></div>
  508.                            <a class="dropdown-item" href="#">Something else here</a>
  509.                          </div>
  510.                        </li>
  511.                      </ul>
  512.                    </div>
  513.                  </div>
  514.                </nav>
  515.              </div>
  516.              <div class="col-lg-6 mt-4 mt-lg-0">
  517.                <div class="mb-3">
  518.                  <small class="text-uppercase font-weight-bold">With icons</small>
  519.                </div>
  520.                <nav class="navbar navbar-expand-lg navbar-dark bg-success rounded">
  521.                  <div class="container">
  522.                    <a class="navbar-brand" href="#">Menu</a>
  523.                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-inner-success" aria-controls="nav-inner-success" aria-expanded="false" aria-label="Toggle navigation">
  524.                      <span class="navbar-toggler-icon"></span>
  525.                    </button>
  526.                    <div class="collapse navbar-collapse" id="nav-inner-success">
  527.                      <div class="navbar-collapse-header">
  528.                        <div class="row">
  529.                          <div class="col-6 collapse-brand">
  530.                            <a href="./index.html">
  531.                              <img alt="image" src="./assets/img/brand/blue.png">
  532.                            </a>
  533.                          </div>
  534.                          <div class="col-6 collapse-close">
  535.                            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-inner-success" aria-controls="nav-inner-success" aria-expanded="false" aria-label="Toggle navigation">
  536.                              <span></span>
  537.                              <span></span>
  538.                            </button>
  539.                          </div>
  540.                        </div>
  541.                      </div>
  542.                      <ul class="navbar-nav ml-lg-auto">
  543.                        <li class="nav-item">
  544.                          <a class="nav-link nav-link-icon" href="#">
  545.                            <i class="ni ni-favourite-28"></i>
  546.                            <span class="nav-link-inner--text d-lg-none">Discover</span>
  547.                          </a>
  548.                        </li>
  549.                        <li class="nav-item">
  550.                          <a class="nav-link nav-link-icon" href="#">
  551.                            <i class="ni ni-notification-70"></i>
  552.                            <span class="nav-link-inner--text d-lg-none">Profile</span>
  553.                          </a>
  554.                        </li>
  555.                        <li class="nav-item dropdown">
  556.                          <a class="nav-link nav-link-icon" href="#" id="nav-inner-success_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  557.                            <i class="ni ni-settings-gear-65"></i>
  558.                            <span class="nav-link-inner--text d-lg-none">Settings</span>
  559.                          </a>
  560.                          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-inner-success_dropdown_1">
  561.                            <a class="dropdown-item" href="#">Action</a>
  562.                            <a class="dropdown-item" href="#">Another action</a>
  563.                            <div class="dropdown-divider"></div>
  564.                            <a class="dropdown-item" href="#">Something else here</a>
  565.                          </div>
  566.                        </li>
  567.                      </ul>
  568.                    </div>
  569.                  </div>
  570.                </nav>
  571.              </div>
  572.            </div>
  573.          </div>
  574.        </div>
  575.      </div>
  576.    </section>
  577.    <section class="">
  578.      <div class="container">
  579.        <!-- Navigation -->
  580.        <h2 class="mb-5">
  581.          <span>Navbars</span>
  582.        </h2>
  583.      </div>
  584.      <!-- Navbar default -->
  585.      <nav class="navbar navbar-expand-lg navbar-dark bg-default">
  586.        <div class="container">
  587.          <a class="navbar-brand" href="#">Default Color</a>
  588.          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-default" aria-controls="navbar-default" aria-expanded="false" aria-label="Toggle navigation">
  589.            <span class="navbar-toggler-icon"></span>
  590.          </button>
  591.          <div class="collapse navbar-collapse" id="navbar-default">
  592.            <div class="navbar-collapse-header">
  593.              <div class="row">
  594.                <div class="col-6 collapse-brand">
  595.                  <a href="./index.html">
  596.                    <img alt="image" src="./assets/img/brand/blue.png">
  597.                  </a>
  598.                </div>
  599.                <div class="col-6 collapse-close">
  600.                  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-default" aria-controls="navbar-default" aria-expanded="false" aria-label="Toggle navigation">
  601.                    <span></span>
  602.                    <span></span>
  603.                  </button>
  604.                </div>
  605.              </div>
  606.            </div>
  607.            <ul class="navbar-nav ml-lg-auto">
  608.              <li class="nav-item">
  609.                <a class="nav-link nav-link-icon" href="#">
  610.                  <i class="ni ni-favourite-28"></i>
  611.                  <span class="nav-link-inner--text d-lg-none">Discover</span>
  612.                </a>
  613.              </li>
  614.              <li class="nav-item">
  615.                <a class="nav-link nav-link-icon" href="#">
  616.                  <i class="ni ni-notification-70"></i>
  617.                  <span class="nav-link-inner--text d-lg-none">Profile</span>
  618.                </a>
  619.              </li>
  620.              <li class="nav-item dropdown">
  621.                <a class="nav-link nav-link-icon" href="#" id="navbar-default_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  622.                  <i class="ni ni-settings-gear-65"></i>
  623.                  <span class="nav-link-inner--text d-lg-none">Settings</span>
  624.                </a>
  625.                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-default_dropdown_1">
  626.                  <a class="dropdown-item" href="#">Action</a>
  627.                  <a class="dropdown-item" href="#">Another action</a>
  628.                  <div class="dropdown-divider"></div>
  629.                  <a class="dropdown-item" href="#">Something else here</a>
  630.                </div>
  631.              </li>
  632.            </ul>
  633.          </div>
  634.        </div>
  635.      </nav>
  636.      <!-- Navbar primary -->
  637.      <nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-4">
  638.        <div class="container">
  639.          <a class="navbar-brand" href="#">Primary Color</a>
  640.          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation">
  641.            <span class="navbar-toggler-icon"></span>
  642.          </button>
  643.          <div class="collapse navbar-collapse" id="navbar-primary">
  644.            <div class="navbar-collapse-header">
  645.              <div class="row">
  646.                <div class="col-6 collapse-brand">
  647.                  <a href="./index.html">
  648.                    <img alt="image" src="./assets/img/brand/blue.png">
  649.                  </a>
  650.                </div>
  651.                <div class="col-6 collapse-close">
  652.                  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation">
  653.                    <span></span>
  654.                    <span></span>
  655.                  </button>
  656.                </div>
  657.              </div>
  658.            </div>
  659.            <ul class="navbar-nav ml-lg-auto">
  660.              <li class="nav-item">
  661.                <a class="nav-link" href="#">Discover <span class="sr-only">(current)</span></a>
  662.              </li>
  663.              <li class="nav-item">
  664.                <a class="nav-link" href="#">Profile</a>
  665.              </li>
  666.              <li class="nav-item dropdown">
  667.                <a class="nav-link" href="#" id="navbar-primary_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
  668.                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-primary_dropdown_1">
  669.                  <a class="dropdown-item" href="#">Action</a>
  670.                  <a class="dropdown-item" href="#">Another action</a>
  671.                  <div class="dropdown-divider"></div>
  672.                  <a class="dropdown-item" href="#">Something else here</a>
  673.                </div>
  674.              </li>
  675.            </ul>
  676.          </div>
  677.        </div>
  678.      </nav>
  679.      <!-- Navbar success -->
  680.      <nav class="navbar navbar-expand-lg navbar-dark bg-success mt-4">
  681.        <div class="container">
  682.          <a class="navbar-brand" href="#">Success Color</a>
  683.          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-success" aria-controls="navbar-success" aria-expanded="false" aria-label="Toggle navigation">
  684.            <span class="navbar-toggler-icon"></span>
  685.          </button>
  686.          <div class="collapse navbar-collapse" id="navbar-success">
  687.            <div class="navbar-collapse-header">
  688.              <div class="row">
  689.                <div class="col-6 collapse-brand">
  690.                  <a href="./index.html">
  691.                    <img alt="image" src="./assets/img/brand/blue.png">
  692.                  </a>
  693.                </div>
  694.                <div class="col-6 collapse-close">
  695.                  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-success" aria-controls="navbar-success" aria-expanded="false" aria-label="Toggle navigation">
  696.                    <span></span>
  697.                    <span></span>
  698.                  </button>
  699.                </div>
  700.              </div>
  701.            </div>
  702.            <ul class="navbar-nav ml-lg-auto">
  703.              <li class="nav-item">
  704.                <a class="nav-link nav-link-icon" href="#">
  705.                  <i class="ni ni-favourite-28"></i>
  706.                  <span class="nav-link-inner--text d-lg-none">Favorites</span>
  707.                </a>
  708.              </li>
  709.              <li class="nav-item">
  710.                <a class="nav-link nav-link-icon" href="#">
  711.                  <i class="ni ni-planet"></i>
  712.                  <span class="nav-link-inner--text d-lg-none">Another action</span>
  713.                </a>
  714.              </li>
  715.              <li class="nav-item dropdown">
  716.                <a class="nav-link nav-link-icon" href="#" id="navbar-success_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  717.                  <i class="ni ni-settings-gear-65"></i>
  718.                  <span class="nav-link-inner--text d-lg-none">Settings</span>
  719.                </a>
  720.                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-success_dropdown_1">
  721.                  <a class="dropdown-item" href="#">Action</a>
  722.                  <a class="dropdown-item" href="#">Another action</a>
  723.                  <div class="dropdown-divider"></div>
  724.                  <a class="dropdown-item" href="#">Something else here</a>
  725.                </div>
  726.              </li>
  727.            </ul>
  728.          </div>
  729.        </div>
  730.      </nav>
  731.      <!-- Navbar danger -->
  732.      <nav class="navbar navbar-expand-lg navbar-dark bg-danger mt-4">
  733.        <div class="container">
  734.          <a class="navbar-brand" href="#">Danger Color</a>
  735.          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-danger" aria-controls="navbar-danger" aria-expanded="false" aria-label="Toggle navigation">
  736.            <span class="navbar-toggler-icon"></span>
  737.          </button>
  738.          <div class="collapse navbar-collapse" id="navbar-danger">
  739.            <div class="navbar-collapse-header">
  740.              <div class="row">
  741.                <div class="col-6 collapse-brand">
  742.                  <a href="./index.html">
  743.                    <img alt="image" src="./assets/img/brand/blue.png">
  744.                  </a>
  745.                </div>
  746.                <div class="col-6 collapse-close">
  747.                  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-danger" aria-controls="navbar-danger" aria-expanded="false" aria-label="Toggle navigation">
  748.                    <span></span>
  749.                    <span></span>
  750.                  </button>
  751.                </div>
  752.              </div>
  753.            </div>
  754.            <ul class="navbar-nav ml-auto">
  755.              <li class="nav-item">
  756.                <a class="nav-link nav-link-icon" href="#">
  757.                  <i class="fa fa-facebook-square"></i>
  758.                  <span class="nav-link-inner--text d-lg-none">Facebook</span>
  759.                </a>
  760.              </li>
  761.              <li class="nav-item">
  762.                <a class="nav-link nav-link-icon" href="#">
  763.                  <i class="fa fa-twitter"></i>
  764.                  <span class="nav-link-inner--text d-lg-none">Twitter</span>
  765.                </a>
  766.              </li>
  767.              <li class="nav-item">
  768.                <a class="nav-link nav-link-icon" href="#">
  769.                  <i class="fa fa-google-plus"></i>
  770.                  <span class="nav-link-inner--text d-lg-none">Google +</span>
  771.                </a>
  772.              </li>
  773.              <li class="nav-item">
  774.                <a class="nav-link nav-link-icon" href="#">
  775.                  <i class="fa fa-instagram"></i>
  776.                  <span class="nav-link-inner--text d-lg-none">Instagram</span>
  777.                </a>
  778.              </li>
  779.            </ul>
  780.          </div>
  781.        </div>
  782.      </nav>
  783.      <!-- Navbar warning -->
  784.      <nav class="navbar navbar-expand-lg navbar-dark bg-warning mt-4">
  785.        <div class="container">
  786.          <a class="navbar-brand" href="#">Warning Color</a>
  787.          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-warning" aria-controls="navbar-warning" aria-expanded="false" aria-label="Toggle navigation">
  788.            <span class="navbar-toggler-icon"></span>
  789.          </button>
  790.          <div class="collapse navbar-collapse" id="navbar-warning">
  791.            <div class="navbar-collapse-header">
  792.              <div class="row">
  793.                <div class="col-6 collapse-brand">
  794.                  <a href="./index.html">
  795.                    <img alt="image" src="./assets/img/brand/blue.png">
  796.                  </a>
  797.                </div>
  798.                <div class="col-6 collapse-close">
  799.                  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-warning" aria-controls="navbar-warning" aria-expanded="false" aria-label="Toggle navigation">
  800.                    <span></span>
  801.                    <span></span>
  802.                  </button>
  803.                </div>
  804.              </div>
  805.            </div>
  806.            <ul class="navbar-nav align-items-lg-center ml-lg-auto">
  807.              <li class="nav-item">
  808.                <a class="nav-link nav-link-icon" href="#">
  809.                  <i class="fa fa-facebook-square"></i>
  810.                  <span class="nav-link-inner--text d-lg-none">Share</span>
  811.                </a>
  812.              </li>
  813.              <li class="nav-item">
  814.                <a class="nav-link nav-link-icon" href="#">
  815.                  <i class="fa fa-twitter"></i>
  816.                  <span class="nav-link-inner--text d-lg-none">Tweet</span>
  817.                </a>
  818.              </li>
  819.              <li class="nav-item">
  820.                <a class="nav-link nav-link-icon" href="#">
  821.                  <i class="fa fa-pinterest"></i>
  822.                  <span class="nav-link-inner--text d-lg-none">Pin</span>
  823.                </a>
  824.              </li>
  825.            </ul>
  826.          </div>
  827.        </div>
  828.      </nav>
  829.      <!-- Navbar info -->
  830.      <nav class="navbar navbar-expand-lg navbar-dark bg-info mt-4">
  831.        <div class="container">
  832.          <a class="navbar-brand" href="#">Info Color</a>
  833.          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-info" aria-controls="navbar-info" aria-expanded="false" aria-label="Toggle navigation">
  834.            <span class="navbar-toggler-icon"></span>
  835.          </button>
  836.          <div class="collapse navbar-collapse" id="navbar-info">
  837.            <div class="navbar-collapse-header">
  838.              <div class="row">
  839.                <div class="col-6 collapse-brand">
  840.                  <a href="./index.html">
  841.                    <img alt="image" src="./assets/img/brand/blue.png">
  842.                  </a>
  843.                </div>
  844.                <div class="col-6 collapse-close">
  845.                  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-info" aria-controls="navbar-info" aria-expanded="false" aria-label="Toggle navigation">
  846.                    <span></span>
  847.                    <span></span>
  848.                  </button>
  849.                </div>
  850.              </div>
  851.            </div>
  852.            <ul class="navbar-nav ml-auto">
  853.              <li class="nav-item">
  854.                <a class="nav-link nav-link-icon" href="#">
  855.                  <i class="fa fa-facebook-square"></i>
  856.                  <span class="nav-link-inner--text">Facebook</span>
  857.                </a>
  858.              </li>
  859.              <li class="nav-item">
  860.                <a class="nav-link nav-link-icon" href="#">
  861.                  <i class="fa fa-twitter"></i>
  862.                  <span class="nav-link-inner--text">Twitter</span>
  863.                </a>
  864.              </li>
  865.              <li class="nav-item">
  866.                <a class="nav-link nav-link-icon" href="#">
  867.                  <i class="fa fa-instagram"></i>
  868.                  <span class="nav-link-inner--text">Instagram</span>
  869.                </a>
  870.              </li>
  871.            </ul>
  872.          </div>
  873.        </div>
  874.      </nav>
  875.    </section>
  876.    <section class="section section-components">
  877.      <div class="container">
  878.        <h3 class="h4 text-success font-weight-bold mb-4">Tabs</h3>
  879.          <div class="row justify-content-center">
  880.            <div class="col-lg-6">
  881.              <!-- Tabs with icons -->
  882.              <div class="mb-3">
  883.                <small class="text-uppercase font-weight-bold">With icons</small>
  884.              </div>
  885.              <div class="nav-wrapper">
  886.                <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist">
  887.                  <li class="nav-item">
  888.                    <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab" href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true"><i class="ni ni-cloud-upload-96 mr-2"></i>Home</a>
  889.                  </li>
  890.                  <li class="nav-item">
  891.                    <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab" href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false"><i class="ni ni-bell-55 mr-2"></i>Profile</a>
  892.                  </li>
  893.                  <li class="nav-item">
  894.                    <a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-3-tab" data-toggle="tab" href="#tabs-icons-text-3" role="tab" aria-controls="tabs-icons-text-3" aria-selected="false"><i class="ni ni-calendar-grid-58 mr-2"></i>Messages</a>
  895.                  </li>
  896.                </ul>
  897.              </div>
  898.              <div class="card shadow">
  899.                <div class="card-body">
  900.                  <div class="tab-content" id="myTabContent">
  901.                    <div class="tab-pane fade show active" id="tabs-icons-text-1" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab">
  902.                      <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
  903.                       <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
  904.                    </div>
  905.                    <div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel" aria-labelledby="tabs-icons-text-2-tab">
  906.                      <p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
  907.                    </div>
  908.                    <div class="tab-pane fade" id="tabs-icons-text-3" role="tabpanel" aria-labelledby="tabs-icons-text-3-tab">
  909.                      <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
  910.                     </div>
  911.                   </div>
  912.                 </div>
  913.               </div>
  914.             </div>
  915.             <div class="col-lg-6 mt-5 mt-lg-0">
  916.               <!-- Menu -->
  917.               <div class="mb-3">
  918.                 <small class="text-uppercase font-weight-bold">With text</small>
  919.               </div>
  920.               <div class="nav-wrapper">
  921.                 <ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-text" role="tablist">
  922.                   <li class="nav-item">
  923.                     <a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-1-tab" data-toggle="tab" href="#tabs-text-1" role="tab" aria-controls="tabs-text-1" aria-selected="true">Home</a>
  924.                   </li>
  925.                   <li class="nav-item">
  926.                     <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-2-tab" data-toggle="tab" href="#tabs-text-2" role="tab" aria-controls="tabs-text-2" aria-selected="false">Profile</a>
  927.                   </li>
  928.                   <li class="nav-item">
  929.                     <a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-3-tab" data-toggle="tab" href="#tabs-text-3" role="tab" aria-controls="tabs-text-3" aria-selected="false">Messages</a>
  930.                   </li>
  931.                 </ul>
  932.               </div>
  933.               <div class="card shadow">
  934.                 <div class="card-body">
  935.                   <div class="tab-content" id="myTabContent1">
  936.                     <div class="tab-pane fade show active" id="tabs-text-1" role="tabpanel" aria-labelledby="tabs-text-1-tab">
  937.                       <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
  938.                      <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
  939.                     </div>
  940.                     <div class="tab-pane fade" id="tabs-text-2" role="tabpanel" aria-labelledby="tabs-text-2-tab">
  941.                       <p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
  942.                     </div>
  943.                     <div class="tab-pane fade" id="tabs-text-3" role="tabpanel" aria-labelledby="tabs-text-3-tab">
  944.                       <p class="description">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
  945.                    </div>
  946.                  </div>
  947.                </div>
  948.              </div>
  949.            </div>
  950.          </div>
  951.          <div class="row row-grid justify-content-between align-items-center mt-lg">
  952.            <div class="col-lg-5">
  953.              <h3 class="h4 text-success font-weight-bold mb-4">Progress bars</h3>
  954.              <div class="progress-wrapper">
  955.                <div class="progress-info">
  956.                  <div class="progress-label">
  957.                    <span>Task completed</span>
  958.                  </div>
  959.                  <div class="progress-percentage">
  960.                    <span>40%</span>
  961.                  </div>
  962.                </div>
  963.                <div class="progress">
  964.                  <div class="progress-bar bg-default" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
  965.                </div>
  966.              </div>
  967.              <div class="progress-wrapper">
  968.                <div class="progress-info">
  969.                  <div class="progress-label">
  970.                    <span>Task completed</span>
  971.                  </div>
  972.                  <div class="progress-percentage">
  973.                    <span>60%</span>
  974.                  </div>
  975.                </div>
  976.                <div class="progress">
  977.                  <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  978.                </div>
  979.              </div>
  980.            </div>
  981.            <div class="col-lg-5">
  982.              <h3 class="h4 text-success font-weight-bold mb-5">Pagination</h3>
  983.              <nav aria-label="Page navigation example" class="mb-4">
  984.                <ul class="pagination">
  985.                  <li class="page-item"><a class="page-link" href="#">1</a></li>
  986.                  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  987.                  <li class="page-item"><a class="page-link" href="#">3</a></li>
  988.                  <li class="page-item"><a class="page-link" href="#">4</a></li>
  989.                  <li class="page-item"><a class="page-link" href="#">5</a></li>
  990.                </ul>
  991.              </nav>
  992.              <nav aria-label="Page navigation example">
  993.                <ul class="pagination">
  994.                  <li class="page-item"><a class="page-link" href="#"><i class="fa fa-angle-left"></i></a></li>
  995.                  <li class="page-item"><a class="page-link" href="#">1</a></li>
  996.                  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  997.                  <li class="page-item"><a class="page-link" href="#">3</a></li>
  998.                  <li class="page-item"><a class="page-link" href="#">4</a></li>
  999.                  <li class="page-item"><a class="page-link" href="#">5</a></li>
  1000.                  <li class="page-item"><a class="page-link" href="#"><i class="fa fa-angle-right"></i></a></li>
  1001.                </ul>
  1002.              </nav>
  1003.            </div>
  1004.          </div>
  1005.          <div class="row row-grid justify-content-between">
  1006.            <div class="col-lg-5">
  1007.              <h3 class="h4 text-success font-weight-bold mb-5">Navigation Pills</h3>
  1008.              <ul class="nav nav-pills nav-pills-circle mb-3" id="tabs_2" role="tablist">
  1009.                <li class="nav-item">
  1010.                  <a class="nav-link rounded-circle active" id="home-tab" data-toggle="tab" href="#tabs_2_1" role="tab" aria-selected="true">
  1011.                    <span class="nav-link-icon d-block"><i class="ni ni-atom"></i></span>
  1012.                  </a>
  1013.                </li>
  1014.                <li class="nav-item">
  1015.                  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#tabs_2_2" role="tab" aria-selected="false">
  1016.                    <span class="nav-link-icon d-block"><i class="ni ni-chat-round"></i></span>
  1017.                  </a>
  1018.                </li>
  1019.                <li class="nav-item">
  1020.                  <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tabs_2_3" role="tab" aria-selected="false">
  1021.                    <span class="nav-link-icon d-block"><i class="ni ni-cloud-download-95"></i></span>
  1022.                  </a>
  1023.                </li>
  1024.              </ul>
  1025.            </div>
  1026.            <div class="col-lg-5">
  1027.              <h3 class="h4 text-success font-weight-bold mb-5">Labels</h3>
  1028.        <span class="badge badge-pill badge-primary text-uppercase">Primary</span>
  1029.        <span class="badge badge-pill badge-success text-uppercase">Success</span>
  1030.        <span class="badge badge-pill badge-danger text-uppercase">Danger</span>
  1031.        <span class="badge badge-pill badge-warning text-uppercase">Warning</span>
  1032.        <span class="badge badge-pill badge-info text-uppercase">Info</span>
  1033.      </div>
  1034.      </div>
  1035.      <h3 class="mt-lg mb-4">
  1036.        <span>Alerts</span>
  1037.      </h3>
  1038.      <div class="alert alert-success alert-dismissible fade show" role="alert">
  1039.        <span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
  1040.        <span class="alert-inner--text"><strong>Success!</strong> This is a success alert—check it out!</span>
  1041.        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  1042.          <span aria-hidden="true">&times;</span>
  1043.        </button>
  1044.      </div>
  1045.      <div class="alert alert-info alert-dismissible fade show" role="alert">
  1046.        <span class="alert-inner--icon"><i class="ni ni-bell-55"></i></span>
  1047.        <span class="alert-inner--text"><strong>Info!</strong> This is an info alert—check it out!</span>
  1048.        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  1049.          <span aria-hidden="true">&times;</span>
  1050.        </button>
  1051.      </div>
  1052.      <div class="alert alert-warning alert-dismissible fade show" role="alert">
  1053.        <span class="alert-inner--icon"><i class="ni ni-bell-55"></i></span>
  1054.        <span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out!</span>
  1055.        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  1056.          <span aria-hidden="true">&times;</span>
  1057.        </button>
  1058.      </div>
  1059.      <div class="alert alert-danger alert-dismissible fade show" role="alert">
  1060.        <span class="alert-inner--icon"><i class="ni ni-support-16"></i></span>
  1061.        <span class="alert-inner--text"><strong>Danger!</strong> This is an error alert—check it out!</span>
  1062.        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  1063.          <span aria-hidden="true">&times;</span>
  1064.        </button>
  1065.      </div>
  1066.      <!-- Typography -->
  1067.      <h2 class="mt-lg mb-5">
  1068.        <span>Typography</span>
  1069.      </h2>
  1070.      <h3 class="h4 text-success font-weight-bold">Headings</h3>
  1071.      <div class="row py-3 align-items-center">
  1072.        <div class="col-sm-3">
  1073.          <small class="text-uppercase text-muted font-weight-bold">Heading 1</small>
  1074.        </div>
  1075.        <div class="col-sm-9">
  1076.          <h1 class="mb-0">Argon Design System</h1>
  1077.        </div>
  1078.      </div>
  1079.      <div class="row py-3 align-items-center">
  1080.        <div class="col-sm-3">
  1081.          <small class="text-uppercase text-muted font-weight-bold">Heading 2</small>
  1082.        </div>
  1083.        <div class="col-sm-9">
  1084.          <h2 class="mb-0">Argon Design System</h2>
  1085.        </div>
  1086.      </div>
  1087.      <div class="row py-3 align-items-center">
  1088.        <div class="col-sm-3">
  1089.          <small class="text-uppercase text-muted font-weight-bold">Heading 3</small>
  1090.        </div>
  1091.        <div class="col-sm-9">
  1092.          <h3 class="mb-0">Argon Design System</h3>
  1093.        </div>
  1094.      </div>
  1095.      <div class="row py-3 align-items-center">
  1096.        <div class="col-sm-3">
  1097.          <small class="text-uppercase text-muted font-weight-bold">Heading 4</small>
  1098.        </div>
  1099.        <div class="col-sm-9">
  1100.          <h4 class="mb-0">Argon Design System</h4>
  1101.        </div>
  1102.      </div>
  1103.      <div class="row py-3 align-items-center">
  1104.        <div class="col-sm-3">
  1105.          <small class="text-uppercase text-muted font-weight-bold">Heading 5</small>
  1106.        </div>
  1107.        <div class="col-sm-9">
  1108.          <h5 class="mb-0">Argon Design System </h5>
  1109.        </div>
  1110.      </div>
  1111.      <div class="row py-3 align-items-center">
  1112.        <div class="col-sm-3">
  1113.          <small class="text-uppercase text-muted font-weight-bold">Heading 6</small>
  1114.        </div>
  1115.        <div class="col-sm-9">
  1116.          <h6 class="mb-0">Argon Design System </h6>
  1117.        </div>
  1118.      </div>
  1119.      <!-- Display titles -->
  1120.      <h3 class="h4 text-success font-weight-bold mt-md">Display titles</h3>
  1121.      <div class="row py-3 align-items-center">
  1122.        <div class="col-sm-3">
  1123.          <small class="text-uppercase text-muted font-weight-bold">Display 1</small>
  1124.        </div>
  1125.        <div class="col-sm-9">
  1126.          <h1 class="display-1 mb-0">Argon Design System</h1>
  1127.        </div>
  1128.      </div>
  1129.      <div class="row py-3 align-items-center">
  1130.        <div class="col-sm-3">
  1131.          <small class="text-uppercase text-muted font-weight-bold">Display 2</small>
  1132.        </div>
  1133.        <div class="col-sm-9">
  1134.          <h2 class="display-2 mb-0">Argon Design System</h2>
  1135.        </div>
  1136.      </div>
  1137.      <div class="row py-3 align-items-center">
  1138.        <div class="col-sm-3">
  1139.          <small class="text-uppercase text-muted font-weight-bold">Display 3</small>
  1140.        </div>
  1141.        <div class="col-sm-9">
  1142.          <h3 class="display-3 mb-0">Argon Design System</h3>
  1143.        </div>
  1144.      </div>
  1145.      <div class="row py-3 align-items-center">
  1146.        <div class="col-sm-3">
  1147.          <small class="text-uppercase text-muted font-weight-bold">Display 4</small>
  1148.        </div>
  1149.        <div class="col-sm-9">
  1150.          <h4 class="display-4 mb-0">Argon Design System</h4>
  1151.        </div>
  1152.      </div>
  1153.      <!-- Specialized titles -->
  1154.      <h3 class="h4 text-success font-weight-bold mt-md">Specialized titles</h3>
  1155.      <div class="row py-3 align-items-center">
  1156.        <div class="col-sm-3">
  1157.          <small class="text-uppercase text-muted font-weight-bold">Heading</small>
  1158.        </div>
  1159.        <div class="col-sm-9">
  1160.          <h3 class="heading mb-0">Argon Design System</h3>
  1161.        </div>
  1162.      </div>
  1163.      <div class="row py-3 align-items-center">
  1164.        <div class="col-sm-3">
  1165.          <small class="text-uppercase text-muted font-weight-bold">Heading title</small>
  1166.        </div>
  1167.        <div class="col-sm-9">
  1168.          <h3 class="heading-title text-warning mb-0">Argon Design System</h3>
  1169.        </div>
  1170.      </div>
  1171.      <div class="row py-3 align-items-center">
  1172.        <div class="col-sm-3">
  1173.          <small class="text-uppercase text-muted font-weight-bold">Heading seaction</small>
  1174.        </div>
  1175.        <div class="col-sm-9">
  1176.          <div>
  1177.            <h2 class="display-3">Header with small subtitle </h2>
  1178.            <p class="lead text-muted">According to the National Oceanic and Atmospheric Administration, Ted, Scambos, NSIDClead scentist, puts the potentially record maximum.</p>
  1179.          </div>
  1180.        </div>
  1181.      </div>
  1182.      <!-- Paragraphs -->
  1183.      <h3 class="h4 text-success font-weight-bold mt-md">Paragraphs</h3>
  1184.      <div class="row py-3 align-items-center">
  1185.        <div class="col-sm-3">
  1186.          <small class="text-uppercase text-muted font-weight-bold">Paragraph</small>
  1187.        </div>
  1188.        <div class="col-sm-9">
  1189.          <p>I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
  1190.        </div>
  1191.      </div>
  1192.      <div class="row py-3 align-items-center">
  1193.        <div class="col-sm-3">
  1194.          <small class="text-uppercase text-muted font-weight-bold">Lead text</small>
  1195.        </div>
  1196.        <div class="col-sm-9">
  1197.          <p class="lead">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
  1198.        </div>
  1199.      </div>
  1200.      <div class="row py-3 align-items-center">
  1201.        <div class="col-sm-3">
  1202.          <small class="text-uppercase text-muted font-weight-bold">Quote</small>
  1203.        </div>
  1204.        <div class="col-sm-9">
  1205.          <blockquote class="blockquote">
  1206.            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  1207.            <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
  1208.          </blockquote>
  1209.        </div>
  1210.      </div>
  1211.      <div class="row py-3 align-items-center">
  1212.        <div class="col-sm-3">
  1213.          <small class="text-uppercase text-muted font-weight-bold">Muted text</small>
  1214.        </div>
  1215.        <div class="col-sm-9">
  1216.          <p class="text-muted mb-0">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
  1217.        </div>
  1218.      </div>
  1219.      <div class="row py-3 align-items-center">
  1220.        <div class="col-sm-3">
  1221.          <small class="text-uppercase text-muted font-weight-bold">Primary text</small>
  1222.        </div>
  1223.        <div class="col-sm-9">
  1224.          <p class="text-primary">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
  1225.        </div>
  1226.      </div>
  1227.      <div class="row py-3 align-items-center">
  1228.        <div class="col-sm-3">
  1229.          <small class="text-uppercase text-muted font-weight-bold">Info text</small>
  1230.        </div>
  1231.        <div class="col-sm-9">
  1232.          <p class="text-info mb-0">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
  1233.        </div>
  1234.      </div>
  1235.      <div class="row py-3 align-items-center">
  1236.        <div class="col-sm-3">
  1237.          <small class="text-uppercase text-muted font-weight-bold">Success text</small>
  1238.        </div>
  1239.        <div class="col-sm-9">
  1240.          <p class="text-success mb-0">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
  1241.        </div>
  1242.      </div>
  1243.      <div class="row py-3 align-items-center">
  1244.        <div class="col-sm-3">
  1245.          <small class="text-uppercase text-muted font-weight-bold">Warning text</small>
  1246.        </div>
  1247.        <div class="col-sm-9">
  1248.          <p class="text-warning mb-0">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
  1249.        </div>
  1250.      </div>
  1251.      <div class="row py-3 align-items-center">
  1252.        <div class="col-sm-3">
  1253.          <small class="text-uppercase text-muted font-weight-bold">Danger text</small>
  1254.        </div>
  1255.        <div class="col-sm-9">
  1256.          <p class="text-danger mb-0">I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...</p>
  1257.        </div>
  1258.      </div>
  1259.      <!-- Images -->
  1260.      <h2 class="mt-lg mb-5">
  1261.        <span>Images</span>
  1262.      </h2>
  1263.      <div class="row">
  1264.        <div class="col-sm-3 col-6">
  1265.          <small class="d-block text-uppercase font-weight-bold mb-4">Image</small>
  1266.          <img src="./assets/img/theme/team-1-800x800.jpg" alt="Rounded image" class="img-fluid rounded shadow" style="width: 150px;">
  1267.        </div>
  1268.        <div class="col-sm-3 col-6">
  1269.          <small class="d-block text-uppercase font-weight-bold mb-4">Circle Image</small>
  1270.          <img src="./assets/img/theme/team-2-800x800.jpg" alt="Circle image" class="img-fluid rounded-circle shadow" style="width: 150px;">
  1271.        </div>
  1272.        <div class="col-sm-3 col-6 mt-5 mt-sm-0">
  1273.          <small class="d-block text-uppercase font-weight-bold mb-4">Raised</small>
  1274.          <img src="./assets/img/theme/team-3-800x800.jpg" alt="Raised image" class="img-fluid rounded shadow-lg" style="width: 150px;">
  1275.        </div>
  1276.        <div class="col-sm-3 col-6 mt-5 mt-sm-0">
  1277.          <small class="d-block text-uppercase font-weight-bold mb-4">Circle Raised</small>
  1278.          <img src="./assets/img/theme/team-4-800x800.jpg" alt="Raised circle image" class="img-fluid rounded-circle shadow-lg" style="width: 150px;">
  1279.        </div>
  1280.      </div>
  1281.      <h2 class="mt-lg mb-5">
  1282.        <span>Javascript Components</span>
  1283.      </h2>
  1284.      <h3 class="h4 text-success font-weight-bold mb-4">Modals</h3>
  1285.      <!-- Modals -->
  1286.      <div class="row">
  1287.        <div class="col-md-4">
  1288.          <button type="button" class="btn btn-block btn-primary mb-3" data-toggle="modal" data-target="#modal-default">Default</button>
  1289.          <div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
  1290.            <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
  1291.              <div class="modal-content">
  1292.                <div class="modal-header">
  1293.                  <h6 class="modal-title" id="modal-title-default">Type your modal title</h6>
  1294.                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1295.                    <span aria-hidden="true">×</span>
  1296.                  </button>
  1297.                </div>
  1298.                <div class="modal-body">
  1299.                  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
  1300.                  <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
  1301.                </div>
  1302.                <div class="modal-footer">
  1303.                  <button type="button" class="btn btn-primary">Save changes</button>
  1304.                  <button type="button" class="btn btn-link  ml-auto" data-dismiss="modal">Close</button>
  1305.                </div>
  1306.              </div>
  1307.            </div>
  1308.          </div>
  1309.        </div>
  1310.        <div class="col-md-4">
  1311.          <button type="button" class="btn btn-block btn-warning mb-3" data-toggle="modal" data-target="#modal-notification">Notification</button>
  1312.          <div class="modal fade" id="modal-notification" tabindex="-1" role="dialog" aria-labelledby="modal-notification" aria-hidden="true">
  1313.            <div class="modal-dialog modal-danger modal-dialog-centered modal-" role="document">
  1314.              <div class="modal-content bg-gradient-danger">
  1315.                <div class="modal-header">
  1316.                  <h6 class="modal-title" id="modal-title-notification">Your attention is required</h6>
  1317.                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1318.                    <span aria-hidden="true">×</span>
  1319.                  </button>
  1320.                </div>
  1321.                <div class="modal-body">
  1322.                  <div class="py-3 text-center">
  1323.                    <i class="ni ni-bell-55 ni-3x"></i>
  1324.                    <h4 class="heading mt-4">You should read this!</h4>
  1325.                    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
  1326.                  </div>
  1327.                </div>
  1328.                <div class="modal-footer">
  1329.                  <button type="button" class="btn btn-white">Ok, Got it</button>
  1330.                  <button type="button" class="btn btn-link text-white ml-auto" data-dismiss="modal">Close</button>
  1331.                </div>
  1332.              </div>
  1333.            </div>
  1334.          </div>
  1335.          <div class="col-md-4">
  1336.            <button type="button" class="btn btn-block btn-default" data-toggle="modal" data-target="#modal-form">Form</button>
  1337.            <div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true">
  1338.              <div class="modal-dialog modal- modal-dialog-centered modal-sm" role="document">
  1339.                <div class="modal-content">
  1340.                  <div class="modal-body p-0">
  1341.                    <div class="card bg-secondary shadow border-0">
  1342.                      <div class="card-header bg-white pb-5">
  1343.                        <div class="text-muted text-center mb-3">
  1344.                          <small>Sign in with</small>
  1345.                        </div>
  1346.                        <div class="btn-wrapper text-center">
  1347.                          <a href="#" class="btn btn-neutral btn-icon">
  1348.                            <span class="btn-inner--icon">
  1349.                              <img alt="image" src="./assets/img/icons/common/github.svg">
  1350.                            </span>
  1351.                            <span class="btn-inner--text">Github</span>
  1352.                          </a>
  1353.                          <a href="#" class="btn btn-neutral btn-icon">
  1354.                            <span class="btn-inner--icon">
  1355.                              <img alt="image" src="./assets/img/icons/common/google.svg">
  1356.                            </span>
  1357.                            <span class="btn-inner--text">Google</span>
  1358.                          </a>
  1359.                        </div>
  1360.                      </div>
  1361.                      <div class="card-body px-lg-5 py-lg-5">
  1362.                        <div class="text-center text-muted mb-4">
  1363.                          <small>Or sign in with credentials</small>
  1364.                        </div>
  1365.                        <form>
  1366.                          <div class="form-group mb-3">
  1367.                            <div class="input-group input-group-alternative">
  1368.                              <div class="input-group-prepend">
  1369.                                <span class="input-group-text"><i class="ni ni-email-83"></i></span>
  1370.                              </div>
  1371.                              <input class="form-control" placeholder="Email" type="email">
  1372.                            </div>
  1373.                            <input class="form-control" placeholder="Email" type="email">
  1374.                          </div>
  1375.                        </div>
  1376.                        <div class="form-group">
  1377.                          <div class="input-group input-group-alternative">
  1378.                            <div class="input-group-prepend">
  1379.                              <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
  1380.                            </div>
  1381.                            <input class="form-control" placeholder="Password" type="password">
  1382.                          </div>
  1383.                          <div class="custom-control custom-control-alternative custom-checkbox">
  1384.                            <input class="custom-control-input" id="customCheckLogin" type="checkbox">
  1385.                            <label class="custom-control-label" for="customCheckLogin">
  1386.                              <span>Remember me</span>
  1387.                            </label>
  1388.                          </div>
  1389.                          <div class="text-center">
  1390.                            <button type="button" class="btn btn-primary my-4">Sign in</button>
  1391.                          </div>
  1392.                        </form>
  1393.                      </div>
  1394.                    </div>
  1395.                  </div>
  1396.                </div>
  1397.              </div>
  1398.            </div>
  1399.          </div>
  1400.        </div>
  1401.      </div>
  1402.      <!-- Datepicker -->
  1403.      <h3 class="h4 text-success font-weight-bold mt-md mb-4">Datepicker</h3>
  1404.      <div class="row">
  1405.        <div class="col-md-4">
  1406.          <small class="d-block text-uppercase font-weight-bold mb-3">Single date</small>
  1407.          <div class="form-group">
  1408.            <div class="input-group">
  1409.              <div class="input-group-prepend">
  1410.                <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
  1411.              </div>
  1412.              <input class="form-control datepicker" placeholder="Select date" type="text" value="06/20/2019">
  1413.            </div>
  1414.          </div>
  1415.        </div>
  1416.        <div class="col-md-8 mt-4 mt-md-0">
  1417.          <small class="d-block text-uppercase font-weight-bold mb-3">Date range</small>
  1418.          <div class="input-daterange datepicker row align-items-center">
  1419.            <div class="col">
  1420.              <div class="form-group">
  1421.                <div class="input-group">
  1422.                  <div class="input-group-prepend">
  1423.                    <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
  1424.                  </div>
  1425.                  <input class="form-control" placeholder="Start date" type="text" value="06/18/2019">
  1426.                </div>
  1427.              </div>
  1428.            </div>
  1429.            <div class="col">
  1430.              <div class="form-group">
  1431.                <div class="input-group">
  1432.                  <div class="input-group-prepend">
  1433.                    <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
  1434.                  </div>
  1435.                  <input class="form-control" placeholder="End date" type="text" value="06/22/2019">
  1436.                </div>
  1437.              </div>
  1438.            </div>
  1439.          </div>
  1440.        </div>
  1441.      </div>
  1442.      <!-- Tooltips and Popovers -->
  1443.      <h3 class="h4 text-success font-weight-bold mt-md mb-4">Tooltips &amp; Popovers</h3>
  1444.      <div class="row">
  1445.        <div class="col-lg-6">
  1446.          <small class="d-block text-uppercase font-weight-bold mb-3">Tooltips</small>
  1447.          <button type="button" class="btn btn-sm btn-primary btn-tooltip" data-toggle="tooltip" data-placement="left" title="Tooltip on left" data-container="body" data-animation="true" data-delay="100">On left</button>
  1448.          <button type="button" class="btn btn-sm btn-primary btn-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-container="body" data-animation="true">On top</button>
  1449.          <button type="button" class="btn btn-sm btn-primary btn-tooltip" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" data-container="body" data-animation="true">On bottom</button>
  1450.          <button type="button" class="btn btn-sm btn-primary btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip on right" data-container="body" data-animation="true">On right</button>
  1451.        </div>
  1452.        <div class="col-lg-6 mt-4 mt-lg-0">
  1453.          <small class="d-block text-uppercase font-weight-bold mb-3">Popovers</small>
  1454.          <button type="button" class="btn btn-sm btn-default" data-container="body" data-original-title="Popover On Left" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">On left</button>
  1455.          <button type="button" class="btn btn-sm btn-default" data-container="body" data-original-title="Popover on Top" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">On top</button>
  1456.          <button type="button" class="btn btn-sm btn-default" data-container="body" data-original-title="Popover on Right" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">On right</button>
  1457.          <button type="button" class="btn btn-sm btn-default" data-container="body" data-original-title="Popover on Bottom" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">On bottom</button>
  1458.        </div>
  1459.      </div>
  1460.      </div>
  1461.    </section>
  1462.    <section class="section section-shaped">
  1463.      <div class="shape shape-style-1 shape-default">
  1464.        <span></span>
  1465.        <span></span>
  1466.        <span></span>
  1467.        <span></span>
  1468.        <span></span>
  1469.        <span></span>
  1470.      </div>
  1471.      <div class="container py-md">
  1472.        <div class="row justify-content-between align-items-center">
  1473.          <div class="col-lg-5 mb-5 mb-lg-0">
  1474.            <h1 class="text-white font-weight-light">Bootstrap carousel</h1>
  1475.            <p class="lead text-white mt-4">Argon Design System comes with four pre-built pages to help you get started faster. You can change the text and images and you're good to go.</p>
  1476.             <a href="https://demos.creative-tim.com/argon-design-system/docs/components/alerts.html" class="btn btn-white mt-4">See all components</a>
  1477.           </div>
  1478.           <div class="col-lg-6 mb-lg-auto">
  1479.             <div class="rounded shadow-lg overflow-hidden transform-perspective-right">
  1480.               <div id="carousel_example" class="carousel slide" data-ride="carousel">
  1481.                 <ol class="carousel-indicators">
  1482.                   <li data-target="#carousel_example" data-slide-to="0" class="active"></li>
  1483.                   <li data-target="#carousel_example" data-slide-to="1"></li>
  1484.                 </ol>
  1485.                 <div class="carousel-inner">
  1486.                   <div class="carousel-item active">
  1487.                     <img class="img-fluid" src="./assets/img/theme/img-1-1200x1000.jpg" alt="First slide">
  1488.                   </div>
  1489.                   <div class="carousel-item">
  1490.                     <img class="img-fluid" src="./assets/img/theme/img-2-1200x1000.jpg" alt="Second slide">
  1491.                   </div>
  1492.                 </div>
  1493.                 <a class="carousel-control-prev" href="#carousel_example" role="button" data-slide="prev">
  1494.                   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  1495.                   <span class="sr-only">Previous</span>
  1496.                 </a>
  1497.                 <a class="carousel-control-next" href="#carousel_example" role="button" data-slide="next">
  1498.                   <span class="carousel-control-next-icon" aria-hidden="true"></span>
  1499.                   <span class="sr-only">Next</span>
  1500.                 </a>
  1501.               </div>
  1502.             </div>
  1503.           </div>
  1504.         </div>
  1505.       </div>
  1506.       <!-- SVG separator -->
  1507.       <div class="separator separator-bottom separator-skew">
  1508.         <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
  1509.           <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon>
  1510.         </svg>
  1511.       </div>
  1512.     </section>
  1513.     <section class="section section-lg section-nucleo-icons pb-250">
  1514.       <div class="container">
  1515.         <div class="row justify-content-center">
  1516.           <div class="col-lg-8 text-center">
  1517.             <h2 class="display-3">Nucleo Icons</h2>
  1518.             <p class="lead">
  1519.               The official package contains over 21.000 icons which are looking great in combination with Argon Design System. Make sure you check all of them and use those that you like the most.
  1520.             </p>
  1521.             <div class="btn-wrapper">
  1522.               <a href="https://demos.creative-tim.com/argon-design-system/docs/foundation/icons.html" class="btn btn-primary">View demo icons</a>
  1523.               <a href="https://nucleoapp.com/?ref=1712" target="_blank" class="btn btn-default mt-3 mt-md-0">View all icons</a>
  1524.             </div>
  1525.           </div>
  1526.         </div>
  1527.         <div class="blur--hover">
  1528.           <a href="https://demos.creative-tim.com/argon-design-system/docs/foundation/icons.html">
  1529.             <div class="icons-container blur-item mt-5" data-toggle="on-screen">
  1530.               <!-- Center -->
  1531.               <i class="icon ni ni-diamond"></i>
  1532.               <!-- Right 1 -->
  1533.               <i class="icon icon-sm ni ni-album-2"></i>
  1534.               <i class="icon icon-sm ni ni-app"></i>
  1535.               <i class="icon icon-sm ni ni-atom"></i>
  1536.               <!-- Right 2 -->
  1537.               <i class="icon ni ni-bag-17"></i>
  1538.               <i class="icon ni ni-bell-55"></i>
  1539.               <i class="icon ni ni-credit-card"></i>
  1540.               <!-- Left 1 -->
  1541.               <i class="icon icon-sm ni ni-briefcase-24"></i>
  1542.               <i class="icon icon-sm ni ni-building"></i>
  1543.               <i class="icon icon-sm ni ni-button-play"></i>
  1544.               <!-- Left 2 -->
  1545.               <i class="icon ni ni-calendar-grid-58"></i>
  1546.               <i class="icon ni ni-camera-compact"></i>
  1547.               <i class="icon ni ni-chart-bar-32"></i>
  1548.             </div>
  1549.             <span class="blur-hidden h5 text-success">Explore all the 21.000+ Nucleo Icons</span>
  1550.           </a>
  1551.         </div>
  1552.       </div>
  1553.     </section>
  1554.     <section class="section section-lg section-shaped">
  1555.       <div class="shape shape-style-1 shape-default">
  1556.         <span></span>
  1557.         <span></span>
  1558.         <span></span>
  1559.         <span></span>
  1560.         <span></span>
  1561.         <span></span>
  1562.         <span></span>
  1563.         <span></span>
  1564.       </div>
  1565.       <div class="container py-md">
  1566.         <div class="row row-grid justify-content-between align-items-center">
  1567.           <div class="col-lg-6">
  1568.             <h3 class="display-3 text-white">A beautiful Design System<span class="text-white">completed with examples</span></h3>
  1569.             <p class="lead text-white">The Design System comes with four pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful Bootstrap 4 Design System.</p>
  1570.            <div class="btn-wrapper">
  1571.              <a href="./examples/login.html" class="btn btn-success">Login Page</a>
  1572.              <a href="./examples/register.html" class="btn btn-white">Register Page</a>
  1573.            </div>
  1574.          </div>
  1575.          <div class="col-lg-5 mb-lg-auto">
  1576.            <div class="transform-perspective-right">
  1577.              <div class="card bg-secondary shadow border-0">
  1578.                <div class="card-header bg-white pb-5">
  1579.                  <div class="text-muted text-center mb-3"><small>Sign in with</small></div>
  1580.                  <div class="btn-wrapper text-center">
  1581.                    <a href="#" class="btn btn-neutral btn-icon">
  1582.                      <span class="btn-inner--icon">
  1583.                        <img alt="image" src="./assets/img/icons/common/github.svg">
  1584.                      </span>
  1585.                      <span class="btn-inner--text">Github</span>
  1586.                    </a>
  1587.                    <a href="#" class="btn btn-neutral btn-icon">
  1588.                      <span class="btn-inner--icon">
  1589.                        <img alt="image" src="./assets/img/icons/common/google.svg">
  1590.                      </span>
  1591.                      <span class="btn-inner--text">Google</span>
  1592.                    </a>
  1593.                  </div>
  1594.                </div>
  1595.                <div class="card-body px-lg-5 py-lg-5">
  1596.                  <div class="text-center text-muted mb-4">
  1597.                    <small>Or sign in with credentials</small>
  1598.                  </div>
  1599.                  <form>
  1600.                    <div class="form-group mb-3">
  1601.                      <div class="input-group input-group-alternative">
  1602.                        <div class="input-group-prepend">
  1603.                          <span class="input-group-text"><i class="ni ni-email-83"></i></span>
  1604.                        </div>
  1605.                        <input class="form-control" placeholder="Email" type="email">
  1606.                      </div>
  1607.                    </div>
  1608.                    <div class="form-group">
  1609.                      <div class="input-group input-group-alternative">
  1610.                        <div class="input-group-prepend">
  1611.                          <span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
  1612.                        </div>
  1613.                        <input class="form-control" placeholder="Password" type="password">
  1614.                      </div>
  1615.                    </div>
  1616.                    <div class="custom-control custom-control-alternative custom-checkbox">
  1617.                      <input class="custom-control-input" id="customCheckLogin2" type="checkbox">
  1618.                      <label class="custom-control-label" for="customCheckLogin2">
  1619.                        <span>Remember me</span>
  1620.                      </label>
  1621.                    </div>
  1622.                    <div class="text-center">
  1623.                      <button type="button" class="btn btn-primary my-4">Sign in</button>
  1624.                    </div>
  1625.                  </form>
  1626.                </div>
  1627.              </div>
  1628.            </div>
  1629.          </div>
  1630.        </div>
  1631.      </div>
  1632.      <!-- SVG separator -->
  1633.      <div class="separator separator-bottom separator-skew">
  1634.        <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
  1635.          <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon>
  1636.        </svg>
  1637.      </div>
  1638.    </section>
  1639.    <section class="section section-lg">
  1640.      <div class="container">
  1641.        <div class="row row-grid justify-content-center">
  1642.          <div class="col-lg-8 text-center">
  1643.            <h2 class="display-3">Do you love this awesome <span class="text-success">Design System for Bootstrap 4?</span></h2>
  1644.            <p class="lead">Cause if you do, it can be yours for FREE. Hit the button below to navigate to Creative Tim where you can find the Design System in HTML. Start a new project or give an old Bootstrap project a new look!</p>
  1645.            <div class="btn-wrapper">
  1646.              <a href="https://www.creative-tim.com/product/argon-design-system" class="btn btn-primary mb-3 mb-sm-0">Download HTML</a>
  1647.              <a href="https://www.creative-tim.com/product/argon-design-system" class="btn btn-default">Download PSD/Sketch</a>
  1648.            </div>
  1649.            <div class="text-center">
  1650.              <h4 class="display-4 mb-5 mt-5">Available on these technologies</h4>
  1651.              <div class="row justify-content-center">
  1652.                <div class="col-lg-2 col-4">
  1653.                  <a href="https://www.creative-tim.com/product/argon-design-system" target="_blank" data-toggle="tooltip" data-original-title="Bootstrap 4 - Most popular front-end component library">
  1654.                    <img alt="image" src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/bootstrap.jpg" class="img-fluid">
  1655.                  </a>
  1656.                </div>
  1657.                <div class="col-lg-2 col-4">
  1658.                  <a href=" https://www.creative-tim.com/product/vue-argon-design-system" target="_blank" data-toggle="tooltip" data-original-title="Vue.js - The progressive javascript framework">
  1659.                    <img alt="image" src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/vue.jpg" class="img-fluid">
  1660.                  </a>
  1661.                </div>
  1662.                <div class="col-lg-2 col-4">
  1663.                  <a href=" https://www.sketchapp.com/" target="_blank" data-toggle="tooltip" data-original-title="[Coming Soon] Sketch - Digital design toolkit">
  1664.                    <img alt="image" src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/sketch.jpg" class="img-fluid opacity-3">
  1665.                  </a>
  1666.                </div>
  1667.                <div class="col-lg-2 col-4">
  1668.                  <a href=" https://www.adobe.com/products/photoshop.html" target="_blank" data-toggle="tooltip" data-original-title="[Coming Soon] Adobe Photoshop - Software for digital images manipulation">
  1669.                    <img alt="image" src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/ps.jpg" class="img-fluid opacity-3">
  1670.                  </a>
  1671.                </div>
  1672.                <div class="col-lg-2 col-4">
  1673.                  <a href=" https://angularjs.org/" target="_blank" data-toggle="tooltip" data-original-title="[Coming Soon] Angular - One framework. Mobile &amp; desktop">
  1674.                    <img alt="image" src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/angular.jpg" class="img-fluid opacity-3">
  1675.                  </a>
  1676.                </div>
  1677.                <div class="col-lg-2 col-4">
  1678.                  <a href=" https://angularjs.org/" target="_blank" data-toggle="tooltip" data-original-title="[Coming Soon] React - A JavaScript library for building user interfaces">
  1679.                    <img alt="image" src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/react.jpg" class="img-fluid opacity-3">
  1680.                  </a>
  1681.                </div>
  1682.              </div>
  1683.            </div>
  1684.          </div>
  1685.        </div>
  1686.      </div>
  1687.    </section>
  1688.  </main>
  1689.  <footer class="footer has-cards">
  1690.    <div class="container container-lg">
  1691.      <div class="row">
  1692.        <div class="col-md-6 mb-5 mb-md-0">
  1693.          <div class="card card-lift--hover shadow border-0">
  1694.            <a href="./examples/landing.html" title="Landing Page">
  1695.              <img alt="image" src="./assets/img/theme/landing.jpg" class="card-img">
  1696.            </a>
  1697.          </div>
  1698.        </div>
  1699.        <div class="col-md-6 mb-5 mb-lg-0">
  1700.          <div class="card card-lift--hover shadow border-0">
  1701.            <a href="./examples/profile.html" title="Profile Page">
  1702.              <img alt="image" src="./assets/img/theme/profile.jpg" class="card-img">
  1703.            </a>
  1704.          </div>
  1705.        </div>
  1706.      </div>
  1707.    </div>
  1708.    <div class="container">
  1709.      <div class="row row-grid align-items-center my-md">
  1710.        <div class="col-lg-6">
  1711.          <h3 class="text-primary font-weight-light mb-2">Thank you for supporting us!</h3>
  1712.          <h4 class="mb-0 font-weight-light">Let's get in touch on any of these platforms.</h4>
  1713.         </div>
  1714.         <div class="col-lg-6 text-lg-center btn-wrapper">
  1715.           <a target="_blank" href="https://twitter.com/creativetim" class="btn btn-neutral btn-icon-only btn-twitter btn-round btn-lg" data-toggle="tooltip" data-original-title="Follow us">
  1716.             <i class="fa fa-twitter"></i>
  1717.           </a>
  1718.           <a target="_blank" href="https://www.facebook.com/creativetim" class="btn btn-neutral btn-icon-only btn-facebook btn-round btn-lg" data-toggle="tooltip" data-original-title="Like us">
  1719.             <i class="fa fa-facebook-square"></i>
  1720.           </a>
  1721.           <a target="_blank" href="https://dribbble.com/creativetim" class="btn btn-neutral btn-icon-only btn-dribbble btn-lg btn-round" data-toggle="tooltip" data-original-title="Follow us">
  1722.             <i class="fa fa-dribbble"></i>
  1723.           </a>
  1724.           <a target="_blank" href="https://github.com/creativetimofficial" class="btn btn-neutral btn-icon-only btn-github btn-round btn-lg" data-toggle="tooltip" data-original-title="Star on Github">
  1725.             <i class="fa fa-github"></i>
  1726.           </a>
  1727.         </div>
  1728.       </div>
  1729.       <hr>
  1730.       <div class="row align-items-center justify-content-md-between">
  1731.         <div class="col-md-6">
  1732.           <div class="copyright">
  1733.             &copy; 2019 <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
  1734.           </div>
  1735.         </div>
  1736.         <div class="col-md-6">
  1737.           <ul class="nav nav-footer justify-content-end">
  1738.             <li class="nav-item">
  1739.               <a href="https://www.creative-tim.com" class="nav-link" target="_blank">Creative Tim</a>
  1740.             </li>
  1741.             <li class="nav-item">
  1742.               <a href="https://www.creative-tim.com/presentation" class="nav-link" target="_blank">About Us</a>
  1743.             </li>
  1744.             <li class="nav-item">
  1745.               <a href="http://blog.creative-tim.com" class="nav-link" target="_blank">Blog</a>
  1746.             </li>
  1747.             <li class="nav-item">
  1748.               <a href="https://github.com/creativetimofficial/argon-design-system/blob/master/LICENSE.md" class="nav-link" target="_blank">MIT License</a>
  1749.             </li>
  1750.           </ul>
  1751.         </div>
  1752.       </div>
  1753.     </div>
  1754.   </footer>
  1755.   <!-- Core -->
  1756.   <script src="./assets/vendor/jquery/jquery.min.js"></script>
  1757.   <script src="./assets/vendor/popper/popper.min.js"></script>
  1758.   <script src="./assets/vendor/bootstrap/bootstrap.min.js"></script>
  1759.   <script src="./assets/vendor/headroom/headroom.min.js"></script>
  1760.   <!-- Optional JS -->
  1761.   <script src="./assets/vendor/onscreen/onscreen.min.js"></script>
  1762.   <script src="./assets/vendor/nouislider/js/nouislider.min.js"></script>
  1763.   <script src="./assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
  1764.   <!-- Argon JS -->
  1765.   <script src="./assets/js/argon.js?v=1.1.0"></script>
  1766. </body>
  1767.  
  1768. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!