Initial Push
This commit is contained in:
693
sections/elements/avatars.html
Normal file
693
sections/elements/avatars.html
Normal file
@@ -0,0 +1,693 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* Material Kit 2 - v3.0.4
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-kit
|
||||
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://www.creative-tim.com/license)
|
||||
* Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../../assets/img/favicon.png">
|
||||
<title>
|
||||
Material Kit 2 by Creative Tim
|
||||
</title>
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<!-- Nucleo Icons -->
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||||
<link href="../../assets/css/nucleo-svg.css" rel="stylesheet" />
|
||||
<!-- Font Awesome Icons -->
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<!-- CSS Files -->
|
||||
<link id="pagestyle" href="../../assets/css/material-kit.css?v=3.0.4" rel="stylesheet" />
|
||||
<!-- Nepcha Analytics (nepcha.com) -->
|
||||
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
||||
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="avatars-sections">
|
||||
<!-- Navbar Light -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
|
||||
Material Kit 2
|
||||
</a>
|
||||
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon mt-2">
|
||||
<span class="navbar-toggler-bar bar1"></span>
|
||||
<span class="navbar-toggler-bar bar2"></span>
|
||||
<span class="navbar-toggler-bar bar3"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
|
||||
<ul class="navbar-nav navbar-nav-hover ms-auto">
|
||||
<li class="nav-item dropdown dropdown-hover mx-2 ms-lg-5">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuPages5" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">dashboard</i>
|
||||
Pages
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<div class="dropdown-menu ms-n3 dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages5">
|
||||
<div class="d-none d-lg-block">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-lg-none">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">view_day</i>
|
||||
Sections
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
|
||||
<div class="d-none d-lg-block">
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
<span class="text-sm">See all sections</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
<span class="text-sm">See all navigations</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
<span class="text-sm">See all input areas</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
<span class="text-sm">See all examples</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
<span class="text-sm">See all elements</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-single-copy-04 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-laptop text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-badge text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-notification-70 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-app text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">article</i>
|
||||
Docs
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
|
||||
<div class="d-none d-lg-block">
|
||||
<ul class="list-group">
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/colors/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12 g-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item ms-lg-auto">
|
||||
<a class="nav-link nav-link-icon me-2" href="https://github.com/creativetimofficial/soft-ui-design-system" target="_blank">
|
||||
<i class="fa fa-github me-1"></i>
|
||||
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Star us on Github">Github</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item my-auto ms-3 ms-lg-0">
|
||||
<a href="https://www.creative-tim.com/product/material-kit-pro" class="btn btn-sm bg-gradient-primary mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 mx-auto">
|
||||
<div class="mb-4 w-100 w-md-50 w-lg-25">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="https://demos.creative-tim.com/material-kit-pro/index">Elements</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Avatars</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Avatars</h3>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Avatar Group</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-avatars" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-avatars" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-avatars">
|
||||
<iframe class="w-100 height-300" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
<div class="container py-6">
|
||||
<div class="row mt-5 text-center">
|
||||
<div class="col-12">
|
||||
<div class="avatar-group">
|
||||
<a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
|
||||
<img alt="Image placeholder" src="../../assets/img/team-1.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
|
||||
<img alt="Image placeholder" src="../../assets/img/team-2.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
|
||||
<img alt="Image placeholder" src="../../assets/img/team-3.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-lg rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
|
||||
<img alt="Image placeholder" src="../../assets/img/team-4.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})</script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-avatars">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container py-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row mt-5 text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-12"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"avatar-group"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"avatar avatar-lg rounded-circle"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Ryan Tompson"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/team-1.jpg"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"avatar avatar-lg rounded-circle"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Romina Hadid"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/team-2.jpg"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"avatar avatar-lg rounded-circle"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Alexander Smith"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/team-3.jpg"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"avatar avatar-lg rounded-circle"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Jessica Doe"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/team-4.jpg"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
|
||||
|
||||
<span class="c"><!-- initialization script for tooltips --></span>
|
||||
<span class="nt"><script></span>
|
||||
<span class="kd">var</span> <span class="nx">tooltipTriggerList</span> <span class="o">=</span> <span class="p">[].</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">[data-bs-toggle="tooltip"]</span><span class="dl">'</span><span class="p">))</span>
|
||||
<span class="kd">var</span> <span class="nx">tooltipList</span> <span class="o">=</span> <span class="nx">tooltipTriggerList</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">tooltipTriggerEl</span><span class="p">)</span> <span class="p">{</span>
|
||||
<span class="k">return</span> <span class="k">new</span> <span class="nx">bootstrap</span><span class="p">.</span><span class="nx">Tooltip</span><span class="p">(</span><span class="nx">tooltipTriggerEl</span><span class="p">)</span>
|
||||
<span class="p">})</span>
|
||||
<span class="nt"></script></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Avatar Size</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-avatars-size" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-avatars-size" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-avatars-size">
|
||||
<iframe class="w-100 height-300" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
<div class="container py-6">
|
||||
<div class="row mt-5 text-center">
|
||||
<div class="col-12">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle">
|
||||
<img alt="Image placeholder" src="../../assets/img/team-4.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-sm rounded-circle">
|
||||
<img alt="Image placeholder" src="../../assets/img/team-4.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar rounded-circle">
|
||||
<img alt="Image placeholder" src="../../assets/img/team-4.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-lg rounded-circle">
|
||||
<img alt="Image placeholder" src="../../assets/img/team-4.jpg">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xl rounded-circle">
|
||||
<img alt="Image placeholder" src="../../assets/img/team-4.jpg">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-avatars-size">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container py-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row mt-5 text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-12"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"avatar avatar-xs rounded-circle"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/team-4.jpg"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"avatar avatar-sm rounded-circle"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/team-4.jpg"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"avatar rounded-circle"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/team-4.jpg"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"avatar avatar-lg rounded-circle"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/team-4.jpg"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"avatar avatar-xl rounded-circle"</span><span class="nt">></span>
|
||||
<span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Image placeholder"</span> <span class="na">src=</span><span class="s">"../../assets/img/team-4.jpg"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<footer class="footer py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mb-4 mx-auto text-center">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Company
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
About Us
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Team
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Products
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Blog
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-8 mx-auto text-center mb-4 mt-2">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-dribbble"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-twitter"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-instagram"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-pinterest"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-github"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8 mx-auto text-center mt-1">
|
||||
<p class="mb-0 text-secondary">
|
||||
Copyright © <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> Material by Creative Tim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- -------- END FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<!-- Core JS Files -->
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/plugins/perfect-scrollbar.min.js"></script>
|
||||
<script src="../../assets/js/plugins/prism.min.js"></script>
|
||||
<script src="../../assets/js/plugins/highlight.min.js"></script>
|
||||
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
|
||||
<script src="../../assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
737
sections/elements/badges.html
Normal file
737
sections/elements/badges.html
Normal file
@@ -0,0 +1,737 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* Material Kit 2 - v3.0.4
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-kit
|
||||
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://www.creative-tim.com/license)
|
||||
* Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../../assets/img/favicon.png">
|
||||
<title>
|
||||
Material Kit 2 by Creative Tim
|
||||
</title>
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<!-- Nucleo Icons -->
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||||
<link href="../../assets/css/nucleo-svg.css" rel="stylesheet" />
|
||||
<!-- Font Awesome Icons -->
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<!-- CSS Files -->
|
||||
<link id="pagestyle" href="../../assets/css/material-kit.css?v=3.0.4" rel="stylesheet" />
|
||||
<!-- Nepcha Analytics (nepcha.com) -->
|
||||
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
||||
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="badges-sections">
|
||||
<!-- Navbar Light -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
|
||||
Material Kit 2
|
||||
</a>
|
||||
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon mt-2">
|
||||
<span class="navbar-toggler-bar bar1"></span>
|
||||
<span class="navbar-toggler-bar bar2"></span>
|
||||
<span class="navbar-toggler-bar bar3"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
|
||||
<ul class="navbar-nav navbar-nav-hover ms-auto">
|
||||
<li class="nav-item dropdown dropdown-hover mx-2 ms-lg-5">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuPages5" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">dashboard</i>
|
||||
Pages
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<div class="dropdown-menu ms-n3 dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages5">
|
||||
<div class="d-none d-lg-block">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-lg-none">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">view_day</i>
|
||||
Sections
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
|
||||
<div class="d-none d-lg-block">
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
<span class="text-sm">See all sections</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
<span class="text-sm">See all navigations</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
<span class="text-sm">See all input areas</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
<span class="text-sm">See all examples</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
<span class="text-sm">See all elements</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-single-copy-04 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-laptop text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-badge text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-notification-70 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-app text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">article</i>
|
||||
Docs
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
|
||||
<div class="d-none d-lg-block">
|
||||
<ul class="list-group">
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/colors/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12 g-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item ms-lg-auto">
|
||||
<a class="nav-link nav-link-icon me-2" href="https://github.com/creativetimofficial/soft-ui-design-system" target="_blank">
|
||||
<i class="fa fa-github me-1"></i>
|
||||
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Star us on Github">Github</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item my-auto ms-3 ms-lg-0">
|
||||
<a href="https://www.creative-tim.com/product/material-kit-pro" class="btn btn-sm bg-gradient-primary mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 mx-auto">
|
||||
<div class="mb-4 w-100 w-md-50 w-lg-25">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="https://demos.creative-tim.com/material-kit-pro/index">Elements</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Badges</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Badges</h3>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Badges Gradients</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-badges" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-badges" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-badges">
|
||||
<iframe class="w-100 height-300" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
<section class="py-7 mt-3">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between text-center py-2">
|
||||
<div class="col-12">
|
||||
<span class="badge bg-gradient-primary">Primary</span>
|
||||
<span class="badge bg-gradient-secondary">Secondary</span>
|
||||
<span class="badge bg-gradient-success">Success</span>
|
||||
<span class="badge bg-gradient-danger">Danger</span>
|
||||
<span class="badge bg-gradient-warning">Warning</span>
|
||||
<span class="badge bg-gradient-info">Info</span>
|
||||
<span class="badge bg-gradient-light text-dark">Light</span>
|
||||
<span class="badge bg-gradient-dark">Dark</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-badges">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><section</span> <span class="na">class=</span><span class="s">"py-7 mt-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-space-between text-center py-2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-12"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-gradient-primary"</span><span class="nt">></span>Primary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-gradient-secondary"</span><span class="nt">></span>Secondary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-gradient-success"</span><span class="nt">></span>Success<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-gradient-danger"</span><span class="nt">></span>Danger<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-gradient-warning"</span><span class="nt">></span>Warning<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-gradient-info"</span><span class="nt">></span>Info<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-gradient-light text-dark"</span><span class="nt">></span>Light<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-gradient-dark"</span><span class="nt">></span>Dark<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></section></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Badges Simple</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-badges-simple" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-badges-simple" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-badges-simple">
|
||||
<iframe class="w-100 height-300" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
<section class="py-7 mt-3">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between text-center py-2">
|
||||
<div class="col-12">
|
||||
<span class="badge bg-primary">Primary</span>
|
||||
<span class="badge bg-secondary">Secondary</span>
|
||||
<span class="badge bg-success">Success</span>
|
||||
<span class="badge bg-danger">Danger</span>
|
||||
<span class="badge bg-warning">Warning</span>
|
||||
<span class="badge bg-info">Info</span>
|
||||
<span class="badge bg-light text-dark">Light</span>
|
||||
<span class="badge bg-dark">Dark</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-badges-simple">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><section</span> <span class="na">class=</span><span class="s">"py-7 mt-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-space-between text-center py-2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-12"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-primary"</span><span class="nt">></span>Primary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-secondary"</span><span class="nt">></span>Secondary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-success"</span><span class="nt">></span>Success<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-danger"</span><span class="nt">></span>Danger<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-warning"</span><span class="nt">></span>Warning<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-info"</span><span class="nt">></span>Info<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-light text-dark"</span><span class="nt">></span>Light<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge bg-dark"</span><span class="nt">></span>Dark<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></section></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Badges Simple Rounded</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-badges-simple-rounded" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-badges-simple-rounded" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-badges-simple-rounded">
|
||||
<iframe class="w-100 height-300" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
<section class="py-7 mt-3">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between text-center py-2">
|
||||
<div class="col-12">
|
||||
<span class="badge rounded-pill bg-primary">Primary</span>
|
||||
<span class="badge rounded-pill bg-secondary">Secondary</span>
|
||||
<span class="badge rounded-pill bg-success">Success</span>
|
||||
<span class="badge rounded-pill bg-danger">Danger</span>
|
||||
<span class="badge rounded-pill bg-warning">Warning</span>
|
||||
<span class="badge rounded-pill bg-info">Info</span>
|
||||
<span class="badge rounded-pill bg-light text-dark">Light</span>
|
||||
<span class="badge rounded-pill bg-dark">Dark</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-badges-simple-rounded">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><section</span> <span class="na">class=</span><span class="s">"py-7 mt-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-space-between text-center py-2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-12"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge rounded-pill bg-primary"</span><span class="nt">></span>Primary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge rounded-pill bg-secondary"</span><span class="nt">></span>Secondary<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge rounded-pill bg-success"</span><span class="nt">></span>Success<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge rounded-pill bg-danger"</span><span class="nt">></span>Danger<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge rounded-pill bg-warning"</span><span class="nt">></span>Warning<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge rounded-pill bg-info"</span><span class="nt">></span>Info<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge rounded-pill bg-light text-dark"</span><span class="nt">></span>Light<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"badge rounded-pill bg-dark"</span><span class="nt">></span>Dark<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></section></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<footer class="footer py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mb-4 mx-auto text-center">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Company
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
About Us
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Team
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Products
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Blog
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-8 mx-auto text-center mb-4 mt-2">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-dribbble"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-twitter"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-instagram"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-pinterest"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-github"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8 mx-auto text-center mt-1">
|
||||
<p class="mb-0 text-secondary">
|
||||
Copyright © <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> Material by Creative Tim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- -------- END FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<!-- Core JS Files -->
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/plugins/perfect-scrollbar.min.js"></script>
|
||||
<script src="../../assets/js/plugins/prism.min.js"></script>
|
||||
<script src="../../assets/js/plugins/highlight.min.js"></script>
|
||||
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
|
||||
<script src="../../assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
597
sections/elements/breadcrumbs.html
Normal file
597
sections/elements/breadcrumbs.html
Normal file
@@ -0,0 +1,597 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* Material Kit 2 - v3.0.4
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-kit
|
||||
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://www.creative-tim.com/license)
|
||||
* Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../../assets/img/favicon.png">
|
||||
<title>
|
||||
Material Kit 2 by Creative Tim
|
||||
</title>
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<!-- Nucleo Icons -->
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||||
<link href="../../assets/css/nucleo-svg.css" rel="stylesheet" />
|
||||
<!-- Font Awesome Icons -->
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<!-- CSS Files -->
|
||||
<link id="pagestyle" href="../../assets/css/material-kit.css?v=3.0.4" rel="stylesheet" />
|
||||
<!-- Nepcha Analytics (nepcha.com) -->
|
||||
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
||||
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="breadcrumbs-sections">
|
||||
<!-- Navbar Light -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
|
||||
Material Kit 2
|
||||
</a>
|
||||
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon mt-2">
|
||||
<span class="navbar-toggler-bar bar1"></span>
|
||||
<span class="navbar-toggler-bar bar2"></span>
|
||||
<span class="navbar-toggler-bar bar3"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
|
||||
<ul class="navbar-nav navbar-nav-hover ms-auto">
|
||||
<li class="nav-item dropdown dropdown-hover mx-2 ms-lg-5">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuPages5" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">dashboard</i>
|
||||
Pages
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<div class="dropdown-menu ms-n3 dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages5">
|
||||
<div class="d-none d-lg-block">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-lg-none">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">view_day</i>
|
||||
Sections
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
|
||||
<div class="d-none d-lg-block">
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
<span class="text-sm">See all sections</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
<span class="text-sm">See all navigations</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
<span class="text-sm">See all input areas</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
<span class="text-sm">See all examples</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
<span class="text-sm">See all elements</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-single-copy-04 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-laptop text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-badge text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-notification-70 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-app text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">article</i>
|
||||
Docs
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
|
||||
<div class="d-none d-lg-block">
|
||||
<ul class="list-group">
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/colors/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12 g-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item ms-lg-auto">
|
||||
<a class="nav-link nav-link-icon me-2" href="https://github.com/creativetimofficial/soft-ui-design-system" target="_blank">
|
||||
<i class="fa fa-github me-1"></i>
|
||||
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Star us on Github">Github</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item my-auto ms-3 ms-lg-0">
|
||||
<a href="https://www.creative-tim.com/product/material-kit-pro" class="btn btn-sm bg-gradient-primary mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 mx-auto">
|
||||
<div class="mb-4 w-100 w-md-50 w-lg-25">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="https://demos.creative-tim.com/material-kit-pro/index">Elements</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Breadcrumbs</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Breadcrumbs</h3>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Breadcrumbs</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-breadcrumb" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-breadcrumb" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-breadcrumb">
|
||||
<iframe class="w-100 height-300" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
<div class="container py-6 mt-2">
|
||||
<div class="row">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item text-dark active" aria-current="page">Home</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item text-dark opacity-5"><a href="javascript">Home</a></li>
|
||||
<li class="breadcrumb-item text-dark active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item text-dark opacity-5"><a href="javascript">Home</a></li>
|
||||
<li class="breadcrumb-item text-dark opacity-5"><a href="javascript">Library</a></li>
|
||||
<li class="breadcrumb-item text-dark active" aria-current="page">Data</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-breadcrumb">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container py-6 mt-2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item text-dark active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>Home<span class="nt"></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"></nav></span>
|
||||
|
||||
<span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item text-dark opacity-5"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"javascript"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item text-dark active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>Library<span class="nt"></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"></nav></span>
|
||||
|
||||
<span class="nt"><nav</span> <span class="na">aria-label=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><ol</span> <span class="na">class=</span><span class="s">"breadcrumb"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item text-dark opacity-5"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"javascript"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item text-dark opacity-5"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"javascript"</span><span class="nt">></span>Library<span class="nt"></a></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"breadcrumb-item text-dark active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">></span>Data<span class="nt"></li></span>
|
||||
<span class="nt"></ol></span>
|
||||
<span class="nt"></nav></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<footer class="footer py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mb-4 mx-auto text-center">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Company
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
About Us
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Team
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Products
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Blog
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-8 mx-auto text-center mb-4 mt-2">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-dribbble"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-twitter"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-instagram"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-pinterest"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-github"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8 mx-auto text-center mt-1">
|
||||
<p class="mb-0 text-secondary">
|
||||
Copyright © <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> Material by Creative Tim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- -------- END FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<!-- Core JS Files -->
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/plugins/perfect-scrollbar.min.js"></script>
|
||||
<script src="../../assets/js/plugins/prism.min.js"></script>
|
||||
<script src="../../assets/js/plugins/highlight.min.js"></script>
|
||||
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
|
||||
<script src="../../assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1077
sections/elements/buttons.html
Normal file
1077
sections/elements/buttons.html
Normal file
File diff suppressed because it is too large
Load Diff
653
sections/elements/dropdowns.html
Normal file
653
sections/elements/dropdowns.html
Normal file
@@ -0,0 +1,653 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* Material Kit 2 - v3.0.4
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-kit
|
||||
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://www.creative-tim.com/license)
|
||||
* Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../../assets/img/favicon.png">
|
||||
<title>
|
||||
Material Kit 2 by Creative Tim
|
||||
</title>
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<!-- Nucleo Icons -->
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||||
<link href="../../assets/css/nucleo-svg.css" rel="stylesheet" />
|
||||
<!-- Font Awesome Icons -->
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<!-- CSS Files -->
|
||||
<link id="pagestyle" href="../../assets/css/material-kit.css?v=3.0.4" rel="stylesheet" />
|
||||
<!-- Nepcha Analytics (nepcha.com) -->
|
||||
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
||||
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="dropdowns-sections">
|
||||
<!-- Navbar Light -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
|
||||
Material Kit 2
|
||||
</a>
|
||||
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon mt-2">
|
||||
<span class="navbar-toggler-bar bar1"></span>
|
||||
<span class="navbar-toggler-bar bar2"></span>
|
||||
<span class="navbar-toggler-bar bar3"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
|
||||
<ul class="navbar-nav navbar-nav-hover ms-auto">
|
||||
<li class="nav-item dropdown dropdown-hover mx-2 ms-lg-5">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuPages5" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">dashboard</i>
|
||||
Pages
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<div class="dropdown-menu ms-n3 dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages5">
|
||||
<div class="d-none d-lg-block">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-lg-none">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">view_day</i>
|
||||
Sections
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
|
||||
<div class="d-none d-lg-block">
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
<span class="text-sm">See all sections</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
<span class="text-sm">See all navigations</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
<span class="text-sm">See all input areas</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
<span class="text-sm">See all examples</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
<span class="text-sm">See all elements</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-single-copy-04 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-laptop text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-badge text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-notification-70 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-app text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">article</i>
|
||||
Docs
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
|
||||
<div class="d-none d-lg-block">
|
||||
<ul class="list-group">
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/colors/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12 g-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item ms-lg-auto">
|
||||
<a class="nav-link nav-link-icon me-2" href="https://github.com/creativetimofficial/soft-ui-design-system" target="_blank">
|
||||
<i class="fa fa-github me-1"></i>
|
||||
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Star us on Github">Github</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item my-auto ms-3 ms-lg-0">
|
||||
<a href="https://www.creative-tim.com/product/material-kit-pro" class="btn btn-sm bg-gradient-primary mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 mx-auto">
|
||||
<div class="mb-4 w-100 w-md-50 w-lg-25">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="https://demos.creative-tim.com/material-kit-pro/index">Elements</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Dropdowns</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Dropdowns</h3>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Dropdown and Dropup</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-dropdown" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-dropdown" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-dropdown">
|
||||
<iframe class="w-100 height-300" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Start dropdowns & dropups -->
|
||||
<div class="container py-7">
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 ms-lg-auto col-md-6 col-sm-3 d-flex justify-content-center">
|
||||
<div class="dropdown">
|
||||
<button class="btn bg-gradient-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton">
|
||||
<li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
|
||||
<li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
|
||||
<li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 me-lg-auto col-md-6 col-sm-3 d-flex justify-content-center">
|
||||
<div class="btn-group dropup mt-7">
|
||||
<button type="button" class="btn bg-gradient-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Dropup
|
||||
</button>
|
||||
<ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton">
|
||||
<li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
|
||||
<li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
|
||||
<li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end dropdowns & dropups -->
|
||||
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-dropdown">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Start dropdowns & dropups --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container py-7"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-4 ms-lg-auto col-md-6 col-sm-3 d-flex justify-content-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary dropdown-toggle"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">id=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropdown button
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu px-2 py-3"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a</span> <span class="na">class=</span><span class="s">"dropdown-item border-radius-md"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">class=</span><span class="s">"dropdown-item border-radius-md"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">class=</span><span class="s">"dropdown-item border-radius-md"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>Something else here<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-4 me-lg-auto col-md-6 col-sm-3 d-flex justify-content-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group dropup mt-7"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dropup
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu px-2 py-3"</span> <span class="na">aria-labelledby=</span><span class="s">"dropdownMenuButton"</span><span class="nt">></span>
|
||||
<span class="nt"><li><a</span> <span class="na">class=</span><span class="s">"dropdown-item border-radius-md"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>Action<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">class=</span><span class="s">"dropdown-item border-radius-md"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>Another action<span class="nt"></a></li></span>
|
||||
<span class="nt"><li><a</span> <span class="na">class=</span><span class="s">"dropdown-item border-radius-md"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>Something else here<span class="nt"></a></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="c"><!-- end dropdowns & dropups --></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row py-3">
|
||||
<div class="col-lg-4 text-start">
|
||||
<p class="lead text-dark pt-1 mb-0">Selectpicker</p>
|
||||
</div>
|
||||
<div class="col-lg-4 mt-1 text-center">
|
||||
<span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
|
||||
</div>
|
||||
<div class="col-lg-4 text-end my-auto">
|
||||
<a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
|
||||
<i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/dropdowns/selectpicker.jpg" alt="selectpicker">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<footer class="footer py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mb-4 mx-auto text-center">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Company
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
About Us
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Team
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Products
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Blog
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-8 mx-auto text-center mb-4 mt-2">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-dribbble"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-twitter"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-instagram"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-pinterest"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-github"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8 mx-auto text-center mt-1">
|
||||
<p class="mb-0 text-secondary">
|
||||
Copyright © <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> Material by Creative Tim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- -------- END FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<!-- Core JS Files -->
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/plugins/perfect-scrollbar.min.js"></script>
|
||||
<script src="../../assets/js/plugins/prism.min.js"></script>
|
||||
<script src="../../assets/js/plugins/highlight.min.js"></script>
|
||||
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
|
||||
<script src="../../assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
667
sections/elements/progress-bars.html
Normal file
667
sections/elements/progress-bars.html
Normal file
@@ -0,0 +1,667 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* Material Kit 2 - v3.0.4
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-kit
|
||||
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://www.creative-tim.com/license)
|
||||
* Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../../assets/img/favicon.png">
|
||||
<title>
|
||||
Material Kit 2 by Creative Tim
|
||||
</title>
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<!-- Nucleo Icons -->
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||||
<link href="../../assets/css/nucleo-svg.css" rel="stylesheet" />
|
||||
<!-- Font Awesome Icons -->
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<!-- CSS Files -->
|
||||
<link id="pagestyle" href="../../assets/css/material-kit.css?v=3.0.4" rel="stylesheet" />
|
||||
<!-- Nepcha Analytics (nepcha.com) -->
|
||||
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
||||
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="progress-bars-sections">
|
||||
<!-- Navbar Light -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
|
||||
Material Kit 2
|
||||
</a>
|
||||
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon mt-2">
|
||||
<span class="navbar-toggler-bar bar1"></span>
|
||||
<span class="navbar-toggler-bar bar2"></span>
|
||||
<span class="navbar-toggler-bar bar3"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
|
||||
<ul class="navbar-nav navbar-nav-hover ms-auto">
|
||||
<li class="nav-item dropdown dropdown-hover mx-2 ms-lg-5">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuPages5" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">dashboard</i>
|
||||
Pages
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<div class="dropdown-menu ms-n3 dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages5">
|
||||
<div class="d-none d-lg-block">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-lg-none">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">view_day</i>
|
||||
Sections
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
|
||||
<div class="d-none d-lg-block">
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
<span class="text-sm">See all sections</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
<span class="text-sm">See all navigations</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
<span class="text-sm">See all input areas</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
<span class="text-sm">See all examples</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
<span class="text-sm">See all elements</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-single-copy-04 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-laptop text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-badge text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-notification-70 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-app text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">article</i>
|
||||
Docs
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
|
||||
<div class="d-none d-lg-block">
|
||||
<ul class="list-group">
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/colors/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12 g-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item ms-lg-auto">
|
||||
<a class="nav-link nav-link-icon me-2" href="https://github.com/creativetimofficial/soft-ui-design-system" target="_blank">
|
||||
<i class="fa fa-github me-1"></i>
|
||||
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Star us on Github">Github</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item my-auto ms-3 ms-lg-0">
|
||||
<a href="https://www.creative-tim.com/product/material-kit-pro" class="btn btn-sm bg-gradient-primary mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 mx-auto">
|
||||
<div class="mb-4 w-100 w-md-50 w-lg-25">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="https://demos.creative-tim.com/material-kit-pro/index">Elements</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Progress Bars</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Progress Bars</h3>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Progress Bars Simple</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-progress-simple" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-progress-simple" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-progress-simple">
|
||||
<iframe class="w-100 height-300" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
<section class="py-6 mt-4">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-danger" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<div class="progress mb-3">
|
||||
<div class="progress-bar bg-dark" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-progress-simple">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><section</span> <span class="na">class=</span><span class="s">"py-6 mt-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-space-between py-2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-6 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar bg-primary"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 50%"</span> <span class="na">aria-valuenow=</span><span class="s">"50"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar bg-secondary"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 50%"</span> <span class="na">aria-valuenow=</span><span class="s">"50"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar bg-success"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 50%"</span> <span class="na">aria-valuenow=</span><span class="s">"50"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar bg-info"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 50%"</span> <span class="na">aria-valuenow=</span><span class="s">"50"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar bg-warning"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 50%"</span> <span class="na">aria-valuenow=</span><span class="s">"50"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar bg-danger"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 50%"</span> <span class="na">aria-valuenow=</span><span class="s">"50"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress mb-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"progress-bar bg-dark"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">style=</span><span class="s">"width: 50%"</span> <span class="na">aria-valuenow=</span><span class="s">"50"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></section></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row py-3">
|
||||
<div class="col-lg-4 text-start">
|
||||
<p class="lead text-dark pt-1 mb-0">Progress Bars Gradient</p>
|
||||
</div>
|
||||
<div class="col-lg-4 mt-1 text-center">
|
||||
<span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
|
||||
</div>
|
||||
<div class="col-lg-4 text-end my-auto">
|
||||
<a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
|
||||
<i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/progress/progress-gradient.jpg" alt="progress-2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row py-3">
|
||||
<div class="col-lg-4 text-start">
|
||||
<p class="lead text-dark pt-1 mb-0">Progress Bars Striped</p>
|
||||
</div>
|
||||
<div class="col-lg-4 mt-1 text-center">
|
||||
<span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
|
||||
</div>
|
||||
<div class="col-lg-4 text-end my-auto">
|
||||
<a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
|
||||
<i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/progress/progress-stripped.jpg" alt="progress-3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row py-3">
|
||||
<div class="col-lg-4 text-start">
|
||||
<p class="lead text-dark pt-1 mb-0">Sliders</p>
|
||||
</div>
|
||||
<div class="col-lg-4 mt-1 text-center">
|
||||
<span class="badge bg-light text-dark"><i class="fas fa-lock me-1" aria-hidden="true"></i> Screenshot</span>
|
||||
</div>
|
||||
<div class="col-lg-4 text-end my-auto">
|
||||
<a href="https://demos.creative-tim.com/material-kit-pro/index#pricing-soft-ui" class="text-primary icon-move-right">Get the Code
|
||||
<i class="fas fa-arrow-right text-sm ms-1" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="w-100" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/material-design-system/assets/img/sections/progress/sliders.jpg" alt="progress-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<footer class="footer py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mb-4 mx-auto text-center">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Company
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
About Us
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Team
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Products
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Blog
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-8 mx-auto text-center mb-4 mt-2">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-dribbble"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-twitter"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-instagram"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-pinterest"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-github"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8 mx-auto text-center mt-1">
|
||||
<p class="mb-0 text-secondary">
|
||||
Copyright © <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> Material by Creative Tim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- -------- END FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<!-- Core JS Files -->
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/plugins/perfect-scrollbar.min.js"></script>
|
||||
<script src="../../assets/js/plugins/prism.min.js"></script>
|
||||
<script src="../../assets/js/plugins/highlight.min.js"></script>
|
||||
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
|
||||
<script src="../../assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
638
sections/elements/toggles.html
Normal file
638
sections/elements/toggles.html
Normal file
@@ -0,0 +1,638 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* Material Kit 2 - v3.0.4
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-kit
|
||||
* Copyright 2023 Creative Tim (https://www.creative-tim.com)
|
||||
* Licensed under MIT (https://www.creative-tim.com/license)
|
||||
* Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" type="image/png" href="../../assets/img/favicon.png">
|
||||
<title>
|
||||
Material Kit 2 by Creative Tim
|
||||
</title>
|
||||
<!-- Fonts and icons -->
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<!-- Nucleo Icons -->
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||||
<link href="../../assets/css/nucleo-svg.css" rel="stylesheet" />
|
||||
<!-- Font Awesome Icons -->
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<!-- CSS Files -->
|
||||
<link id="pagestyle" href="../../assets/css/material-kit.css?v=3.0.4" rel="stylesheet" />
|
||||
<!-- Nepcha Analytics (nepcha.com) -->
|
||||
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
||||
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="toggles-sections">
|
||||
<!-- Navbar Light -->
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="https://demos.creative-tim.com/material-kit/presentation" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
|
||||
Material Kit 2
|
||||
</a>
|
||||
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon mt-2">
|
||||
<span class="navbar-toggler-bar bar1"></span>
|
||||
<span class="navbar-toggler-bar bar2"></span>
|
||||
<span class="navbar-toggler-bar bar3"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5" id="navigation">
|
||||
<ul class="navbar-nav navbar-nav-hover ms-auto">
|
||||
<li class="nav-item dropdown dropdown-hover mx-2 ms-lg-5">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuPages5" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">dashboard</i>
|
||||
Pages
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<div class="dropdown-menu ms-n3 dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuPages5">
|
||||
<div class="d-none d-lg-block">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="d-lg-none">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
|
||||
Landing Pages
|
||||
</h6>
|
||||
<a href="../../pages/about-us.html" class="dropdown-item border-radius-md">
|
||||
<span>About Us</span>
|
||||
</a>
|
||||
<a href="../../pages/contact-us.html" class="dropdown-item border-radius-md">
|
||||
<span>Contact Us</span>
|
||||
</a>
|
||||
<a href="../../pages/author.html" class="dropdown-item border-radius-md">
|
||||
<span>Author</span>
|
||||
</a>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
|
||||
Account
|
||||
</h6>
|
||||
<a href="../../pages/sign-in.html" class="dropdown-item border-radius-md">
|
||||
<span>Sign In</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">view_day</i>
|
||||
Sections
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive p-3 border-radius-lg mt-0 mt-lg-3" aria-labelledby="dropdownMenuBlocks">
|
||||
<div class="d-none d-lg-block">
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
<span class="text-sm">See all sections</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
<span class="text-sm">See all navigations</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
<span class="text-sm">See all input areas</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
<span class="text-sm">See all examples</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover dropdown-subitem">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../presentation.html">
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
<span class="text-sm">See all elements</span>
|
||||
</div>
|
||||
<img src="../../assets/img/down-arrow.svg" alt="down-arrow" class="arrow">
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu mt-0 py-3 px-2 mt-3">
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex mb-2">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-single-copy-04 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Page Sections</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/hero-sections.html">
|
||||
Page Headers
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/page-sections/features.html">
|
||||
Features
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-laptop text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Navigation</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/navbars.html">
|
||||
Navbars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/nav-tabs.html">
|
||||
Nav Tabs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/navigation/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-badge text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Input Areas</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/inputs.html">
|
||||
Inputs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/input-areas/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-notification-70 text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Attention Catchers</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/modals.html">
|
||||
Modals
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/attention-catchers/tooltips-popovers.html">
|
||||
Tooltips & Popovers
|
||||
</a>
|
||||
<div class="d-flex mb-2 mt-3">
|
||||
<div class="icon h-10 me-3 d-flex mt-1">
|
||||
<i class="ni ni-app text-gradient text-primary"></i>
|
||||
</div>
|
||||
<div class="w-100 d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Elements</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/avatars.html">
|
||||
Avatars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/badges.html">
|
||||
Badges
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/breadcrumbs.html">
|
||||
Breadcrumbs
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/progress-bars.html">
|
||||
Progress Bars
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/toggles.html">
|
||||
Toggles
|
||||
</a>
|
||||
<a class="dropdown-item ps-3 border-radius-md mb-1" href="../../sections/elements/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown dropdown-hover mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="material-icons opacity-6 me-2 text-md">article</i>
|
||||
Docs
|
||||
<img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-auto ms-md-2">
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs">
|
||||
<div class="d-none d-lg-block">
|
||||
<ul class="list-group">
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/colors/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item list-group-item border-0 p-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href=" https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit ">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row d-lg-none">
|
||||
<div class="col-md-12 g-0">
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Getting Started</h6>
|
||||
<span class="text-sm">All about overview, quick start, license and contents</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Foundation</h6>
|
||||
<span class="text-sm">See our colors, icons and typography</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Components</h6>
|
||||
<span class="text-sm">Explore our collection of fully designed components</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Plugins</h6>
|
||||
<span class="text-sm">Check how you can integrate our plugins</span>
|
||||
</a>
|
||||
<a class="dropdown-item py-2 ps-3 border-radius-md" href="../../pages/about-us.html">
|
||||
<h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Utility Classes</h6>
|
||||
<span class="text-sm">For those who want flexibility, use our utility classes</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item ms-lg-auto">
|
||||
<a class="nav-link nav-link-icon me-2" href="https://github.com/creativetimofficial/soft-ui-design-system" target="_blank">
|
||||
<i class="fa fa-github me-1"></i>
|
||||
<p class="d-inline text-sm z-index-1 font-weight-bold" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Star us on Github">Github</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item my-auto ms-3 ms-lg-0">
|
||||
<a href="https://www.creative-tim.com/product/material-kit-pro" class="btn btn-sm bg-gradient-primary mb-0 me-1 mt-2 mt-md-0">Upgrade to Pro</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 mx-auto">
|
||||
<div class="mb-4 w-100 w-md-50 w-lg-25">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="https://demos.creative-tim.com/material-kit-pro/index">Elements</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Toggles</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Toggles</h3>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Toggle</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-toggle" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-toggle" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-toggle">
|
||||
<iframe class="w-100 height-200" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
<div class="container py-6 mt-3">
|
||||
<div class="row">
|
||||
<div class="col-4 mx-auto">
|
||||
<div class="form-check form-switch d-flex align-items-center ps-6">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
|
||||
<label class="form-check-label ms-3 mb-0" for="flexSwitchCheckDefault">Remember me</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-toggle">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container py-6 mt-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-switch d-flex align-items-center ps-6"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"flexSwitchCheckDefault"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label ms-3 mb-0"</span> <span class="na">for=</span><span class="s">"flexSwitchCheckDefault"</span><span class="nt">></span>Remember me<span class="nt"></label></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative border-radius-xl overflow-hidden shadow-lg mb-7">
|
||||
<div class="container border-bottom">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Toggle Context</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill flex-row p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#preview-toggle-context" role="tab" aria-selected="true">
|
||||
<i class="fas fa-desktop text-sm me-2"></i> Preview
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#code-toggle-context" role="tab" aria-selected="false">
|
||||
<i class="fas fa-code text-sm me-2"></i> Code
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content tab-space">
|
||||
<div class="tab-pane active" id="preview-toggle-context">
|
||||
<iframe class="w-100 height-200" srcdoc='<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
<link id="pagestyle" href="https://demos.creative-tim.com/material-kit/assets/css/material-kit.min.css?v=3.0.4" rel="stylesheet" />
|
||||
<div class="container py-6 mt-3">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<div>
|
||||
<div class="form-check form-switch mb-0">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-4">
|
||||
<span class="text-dark font-weight-bold d-block text-sm">Remember me</span>
|
||||
<span class="text-xs d-block">Be sure that you will always be logged in.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-toggle-context">
|
||||
<div class="position-relative p-4 pb-2">
|
||||
<a class="btn btn-sm bg-gradient-dark position-absolute end-4 mt-3" onclick="copyCode(this);" href="javascript:;"><i class="fas fa-copy text-sm me-1"></i> Copy</a>
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container py-6 mt-3"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"d-flex justify-content-center align-items-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-switch mb-0"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"flexSwitchCheckDefault"</span><span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ms-4"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"text-dark font-weight-bold d-block text-sm"</span><span class="nt">></span>Remember me<span class="nt"></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"text-xs d-block"</span><span class="nt">></span>Be sure that you will always be logged in.<span class="nt"></span></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<footer class="footer py-5">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mb-4 mx-auto text-center">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Company
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
About Us
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Team
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Products
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Blog
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-5 me-3 mb-sm-0 mb-2">
|
||||
Pricing
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-8 mx-auto text-center mb-4 mt-2">
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-dribbble"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-twitter"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-instagram"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-pinterest"></span>
|
||||
</a>
|
||||
<a href="javascript:;" target="_blank" class="text-secondary me-xl-4 me-4">
|
||||
<span class="text-lg fab fa-github"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-8 mx-auto text-center mt-1">
|
||||
<p class="mb-0 text-secondary">
|
||||
Copyright © <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> Material by Creative Tim.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- -------- END FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->
|
||||
<!-- Core JS Files -->
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/plugins/perfect-scrollbar.min.js"></script>
|
||||
<script src="../../assets/js/plugins/prism.min.js"></script>
|
||||
<script src="../../assets/js/plugins/highlight.min.js"></script>
|
||||
<!-- Control Center for Material UI Kit: parallax effects, scripts for the example pages etc -->
|
||||
<!-- Google Maps Plugin -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTTfWur0PDbZWPr7Pmq8K3jiDp0_xUziI"></script>
|
||||
<script src="../../assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1108
sections/elements/typography.html
Normal file
1108
sections/elements/typography.html
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user