Add a pagination partial
This commit is contained in:
kbe
444
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/accordion.html
vendored
Normal file
444
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/accordion.html
vendored
Normal file
@@ -0,0 +1,444 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Accordion</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Accordion</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="mb-4 text-center">
|
||||
<h3 class="fw-normal">Multiple Open</h3>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="accordion">
|
||||
<li class="active">
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">First Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Second Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Third Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-4 text-center">
|
||||
<h3 class="fw-normal">Single Open</h3>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="accordion single-open">
|
||||
<li class="active">
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">First Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Second Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Third Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-4 text-center">
|
||||
<h3 class="fw-normal">Style 2</h3>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="accordion single-open style-2">
|
||||
<li class="active">
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">First Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Second Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Third Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-4 text-center">
|
||||
<h3 class="fw-normal">Style 3</h3>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="accordion single-open style-3">
|
||||
<li class="active">
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">First Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Second Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Third Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-4 text-center">
|
||||
<h3 class="fw-normal">Border Radius</h3>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="accordion single-open border-radius">
|
||||
<li class="active">
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">First Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Second Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Third Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-4 text-center">
|
||||
<h3 class="fw-normal">Rounded Corners</h3>
|
||||
</div>
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="accordion single-open rounded">
|
||||
<li class="active">
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">First Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Second Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="accordion-title">
|
||||
<h6 class="font-small fw-medium uppercase">Third Title</h6>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
383
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/background-colors.html
vendored
Normal file
383
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/background-colors.html
vendored
Normal file
@@ -0,0 +1,383 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Background Colors</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Background Colors</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<!-- Background Colors section -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4 g-lg-5">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<div class="row g-4 g-lg-5 fw-semi-bold">
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
|
||||
<h4>Basic Backgrounds</h4>
|
||||
<div class="bg-gray p-3">
|
||||
<p class="font-large">.bg-gray</p>
|
||||
</div>
|
||||
<div class="bg-gray-lighter p-3 mt-3">
|
||||
<p class="font-large">.bg-gray-lighter</p>
|
||||
</div>
|
||||
<div class="bg-gray-lightest p-3 mt-3">
|
||||
<p class="font-large">.bg-gray-lightest</p>
|
||||
</div>
|
||||
<div class="bg-black p-3 mt-3">
|
||||
<p class="font-large">.bg-black</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-dark p-3 mt-3">
|
||||
<p class="font-large">.bg-dark</p>
|
||||
</div>
|
||||
<div class="bg-dark-lighter p-3 mt-3">
|
||||
<p class="font-large">.bg-dark-lighter</p>
|
||||
</div>
|
||||
<div class="bg-dark-lightest p-3 mt-3">
|
||||
<p class="font-large">.bg-dark-lightest</p>
|
||||
</div>
|
||||
<div class="bg-dark-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-dark-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
|
||||
<h4>Gradient Backgrounds</h4>
|
||||
<div class="bg-gradient-1 p-3 p-lg-4">
|
||||
<p class="font-large">.bg-gradient-1</p>
|
||||
</div>
|
||||
<div class="bg-gradient-2 p-3 p-lg-4 mt-3">
|
||||
<p class="font-large">.bg-gradient-2</p>
|
||||
</div>
|
||||
<div class="bg-gradient-3 p-3 p-lg-4 mt-3">
|
||||
<p class="font-large">.bg-gradient-3</p>
|
||||
</div>
|
||||
<div class="bg-gradient-4 p-3 p-lg-4 mt-3">
|
||||
<p class="font-large">.bg-gradient-4</p>
|
||||
</div>
|
||||
<div class="bg-gradient-5 p-3 p-lg-4 mt-3">
|
||||
<p class="font-large">.bg-gradient-5</p>
|
||||
</div>
|
||||
<div class="bg-gradient-6 p-3 p-lg-4 mt-3">
|
||||
<p class="font-large">.bg-gradient-6</p>
|
||||
</div>
|
||||
<div class="bg-gradient-7 p-3 p-lg-4 mt-3">
|
||||
<p class="font-large">.bg-gradient-7</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
|
||||
<h4>Colorful Backgrounds</h4>
|
||||
<div class="bg-color-aqua p-3">
|
||||
<p class="font-large">.bg-color-aqua</p>
|
||||
</div>
|
||||
<div class="bg-color-aqua-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-color-aqua-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-color-blue p-3 mt-3">
|
||||
<p class="font-large">.bg-color-blue</p>
|
||||
</div>
|
||||
<div class="bg-color-blue-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-color-blue-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-color-golden-yellow p-3 mt-3">
|
||||
<p class="font-large">.bg-color-golden-yellow</p>
|
||||
</div>
|
||||
<div class="bg-color-golden-yellow-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-color-golden-yellow-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-color-pink-edge p-3 mt-3">
|
||||
<p class="font-large">.bg-color-pink-edge</p>
|
||||
</div>
|
||||
<div class="bg-color-pink-edge-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-color-pink-edge-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-color-purple p-3 mt-3">
|
||||
<p class="font-large">.bg-color-purple</p>
|
||||
</div>
|
||||
<div class="bg-color-purple-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-color-purple-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-color-spring-red p-3 mt-3">
|
||||
<p class="font-large">.bg-color-spring-red</p>
|
||||
</div>
|
||||
<div class="bg-color-spring-red-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-color-spring-red-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-color-tan p-3 mt-3">
|
||||
<p class="font-large">.bg-color-tan</p>
|
||||
</div>
|
||||
<div class="bg-color-tan-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-color-tan-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-color-turquoise p-3 mt-3">
|
||||
<p class="font-large">.bg-color-turquoise</p>
|
||||
</div>
|
||||
<div class="bg-color-turquoise-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-color-turquoise-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-color-very-peri p-3 mt-3">
|
||||
<p class="font-large">.bg-color-very-peri</p>
|
||||
</div>
|
||||
<div class="bg-color-very-peri-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-color-very-peri-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<h4>Colorful Light Backgrounds</h4>
|
||||
<div class="bg-light-aqua p-3">
|
||||
<p class="font-large">.bg-light-aqua</p>
|
||||
</div>
|
||||
<div class="bg-light-blue p-3 mt-3">
|
||||
<p class="font-large">.bg-light-blue</p>
|
||||
</div>
|
||||
<div class="bg-light-golden-yellow p-3 mt-3">
|
||||
<p class="font-large">.bg-light-golden-yellow</p>
|
||||
</div>
|
||||
<div class="bg-light-pink-edge p-3 mt-3">
|
||||
<p class="font-large">.bg-light-pink-edge</p>
|
||||
</div>
|
||||
<div class="bg-light-purple p-3 mt-3">
|
||||
<p class="font-large">.bg-light-purple</p>
|
||||
</div>
|
||||
<div class="bg-light-spring-red p-3 mt-3">
|
||||
<p class="font-large">.bg-light-spring-red</p>
|
||||
</div>
|
||||
<div class="bg-light-tan p-3 mt-3">
|
||||
<p class="font-large">.bg-light-tan</p>
|
||||
</div>
|
||||
<div class="bg-light-turquoise p-3 mt-3">
|
||||
<p class="font-large">.bg-light-turquoise</p>
|
||||
</div>
|
||||
<div class="bg-light-very-peri p-3 mt-3">
|
||||
<p class="font-large">.bg-light-very-peri</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- end row(inner) -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Background Colors section -->
|
||||
|
||||
<!-- White Backgrounds section -->
|
||||
<div class="section bg-dark-lightest">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
|
||||
<div class="bg-white p-4">
|
||||
<p class="font-large">.bg-white</p>
|
||||
</div>
|
||||
<div class="bg-white-06 p-3 mt-3">
|
||||
<p class="font-large">.bg-white-06 (09/08/07/06/05/04/03/01)</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end White Backgrounds section -->
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
281
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/background-image.html
vendored
Normal file
281
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/background-image.html
vendored
Normal file
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Background Image</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Background Image</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal mb-4 text-center">Background Image</h3>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section bg-image" data-bg-src="../assets/images/background.jpg">
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal mb-4 text-center">Parallax Background Image</h3>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section bg-image parallax" data-bg-src="../assets/images/background.jpg">
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal mb-4 text-center">Fade White Top</h3>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section bg-image bg-fade-white-top" data-bg-src="../assets/images/background.jpg">
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal mb-4 text-center">Fade White Bottom</h3>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section bg-image bg-fade-white-bottom" data-bg-src="../assets/images/background.jpg">
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section bg-black">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal mb-4 text-center">Fade Black Top</h3>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section bg-image bg-fade-black-top" data-bg-src="../assets/images/background.jpg">
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section bg-black pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal mb-4 text-center">Fade Black Bottom</h3>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section bg-image bg-fade-black-bottom" data-bg-src="../assets/images/background.jpg">
|
||||
<div class="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-gray py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
212
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/background-video.html
vendored
Normal file
212
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/background-video.html
vendored
Normal file
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Background Video</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Background Video</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section-lg position-relative bg-dark-04 mb-4">
|
||||
<div class="bg-video">
|
||||
<video playsinline autoplay muted loop>
|
||||
<source src="../assets/video-bg.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="container text-center">
|
||||
<h2>Video BG</h2>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
285
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/box.html
vendored
Normal file
285
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/box.html
vendored
Normal file
@@ -0,0 +1,285 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Box</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Box</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="p-4 border">
|
||||
<p class="font-large">Bordered box</p>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="p-4 box-backdrop">
|
||||
<p class="font-large">Box Backdrop</p>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
|
||||
<!-- Snippets -->
|
||||
<div class="bg-gray p-4 border-radius mt-2">
|
||||
<p class="font-large">Border radius - 0.5em</p>
|
||||
</div>
|
||||
<div class="bg-gray p-4 border-radius-1 mt-2">
|
||||
<p class="font-large">Border radius - 1.0em</p>
|
||||
</div>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
|
||||
<!-- Snippets -->
|
||||
<div class="box-shadow p-4">
|
||||
<p class="font-large">Box shadow</p>
|
||||
</div>
|
||||
<div class="hover-shadow p-4 mt-3">
|
||||
<p class="font-large">Box shadow on hover</p>
|
||||
</div>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
|
||||
<!-- Snippets -->
|
||||
<div class="hover-float bg-gray p-4">
|
||||
<p class="font-large">Float on hover</p>
|
||||
</div>
|
||||
<div class="hover-scale bg-gray p-4 mt-3">
|
||||
<p class="font-large">Scale on hover</p>
|
||||
</div>
|
||||
<div class="hover-shrink bg-gray p-4 mt-3">
|
||||
<p class="font-large">Shrink on hover</p>
|
||||
</div>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
766
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/buttons.html
vendored
Normal file
766
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/buttons.html
vendored
Normal file
@@ -0,0 +1,766 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Buttons</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Buttons</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section pb-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Button Shapes</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-gray button-md me-2 mb-2" href="#">Default</a>
|
||||
<a class="button button-gray button-md button-radius me-2 mb-2" href="#">Radius</a>
|
||||
<a class="button button-gray button-md button-rounded mb-2" href="#">Rounded</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Button Sizes</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-xl button-radius button-gray me-2 mb-2" href="#">X Large</a>
|
||||
<a class="button button-lg button-radius button-gray me-2 mb-2" href="#">Large</a>
|
||||
<a class="button button-md button-radius button-gray me-2 mb-2" href="#">Medium</a>
|
||||
<a class="button button-sm button-radius button-gray me-2 mb-2" href="#">Small</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Button Font Styles</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-radius button-gray me-2 mb-2" href="#">Default</a>
|
||||
<a class="button button-md button-radius button-gray me-2 mb-2 button-font-2" href="#">Font 2</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Button Border Width <span class="fw-light">(1px by default)</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-outline-gray me-3 mb-3" href="#">Border 1px</a>
|
||||
<a class="button button-md button-outline-gray button-border-2 me-3 mb-3" href="#">Border 2px</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section border-top">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Basic Styles</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-gray button-md button-radius me-2 mb-2" href="#">gray</a>
|
||||
<a class="button button-dark button-md button-radius me-2 mb-2" href="#">Dark</a>
|
||||
<a class="button button-outline-gray button-md button-radius me-2 mb-2" href="#">Outline gray</a>
|
||||
<a class="button button-outline-dark button-md button-radius me-2 mb-2" href="#">Outline Dark</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Colorful Styles</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-radius button-aqua me-3 mb-3" href="#">Aqua</a>
|
||||
<a class="button button-md button-radius button-blue me-3 mb-3" href="#">Blue</a>
|
||||
<a class="button button-md button-radius button-golden-yellow me-3 mb-3" href="#">Golden Yellow</a>
|
||||
<a class="button button-md button-radius button-pink-edge me-3 mb-3" href="#">Pink Edge</a>
|
||||
<a class="button button-md button-radius button-purple me-3 mb-3" href="#">Purple</a>
|
||||
<a class="button button-md button-radius button-spring-red me-3 mb-3" href="#">Spring Red</a>
|
||||
<a class="button button-md button-radius button-tan me-3 mb-3" href="#">Tan</a>
|
||||
<a class="button button-md button-radius button-turquoise me-3 mb-3" href="#">turquoise</a>
|
||||
<a class="button button-md button-radius button-very-peri me-3 mb-3" href="#">Very Peri</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Colorful Outline Styles</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-radius button-border-2 button-outline-aqua me-3 mb-3" href="#">Aqua</a>
|
||||
<a class="button button-md button-radius button-border-2 button-outline-blue me-3 mb-3" href="#">Blue</a>
|
||||
<a class="button button-md button-radius button-border-2 button-outline-golden-yellow me-3 mb-3" href="#">Golden Yellow</a>
|
||||
<a class="button button-md button-radius button-border-2 button-outline-pink-edge me-3 mb-3" href="#">Pink Edge</a>
|
||||
<a class="button button-md button-radius button-border-2 button-outline-purple me-3 mb-3" href="#">Purple</a>
|
||||
<a class="button button-md button-radius button-border-2 button-outline-spring-red me-3 mb-3" href="#">Spring Red</a>
|
||||
<a class="button button-md button-radius button-border-2 button-outline-tan me-3 mb-3" href="#">Tan</a>
|
||||
<a class="button button-md button-radius button-border-2 button-outline-turquoise me-3 mb-3" href="#">turquoise</a>
|
||||
<a class="button button-md button-radius button-border-2 button-outline-very-peri me-3 mb-3" href="#">Very Peri</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Backdrop Styles</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-backdrop-dark button-md me-3 mb-3" href="#">Dark</a>
|
||||
<a class="button button-backdrop-color-aqua button-md me-3 mb-3" href="#">Aqua</a>
|
||||
<a class="button button-backdrop-color-blue button-md me-3 mb-3" href="#">Blue</a>
|
||||
<a class="button button-backdrop-color-golden-yellow button-md me-3 mb-3" href="#">Golden Yellow</a>
|
||||
<a class="button button-backdrop-color-pink-edge button-md me-3 mb-3" href="#">Pink Edge</a>
|
||||
<a class="button button-backdrop-color-purple button-md me-3 mb-3" href="#">Purple</a>
|
||||
<a class="button button-backdrop-color-spring-red button-md me-3 mb-3" href="#">Spring Red</a>
|
||||
<a class="button button-backdrop-color-tan button-md me-3 mb-3" href="#">Tan</a>
|
||||
<a class="button button-backdrop-color-turquoise button-md me-3 mb-3" href="#">turquoise</a>
|
||||
<a class="button button-backdrop-color-very-peri button-md me-3 mb-3" href="#">Very Peri</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Gradient Styles</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-radius button-gradient-1 me-3 mb-3" href="#">Gradient 1</a>
|
||||
<a class="button button-md button-radius button-gradient-2 me-3 mb-3" href="#">Gradient 2</a>
|
||||
<a class="button button-md button-radius button-gradient-3 me-3 mb-3" href="#">Gradient 3</a>
|
||||
<a class="button button-md button-radius button-gradient-4 me-3 mb-3" href="#">Gradient 4</a>
|
||||
<a class="button button-md button-radius button-gradient-5 me-3 mb-3" href="#">Gradient 5</a>
|
||||
<a class="button button-md button-radius button-gradient-6 me-3 mb-3" href="#">Gradient 6</a>
|
||||
<a class="button button-md button-radius button-gradient-7 me-3 mb-3" href="#">Gradient 7</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Social Styles</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-radius button-social-facebook me-3 mb-3" href="#">Facebook</a>
|
||||
<a class="button button-md button-radius button-social-twitter me-3 mb-3" href="#">Twitter</a>
|
||||
<a class="button button-md button-radius button-social-instagram me-3 mb-3" href="#">Instagram</a>
|
||||
<a class="button button-md button-radius button-social-linkedin me-3 mb-3" href="#">Linkedin</a>
|
||||
<a class="button button-md button-radius button-social-youtube me-3 mb-3" href="#">Youtube</a>
|
||||
<a class="button button-md button-radius button-social-pinterest me-3 mb-3" href="#">Pinterest</a>
|
||||
<a class="button button-md button-radius button-social-skype me-3 mb-3" href="#">Skype</a>
|
||||
<a class="button button-md button-radius button-social-dribbble me-3 mb-3" href="#">Dribbble</a>
|
||||
<a class="button button-md button-radius button-social-snapchat me-3 mb-3" href="#">Snapchat</a>
|
||||
<a class="button button-md button-radius button-social-whatsapp me-3 mb-3" href="#">Whatsapp</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section bg-dark-lighter">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="fw-normal mb-4">Basic - White</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-radius button-white me-2 mb-2" href="#">White 1</a>
|
||||
<a class="button button-md button-radius button-white-2 me-2 mb-2" href="#">White 2</a>
|
||||
<a class="button button-md button-radius button-outline-white me-2 mb-2" href="#">Outline White 1</a>
|
||||
<a class="button button-md button-radius button-outline-white-2 mb-2" href="#">Outline White 2</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
<h4 class="fw-normal mb-4 mt-5">Backdrop - White</h4>
|
||||
<a class="button button-md button-backdrop-white me-2 mb-2" href="#">Backdrop</a>
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Reveal Icon</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-reveal-left-dark me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Dark Left</span></a>
|
||||
<a class="button button-md button-reveal-right-dark mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Dark Right</span></a>
|
||||
<a class="button button-md button-reveal-left-outline-dark me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Outline Left</span></a>
|
||||
<a class="button button-md button-reveal-right-outline-dark mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Outline Right</span></a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section bg-dark-lighter">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Reveal Icon <span class="fw-normal">- White</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-reveal-left-white me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Left</span></a>
|
||||
<a class="button button-md button-reveal-right-white me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Right</span></a>
|
||||
<a class="button button-md button-reveal-left-outline-white me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Left</span></a>
|
||||
<a class="button button-md button-reveal-right-outline-white mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Right</span></a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Button Hovers</h4>
|
||||
<!-- Snippets -->
|
||||
<a class="button button-md button-radius button-gray button-hover-float me-3 mb-3" href="#">Hover Float</a>
|
||||
<a class="button button-md button-radius button-gray button-hover-scale me-3 mb-3" href="#">Hover Scale</a>
|
||||
<a class="button button-md button-radius button-gray button-hover-shrink me-3 mb-3" href="#">Hover Shrink</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section bg-gray">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Button Shadow</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<a class="button button-lg button-radius button-white button-shadow me-3 mb-3" href="#">Shadow</a>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pb-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Text Buttons</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button-text-1 me-4 mb-3" href="#">Text Button 1</a>
|
||||
<a class="button-text-2 me-4 mb-3" href="#">Text Button 2</a>
|
||||
<a class="button-text-3 mb-3" href="#">Text Button 3</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Circle Button <span class="fw-normal">- Sizes</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button-circle button-circle-xl button-circle-gray me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-lg button-circle-gray me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-gray me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-sm button-circle-gray me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Circle Button <span class="fw-normal">- Basic Styles</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button-circle button-circle-md button-circle-gray me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-dark me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-gray me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-dark me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Circle Button <span class="fw-normal">- Colorful Styles</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button-circle button-circle-md button-circle-aqua me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-blue me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-golden-yellow me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-pink-edge me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-purple me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-spring-red me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-tan me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-turquoise me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-very-peri me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Circle Button <span class="fw-normal">- Colorful Outline Styles</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button-circle button-circle-md button-circle-outline-aqua me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-blue me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-golden-yellow me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-pink-edge me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-purple me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-spring-red me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-tan me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-turquoise me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-very-peri me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section-sm pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Circle Button <span class="fw-normal">- Gradient Styles</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button-circle button-circle-md button-circle-gradient-1 me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-gradient-2 me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-gradient-3 me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-gradient-4 me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-gradient-5 me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-gradient-6 me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-gradient-7 me-2 mb-3" href="#">
|
||||
<i class="bi bi-star-fill"></i>
|
||||
</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Circle Button <span class="fw-normal">- Social Styles</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button-circle button-circle-md button-circle-social-facebook me-2 mb-3" href="#">
|
||||
<i class="bi bi-facebook"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-social-twitter me-2 mb-3" href="#">
|
||||
<i class="bi bi-twitter-x"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-social-instagram me-2 mb-3" href="#">
|
||||
<i class="bi bi-instagram"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-social-linkedin me-2 mb-3" href="#">
|
||||
<i class="bi bi-linkedin"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-social-youtube me-2 mb-3" href="#">
|
||||
<i class="bi bi-youtube"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-social-pinterest me-2 mb-3" href="#">
|
||||
<i class="bi bi-pinterest"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-social-skype me-2 mb-3" href="#">
|
||||
<i class="bi bi-skype"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-social-dribbble me-2 mb-3" href="#">
|
||||
<i class="bi bi-dribbble"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-social-snapchat me-2 mb-3" href="#">
|
||||
<i class="bi bi-snapchat"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-social-whatsapp me-2 mb-3" href="#">
|
||||
<i class="bi bi-whatsapp"></i>
|
||||
</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section bg-dark-lighter">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Circle Button <span class="fw-normal"> - White</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button-circle button-circle-md button-circle-white me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-white-2 me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-white me-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-white-2 mb-3" href="#">
|
||||
<i class="bi bi-heart-fill"></i>
|
||||
</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Circle Button Hover <span class="fw-normal">- Slide</span></h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<a class="button-circle button-circle-md button-circle-gray button-circle-hover-slide me-2 mb-3" href="#">
|
||||
<i class="fas fa-heart"></i>
|
||||
<i class="fas fa-heart"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-dark button-circle-hover-slide me-2 mb-3" href="#">
|
||||
<i class="fas fa-heart"></i>
|
||||
<i class="fas fa-heart"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-gray button-circle-hover-slide me-2 mb-3" href="#">
|
||||
<i class="fas fa-heart"></i>
|
||||
<i class="fas fa-heart"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-gray button-circle-hover-slide me-2 mb-3" href="#">
|
||||
<i class="fas fa-heart"></i>
|
||||
<i class="fas fa-heart"></i>
|
||||
</a>
|
||||
<a class="button-circle button-circle-md button-circle-outline-dark button-circle-hover-slide me-2 mb-3" href="#">
|
||||
<i class="fas fa-heart"></i>
|
||||
<i class="fas fa-heart"></i>
|
||||
</a>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-10 offset-lg-1">
|
||||
<h4 class="mb-4">Circle Button Animation</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<a class="button-circle button-circle-lg button-circle-dark button-circle-ripple mb-3" href="#">
|
||||
<i class="fas fa-heart"></i>
|
||||
</a>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
208
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/countdown.html
vendored
Normal file
208
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/countdown.html
vendored
Normal file
@@ -0,0 +1,208 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Countdown</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Countdown</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<h3 class="fw-medium text-center mb-5">Basic Countdown</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
|
||||
|
||||
<!-- Snippet -->
|
||||
<h3 class="countdown fw-light m-0" data-countdown="2025/12/31"></h3>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
247
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/counter.html
vendored
Normal file
247
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/counter.html
vendored
Normal file
@@ -0,0 +1,247 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Counter</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Counter</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section bg-gray-lighter">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<!-- Facts box 1 -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<h2 class="fw-light counter">200</h2>
|
||||
<h6 class="font-small fw-medium uppercase">Fact One</h6>
|
||||
</div>
|
||||
<!-- Facts box 2 -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<h2 class="fw-light"><span class="counter">100</span>%</h2>
|
||||
<h6 class="font-small fw-medium uppercase">Fact Two</h6>
|
||||
</div>
|
||||
<!-- Facts box 3 -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<h2 class="fw-light"><span class="counter">100</span>+</h2>
|
||||
<h6 class="font-small fw-medium uppercase">Fact Three</h6>
|
||||
</div>
|
||||
<!-- Facts box 4 -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<h2 class="fw-light"><span class="counter">300</span>k</h2>
|
||||
<h6 class="font-small fw-medium uppercase">Fact Four</h6>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
205
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/fancy-text.html
vendored
Normal file
205
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/fancy-text.html
vendored
Normal file
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Fancy Text</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Fancy Text</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section-lg">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
|
||||
<!-- Snippet -->
|
||||
<h1 class="display-3 fw-semi-bold fancy-text">Fancy Text</h1>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
453
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/forms.html
vendored
Normal file
453
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/forms.html
vendored
Normal file
@@ -0,0 +1,453 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Forms</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Forms</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Basic Form</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<form>
|
||||
<label>Name</label>
|
||||
<input type="text" placeholder="Your name">
|
||||
<label class="required">Email address</label>
|
||||
<input type="email" placeholder="Enter your email" required>
|
||||
<label class="required">Message</label>
|
||||
<textarea name="message" placeholder="Message" required></textarea>
|
||||
<button type="submit" class="button button-md button-dark">Submit</button>
|
||||
</form>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Form Style 2</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<form class="form-style-2">
|
||||
<input type="text" id="name" placeholder="Name">
|
||||
<input type="email" id="email" placeholder="Enter your email" required>
|
||||
<textarea name="message" id="message" placeholder="Message" required></textarea>
|
||||
</form>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Form Style 3</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<form class="form-style-3">
|
||||
<input type="text" id="name" placeholder="Your name">
|
||||
<input type="email" id="email" placeholder="Enter your email" required>
|
||||
<textarea name="message" id="message" placeholder="Message" required></textarea>
|
||||
</form>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Form Style 4</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<form class="form-style-4">
|
||||
<input type="text" id="name" placeholder="Your name">
|
||||
<input type="email" id="email" placeholder="Enter your email" required>
|
||||
<textarea name="message" id="message" placeholder="Message" required></textarea>
|
||||
</form>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Form Style 5</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<form class="form-style-5">
|
||||
<input type="text" id="name" placeholder="Your name">
|
||||
<input type="email" id="email" placeholder="Enter your email" required>
|
||||
<textarea name="message" id="message" placeholder="Message" required></textarea>
|
||||
</form>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-5 text-center">
|
||||
<h3 class="fw-normal m-0">Form - Row</h3>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<form>
|
||||
<div class="row g-4">
|
||||
<div class="col">
|
||||
<input type="text" placeholder="First name">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" placeholder="Last name">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-5 text-center">
|
||||
<h3 class="fw-normal m-0">Form - Sizing</h3>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippets -->
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
|
||||
<input class="form-control" type="text" placeholder="Default input">
|
||||
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Select Menu</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<select class="custom-select custom-select-lg w-100">
|
||||
<option selected>Select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<!-- end Snippet -->
|
||||
|
||||
<!-- Snippet -->
|
||||
<select class="custom-select w-100">
|
||||
<option selected>Select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<!-- end Snippet -->
|
||||
|
||||
<!-- Snippet -->
|
||||
<select class="custom-select custom-select-sm w-100">
|
||||
<option selected>Select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Checkbox</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
|
||||
<label class="form-check-label" for="defaultCheck1">
|
||||
Default checkbox
|
||||
</label>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
|
||||
<label class="form-check-label" for="defaultCheck2">
|
||||
Disabled checkbox
|
||||
</label>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Radio</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
|
||||
<label class="form-check-label" for="exampleRadios1">
|
||||
Default radio
|
||||
</label>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
|
||||
<label class="form-check-label" for="exampleRadios2">
|
||||
Second default radio
|
||||
</label>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="form-check disabled">
|
||||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
|
||||
<label class="form-check-label" for="exampleRadios3">
|
||||
Disabled radio
|
||||
</label>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
<p class="text-center mt-5"><a class="text-link-1" href="https://getbootstrap.com/docs/5.0/forms/overview/" target="_blank">Click here</a> to learn more about bootstrap forms.</p>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
200
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/grid.html
vendored
Normal file
200
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/grid.html
vendored
Normal file
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Bootstrap Grid</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Bootstrap Grid</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section-lg">
|
||||
<div class="container">
|
||||
<p>Mono is based on Bootstrap v5.x Front-end Framework. Bootstrap's grid system allows up to 12 columns across the page. You can use all 12 columns individually or you can group the columns together to create wider columns. Columns must be placed within a .row and the rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.</p>
|
||||
<p class="mt-3"><a class="text-link-1" href="https://getbootstrap.com/docs/5.0/layout/grid/" target="_blank">Click here</a> to learn more about Bootstrap Grid.</p>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
411
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/hoverbox.html
vendored
Normal file
411
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/hoverbox.html
vendored
Normal file
@@ -0,0 +1,411 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Hover box</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Hover Box</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<!-- Hoverbox 1 -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4 g-lg-5">
|
||||
<div class="col-12 col-md-6">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 1 - Center</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-1 text-center border-radius">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="hover-content center">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 1 - Bottom</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-1 border-radius">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="hover-content bottom">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Hoverbox 1 -->
|
||||
|
||||
<!-- Hoverbox 2 -->
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 2</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-2 text-center">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="hover-content">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- Hoverbox 2 -->
|
||||
|
||||
<!-- Hoverbox 3 -->
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 3</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-3">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="hover-content">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- Hoverbox 3 -->
|
||||
|
||||
<!-- Hoverbox 4 -->
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4 g-lg-5">
|
||||
<div class="col-12 col-md-6">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 4 - Center</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-4 center text-center border-radius">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
|
||||
</div>
|
||||
<div class="hover-content">
|
||||
<a class="button button-lg button-outline-white-2 button-rounded" href="#">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 4 - Bottom</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-4 bottom border-radius">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
|
||||
</div>
|
||||
<div class="hover-content">
|
||||
<a class="button button-lg button-outline-white-2 button-rounded" href="#">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- Hoverbox 4 -->
|
||||
|
||||
<!-- Hoverbox 5 -->
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 5</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-5 border-radius">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="content">
|
||||
<h5>Heading</h5>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
|
||||
</div>
|
||||
<div class="hover-content">
|
||||
<a class="button button-lg button-outline-white-2 button-rounded" href="#">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- Hoverbox 5 -->
|
||||
|
||||
<!-- Hoverbox 6 -->
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 6 - Top</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-6">
|
||||
<a href="#">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="content top">
|
||||
<span class="font-family-poppins font-small fw-normal uppercase m-0">Title</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 6 - Center</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-6">
|
||||
<a href="#">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="content center">
|
||||
<span class="font-family-poppins font-small fw-normal uppercase m-0">Title</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 6 - Bottom</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-6">
|
||||
<a href="#">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="content bottom">
|
||||
<span class="font-family-poppins font-small fw-normal uppercase m-0">Title</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- Hoverbox 6 -->
|
||||
|
||||
<!-- Hoverbox 7 -->
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
<h4 class="mb-3 mb-lg-4">Hoverbox 7</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="hoverbox-7">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<div class="hover-content">
|
||||
<div class="top">
|
||||
<ul class="list-inline-sm">
|
||||
<li>
|
||||
<a class="button-circle button-circle-sm button-circle-white" href="#"><i class="bi bi-facebook"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button-circle button-circle-sm button-circle-white" href="#"><i class="bi bi-twitter-x"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- Hoverbox 7 -->
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
321
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/iconbox.html
vendored
Normal file
321
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/iconbox.html
vendored
Normal file
@@ -0,0 +1,321 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Icon box</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Icon box</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
|
||||
|
||||
<!-- Snippets -->
|
||||
<div class="square-box-xl bg-color-blue icon-2xl">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="square-box-lg bg-color-turquoise icon-xl mt-2">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="square-box-md bg-color-purple icon-lg mt-2">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="square-box-sm bg-color-pink-edge mt-2">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="square-box-xs bg-color-very-peri mt-2">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
|
||||
|
||||
<!-- Snippets -->
|
||||
<div class="circle-box-xl bg-color-blue icon-2xl">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="circle-box-lg bg-color-turquoise icon-xl mt-2">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="circle-box-md bg-color-purple icon-lg mt-2">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="circle-box-sm bg-color-pink-edge mt-2">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="circle-box-xs bg-color-very-peri icon-sm mt-2">
|
||||
<i class="fas fa-check text-white"></i>
|
||||
</div>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
|
||||
|
||||
<!-- Snippets -->
|
||||
<div class="square-box-xl bg-color-blue">
|
||||
<h2>A</h2>
|
||||
</div>
|
||||
<br>
|
||||
<div class="square-box-lg bg-color-turquoise mt-2">
|
||||
<h3>B</h3>
|
||||
</div>
|
||||
<br>
|
||||
<div class="square-box-md bg-color-purple mt-2">
|
||||
<h4>C</h4>
|
||||
</div>
|
||||
<br>
|
||||
<div class="square-box-sm bg-color-pink-edge mt-2">
|
||||
<h5>D</h5>
|
||||
</div>
|
||||
<br>
|
||||
<div class="square-box-xs bg-color-very-peri mt-2">
|
||||
<h6>E</h6>
|
||||
</div>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
|
||||
|
||||
<!-- Snippets -->
|
||||
<div class="circle-box-xl bg-color-blue">
|
||||
<h2>1</h2>
|
||||
</div>
|
||||
<br>
|
||||
<div class="circle-box-lg bg-color-turquoise mt-2">
|
||||
<h3>2</h3>
|
||||
</div>
|
||||
<br>
|
||||
<div class="circle-box-md bg-color-purple mt-2">
|
||||
<h4>3</h4>
|
||||
</div>
|
||||
<br>
|
||||
<div class="circle-box-sm bg-color-pink-edge mt-2">
|
||||
<h5>4</h5>
|
||||
</div>
|
||||
<br>
|
||||
<div class="circle-box-xs bg-color-very-peri mt-2">
|
||||
<h6>5</h6>
|
||||
</div>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
212
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/image-backdrop.html
vendored
Normal file
212
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/image-backdrop.html
vendored
Normal file
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Image backdrop</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Box backdrop on Image</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-5 text-center">
|
||||
<div class="col-12 col-lg-6">
|
||||
<!-- Snippet -->
|
||||
<div class="box-backdrop">
|
||||
<img src="../assets/images/col-2.jpg" alt="">
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<!-- Snippet -->
|
||||
<img class="box-backdrop" src="../assets/images/col-2.jpg" alt="">
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
211
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/image-linkbox.html
vendored
Normal file
211
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/image-linkbox.html
vendored
Normal file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Image Link box</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Image Link box</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="img-link-box">
|
||||
<a href="#">
|
||||
<img class="border-radius" src="../assets/images/col-2.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
301
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/image-masks.html
vendored
Normal file
301
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/image-masks.html
vendored
Normal file
@@ -0,0 +1,301 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Image Masks</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Image Masks</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container text-center">
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<h4 class="fw-medium">Blob 1</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="img-mask-blob-1">
|
||||
<img src="../assets/images/col-2-square.jpg" alt="">
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<h4 class="fw-medium">Blob 2</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="img-mask-blob-2">
|
||||
<img src="../assets/images/col-2-square.jpg" alt="">
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<h4 class="fw-medium">Blob 3</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="img-mask-blob-3">
|
||||
<img src="../assets/images/col-2-square.jpg" alt="">
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<h4 class="fw-medium">Blob 4</h4>
|
||||
<!-- Snippet -->
|
||||
<div class="img-mask-blob-4">
|
||||
<img src="../assets/images/col-2-square.jpg" alt="">
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section bg-gray-lighter">
|
||||
<div class="container text-center">
|
||||
<div class="row g-5">
|
||||
<div class="col">
|
||||
<h4 class="fw-medium">Avatar XL</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<img class="img-mask-avatar-xl" src="../assets/images/col-2-square.jpg" alt="">
|
||||
<!-- end Snippet -->
|
||||
|
||||
<p class="fst-italic mt-2 mb-4">140x140 px</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="fw-medium">Avatar LG</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<img class="img-mask-avatar-lg" src="../assets/images/col-2-square.jpg" alt="">
|
||||
<!-- end Snippet -->
|
||||
|
||||
<p class="fst-italic mt-2 mb-4">120x120 px</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="fw-medium">Avatar MD</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<img class="img-mask-avatar-md" src="../assets/images/col-2-square.jpg" alt="">
|
||||
<!-- end Snippet -->
|
||||
|
||||
<p class="fst-italic mt-2 mb-4">100x100 px</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="fw-medium">Avatar SM</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<img class="img-mask-avatar-sm" src="../assets/images/col-2-square.jpg" alt="">
|
||||
<!-- end Snippet -->
|
||||
|
||||
<p class="fst-italic mt-2 mb-4">80x80 px</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="fw-medium">Avatar XS</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<img class="img-mask-avatar-xs" src="../assets/images/col-2-square.jpg" alt="">
|
||||
<!-- end Snippet -->
|
||||
|
||||
<p class="fst-italic mt-2 mb-4">60x60 px</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h4 class="fw-medium">Avatar Group</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="avatar-group">
|
||||
<li>
|
||||
<img src="../assets/images/img-avatar-sm.jpg" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<img src="../assets/images/img-avatar-sm.jpg" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<img src="../assets/images/img-avatar-sm.jpg" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
255
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/lightbox.html
vendored
Normal file
255
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/lightbox.html
vendored
Normal file
@@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Lightbox</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Lightbox</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal mb-5 text-center">Lightbox Image</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<a class="lightbox-image-box border-radius icon-lg" href="../assets/images/col-1.jpg">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<i class="bi bi-arrows-fullscreen"></i>
|
||||
</a>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal mb-5 text-center">Lightbox Media</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<a class="lightbox-media-box border-radius icon-lg" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
<i class="bi bi-play"></i>
|
||||
</a>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal mb-5 text-center">Lightbox Links</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||
<ul class="list-inline-lg text-center">
|
||||
<li>
|
||||
|
||||
<!-- Snippet -->
|
||||
<a class="lightbox-image-link button-text-1" href="../assets/images/col-1.jpg">Lightbox Image Link</a>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</li>
|
||||
<li>
|
||||
|
||||
<!-- Snippet -->
|
||||
<a class="lightbox-media-link button-text-1" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">Lightbox Media Link</a>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
457
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/lists.html
vendored
Normal file
457
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/lists.html
vendored
Normal file
@@ -0,0 +1,457 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Lists</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Lists</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Unordered List</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul>
|
||||
<li>List item</li>
|
||||
<li>List item
|
||||
<ul>
|
||||
<li>Sub List item</li>
|
||||
<li>Sub List item</li>
|
||||
<li>Sub List item</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Ordered List</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ol>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ol>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Ordered List - Style 2</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ol class="list-ordered style-2">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ol>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Ordered List - Style 3</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ol class="list-ordered style-3">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ol>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Ordered List - Style 4</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ol class="list-ordered style-4">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ol>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Ordered List - Style 5</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ol class="list-ordered style-5">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ol>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Unstyled List</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="list-unstyled">
|
||||
<li>List item</li>
|
||||
<li>List item
|
||||
<ul>
|
||||
<li>Sub List item</li>
|
||||
<li>Sub List item</li>
|
||||
<li>Sub List item</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Dash List</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="list-dash">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Inline List</h4>
|
||||
|
||||
<!-- Snippets -->
|
||||
<ul class="list-inline-lg">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
<ul class="list-inline mt-2">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
<ul class="list-inline-sm mt-2">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Inline List - Dash</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="list-inline-dash">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Inline List - Slash</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="list-inline-slash">
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
<li>List item</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
<h4 class="fw-normal mb-3">Icon List</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="bi bi-check pe-2"></i>List item</li>
|
||||
<li><i class="bi bi-check pe-2"></i>List item</li>
|
||||
<li><i class="bi bi-check pe-2"></i>List item</li>
|
||||
<li><i class="bi bi-check pe-2"></i>List item</li>
|
||||
</ul>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
241
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/maps.html
vendored
Normal file
241
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/maps.html
vendored
Normal file
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Google Maps</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Google Maps</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<p>Mono uses <a href="https://hpneo.github.io/gmaps/" target="_blank">gmaps</a> plugin to show Google Maps. By default, the maps width is set to 100% and height is set to 0 and you can set the height of the map using 'gmap-xl/gmap-lg/gmap-md/gmap-sm/gmap-xs' classes.</p>
|
||||
<ul class="mt-4">
|
||||
<li><span class="fw-bold">gmap-xs</span> - sets height to 300px <span class="fst-italic">(250px on Mobile)</span></li>
|
||||
<li><span class="fw-bold">gmap-sm</span> - sets height to 350px <span class="fst-italic">(300px on Mobile)</span></li>
|
||||
<li><span class="fw-bold">gmap-md</span> - sets height to 400px <span class="fst-italic">(350px on Mobile)</span></li>
|
||||
<li><span class="fw-bold">gmap-lg</span> - sets height to 470px <span class="fst-italic">(400px on Mobile)</span></li>
|
||||
<li><span class="fw-bold">gmap-xl</span> - sets height to 550px <span class="fst-italic">(450px on Mobile)</span></li>
|
||||
</ul>
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div id="map1" class="gmap gmap-xs" data-latitude="51.513569" data-longitude="-0.123443"></div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div id="map2" class="gmap gmap-sm" data-latitude="51.513569" data-longitude="-0.123443"></div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div id="map3" class="gmap gmap-md" data-latitude="51.513569" data-longitude="-0.123443"></div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div id="map4" class="gmap gmap-lg" data-latitude="51.513569" data-longitude="-0.123443"></div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div id="map5" class="gmap gmap-xl" data-latitude="51.513569" data-longitude="-0.123443"></div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
259
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/masonry.html
vendored
Normal file
259
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/masonry.html
vendored
Normal file
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Masonry</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Masonry</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<p>You can create a masonry grid layout by creating a div element with <span class="fw-normal">.masonry</span> class. And adding column<span class="fst-italic">(column-1/ ... /column-6)</span> and spacing<span class="fst-italic">(spacing-0/ ... /spacing-5)</span> classes to the element to customize it.</p>
|
||||
<ul class="mt-4">
|
||||
<li><span class="fw-normal text-dark">column-1</span> - to Create a 1 column layout <span class="fst-italic">(by default)</span></li>
|
||||
<li><span class="fw-normal text-dark">column-2</span> - to Create a 2 column layout</li>
|
||||
<li><span class="fw-normal text-dark">column-3</span> - to Create a 3 column layout</li>
|
||||
<li><span class="fw-normal text-dark">column-4</span> - to Create a 4 column layout</li>
|
||||
<li><span class="fw-normal text-dark">column-5</span> - to Create a 5 column layout</li>
|
||||
<li><span class="fw-normal text-dark">column-6</span> - to Create a 6 column layout</li>
|
||||
</ul>
|
||||
<ul class="mt-4">
|
||||
<li><span class="fw-normal text-dark">spacing-0</span> - 0 spacing between columns</li>
|
||||
<li><span class="fw-normal text-dark">spacing-1</span> - 1em spacing between columns</li>
|
||||
<li><span class="fw-normal text-dark">spacing-2</span> - 2em spacing between columns</li>
|
||||
<li><span class="fw-normal text-dark">spacing-3</span> - 3em spacing between columns</li>
|
||||
<li><span class="fw-normal text-dark">spacing-4</span> - 4em spacing between columns</li>
|
||||
<li><span class="fw-normal text-dark">spacing-5</span> - 5em spacing between columns</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section bg-gray-lighter">
|
||||
<div class="container">
|
||||
<div class="mb-5 text-center">
|
||||
<h3 class="fw-normal">Basic Masonry</h3>
|
||||
</div>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="masonry column-3 spacing-2">
|
||||
<div class="masonry-item">
|
||||
<div class="bg-white p-5 box-shadow">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item">
|
||||
<div class="bg-white p-5 box-shadow">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item">
|
||||
<div class="bg-white p-5 box-shadow">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item">
|
||||
<div class="bg-white p-5 box-shadow">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item">
|
||||
<div class="bg-white p-5 box-shadow">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="masonry-item">
|
||||
<div class="bg-white p-5 box-shadow">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
233
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/pagination.html
vendored
Normal file
233
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/pagination.html
vendored
Normal file
@@ -0,0 +1,233 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Pagination</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Pagination</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container text-center">
|
||||
|
||||
<!-- Snippets -->
|
||||
<nav>
|
||||
<ul class="pagination justify-content-center pagination-sm">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="pagination justify-content-center mt-3">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="pagination justify-content-center pagination-lg mt-3">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container text-center">
|
||||
<div class="mb-3">
|
||||
<h4 class="fw-normal">Hover Style 2</h4>
|
||||
</div>
|
||||
|
||||
<!-- Snippets -->
|
||||
<nav>
|
||||
<ul class="pagination justify-content-center pagination-sm hover-style-2">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="pagination justify-content-center hover-style-2 mt-3">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav>
|
||||
<ul class="pagination justify-content-center pagination-lg hover-style-2 mt-3">
|
||||
<li class="page-item"><a class="page-link" href="#">«</a></li>
|
||||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||||
<li class="page-item"><a class="page-link" href="#">»</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div><!-- end footer-bottom -->
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
253
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/pie-charts.html
vendored
Normal file
253
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/pie-charts.html
vendored
Normal file
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Pie Charts</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Pie Charts</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container text-center">
|
||||
<h4 class="fw-normal mb-4">with Percentage</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="pie-chart" data-size="110" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)">
|
||||
<div class="pie-chart-content">
|
||||
<span class="percent"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container text-center">
|
||||
<h4 class="fw-normal mb-4">without Scale</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="pie-chart" data-size="100" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="false" data-line-width="2">
|
||||
<div class="pie-chart-content">
|
||||
<h4 class="m-0">9</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container text-center">
|
||||
<h4 class="fw-normal mb-4">with Icon</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="pie-chart" data-size="100" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="false" data-line-width="2">
|
||||
<div class="pie-chart-content icon-2xl">
|
||||
<i class="bi bi-star text-dark"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container text-center">
|
||||
<h4 class="fw-normal mb-4">with Text</h4>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="pie-chart" data-size="120" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="false" data-line-width="2">
|
||||
<div class="pie-chart-content">
|
||||
<span class="font-family-poppins font-small fw-medium uppercase">Text</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
253
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/prices.html
vendored
Normal file
253
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/prices.html
vendored
Normal file
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Prices</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Pricing Table</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<!-- Prices box 1 -->
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="prices-box">
|
||||
<h6 class="font-small fw-normal uppercase">Personal</h6>
|
||||
<div class="price">
|
||||
<h1 class="fw-normal">19<span>/mo</span></h1>
|
||||
</div>
|
||||
<div class="price-features">
|
||||
<ul>
|
||||
<li>Unlimited User</li>
|
||||
<li>Unlimited Storage</li>
|
||||
<li>24/7 Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="button button-md button-dark button-rounded" href="#">Order Now</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Prices box 2 -->
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="prices-box prices-box-recommended">
|
||||
<h6 class="font-small fw-normal uppercase">Business</h6>
|
||||
<div class="price">
|
||||
<h1 class="fw-normal">49<span>/mo</span></h1>
|
||||
</div>
|
||||
<div class="price-features">
|
||||
<ul>
|
||||
<li>Unlimited User</li>
|
||||
<li>Unlimited Storage</li>
|
||||
<li>24/7 Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="button button-md button-dark button-rounded" href="#">Order Now</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Prices box 3 -->
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="prices-box">
|
||||
<h6 class="font-small fw-normal uppercase">Premium</h6>
|
||||
<div class="price">
|
||||
<h1 class="fw-normal">79<span>/mo</span></h1>
|
||||
</div>
|
||||
<div class="price-features">
|
||||
<ul>
|
||||
<li>Unlimited User</li>
|
||||
<li>Unlimited Storage</li>
|
||||
<li>24/7 Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="button button-md button-dark button-rounded" href="#">Order Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
275
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/progress-bars.html
vendored
Normal file
275
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/progress-bars.html
vendored
Normal file
@@ -0,0 +1,275 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Progress bars</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Progress bars</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-lg-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="progress-box">
|
||||
<h6 class="fw-medium">Progress bar</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="94"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-box progress-blue mt-4">
|
||||
<h6 class="fw-medium">Progress bar Blue</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="88"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-box progress-purple mt-4">
|
||||
<h6 class="fw-medium">Progress bar Purple</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="92"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-box progress-pink-edge mt-4">
|
||||
<h6 class="fw-medium">Progress bar Pink Edge</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="86"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-box progress-golden-yellow mt-4">
|
||||
<h6 class="fw-medium">Progress bar Golden Yellow</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="98"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-box progress-very-peri mt-4">
|
||||
<h6 class="fw-medium">Progress bar Very Peri</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="94"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-box progress-turquoise mt-4">
|
||||
<h6 class="fw-medium">Progress bar turquoise</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="90"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-box progress-spring-red mt-4">
|
||||
<h6 class="fw-medium">Progress bar Spring Red</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="86"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-box progress-tan mt-4">
|
||||
<h6 class="fw-medium">Progress bar Tan</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="88"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-box progress-aqua mt-4">
|
||||
<h6 class="fw-medium">Progress bar Aqua</h6>
|
||||
<div class="animated-progress">
|
||||
<div data-progress="88"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
243
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/scroll-animations.html
vendored
Normal file
243
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/scroll-animations.html
vendored
Normal file
@@ -0,0 +1,243 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Scroll Animations</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Scroll Animations</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-3 text-center" data-cues="fadeIn">
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="bg-dark-lighter border-radius py-4">
|
||||
<span>Box</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="bg-dark-lighter border-radius py-4">
|
||||
<span>Box</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="bg-dark-lighter border-radius py-4">
|
||||
<span>Box</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="bg-dark-lighter border-radius py-4">
|
||||
<span>Box</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="bg-dark-lighter border-radius py-4">
|
||||
<span>Box</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="bg-dark-lighter border-radius py-4">
|
||||
<span>Box</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="bg-dark-lighter border-radius py-4">
|
||||
<span>Box</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="bg-dark-lighter border-radius py-4">
|
||||
<span>Box</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
<div class="mt-5 text-center">
|
||||
<p>You can learn more about ScrollCue from it's official website: <a href="https://prjct-samwest.github.io/scrollCue/">https://prjct-samwest.github.io/scrollCue/</a></p>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
223
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/section-dividers.html
vendored
Normal file
223
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/section-dividers.html
vendored
Normal file
@@ -0,0 +1,223 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Section Dividers</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-gray-lighter text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Section Dividers</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="section bg-dark-09 section-divider-waves-top text-center">
|
||||
<h2>Waves Top</h2>
|
||||
</div>
|
||||
|
||||
<div class="section bg-dark-09 section-divider-waves-bottom text-center mt-5">
|
||||
<h2>Waves Bottom</h2>
|
||||
</div>
|
||||
|
||||
<div class="section bg-dark-09 section-divider-wavesOpacity-top text-center mt-5">
|
||||
<h2>Waves Opacity Top</h2>
|
||||
</div>
|
||||
|
||||
<div class="section bg-dark-09 section-divider-wavesOpacity-bottom text-center mt-5">
|
||||
<h2>Waves Opacity Bottom</h2>
|
||||
</div>
|
||||
|
||||
<div class="section bg-dark-09 section-divider-curve-top text-center mt-5">
|
||||
<h2>Curve Top</h2>
|
||||
</div>
|
||||
|
||||
<div class="section bg-dark-09 section-divider-curve-bottom text-center mt-5">
|
||||
<h2>Curve Bottom</h2>
|
||||
</div>
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
250
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/sections.html
vendored
Normal file
250
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/sections.html
vendored
Normal file
@@ -0,0 +1,250 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Sections</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Section Sizes</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section-xs bg-gray-lighter text-center">
|
||||
<h3 class="m-0">section-xs</h3>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section-sm bg-gray-lighter text-center">
|
||||
<h3 class="m-0">section-sm</h3>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section bg-gray-lighter text-center">
|
||||
<h3 class="m-0">section/section-md</h3>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section-lg bg-gray-lighter text-center">
|
||||
<h3 class="m-0">section-lg</h3>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section-xl bg-gray-lighter text-center">
|
||||
<h3 class="m-0">section-xl</h3>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="section-2xl bg-gray-lighter text-center">
|
||||
<h3 class="m-0">section-2xl</h3>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
415
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/sliders.html
vendored
Normal file
415
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/sliders.html
vendored
Normal file
@@ -0,0 +1,415 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Sliders</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Sliders</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Single Item Slider</h3>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel" data-owl-items="1">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<h3 class="fw-normal text-center mb-5">Responsive Slider</h3>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel" data-owl-nav="true" data-owl-dots="false" data-owl-margin="10" data-owl-xs="1" data-owl-sm="1" data-owl-md="2" data-owl-lg="3" data-owl-xl="3">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-5 text-center">
|
||||
<h3 class="fw-normal m-0">Owl Nav - Overlay</h3>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel owl-nav-overlay" data-owl-items="1" data-owl-nav="true" data-owl-dots="false">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-5 text-center">
|
||||
<h3 class="fw-normal m-0">Owl Nav - Overlap</h3>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-4">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel owl-nav-overlap-left" data-owl-items="1" data-owl-nav="true" data-owl-dots="false">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel owl-nav-overlap" data-owl-items="1" data-owl-nav="true" data-owl-dots="false">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel owl-nav-overlap-right" data-owl-items="1" data-owl-nav="true" data-owl-dots="false">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-5 text-center">
|
||||
<h3 class="fw-normal m-0">Owl Dots - Overlay</h3>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel owl-dots-overlay" data-owl-items="1" data-owl-nav="false">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-5 text-center">
|
||||
<h3 class="fw-normal m-0">Owl Dots - Overlap</h3>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-4">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel owl-dots-overlap-left" data-owl-items="1" data-owl-nav="false">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel owl-dots-overlap" data-owl-items="1" data-owl-nav="false">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="owl-carousel owl-dots-overlap-right" data-owl-items="1" data-owl-nav="false">
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/images/col-1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="mb-5 text-center">
|
||||
<h3 class="fw-normal m-0">Sliding Text</h3>
|
||||
</div>
|
||||
|
||||
<!-- Snippet -->
|
||||
<div class="swiper sliding-text">
|
||||
<div class="swiper-wrapper">
|
||||
<!-- Item 1 -->
|
||||
<div class="swiper-slide">
|
||||
<h2 class="display-1 fw-semi-bold uppercase stroke-text mb-0 opacity-25">Best Rated HTML Template</h2>
|
||||
</div>
|
||||
<!-- Item 2 -->
|
||||
<div class="swiper-slide">
|
||||
<h2 class="display-1 fw-semi-bold uppercase text-color-theme mb-0 opacity-10">The Ultimate Multipurpose Template</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
205
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/stroke-text.html
vendored
Normal file
205
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/stroke-text.html
vendored
Normal file
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Stroke text</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Stroke Text</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section-lg">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
|
||||
<!-- Snippet -->
|
||||
<h1 class="display-4 fw-semi-bold stroke-text">Stroke Text</h1>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
334
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/tabs.html
vendored
Normal file
334
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/tabs.html
vendored
Normal file
@@ -0,0 +1,334 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Tabs</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Tabs</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-6">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="nav mb-3">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1-first">First</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab1-second">Second</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab1-third">Third</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="tab1-first">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab1-second">
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab1-third">
|
||||
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-6">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="nav nav-tabs mb-3">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab2-first">First</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2-second">Second</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2-third">Third</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="tab2-first">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab2-second">
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab2-third">
|
||||
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-6">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="nav nav-pills mb-3">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab3-first">First</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab3-second">Second</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab3-third">Third</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="tab3-first">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab3-second">
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab3-third">
|
||||
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-6">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="nav tabs mb-3">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab4-first">First</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab4-second">Second</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab4-third">Third</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="tab4-first">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab4-second">
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab4-third">
|
||||
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section pt-0">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-6">
|
||||
|
||||
<!-- Snippet -->
|
||||
<ul class="nav nav-custom mb-3">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab5-first">First</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab5-second">Second</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab5-third">Third</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="tab5-first">
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab5-second">
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla consequat massa quis enim.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="tab5-third">
|
||||
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
<p class="mt-5 text-center"><a class="text-link-1" href="https://getbootstrap.com/docs/5.0/components/navs-tabs/" target="_blank">Click here</a> to learn more about Bootstrap Tabs.</p>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div><!-- end footer-bottom -->
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
278
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/text-colors.html
vendored
Normal file
278
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/text-colors.html
vendored
Normal file
@@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Text colors</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Text Colors</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<!-- section -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 font-large">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-sm-6">
|
||||
|
||||
<p class="text-dark">.text-dark</p>
|
||||
<p class="text-dark-09">.text-dark-09</p>
|
||||
<p class="text-dark-08">.text-dark-08</p>
|
||||
<p class="text-dark-07">.text-dark-07</p>
|
||||
<p class="text-dark-06">.text-dark-06</p>
|
||||
<p class="text-dark-05">.text-dark-05</p>
|
||||
<p class="text-dark-04">.text-dark-04</p>
|
||||
<p class="text-dark-03">.text-dark-03</p>
|
||||
<p class="text-dark-02">.text-dark-02</p>
|
||||
<p class="text-dark-01">.text-dark-01</p>
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
|
||||
<p class="text-aqua">.text-aqua</p>
|
||||
<p class="text-blue">.text-blue</p>
|
||||
<p class="text-golden-yellow">.text-golden-yellow</p>
|
||||
<p class="text-pink-edge">.text-pink-edge</p>
|
||||
<p class="text-purple">.text-purple</p>
|
||||
<p class="text-spring-red">.text-spring-red</p>
|
||||
<p class="text-tan">.text-tan</p>
|
||||
<p class="text-turquoise">.text-turquoise</p>
|
||||
<p class="text-very-peri">.text-very-peri</p>
|
||||
<p class="text-red">.text-red</p>
|
||||
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
|
||||
<h5 class="text-gradient-1">.text-gradient-1</h5>
|
||||
<br>
|
||||
<h5 class="text-gradient-2">.text-gradient-2</h5>
|
||||
<br>
|
||||
<h5 class="text-gradient-3">.text-gradient-3</h5>
|
||||
<br>
|
||||
<h5 class="text-gradient-4">.text-gradient-4</h5>
|
||||
<br>
|
||||
<h5 class="text-gradient-5">.text-gradient-5</h5>
|
||||
<br>
|
||||
<h5 class="text-gradient-6">.text-gradient-6</h5>
|
||||
<br>
|
||||
<h5 class="text-gradient-7">.text-gradient-7</h5>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end section -->
|
||||
|
||||
<!-- section -->
|
||||
<div class="section bg-dark-lightest">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 font-large">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6">
|
||||
|
||||
<p class="text-white">.text-white</p>
|
||||
<p class="text-white-09">.text-white-09</p>
|
||||
<p class="text-white-08">.text-white-08</p>
|
||||
<p class="text-white-07">.text-white-07</p>
|
||||
<p class="text-white-06">.text-white-06</p>
|
||||
<p class="text-white-05">.text-white-05</p>
|
||||
<p class="text-white-04">.text-white-04</p>
|
||||
<p class="text-white-03">.text-white-03</p>
|
||||
<p class="text-white-02">.text-white-02</p>
|
||||
<p class="text-white-01">.text-white-01</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end section -->
|
||||
|
||||
<footer>
|
||||
<div class="section-sm">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-gray py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
226
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/text-highlights.html
vendored
Normal file
226
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/text-highlights.html
vendored
Normal file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Text Highlights</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark-lighter text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Text Highlights</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<!-- section -->
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
|
||||
<h3 class="fw-medium">Text highlight <span class="text-highlight">Basic</span></h3>
|
||||
<h3 class="fw-medium mt-3">Text highlight <span class="text-highlight-gradient">Gradient 1</span></h3>
|
||||
<h3 class="fw-medium mt-3">Text highlight <span class="text-highlight-gradient-2">Gradient 2</span></h3>
|
||||
<h3 class="fw-medium mt-3">Text highlight <span class="text-highlight-gradient-3">Gradient 3</span></h3>
|
||||
<h3 class="fw-medium mt-3">Text highlight <span class="text-highlight-gradient-4">Gradient 4</span></h3>
|
||||
<h3 class="fw-medium mt-3">Text highlight <span class="text-highlight-gradient-5">Gradient 5</span></h3>
|
||||
<h3 class="fw-medium mt-3">Text highlight <span class="text-highlight-gradient-6">Gradient 6</span></h3>
|
||||
<h3 class="fw-medium mt-3">Text highlight <span class="text-highlight-gradient-7">Gradient 7</span></h3>
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
<pre class="mt-5">
|
||||
<code>
|
||||
<h3 class="fw-medium">Text highlight <span class="text-highlight">Basic</span></h3>
|
||||
<h3 class="fw-medium">Text highlight <span class="text-highlight-gradient">Gradient 1</span></h3>
|
||||
<h3 class="fw-medium">Text highlight <span class="text-highlight-gradient-2">Gradient 2</span></h3>
|
||||
<h3 class="fw-medium">Text highlight <span class="text-highlight-gradient-3">Gradient 3</span></h3>
|
||||
<h3 class="fw-medium">Text highlight <span class="text-highlight-gradient-4">Gradient 4</span></h3>
|
||||
<h3 class="fw-medium">Text highlight <span class="text-highlight-gradient-5">Gradient 5</span></h3>
|
||||
<h3 class="fw-medium">Text highlight <span class="text-highlight-gradient-6">Gradient 6</span></h3>
|
||||
<h3 class="fw-medium">Text highlight <span class="text-highlight-gradient-7">Gradient 7</span></h3>
|
||||
</code>
|
||||
</pre>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end section -->
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
224
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/text-links.html
vendored
Normal file
224
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/text-links.html
vendored
Normal file
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Text links</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Text Links</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container text-center">
|
||||
|
||||
<!-- Snippets -->
|
||||
<p class="mb-2"><a class="text-link-1" href="#">text-link 1 style</a></p>
|
||||
<p class="mb-2"><a class="text-link-2" href="#">text-link 2 style</a></p>
|
||||
<p class="mb-2"><a class="text-link-3" href="#">text-link 3 style</a></p>
|
||||
<p class="mb-2"><a class="text-link-4" href="#">text-link 4 style</a></p>
|
||||
<p class="mb-2"><a class="text-link-5" href="#">text-link 5 style</a></p>
|
||||
<p><a class="text-link-6" href="#">text-link 6 style</a></p>
|
||||
|
||||
<div class="mt-5">
|
||||
<h4>Social Links</h4>
|
||||
<ul class="list-inline fw-semi-bold">
|
||||
<li><a class="link-social-facebook" href="#">Facebook</a></li>
|
||||
<li><a class="link-social-twitter" href="#">Twitter</a></li>
|
||||
<li><a class="link-social-instagram" href="#">Instagram</a></li>
|
||||
<li><a class="link-social-linkedin" href="#">Linkedin</a></li>
|
||||
<li><a class="link-social-youtube" href="#">Youtube</a></li>
|
||||
<li><a class="link-social-pinterest" href="#">Pinterest</a></li>
|
||||
<li><a class="link-social-skype" href="#">Skype</a></li>
|
||||
<li><a class="link-social-dribbble" href="#">Dribbble</a></li>
|
||||
<li><a class="link-social-snapchat" href="#">Snapchat</a></li>
|
||||
<li><a class="link-social-whatsapp" href="#">Whatsapp</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end Snippets -->
|
||||
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
207
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/typer.html
vendored
Normal file
207
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/typer.html
vendored
Normal file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Typer</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Typer</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section-lg">
|
||||
<div class="container">
|
||||
<div class="text-center">
|
||||
|
||||
<!-- Snippet -->
|
||||
<h1>
|
||||
<span class="typer" id="typer1" data-words="Let's count, One, Two, Three" data-delay="100" data-deleteDelay="1500"></span><span class="cursor" data-owner="typer1"></span>
|
||||
</h1>
|
||||
<!-- end Snippet -->
|
||||
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
314
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/typography.html
vendored
Normal file
314
docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/6. Elements/typography.html
vendored
Normal file
@@ -0,0 +1,314 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Elements | Typography</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header right header-color-black">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link Only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Dropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<ul class="nav-subdropdown">
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Subdropdown LG</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li class="nav-dropdown-item">
|
||||
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
|
||||
<div class="nav-subdropdown nav-subdropdown-lg">
|
||||
<div class="row g-2 g-lg-3">
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<ul>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<div class="section-xl bg-dark text-center">
|
||||
<div class="container">
|
||||
<h1 class="fw-light m-0">Typography</h1>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<div class="section">
|
||||
<div class="container">
|
||||
<h3 class="text-center mb-5">Headings</h3>
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
|
||||
<!-- Snippets -->
|
||||
<h1>(h1) Heading</h1>
|
||||
<h2>(h2) Heading</h2>
|
||||
<h3>(h3) Heading</h3>
|
||||
<h4>(h4) Heading</h4>
|
||||
<h5>(h5) Heading</h5>
|
||||
<h6>(h6) Heading</h6>
|
||||
<!-- end Snippets -->
|
||||
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section border-top">
|
||||
<div class="container">
|
||||
<h3 class="text-center mb-5">Display Headings</h3>
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
|
||||
<!-- Snippets -->
|
||||
<h1 class="display-1">Display 1</h1>
|
||||
<h1 class="display-2">Display 2</h1>
|
||||
<h1 class="display-3">Display 3</h1>
|
||||
<h1 class="display-4">Display 4</h1>
|
||||
<h1 class="display-5">Display 5</h1>
|
||||
<h1 class="display-6">Display 6</h1>
|
||||
<!-- end Snippets -->
|
||||
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section border-top">
|
||||
<div class="container">
|
||||
<h3 class="text-center mb-5">Font Families & Weights</h3>
|
||||
<div class="row g-4 g-md-5">
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<!-- Snippets -->
|
||||
<p class="fw-bolder">Open Sans - Bolder</p>
|
||||
<p class="fw-bold">Open Sans - Bold</p>
|
||||
<p class="fw-semi-bold">Open Sans - Semi Bold</p>
|
||||
<p class="fw-normal">Open Sans - Normal</p>
|
||||
<p class="fw-light">Open Sans - Light</p>
|
||||
<!-- end Snippets -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<!-- Snippets -->
|
||||
<p class="font-family-playfair fw-black">Playfair - Black</p>
|
||||
<p class="font-family-playfair fw-bold">Playfair - Bold</p>
|
||||
<p class="font-family-playfair fw-normal">Playfair - Normal</p>
|
||||
<!-- end Snippets -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<!-- Snippets -->
|
||||
<p class="font-family-poppins fw-black">Poppins - Black</p>
|
||||
<p class="font-family-poppins fw-bolder">Poppins - Bolder</p>
|
||||
<p class="font-family-poppins fw-bold">Poppins - Bold</p>
|
||||
<p class="font-family-poppins fw-semi-bold">Poppins - Semi Bold</p>
|
||||
<p class="font-family-poppins fw-medium">Poppins - Medium</p>
|
||||
<p class="font-family-poppins fw-normal">Poppins - Normal</p>
|
||||
<p class="font-family-poppins fw-light">Poppins - Light</p>
|
||||
<p class="font-family-poppins fw-lighter">Poppins - Lighter</p>
|
||||
<p class="font-family-poppins fw-thin">Poppins - Thin</p>
|
||||
<!-- end Snippets -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<!-- Snippets -->
|
||||
<p class="font-family-nunito fw-black">Nunito - Black</p>
|
||||
<p class="font-family-nunito fw-bolder">Nunito - Bolder</p>
|
||||
<p class="font-family-nunito fw-bold">Nunito - Bold</p>
|
||||
<p class="font-family-nunito fw-semi-bold">Nunito - Semi Bold</p>
|
||||
<p class="font-family-nunito fw-medium">Nunito - Medium</p>
|
||||
<p class="font-family-nunito fw-normal">Nunito - Normal</p>
|
||||
<p class="font-family-nunito fw-light">Nunito - Light</p>
|
||||
<p class="font-family-nunito fw-lighter">Nunito - Lighter</p>
|
||||
<!-- end Snippets -->
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<!-- Snippets -->
|
||||
<p class="font-family-outfit fw-black">Outfit - Black</p>
|
||||
<p class="font-family-outfit fw-bolder">Outfit - Bolder</p>
|
||||
<p class="font-family-outfit fw-bold">Outfit - Bold</p>
|
||||
<p class="font-family-outfit fw-semi-bold">Outfit - Semi Bold</p>
|
||||
<p class="font-family-outfit fw-medium">Outfit - Medium</p>
|
||||
<p class="font-family-outfit fw-normal">Outfit - Normal</p>
|
||||
<p class="font-family-outfit fw-light">Outfit - Light</p>
|
||||
<p class="font-family-outfit fw-lighter">Outfit - Lighter</p>
|
||||
<!-- end Snippets -->
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<div class="section border-top">
|
||||
<div class="container">
|
||||
<h3 class="text-center mb-5">Font Sizes</h3>
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
||||
|
||||
<!-- Snippets -->
|
||||
<p class="font-large">Large text</p>
|
||||
<p class="mt-2">Regular text</p>
|
||||
<p class="font-small mt-2">Small text</p>
|
||||
<!-- end Snippets -->
|
||||
|
||||
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-dark">
|
||||
<div class="container">
|
||||
<div class="row g-4">
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h3 class="uppercase letter-spacing-1">mono</h3>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Useful Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">About us</a></li>
|
||||
<li><a href="#">Team</a></li>
|
||||
<li><a href="#">Prices</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Additional Links</h6>
|
||||
<ul class="list-dash animate-links">
|
||||
<li><a href="#">Services</a></li>
|
||||
<li><a href="#">Process</a></li>
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-sm-6 col-lg-3">
|
||||
<h6 class="font-small fw-medium uppercase">Contact Info</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li>121 King St, Melbourne VIC 3000</li>
|
||||
<li>contact@example.com</li>
|
||||
<li>+(123) 456 789 01</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<div class="bg-black py-4">
|
||||
<div class="container">
|
||||
<div class="row align-items-center g-2 g-lg-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<p>© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user