893 lines
52 KiB
HTML
893 lines
52 KiB
HTML
<!--
|
|
=========================================================
|
|
* 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> |