Initial Push
This commit is contained in:
663
sections/attention-catchers/alerts.html
Normal file
663
sections/attention-catchers/alerts.html
Normal file
@@ -0,0 +1,663 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* 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="alerts-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">Attention Catchers</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Alerts</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Alerts</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">Simple Alerts</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-alerts" 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-alerts" 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-alerts">
|
||||
<iframe class="w-100 height-600" 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>
|
||||
<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-5">
|
||||
<div class="row">
|
||||
<div class="alert alert-primary text-white font-weight-bold" role="alert">
|
||||
A simple primary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-secondary text-white font-weight-bold" role="alert">
|
||||
A simple secondary alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-success text-white font-weight-bold" role="alert">
|
||||
A simple success alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-danger text-white font-weight-bold" role="alert">
|
||||
A simple danger alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-warning text-white font-weight-bold" role="alert">
|
||||
A simple warning alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-info text-white font-weight-bold" role="alert">
|
||||
A simple info alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-light text-white font-weight-bold" role="alert">
|
||||
A simple light alert—check it out!
|
||||
</div>
|
||||
<div class="alert alert-dark text-white font-weight-bold" role="alert">
|
||||
A simple dark alert—check it out!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-alerts">
|
||||
<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-5"</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">"alert alert-primary text-white font-weight-bold"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple primary alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-secondary text-white font-weight-bold"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple secondary alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-success text-white font-weight-bold"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple success alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-danger text-white font-weight-bold"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple danger alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-warning text-white font-weight-bold"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple warning alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-info text-white font-weight-bold"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple info alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-light text-white font-weight-bold"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple light alert—check it out!
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"alert alert-dark text-white font-weight-bold"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">></span>
|
||||
A simple dark alert—check it out!
|
||||
<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 py-3">
|
||||
<div class="col-lg-4 text-start">
|
||||
<p class="lead text-dark pt-1 mb-0">Alerts with Links</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/alerts/alerts-link.jpg" alt="alerts-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">Alerts with Content</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/alerts/alert-content.jpg" alt="alerts-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">Dismissing Alert</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/alerts/alert-dismiss.jpg" alt="alerts-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>
|
||||
690
sections/attention-catchers/modals.html
Normal file
690
sections/attention-catchers/modals.html
Normal file
@@ -0,0 +1,690 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* 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="modals-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">Attention Catchers</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Modals</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Modals</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">Simple Modal</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-alert-dismiss" 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-alert-dismiss" 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-alert-dismiss">
|
||||
<iframe class="w-100 height-500" 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>
|
||||
<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-7">
|
||||
<div class="row mt-5">
|
||||
<div class="col-sm-3 col-6 mx-auto">
|
||||
<!-- Button trigger modal -->
|
||||
<button type="button" class="btn bg-gradient-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Your modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.
|
||||
<br><br>
|
||||
It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.
|
||||
</div>
|
||||
<div class="modal-footer justify-content-between">
|
||||
<button type="button" class="btn bg-gradient-dark mb-0" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn bg-gradient-primary mb-0">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-alert-dismiss">
|
||||
<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-7"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row mt-5"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-3 col-6 mx-auto"</span><span class="nt">></span>
|
||||
<span class="c"><!-- Button trigger modal --></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"</span> <span class="na">data-bs-toggle=</span><span class="s">"modal"</span> <span class="na">data-bs-target=</span><span class="s">"#exampleModal"</span><span class="nt">></span>
|
||||
Launch demo modal
|
||||
<span class="nt"></button></span>
|
||||
|
||||
<span class="c"><!-- Modal --></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal fade"</span> <span class="na">id=</span><span class="s">"exampleModal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-labelledby=</span><span class="s">"exampleModalLabel"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span>
|
||||
<span class="nt"><h5</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"exampleModalLabel"</span><span class="nt">></span>Your modal title<span class="nt"></h5></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-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span>
|
||||
Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.
|
||||
<span class="nt"><br><br></span>
|
||||
It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-footer justify-content-between"</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-dark mb-0"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">></span>Close<span class="nt"></button></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 mb-0"</span><span class="nt">></span>Save changes<span class="nt"></button></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"></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 py-3">
|
||||
<div class="col-lg-4 text-start">
|
||||
<p class="lead text-dark pt-1 mb-0">Notification Modal</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/modals/modal-notification.jpg" alt="modal-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">Modal Form</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/modals/modal-form.jpg" alt="modal-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">Modal Long Content</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/modals/modal-long.jpg" alt="modal-4">
|
||||
</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">Modal Signup</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/modals/modal-signup.jpg" alt="modal-5">
|
||||
</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>
|
||||
696
sections/attention-catchers/tooltips-popovers.html
Normal file
696
sections/attention-catchers/tooltips-popovers.html
Normal file
@@ -0,0 +1,696 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* 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="tooltip-popover-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-50">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="https://demos.creative-tim.com/material-kit-pro/index">Attention Catchers</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Tooltips & Popovers</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Tooltips & Popovers</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">Popovers</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-popover" 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-popover" 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-popover">
|
||||
<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>
|
||||
<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">
|
||||
<div class="row py-7 text-center">
|
||||
<div>
|
||||
<button type="button" class="btn bg-gradient-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="That’s the main thing people are controlled by! Thoughts- their perception of themselves!">
|
||||
Popover on top
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn bg-gradient-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="We’re not always in the position that we want to be at.">
|
||||
Popover on right
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn bg-gradient-primary" data-bs-container="body" title="Popover with title" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="A lot of people don’t appreciate the moment until it’s passed.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn bg-gradient-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it.">
|
||||
Popover on left
|
||||
</button>
|
||||
</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 popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
})</script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-popover">
|
||||
<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"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row py-7 text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div></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"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"top"</span> <span class="na">data-bs-content=</span><span class="s">"That’s the main thing people are controlled by! Thoughts- their perception of themselves!"</span><span class="nt">></span>
|
||||
Popover on top
|
||||
<span class="nt"></button></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"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"right"</span> <span class="na">data-bs-content=</span><span class="s">"We’re not always in the position that we want to be at."</span><span class="nt">></span>
|
||||
Popover on right
|
||||
<span class="nt"></button></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"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">title=</span><span class="s">"Popover with title"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"bottom"</span> <span class="na">data-bs-content=</span><span class="s">"A lot of people don’t appreciate the moment until it’s passed."</span><span class="nt">></span>
|
||||
Popover on bottom
|
||||
<span class="nt"></button></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"</span> <span class="na">data-bs-container=</span><span class="s">"body"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"left"</span> <span class="na">data-bs-content=</span><span class="s">"It really matters and then like it really doesn’t matter. What matters is the people who are sparked by it."</span><span class="nt">></span>
|
||||
Popover on left
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="c"><!-- initialization script --></span>
|
||||
<span class="nt"><script></span>
|
||||
<span class="kd">var</span> <span class="nx">popoverTriggerList</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="popover"]</span><span class="dl">'</span><span class="p">))</span>
|
||||
<span class="kd">var</span> <span class="nx">popoverList</span> <span class="o">=</span> <span class="nx">popoverTriggerList</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">popoverTriggerEl</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">Popover</span><span class="p">(</span><span class="nx">popoverTriggerEl</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">Tooltips</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-tooltip" 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-tooltip" 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-tooltip">
|
||||
<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>
|
||||
<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">
|
||||
<div class="row py-8 text-center">
|
||||
<div>
|
||||
<button type="button" class="btn bg-gradient-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn bg-gradient-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn bg-gradient-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn bg-gradient-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
</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-tooltip">
|
||||
<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"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row py-8 text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><div></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"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Tooltip on top"</span><span class="nt">></span>
|
||||
Tooltip on top
|
||||
<span class="nt"></button></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"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"right"</span> <span class="na">title=</span><span class="s">"Tooltip on right"</span><span class="nt">></span>
|
||||
Tooltip on right
|
||||
<span class="nt"></button></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"</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">"Tooltip on bottom"</span><span class="nt">></span>
|
||||
Tooltip on bottom
|
||||
<span class="nt"></button></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"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"left"</span> <span class="na">title=</span><span class="s">"Tooltip on left"</span><span class="nt">></span>
|
||||
Tooltip on left
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
|
||||
<span class="c"><!-- initialization script --></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>
|
||||
</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>
|
||||
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
689
sections/input-areas/forms.html
Normal file
689
sections/input-areas/forms.html
Normal file
@@ -0,0 +1,689 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* 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="forms-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">Input Areas</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Forms</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Forms</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">Form 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-forms-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-forms-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-forms-simple">
|
||||
<iframe class="w-100 height-600" 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>
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-7 mx-auto d-flex justify-content-center flex-column">
|
||||
<h3 class="text-center">Contact us</h3>
|
||||
<form role="form" id="contact-form" method="post" autocomplete="off">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group input-group-dynamic mb-4">
|
||||
<label class="form-label">First Name</label>
|
||||
<input class="form-control" aria-label="First Name..." type="text" >
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 ps-2">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" placeholder="" aria-label="Last Name..." >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Email Address</label>
|
||||
<input type="email" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-4 input-group-static">
|
||||
<label>Your message</label>
|
||||
<textarea name="message" class="form-control" id="message" rows="4"></textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="form-check form-switch mb-4 d-flex align-items-center">
|
||||
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault" checked="">
|
||||
<label class="form-check-label ms-3 mb-0" for="flexSwitchCheckDefault">I agree to the <a href="javascript:;" class="text-dark"><u>Terms and Conditions</u></a>.</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<button type="submit" class="btn bg-gradient-dark w-100">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
<script src="https://demos.creative-tim.com/material-kit/assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-forms-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="nt"><div</span> <span class="na">class=</span><span class="s">"container py-4"</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-7 mx-auto d-flex justify-content-center flex-column"</span><span class="nt">></span>
|
||||
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"text-center"</span><span class="nt">></span>Contact us<span class="nt"></h3></span>
|
||||
<span class="nt"><form</span> <span class="na">role=</span><span class="s">"form"</span> <span class="na">id=</span><span class="s">"contact-form"</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</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-md-6"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-dynamic mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>First Name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">aria-label=</span><span class="s">"First Name..."</span> <span class="na">type=</span><span class="s">"text"</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">"col-md-6 ps-2"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-dynamic"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Last Name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">""</span> <span class="na">aria-label=</span><span class="s">"Last Name..."</span> <span class="nt">></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-dynamic"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Email Address<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</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">"input-group mb-4 input-group-static"</span><span class="nt">></span>
|
||||
<span class="nt"><label></span>Your message<span class="nt"></label></span>
|
||||
<span class="nt"><textarea</span> <span class="na">name=</span><span class="s">"message"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"message"</span> <span class="na">rows=</span><span class="s">"4"</span><span class="nt">></textarea></span>
|
||||
<span class="nt"></div></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-md-12"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-switch mb-4 d-flex align-items-center"</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="na">checked=</span><span class="s">""</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>I agree to the <span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"text-dark"</span><span class="nt">><u></span>Terms and Conditions<span class="nt"></u></a></span>.<span class="nt"></label></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-md-12"</span><span class="nt">></span>
|
||||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn bg-gradient-dark w-100"</span><span class="nt">></span>Send Message<span class="nt"></button></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></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">Form placeholder</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/forms/form-placeholder.jpg" alt="form-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">Form context</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/forms/form-context.jpg" alt="form-3">
|
||||
</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>
|
||||
983
sections/input-areas/inputs.html
Normal file
983
sections/input-areas/inputs.html
Normal file
@@ -0,0 +1,983 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* 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="inputs-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">Input Areas</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Inputs</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Inputs</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">Input dynamic</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-input-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-input-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-input-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">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Regular</label>
|
||||
<input type="text" class="form-control" >
|
||||
</div>
|
||||
</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>
|
||||
<script src="https://demos.creative-tim.com/material-kit/assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-input-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"</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-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-dynamic"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Regular<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="nt">></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 justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Input static</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-input-icon-label" 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-input-icon-label" 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-input-icon-label">
|
||||
<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">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<div class="input-group input-group-static mb-4">
|
||||
<label>First Name</label>
|
||||
<input class="form-control" placeholder="eg. Thomas Shelby" type="text" >
|
||||
</div>
|
||||
</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>
|
||||
<script src="https://demos.creative-tim.com/material-kit/assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-input-icon-label">
|
||||
<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"</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-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-static mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><label></span>First Name<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"eg. Thomas Shelby"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="nt">></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 justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Input outline</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-input-outline" 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-input-outline" 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-input-outline">
|
||||
<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">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<div class="input-group input-group-outline mb-4">
|
||||
<label class="form-label">Outline</label>
|
||||
<input class="form-control" type="text" >
|
||||
</div>
|
||||
</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>
|
||||
<script src="https://demos.creative-tim.com/material-kit/assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-input-outline">
|
||||
<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"</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-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-outline mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">></span>Outline<span class="nt"></label></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="nt">></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 justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Input with icon</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-input-icon" 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-input-icon" 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-input-icon">
|
||||
<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">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<div class="input-group input-group-dynamic mb-4">
|
||||
<span class="input-group-text"><i class="fas fa-search" aria-hidden="true"></i></span>
|
||||
<input class="form-control" placeholder="Search" type="text" >
|
||||
</div>
|
||||
</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>
|
||||
<script src="https://demos.creative-tim.com/material-kit/assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-input-icon">
|
||||
<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"</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-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group input-group-dynamic mb-4"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-search"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></i></span></span>
|
||||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="nt">></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 justify-space-between py-2">
|
||||
<div class="col-lg-3 me-auto">
|
||||
<p class="lead text-dark pt-1 mb-0">Input success</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-input-success" 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-input-success" 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-input-success">
|
||||
<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">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<input type="text" placeholder="Success" class="form-control is-valid" >
|
||||
</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>
|
||||
<script src="https://demos.creative-tim.com/material-kit/assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-input-success">
|
||||
<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"</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-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Success"</span> <span class="na">class=</span><span class="s">"form-control is-valid"</span> <span class="nt">></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">Input error</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-input-error" 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-input-error" 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-input-error">
|
||||
<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">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<input type="text" placeholder="Error" class="form-control is-invalid" >
|
||||
</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>
|
||||
<script src="https://demos.creative-tim.com/material-kit/assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-input-error">
|
||||
<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"</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-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Error"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="nt">></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">Input disabled</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-input-disabled" 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-input-disabled" 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-input-disabled">
|
||||
<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">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<input type="text" placeholder="Disabled" class="form-control" disabled>
|
||||
</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>
|
||||
<script src="https://demos.creative-tim.com/material-kit/assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-input-disabled">
|
||||
<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"</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-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Disabled"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">disabled</span><span class="nt">></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>
|
||||
653
sections/navigation/nav-tabs.html
Normal file
653
sections/navigation/nav-tabs.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="nav-tabs-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">Navigation</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Nav Tabs</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Nav Tabs</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">Tabs 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-tabs-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-tabs-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-tabs-simple">
|
||||
<iframe width="100%" height="300px" 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" />
|
||||
<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">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#profile-tabs-simple" role="tab" aria-controls="profile" aria-selected="true">
|
||||
My Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#dashboard-tabs-simple" role="tab" aria-controls="dashboard" aria-selected="false">
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
<script src="https://demos.creative-tim.com/material-kit/assets/js/material-kit.min.js?v=3.0.4" type="text/javascript"></script>
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-tabs-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"</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"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav-wrapper position-relative end-0"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-fill p-1"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link mb-0 px-0 py-1 active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#profile-tabs-simple"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>
|
||||
My Profile
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link mb-0 px-0 py-1"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#dashboard-tabs-simple"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"dashboard"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>
|
||||
Dashboard
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></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"></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">Tabs with icons</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/nav-tabs/tabs-icons.jpg" alt="tab-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">Tabs vertical</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/nav-tabs/tabs-vertical.jpg" alt="tab-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">Tabs with content</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/nav-tabs/tabs-context.jpg" alt="tab-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>
|
||||
722
sections/navigation/navbars.html
Normal file
722
sections/navigation/navbars.html
Normal file
@@ -0,0 +1,722 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* 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="navbars-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">Navigation</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Navbars</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Navbars</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">Navbar dark</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-navbar-dark" 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-navbar-dark" 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-navbar-dark">
|
||||
<iframe width="100%" height="300px" 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" />
|
||||
<!-- Navbar Dark -->
|
||||
|
||||
<nav
|
||||
class="navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3">
|
||||
<div class="container">
|
||||
<a class="navbar-brand text-white" 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>
|
||||
<a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 ms-auto d-lg-none d-block">Buy Now</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" id="navigation">
|
||||
<ul class="navbar-nav navbar-nav-hover mx-auto">
|
||||
<li class="nav-item mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
|
||||
Pages
|
||||
<img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
|
||||
Account
|
||||
<img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1">
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mx-2">
|
||||
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button">
|
||||
Blocks
|
||||
<img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1">
|
||||
</a>
|
||||
</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" role="button">
|
||||
Docs
|
||||
<img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav d-lg-block d-none">
|
||||
<li class="nav-item">
|
||||
<a href="https://www.creative-tim.com/product/material-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary mb-0 me-1" role="button">Buy Now</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- End Navbar -->
|
||||
|
||||
|
||||
<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-navbar-dark">
|
||||
<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"><!-- Navbar Dark --></span>
|
||||
|
||||
<span class="nt"><nav</span>
|
||||
<span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-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"><a</span> <span class="na">class=</span><span class="s">"navbar-brand text-white"</span> <span class="na">href=</span><span class="s">"https://demos.creative-tim.com/material-kit/presentation"</span> <span class="na">rel=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Designed and Coded by Creative Tim"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">target=</span><span class="s">"_blank"</span><span class="nt">></span>
|
||||
Material Kit 2
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.creative-tim.com/product/material-design-system-pro#pricingCard"</span> <span class="na">class=</span><span class="s">"btn btn-sm bg-gradient-primary btn-round mb-0 ms-auto d-lg-none d-block"</span><span class="nt">></span>Buy Now<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler shadow-none ms-2"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-bs-toggle=</span><span class="s">"collapse"</span> <span class="na">data-bs-target=</span><span class="s">"#navigation"</span> <span class="na">aria-controls=</span><span class="s">"navigation"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon mt-2"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar bar1"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar bar2"</span><span class="nt">></span></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar bar3"</span><span class="nt">></span></span>
|
||||
<span class="nt"></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0"</span> <span class="na">id=</span><span class="s">"navigation"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav navbar-nav-hover mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item mx-2"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Pages
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"../../assets/img/down-arrow-white.svg"</span> <span class="na">alt=</span><span class="s">"down-arrow"</span> <span class="na">class=</span><span class="s">"arrow ms-1"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item mx-2"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Account
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"../../assets/img/down-arrow-white.svg"</span> <span class="na">alt=</span><span class="s">"down-arrow"</span> <span class="na">class=</span><span class="s">"arrow ms-1"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item mx-2"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Blocks
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"../../assets/img/down-arrow-white.svg"</span> <span class="na">alt=</span><span class="s">"down-arrow"</span> <span class="na">class=</span><span class="s">"arrow ms-1"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item dropdown dropdown-hover mx-2"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>
|
||||
Docs
|
||||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"../../assets/img/down-arrow-white.svg"</span> <span class="na">alt=</span><span class="s">"down-arrow"</span> <span class="na">class=</span><span class="s">"arrow ms-1"</span><span class="nt">></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav d-lg-block d-none"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://www.creative-tim.com/product/material-design-system-pro#pricingCard"</span> <span class="na">class=</span><span class="s">"btn btn-sm bg-gradient-primary mb-0 me-1"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Buy Now<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span>
|
||||
<span class="c"><!-- End Navbar --></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">Navbar light</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/navbars/navbar-light.jpg" alt="navbar-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">Navbar transparent</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/navbars/navbar-transparent.jpg" alt="navbar-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">Navbar blur</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/navbars/navbar-blur.jpg" alt="navbar-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>
|
||||
661
sections/navigation/pagination.html
Normal file
661
sections/navigation/pagination.html
Normal file
@@ -0,0 +1,661 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* 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="pagination-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">Navigation</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Pagination</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Pagination</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">Pagination 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-pagination-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-pagination-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-pagination-simple">
|
||||
<iframe width="100%" height="300px" 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">
|
||||
<div class="container">
|
||||
<div class="row justify-space-between py-2">
|
||||
<div class="col-lg-4 mx-auto">
|
||||
<ul class="pagination pagination-primary m-4">
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;" aria-label="Previous">
|
||||
<span aria-hidden="true"><i class="material-icons" aria-hidden="true">chevron_left</i></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item active">
|
||||
<a class="page-link" href="javascript:;">1</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">2</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">3</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">4</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;">5</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="javascript:;" aria-label="Next">
|
||||
<span aria-hidden="true"><i class="material-icons" aria-hidden="true">chevron_right</i></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-pagination-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"</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-4 mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"pagination pagination-primary m-4"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">aria-label=</span><span class="s">"Previous"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"material-icons"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>chevron_left<span class="nt"></i></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item active"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>1<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>2<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>3<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>4<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>5<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"page-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"page-link"</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">aria-label=</span><span class="s">"Next"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"material-icons"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span>chevron_right<span class="nt"></i></span></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></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"></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">Pagination Sizing</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/pagination/pagination-sizing.jpg" alt="pagination-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">Pagination Variants</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/pagination/pagination-variants.jpg" alt="pagination-3">
|
||||
</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>
|
||||
893
sections/page-sections/features.html
Normal file
893
sections/page-sections/features.html
Normal file
@@ -0,0 +1,893 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* 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="features-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">Page Sections</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Features</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Features</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">Features 1</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-features-1" 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-features-1" 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-features-1">
|
||||
<iframe class="w-100 height-600" 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 Features w/ icons and text on left & gradient title and text on right -------- -->
|
||||
<section class="py-9">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 my-auto">
|
||||
<h3>Read More About Us</h3>
|
||||
<p class="pe-5">Pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.</p>
|
||||
<a href="javascript:;" class="text-primary icon-move-right">More about us
|
||||
<i class="fas fa-arrow-right text-sm ms-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-lg-0 mt-5 ps-lg-0 ps-0">
|
||||
<div class="p-3 info-horizontal">
|
||||
<div class="icon icon-shape bg-gradient-primary shadow-primary text-center">
|
||||
<i class="fas fa-ship opacity-10"></i>
|
||||
</div>
|
||||
<div class="description ps-3">
|
||||
<p class="mb-0">It becomes harder for us to give others a hand. <br> We get our heart broken by people we love.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-3 info-horizontal">
|
||||
<div class="icon icon-shape bg-gradient-primary shadow-primary text-center">
|
||||
<i class="fas fa-handshake opacity-10"></i>
|
||||
</div>
|
||||
<div class="description ps-3">
|
||||
<p class="mb-0">As we live, our hearts turn colder. <br>Cause pain is what we go through as we become older.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 info-horizontal">
|
||||
<div class="icon icon-shape bg-gradient-primary shadow-primary text-center">
|
||||
<i class="fas fa-hourglass opacity-10"></i>
|
||||
</div>
|
||||
<div class="description ps-3">
|
||||
<p class="mb-0">When we lose family over time. <br> What else could rust the heart more over time? Blackgold.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- -------- END Features w/ icons and text on left & gradient title and text on right -------- -->
|
||||
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-features-1">
|
||||
<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 Features w/ icons and text on left & gradient title and text on right -------- --></span>
|
||||
<span class="nt"><section</span> <span class="na">class=</span><span class="s">"py-9"</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"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-6 my-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><h3></span>Read More About Us<span class="nt"></h3></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"pe-5"</span><span class="nt">></span>Pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand.<span class="nt"></p></span>
|
||||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:;"</span> <span class="na">class=</span><span class="s">"text-primary icon-move-right"</span><span class="nt">></span>More about us
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-arrow-right text-sm ms-1"</span><span class="nt">></i></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-6 mt-lg-0 mt-5 ps-lg-0 ps-0"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 info-horizontal"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"icon icon-shape bg-gradient-primary shadow-primary text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-ship opacity-10"</span><span class="nt">></i></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"description ps-3"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>It becomes harder for us to give others a hand. <span class="nt"><br></span> We get our heart broken by people we love.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 info-horizontal"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"icon icon-shape bg-gradient-primary shadow-primary text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-handshake opacity-10"</span><span class="nt">></i></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"description ps-3"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>As we live, our hearts turn colder. <span class="nt"><br></span>Cause pain is what we go through as we become older.<span class="nt"></p></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"p-3 info-horizontal"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"icon icon-shape bg-gradient-primary shadow-primary text-center"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-hourglass opacity-10"</span><span class="nt">></i></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"description ps-3"</span><span class="nt">></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">></span>When we lose family over time. <span class="nt"><br></span> What else could rust the heart more over time? Blackgold.<span class="nt"></p></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>
|
||||
<span class="c"><!-- -------- END Features w/ icons and text on left & gradient title and text on right -------- --></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">Feature 2</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/features/features-2.jpg" alt="features-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">Feature 3</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/features/features-3.jpg" alt="features-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">Feature 4</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/features/features-4.jpg" alt="features-4">
|
||||
</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">Feature 5</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/features/features-5.jpg" alt="features-5">
|
||||
</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">Feature 6</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/features/features-6.jpg" alt="features-6">
|
||||
</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">Feature 7</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/features/features-7.jpg" alt="features-7">
|
||||
</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">Feature 8</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/features/features-8.jpg" alt="features-8">
|
||||
</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">Feature 9</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/features/features-9.jpg" alt="features-9">
|
||||
</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">Feature 10</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/features/features-10.jpg" alt="features-10">
|
||||
</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">Feature 11</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/features/features-11.jpg" alt="features-11">
|
||||
</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">Feature 12</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/features/features-12.jpg" alt="features-12">
|
||||
</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">Feature 13</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/features/features-13.jpg" alt="features-13">
|
||||
</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">Feature 14</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/features/features-14.jpg" alt="features-14">
|
||||
</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>
|
||||
871
sections/page-sections/hero-sections.html
Normal file
871
sections/page-sections/hero-sections.html
Normal file
@@ -0,0 +1,871 @@
|
||||
<!--
|
||||
=========================================================
|
||||
* 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="page-headers-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">Page Sections</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Page Headers</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h3>Page Headers</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">Header 1</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-header-1" 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-header-1" 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-header-1">
|
||||
<iframe class="w-100 height-600" 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 HEADER 1 w/ text and image on right ------- -->
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark navbar-absolute bg-transparent shadow-none">
|
||||
<div class="container">
|
||||
<a class="navbar-brand text-white" href="javascript:;">Material Design</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header-2" aria-controls="navbar-header-2" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbar-header-2">
|
||||
<ul class="navbar-nav mx-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="javascript:;">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="javascript:;">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="javascript:;">
|
||||
Contact Us
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="https://twitter.com/CreativeTim">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white mx-2" href="https://www.facebook.com/CreativeTim">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="https://www.instagram.com/CreativeTimOfficial">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="page-header min-vh-100" style="background-image: url('https://images.unsplash.com/photo-1520769945061-0a448c463865?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');" loading="lazy">
|
||||
<span class="mask bg-gradient-dark opacity-5"></span>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-7 d-flex justify-content-center flex-column">
|
||||
<h1 class="text-white mb-4">Material Kit</h1>
|
||||
<p class="text-white opacity-8 lead pe-5 me-5">The time is now for it be okay to be great. People in this world shun people for being nice. </p>
|
||||
<div class="buttons">
|
||||
<button type="button" class="btn btn-white mt-4">Get Started</button>
|
||||
<button type="button" class="btn text-white shadow-none mt-4">Read more</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- -------- END HEADER 1 w/ text and image on right ------- -->
|
||||
|
||||
'></iframe>
|
||||
</div>
|
||||
<div class="tab-pane" id="code-header-1">
|
||||
<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 HEADER 1 w/ text and image on right ------- --></span>
|
||||
<span class="nt"><header></span>
|
||||
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg navbar-dark navbar-absolute bg-transparent shadow-none"</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"><a</span> <span class="na">class=</span><span class="s">"navbar-brand text-white"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>Material Design<span class="nt"></a></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#navbar-header-2"</span> <span class="na">aria-controls=</span><span class="s">"navbar-header-2"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">></span></span>
|
||||
<span class="nt"></button></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbar-header-2"</span><span class="nt">></span>
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav mx-auto"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>
|
||||
Home
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>
|
||||
About Us
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"javascript:;"</span><span class="nt">></span>
|
||||
Contact Us
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
|
||||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav navbar-nav"</span><span class="nt">></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"https://twitter.com/CreativeTim"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fab fa-twitter"</span><span class="nt">></i></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link text-white mx-2"</span> <span class="na">href=</span><span class="s">"https://www.facebook.com/CreativeTim"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fab fa-facebook"</span><span class="nt">></i></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link text-white"</span> <span class="na">href=</span><span class="s">"https://www.instagram.com/CreativeTimOfficial"</span><span class="nt">></span>
|
||||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fab fa-instagram"</span><span class="nt">></i></span>
|
||||
<span class="nt"></a></span>
|
||||
<span class="nt"></li></span>
|
||||
<span class="nt"></ul></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></nav></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"page-header min-vh-100"</span> <span class="na">style=</span><span class="s">"background-image: url(&#39;https://images.unsplash.com/photo-1520769945061-0a448c463865?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80&#39;);"</span> <span class="na">loading=</span><span class="s">"lazy"</span><span class="nt">></span>
|
||||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"mask bg-gradient-dark opacity-5"</span><span class="nt">></span></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"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-lg-6 col-md-7 d-flex justify-content-center flex-column"</span><span class="nt">></span>
|
||||
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"text-white mb-4"</span><span class="nt">></span>Material Kit<span class="nt"></h1></span>
|
||||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"text-white opacity-8 lead pe-5 me-5"</span><span class="nt">></span>The time is now for it be okay to be great. People in this world shun people for being nice. <span class="nt"></p></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"buttons"</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 btn-white mt-4"</span><span class="nt">></span>Get Started<span class="nt"></button></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 text-white shadow-none mt-4"</span><span class="nt">></span>Read more<span class="nt"></button></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"></header></span>
|
||||
<span class="c"><!-- -------- END HEADER 1 w/ text and image on right ------- --></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">Header 2</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/hero/header-2.jpg" alt="header-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">Header 3</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/hero/header-3.jpg" alt="header-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">Header 4</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/hero/header-4.jpg" alt="header-4">
|
||||
</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">Header 5</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/hero/header-5.jpg" alt="header-5">
|
||||
</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">Header 6</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/hero/header-6.jpg" alt="header-6">
|
||||
</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">Header 7</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/hero/header-7.jpg" alt="header-7">
|
||||
</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">Header 8</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/hero/header-8.jpg" alt="header-8">
|
||||
</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">Header 9</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/hero/header-9.jpg" alt="header-9">
|
||||
</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">Header 10</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/hero/header-10.jpg" alt="header-10">
|
||||
</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>
|
||||
<!-- Plugin for TypedJS, full documentation here: https://github.com/inorganik/CountUp.js -->
|
||||
<script src="../../assets/js/plugins/countup.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>
|
||||
<script>
|
||||
if (document.getElementById('typed')) {
|
||||
var typed = new Typed("#typed", {
|
||||
stringsElement: '#typed-strings',
|
||||
typeSpeed: 70,
|
||||
backSpeed: 50,
|
||||
backDelay: 200,
|
||||
startDelay: 500,
|
||||
loop: true
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user