Add a pagination partial

This commit is contained in:
kbe
2025-08-18 17:15:47 +02:00
parent 7432ac7d4d
commit c5c947c5d7
4811 changed files with 410066 additions and 38 deletions

View File

@@ -0,0 +1,169 @@
<!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 - 404 1</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 center transparent-light">
<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-image parallax section-divider-wavesOpacity-bottom" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-03">
<div class="container text-center">
<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">
<h1 class="display-1 fw-light">404</h1>
<h5 class="fw-light text-light">Sorry, It appears that the page you were looking for doesn't exist or might have been moved.</h5>
<a class="button button-xl button-radius button-white-2 mt-4" href="#">Go Home Page</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<footer>
<div class="section">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-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>

View File

@@ -0,0 +1,51 @@
<!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 - 404 2</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">
<div class="section-fullscreen bg-gradient-4">
<div class="container text-center">
<div class="position-top text-center">
<h4>mono</h4>
</div><!-- end position-top -->
<div class="position-middle">
<div class="row">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<h1 class="display-1 fw-lighter">404</h1>
<h5 class="fw-light text-light">Sorry, It appears that the page you were looking for doesn't exist or might have been moved.</h5>
<a class="button button-xl button-radius button-reveal-left-white mt-4" href="#"><i class="fas fa-home"></i><span>Go home page</span></a>
</div>
</div><!-- end row -->
</div><!-- end position-middle -->
<div class="position-bottom text-center">
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div><!-- end position-bottom -->
</div><!-- end container -->
</div>
<!-- ***** 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>

View File

@@ -0,0 +1,45 @@
<!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 - 404 3</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">
<div class="section-fullscreen">
<div class="container">
<div class="position-middle">
<div class="row g-4">
<div class="col-12 col-md-10 coffset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h1 class="display-1 fw-bold">404</h1>
<h5 class="fw-light text-dark-05">Sorry, It appears that the page you were looking for doesn't exist or might have been moved.</h5>
<a class="button button-xl button-radius button-reveal-left-dark mt-4" href="#"><i class="fas fa-home"></i><span>Go home page</span></a>
</div>
</div><!-- end row -->
</div><!-- end position-middle -->
</div><!-- end container -->
</div>
<!-- ***** 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>

View File

@@ -0,0 +1,53 @@
<!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 - 404 4</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">
<div class="section-fullscreen bg-gradient-6">
<div class="container text-center">
<div class="position-top text-center">
<h4><a class="text-white" href="#">mono</a></h4>
</div><!-- end position-top -->
<div class="position-middle">
<div class="row">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div class="bg-white border-radius box-shadow p-5">
<h1 class="display-1 fw-lighter">404</h1>
<p>Sorry, It appears that the page you were looking for doesn't exist or might have been moved.</p>
<a class="button button-lg button-rounded button-reveal-left-outline-dark mt-4" href="#"><i class="fas fa-home"></i><span>Go home page</span></a>
</div>
</div>
</div><!-- end row -->
</div><!-- end position-middle -->
<div class="position-bottom text-center">
<p class="text-white-08 fw-normal">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div><!-- end position-bottom -->
</div><!-- end container -->
</div>
<!-- ***** 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>

View File

@@ -0,0 +1,287 @@
<!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 - About me 1</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 transparent-light">
<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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06 section-divider-wavesOpacity-bottom">
<div class="container text-center">
<h1 class="fw-light m-0">About Me</h1>
</div><!-- end container -->
</div>
</div>
<!-- About section -->
<div class="section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-4">
<img class="border-radius" src="../assets/images/col-2-square.jpg" alt=""><!-- Image source -->
</div>
<div class="col-12 col-lg-8">
<div class="d-inline-block bg-gray px-3 py-2 border-radius mb-2">
<h6 class="font-small fw-medium uppercase line-height-140 m-0 text-blue">UI/UX Designer</h6>
</div>
<h3>Hello, I'm Rodney Scott</h3>
<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.</p>
<div class="row g-4 mt-4">
<div class="col-12 col-lg-6">
<!-- Progress bar box 1 -->
<div class="progress-box progress-blue">
<h6 class="fw-medium">Social Marketing</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
<!-- Progress bar box 2 -->
<div class="progress-box progress-blue mt-4">
<h6 class="fw-medium">Sales Training</h6>
<div class="animated-progress">
<div data-progress="88"></div>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<!-- Progress bar box 3 -->
<div class="progress-box progress-blue">
<h6 class="fw-medium">Copywriting</h6>
<div class="animated-progress">
<div data-progress="92"></div>
</div>
</div>
<!-- Progress bar box 4 -->
<div class="progress-box progress-blue mt-4">
<h6 class="fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="90"></div>
</div>
</div>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Services section -->
<div class="section pt-0">
<div class="container">
<div class="row icon-4xl">
<!-- Icon text box 1 -->
<div class="col-12 col-lg-4">
<i class="bi bi-brush text-blue"></i>
<h5 class="fw-normal mt-2">Graphic Design</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Icon text box 2 -->
<div class="col-12 col-lg-4">
<i class="bi bi-camera text-blue"></i>
<h5 class="fw-normal mt-2">Photography</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Icon text box 3 -->
<div class="col-12 col-lg-4">
<i class="bi bi-star text-blue"></i>
<h5 class="fw-normal mt-2">Social Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Timeline section -->
<div class="section border-top">
<div class="container">
<div class="timeline-wrapper timeline-left">
<!-- Timeline box 1 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">May 13, 2022</h6>
</div>
<div class="timeline-content">
<h5 class="fw-medium">Featured Designer of the Month</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
<!-- Timeline box 2 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">Oct 14, 2021</h6>
</div>
<div class="timeline-content">
<h5 class="fw-medium">Top rated Author of the Month</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
<!-- Timeline box 3 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">August 10, 2020</h6>
</div>
<div class="timeline-content">
<h5 class="fw-medium">Best Creator of the Month</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
</div><!-- end timeline-wrapper -->
</div><!-- end container -->
</div>
<!-- end Timeline section -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-md-6 text-center text-md-start">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 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>

View File

@@ -0,0 +1,291 @@
<!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 - About me 2</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 transparent-light">
<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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-03 section-divider-curve-bottom">
<div class="container text-end">
<h6 class="font-small fw-normal uppercase">Entrepreneur</h6>
<h1 class="fw-light display-5 m-0">Johnny Smith</h1>
<ul class="list-inline-sm mt-3">
<li>
<a class="button-circle button-circle-sm button-circle-white-2" href="#">
<i class="bi bi-facebook"></i>
</a>
</li>
<li>
<a class="button-circle button-circle-sm button-circle-white-2" href="#">
<i class="bi bi-twitter-x"></i>
</a>
</li>
<li>
<a class="button-circle button-circle-sm button-circle-white-2" href="#">
<i class="bi bi-pinterest"></i>
</a>
</li>
</ul>
</div><!-- end container -->
</div>
</div>
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-4">
<h4 class="fw-light m-0">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Phasellus viverra nulla ut metus varius laoreet.</h4>
</div>
<div class="col-12 col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat</p>
</div>
<div class="col-12 col-md-4">
<!-- Progress bar box 1 -->
<div class="progress-box">
<h6 class="fw-medium">Social Marketing</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
<!-- Progress bar box 2 -->
<div class="progress-box mt-4">
<h6 class="fw-medium">Sales Training</h6>
<div class="animated-progress">
<div data-progress="88"></div>
</div>
</div>
<!-- Progress bar box 3 -->
<div class="progress-box mt-4">
<h6 class="fw-medium">Copywriting</h6>
<div class="animated-progress">
<div data-progress="92"></div>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Facts section -->
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 counter">50</h2>
<h6 class="font-small fw-normal uppercase">Projects Done</h6>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 counter">74</h2>
<h6 class="font-small fw-normal uppercase">Hours of Meeting</h6>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 counter">300</h2>
<h6 class="font-small fw-normal uppercase">Happy Clients</h6>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 counter">35</h2>
<h6 class="font-small fw-normal uppercase">Hours of Cycling</h6>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 counter">56</h2>
<h6 class="font-small fw-normal uppercase">Cups of Coffee</h6>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 counter">735</h2>
<h6 class="font-small fw-normal uppercase">Emails Sent</h6>
</div>
</div><!-- end row -->
</div><!-- end container -->
<!-- end Facts section -->
<!-- Services section -->
<div class="section">
<div class="container text-center">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="fw-normal display-6">What I Do</h2>
</div>
</div>
</div>
<div class="row g-4 icon-4xl">
<div class="col-12 col-lg-4">
<div class="bg-white p-5 border-radius border">
<i class="bi bi-brush text-dark mt-2"></i>
<h5 class="fw-normal mt-2">Graphic Design</h5>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="bg-white p-5 border-radius border">
<i class="bi bi-camera text-dark mt-2"></i>
<h5 class="fw-normal mt-2">Photography</h5>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="bg-white p-5 border-radius border">
<i class="bi bi-star text-dark mt-2"></i>
<h5 class="fw-normal mt-2">Social Marketing</h5>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<footer>
<div class="section-sm bg-dark">
<div class="container text-center">
<ul class="list-inline-sm mb-2">
<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>
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</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>

View File

@@ -0,0 +1,343 @@
<!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 - About us 1</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-dark">
<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 -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-6">
<a class="lightbox-media-box border-radius" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<img src="../assets/images/col-1.jpg" alt="">
<i class="fas fa-play"></i>
</a>
</div>
<div class="col-12 col-lg-6">
<div class="d-inline-block bg-light-turquoise px-3 py-2 border-radius-2 mb-3">
<span class="font-family-poppins font-small fw-medium uppercase line-height-100 text-dark">Creative People</span>
</div>
<h2 class="fw-normal mb-3">Vivamus elementum semper nisi. Aenean vulputate eleifend</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<ul class="list-unstyled mt-3">
<li><i class="bi bi-check-circle-fill text-turquoise me-2"></i>Lifetime Free Update</li>
<li><i class="bi bi-check-circle-fill text-turquoise me-2"></i>Re-usable custom web elements</li>
<li><i class="bi bi-check-circle-fill text-turquoise me-2"></i>Responsive Carousel with various options</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Services section -->
<div class="section pt-0">
<div class="container">
<div class="row g-3 icon-5xl">
<div class="col-12 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow">
<i class="bi bi-star text-dark"></i>
<h5 class="fw-normal mt-2">Branding</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow">
<i class="bi bi-megaphone text-dark"></i>
<h5 class="fw-normal mt-2">Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow">
<i class="bi bi-chat-text text-dark"></i>
<h5 class="fw-normal mt-2">Consulting</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Clients section -->
<div class="section pt-0">
<div class="container">
<div class="mb-5 text-center">
<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">
<h2 class="fw-normal">Meet Our Clients</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-12 col-lg-10 offset-lg-1">
<ul class="clients-grid column-4">
<li>
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Testimonial section -->
<div class="section pt-0">
<div class="container">
<div class="mb-5 text-center">
<h6 class="uppercase fw-medium">What People Say?</h6>
</div>
<div class="owl-carousel" data-owl-margin="30" data-owl-xs="1" data-owl-sm="1" data-owl-md="1" data-owl-lg="2" data-owl-xl="2" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="border-radius bg-white border p-4 p-lg-5">
<div class="d-lg-flex justify-content-between mb-2">
<div class="d-block d-lg-inline-block mb-2">
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
<div class="d-inline-block text-golden-yellow">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
</div>
<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>
<!-- Testimonial box 2 -->
<div class="border-radius bg-white border p-4 p-lg-5">
<div class="d-lg-flex justify-content-between mb-2">
<div class="d-block d-lg-inline-block mb-2">
<h5 class="fw-normal line-height-140 m-0">Robert Vincent</h5>
<span class="font-small fw-normal">Marketer - Mono</span>
</div>
<div class="d-inline-block text-golden-yellow">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
</div>
<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>
<!-- Testimonial box 3 -->
<div class="border-radius bg-white border p-4 p-lg-5">
<div class="d-lg-flex justify-content-between mb-2">
<div class="d-block d-lg-inline-block mb-2">
<h5 class="fw-normal line-height-140 m-0">Andrew Palmer</h5>
<span class="font-small fw-normal">Developer - Mono</span>
</div>
<div class="d-inline-block text-golden-yellow">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
</div>
<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>
<!-- Testimonial box 4 -->
<div class="border-radius bg-white border p-4 p-lg-5">
<div class="d-lg-flex justify-content-between mb-2">
<div class="d-block d-lg-inline-block mb-2">
<h5 class="fw-normal line-height-140 m-0">Rodney Scott</h5>
<span class="font-small fw-normal">Designer - Mono</span>
</div>
<div class="d-inline-block text-golden-yellow">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
</div>
<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>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial section -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</footer>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,296 @@
<!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 - About us 2</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">
<link href="../assets/css/theme-colors/theme-color-very-peri.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 class="theme-color-very-peri preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header right header-color-dark">
<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 -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-5">
<h2 class="fw-normal">We're a team of professionals who loves what they do</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<a class="button button-lg button-rounded button-font-2 button-theme mt-4" href="#">Get In Touch</a>
</div>
<div class="col-12 col-lg-7">
<div class="row gallery-wrapper g-2">
<!-- Gallery image box 1 -->
<div class="col-6 pt-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-tall.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-2-tall.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 2 -->
<div class="col-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-tall.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-2-tall.jpg" alt="">
</a>
</div>
</div>
</div><!-- end row/gallery-wrapper -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Services section -->
<div class="container">
<div class="row g-4 icon-5xl text-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow">
<i class="bi bi-brush text-color-theme"></i>
<h5 class="fw-normal mt-2">Graphic Design</h5>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow">
<i class="bi bi-camera text-color-theme"></i>
<h5 class="fw-normal mt-2">Photography</h5>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow">
<i class="bi bi-star text-color-theme"></i>
<h5 class="fw-normal mt-2">Social Marketing</h5>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
<!-- end Services section -->
<!-- Clients section -->
<div class="section">
<div class="container">
<div class="mb-4">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="fw-normal">Our Clients</h2>
</div>
</div>
</div>
<ul class="clients-grid column-5">
<!-- 1 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 2 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 3 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 4 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 5 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 6 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 7 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 8 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 9 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 10 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
</ul>
</div><!-- end container -->
</div>
<!-- end Clients section -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-md-6 text-center text-md-start">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 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>
<!-- Scroll to top button -->
<div class="scrolltotop icon-lg">
<a class="button-circle button-circle-md button-circle-very-peri" href="#"><i class="bi bi-arrow-up-short"></i></a>
</div>
<!-- end Scroll to top button -->
<!-- ***** 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>

View File

@@ -0,0 +1,393 @@
<!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 - About us 3</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-dark">
<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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 class="display-4 m-0">We Are Mono</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-lg-6">
<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.</p>
</div>
<div class="col-12 col-lg-6">
<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
</div>
</div><!-- end row -->
<div class="row g-4 mt-2 text-center">
<!-- Counter box 1 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 2 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 3 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 4 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 5 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 6 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<div class="section pt-0">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-7">
<div class="owl-carousel owl-dots-overlay" data-owl-items="1" data-owl-autoplay="true">
<!-- Carousel item 1 -->
<div>
<img src="../assets/images/col-1.jpg" alt="">
</div>
<!-- Carousel item 2 -->
<div>
<img src="../assets/images/col-1.jpg" alt="">
</div>
<!-- Carousel item 3 -->
<div>
<img src="../assets/images/col-1.jpg" alt="">
</div>
</div>
</div>
<div class="col-12 col-lg-5 icon-5xl">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-12">
<div class="text-dark mb-3">
<i class="bi bi-globe"></i>
</div>
<h6 class="fw-medium font-small uppercase">Feature Title</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="col-12 col-md-6 col-lg-12">
<div class="text-dark mb-3">
<i class="bi bi-globe"></i>
</div>
<h6 class="fw-medium font-small uppercase">Feature Title</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- Services section -->
<div class="section pt-0">
<div class="container">
<div class="row g-4">
<!-- Service box 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-heart"></i>
</div>
<h5 class="fw-normal">Service title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-heart"></i>
</div>
<h5 class="fw-normal">Service title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-heart"></i>
</div>
<h5 class="fw-normal">Service title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-heart"></i>
</div>
<h5 class="fw-normal">Service title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-heart"></i>
</div>
<h5 class="fw-normal">Service title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-heart"></i>
</div>
<h5 class="fw-normal">Service title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Clients section -->
<div class="section-sm border-top">
<div class="container text-center">
<div class="owl-carousel" data-owl-dots="false" data-owl-margin="50" data-owl-autoplay="true" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="4" data-owl-xl="5">
<!-- Client box 1 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 2 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 3 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 4 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 5 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 6 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 7 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Testimonial section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="owl-carousel icon-2xl" data-owl-items="1" data-owl-nav="true" data-owl-autoplay="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal m-0 line-height-140">Emiley Haley</h4>
<span class="fw-normal text-white-09">Manager - Mono</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal m-0 line-height-140">Andrew Palmer</h4>
<span class="fw-normal text-white-09">Developer - Mono</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal m-0 line-height-140">Anna Mullen</h4>
<span class="fw-normal text-white-09">Designer - Mono</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
</div>
<!-- end Testimonial section -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-md-6 text-center text-md-start">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,447 @@
<!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 - About us 4</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 center header-color-dark">
<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 -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 class="fw-medium">An Award Winning Community</h1>
<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>
</div>
</div>
<div class="row">
<div class="col-12 col-md-10 offset-md-1">
<div class="owl-carousel owl-dots-overlay owl-nav-overlap" data-owl-items="1" data-owl-dots="true" data-owl-nav="true">
<!-- Slider Image 1 -->
<div>
<img class="border-radius" src="../assets/images/col-1.jpg" alt="">
</div>
<!-- Slider Image 2 -->
<div>
<img class="border-radius" src="../assets/images/col-1.jpg" alt="">
</div>
<!-- Slider Image 3 -->
<div>
<img class="border-radius" src="../assets/images/col-1.jpg" alt="">
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Pie Charts -->
<div class="section pt-0">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1">
<div class="row icon-3xl">
<div class="col-12 col-sm-6 col-lg-3">
<div class="pie-chart mb-2" data-size="140" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)" data-line-width="2">
<div class="pie-chart-content">
<i class="bi bi-megaphone text-dark"></i>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">Marketing</h6>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="pie-chart mb-2" data-size="140" data-percent="85" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)" data-line-width="2">
<div class="pie-chart-content">
<i class="bi bi-chat-text text-dark"></i>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">Consulting</h6>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="pie-chart mb-2" data-size="140" data-percent="95" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)" data-line-width="2">
<div class="pie-chart-content">
<i class="bi bi-star text-dark"></i>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">Branding</h6>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="pie-chart mb-2" data-size="140" data-percent="80" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)" data-line-width="2">
<div class="pie-chart-content">
<i class="bi bi-person-check text-dark"></i>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">Management</h6>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div>
<!-- end Pie Charts -->
<!-- Team section -->
<div class="section pt-0">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h2 class="fw-medium display-6">Meet Our Team</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<div class="row g-3 gy-4 gy-lg-5 team-wrapper border-radius" data-cues="fadeIn">
<!-- Team box 1 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Violet Walker</h5>
<span>Founder</span>
</div>
<!-- Team box 2 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
<!-- Team box 3 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Jamie Mills</h5>
<span>Creative Director</span>
</div>
<!-- Team box 4 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Winston Frank</h5>
<span>Photographer</span>
</div>
<!-- Team box 5 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Ashley Williamsan</h5>
<span>Marketing Specialist</span>
</div>
<!-- Team box 6 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Betsy Fletcher</h5>
<span>Senior Designer</span>
</div>
<!-- Team box 7 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Violet Walker</h5>
<span>Founder</span>
</div>
<!-- Team box 8 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Timeline section -->
<div class="section pt-0">
<div class="container">
<div class="timeline-wrapper" data-cues="fadeIn">
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">February 20, 2018</h6>
</div>
<div class="timeline-content">
<h5 class="fw-medium">Now we're 100</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">January 16, 2018</h6>
</div>
<div class="timeline-content">
<h5 class="fw-medium">Finished our 50th project</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">August 01, 2017</h6>
</div>
<div class="timeline-content">
<h5 class="fw-medium">Finished our first project</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">July 28, 2017</h6>
</div>
<div class="timeline-content">
<h5 class="fw-medium">Company Launch</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div><!-- end timeline-wrapper -->
</div><!-- end container -->
</div>
<!-- end Timeline 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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,436 @@
<!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 - About us 5</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">
<link href="../assets/css/theme-colors/theme-color-very-peri.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 class="theme-color-very-peri preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header right header-color-dark">
<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 -->
<!-- Hero section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-lg-6">
<h1 class="display-2 fw-semi-bold uppercase text-color-theme">Building digital brands and products</h1>
</div>
<div class="col-12 col-lg-6">
<h2 class="fw-medium mb-2">Lorem ipsum dolor sit amet, consectetur adipisicing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<!-- Counters -->
<div class="row g-4 mt-1">
<!-- Counter 1 -->
<div class="col-4">
<h1 class="fw-normal line-height-120 text-color-theme mb-0"><span class="counter">10</span>+</h1>
<p>Years of experience</p>
</div>
<!-- Counter 2 -->
<div class="col-4">
<h1 class="fw-normal line-height-120 text-color-theme mb-0"><span class="counter">300</span>+</h1>
<p>Happy Clients</p>
</div>
<!-- Counter 3 -->
<div class="col-4">
<h1 class="fw-normal line-height-120 text-color-theme mb-0"><span class="counter">144</span></h1>
<p>Projects Done</p>
</div>
<!-- end Counter 3 -->
</div><!-- end row -->
<!-- end Counters -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Image Box Icon section -->
<div class="section pt-0">
<div class="container">
<div class="img-box-icon border-radius-1 box-shadow">
<a class="lightbox-media-box border-radius icon-xl" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<img src="../assets/images/col-1-short.jpg" alt="">
<i class="bi bi-play"></i>
</a>
</div>
</div><!-- end container -->
</div>
<!-- end Image Box Icon section -->
<!-- Services section -->
<div class="section pt-0">
<div class="container text-md-center">
<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 text-center" data-cues="fadeIn">
<h6 class="d-inline-block bg-gray border-radius px-3 py-2 line-height-140 font-small uppercase letter-spacing-1 mb-3"><span class="text-color-theme">Services We Offer</span></h6>
<h2 class="fw-medium mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</h2>
</div>
</div><!-- end row -->
<div class="row g-4 g-lg-5 mt-4 icon-4xl" data-cues="fadeIn">
<!-- Services box 1 -->
<div class="col-12 col-lg-4">
<i class="bi bi-camera text-color-theme"></i>
<h5 class="fw-normal mt-2">Photoshoot</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<!-- Services box 2 -->
<div class="col-12 col-lg-4">
<i class="bi bi-globe text-color-theme"></i>
<h5 class="fw-normal mt-2">Social Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<!-- Services box 3 -->
<div class="col-12 col-lg-4">
<i class="bi bi-pen text-color-theme"></i>
<h5 class="fw-normal mt-2">Copywriting</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Clients section -->
<div class="section pt-0">
<div class="container">
<div class="owl-carousel" data-owl-dots="false" data-owl-nav="true" data-owl-autoplay="true" data-owl-margin="40" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="4" data-owl-xl="5">
<div class="client-box">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Team section -->
<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 text-center" data-cues="fadeIn">
<h6 class="d-inline-block bg-gray border-radius px-3 py-2 line-height-140 font-small uppercase letter-spacing-1 mb-3"><span class="text-color-theme">Meet Our Team</span></h6>
<h2 class="fw-medium mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo</h2>
</div>
</div><!-- end row -->
<div class="row g-3 gy-4 gy-lg-5 team-wrapper border-radius mt-0" data-cues="fadeIn">
<!-- Team box 1 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Violet Walker</h5>
<span>Founder</span>
</div>
<!-- Team box 2 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
<!-- Team box 3 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Jamie Mills</h5>
<span>Creative Director</span>
</div>
<!-- Team box 4 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Winston Frank</h5>
<span>Photographer</span>
</div>
<!-- Team box 5 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Ashley Williamsan</h5>
<span>Marketing Specialist</span>
</div>
<!-- Team box 6 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Betsy Fletcher</h5>
<span>Senior Designer</span>
</div>
<!-- Team box 7 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Violet Walker</h5>
<span>Founder</span>
</div>
<!-- Team box 8 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team 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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,312 @@
<!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 - Career Single</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 center 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 -->
<!-- Hero section -->
<div class="section-lg bg-dark">
<div class="container text-center">
<h1>Full Time: Web Developer</h1>
<ul class="list-inline">
<li><a href="#"><i class="fas fa-user-tie me-2"></i><span>Envato Pty Ltd</span></a></li>
<li><a href="#"><i class="fas fa-map-marker-alt me-2"></i><span>Melbourne, Australia</span></a></li>
</ul>
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Job Listing Details -->
<div class="section">
<div class="container">
<div class="row g-5">
<div class="col-12 col-lg-8">
<div>
<h5 class="fw-medium">Job Description</h5>
<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. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>
<div class="mt-4 mt-lg-5">
<h5 class="fw-medium">Responsibilities</h5>
<ul class="list-dash">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-4">
<h5 class="fw-medium">Requirements</h5>
<ul class="list-dash">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
</div><!-- end row -->
<div class="mt-5">
<form>
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-4">
<label class="required">First name</label>
<input type="text" required>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<label class="required">Last name</label>
<input type="text" required>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<label class="required">Phone</label>
<input type="tel" required>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<label class="required">Email address</label>
<input type="email" required>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<label>Professional title</label>
<input type="text" placeholder="e.g. 'Marketing Specialist'">
</div>
<div class="col-12 col-sm-6 col-lg-4">
<label class="required">Location</label>
<input type="text" placeholder="e.g. 'Melbourne, AUS'" required>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<label class="required">Experience</label>
<select class="custom-select w-100">
<option selected></option>
<option value="1">0-2 Years</option>
<option value="2">3-5 Years</option>
<option value="3">6-9 Years</option>
<option value="4">10+ Years</option>
</select>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<label class="required">Position Applying for</label>
<select class="custom-select w-100">
<option selected></option>
<option value="1">Creative Director</option>
<option value="2">Graphic Designer</option>
<option value="3">Marketing Specialist</option>
<option value="4">Photographer</option>
<option value="5">Recruiter</option>
<option value="6">Web Developer</option>
</select>
</div>
<div class="col-12 col-lg-4">
<label>How were you referred to us?</label>
<select class="custom-select w-100">
<option selected></option>
<option value="1">Ads</option>
<option value="2">Employee</option>
<option value="3">Friend</option>
<option value="4">Social Media</option>
<option value="5">Other</option>
</select>
</div>
<div class="col-12">
<form>
<div class="form-group">
<label for="exampleFormControlFile1" class="required">Resume file</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
</div>
<div class="col-12">
<label>Additional Information(optional)</label>
<textarea></textarea>
</div>
</div>
<button class="button button-lg button-turquoise button-radius">Submit CV</button>
</form>
</div>
</div><!-- end container -->
</div>
<!-- Job Listing Details -->
<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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,306 @@
<!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 - Careers 1</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 transparent-light">
<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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<h1 class="fw-light m-0">Careers</h1>
</div><!-- end container -->
</div>
</div>
<!-- Job Listing 1 -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-4">
<h6 class="font-small fw-medium uppercase">Web Developer</h6>
<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>
<div class="col-12 col-lg-4">
<h6 class="font-small fw-medium uppercase">Responsibilities:</h6>
<ul class="list-unstyled">
<li><i class="bi bi-check pe-2"></i>First</li>
<li><i class="bi bi-check pe-2"></i>Second</li>
<li><i class="bi bi-check pe-2"></i>Third</li>
<li><i class="bi bi-check pe-2"></i>Fourth</li>
</ul>
</div>
<div class="col-12 col-lg-4">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-unstyled">
<li><i class="bi bi-check pe-2"></i>First</li>
<li><i class="bi bi-check pe-2"></i>Second</li>
<li><i class="bi bi-check pe-2"></i>Third</li>
<li><i class="bi bi-check pe-2"></i>Fourth</li>
</ul>
</div>
</div><!-- end row -->
<div class="mt-4">
<a class="button button-md button-radius button-turquoise" href="#">Apply Now</a>
</div>
</div><!-- end container -->
</div>
<!-- ene Job Listing 1 -->
<!-- Job Listing 2 -->
<div class="section border-top">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-4">
<h6 class="font-small fw-medium uppercase">Project Manager</h6>
<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>
<div class="col-12 col-lg-4">
<h6 class="font-small fw-medium uppercase">Responsibilities:</h6>
<ul class="list-unstyled">
<li><i class="bi bi-check pe-2"></i>First</li>
<li><i class="bi bi-check pe-2"></i>Second</li>
<li><i class="bi bi-check pe-2"></i>Third</li>
<li><i class="bi bi-check pe-2"></i>Fourth</li>
</ul>
</div>
<div class="col-12 col-lg-4">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-unstyled">
<li><i class="bi bi-check pe-2"></i>First</li>
<li><i class="bi bi-check pe-2"></i>Second</li>
<li><i class="bi bi-check pe-2"></i>Third</li>
<li><i class="bi bi-check pe-2"></i>Fourth</li>
</ul>
</div>
</div><!-- end row -->
<div class="mt-4">
<a class="button button-md button-radius button-turquoise" href="#">Apply Now</a>
</div>
</div><!-- end container -->
</div>
<!-- ene Job Listing 2 -->
<!-- Job Listing 3 -->
<div class="section border-top">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-4">
<h6 class="font-small fw-medium uppercase">Creative Director</h6>
<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>
<div class="col-12 col-lg-4">
<h6 class="font-small fw-medium uppercase">Responsibilities:</h6>
<ul class="list-unstyled">
<li><i class="bi bi-check pe-2"></i>First</li>
<li><i class="bi bi-check pe-2"></i>Second</li>
<li><i class="bi bi-check pe-2"></i>Third</li>
<li><i class="bi bi-check pe-2"></i>Fourth</li>
</ul>
</div>
<div class="col-12 col-lg-4">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-unstyled">
<li><i class="bi bi-check pe-2"></i>First</li>
<li><i class="bi bi-check pe-2"></i>Second</li>
<li><i class="bi bi-check pe-2"></i>Third</li>
<li><i class="bi bi-check pe-2"></i>Fourth</li>
</ul>
</div>
</div><!-- end row -->
<div class="mt-4">
<a class="button button-md button-radius button-turquoise" href="#">Apply Now</a>
</div>
</div><!-- end container -->
</div>
<!-- ene Job Listing 3 -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<h2 class="fw-light">Send your CV via our email</h2>
<a class="button button-xl button-reveal-left-outline-white button-rounded mt-3" href="#"><i class="bi bi-envelope"></i><span>Get In Touch</span></a>
</div>
</div>
</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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,295 @@
<!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 - Careers 2</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-dark">
<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-lg bg-image bg-fade-white-top parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-07">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1>Come and work with us</h1>
<p class="lead">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<div class="section-lg pt-0">
<div class="container">
<div class="masonry column-2 spacing-3">
<!-- 1 -->
<div class="masonry-item">
<div class="bg-white border-radius border p-4 p-lg-5 box-shadow">
<h4 class="fw-normal m-0">Web Developer</h4>
<div class="mb-2 mb-lg-3 text-dark-03">
<p><i class="fas fa-map-marker-alt me-2"></i><span>Remote</span></p>
</div>
<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.</p>
<div class="mt-3">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-dash">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
<div class="text-end mt-2 mt-lg-3">
<a class="button button-md button-font-2 button-rounded button-turquoise" href="#">Apply Now</a>
</div>
</div>
</div>
<!-- 2 -->
<div class="masonry-item">
<div class="bg-white border-radius border p-4 p-lg-5 box-shadow">
<h4 class="fw-normal m-0">Project Manager</h4>
<div class="mb-2 mb-lg-3 text-dark-03">
<p><i class="fas fa-map-marker-alt me-2"></i><span>Melbourne, AUS</span></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<div class="mt-3">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-dash">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
<div class="text-end mt-2 mt-lg-3">
<a class="button button-md button-font-2 button-rounded button-turquoise" href="#">Apply Now</a>
</div>
</div>
</div>
<!-- 3 -->
<div class="masonry-item">
<div class="bg-white border-radius border p-4 p-lg-5 box-shadow">
<h4 class="fw-normal m-0">Graphic Designer</h4>
<div class="mb-2 mb-lg-3 text-dark-03">
<p><i class="fas fa-map-marker-alt me-2"></i><span>Remote</span></p>
</div>
<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.</p>
<div class="mt-3">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-dash">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
<div class="text-end mt-2 mt-lg-3">
<a class="button button-md button-font-2 button-rounded button-turquoise" href="#">Apply Now</a>
</div>
</div>
</div>
<!-- 4 -->
<div class="masonry-item">
<div class="bg-white border-radius border p-4 p-lg-5 box-shadow">
<h4 class="fw-normal m-0">Photographer</h4>
<div class="mb-2 mb-lg-3 text-dark-03">
<p><i class="fas fa-map-marker-alt me-2"></i><span>Melbourne, AUS</span></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<div class="mt-3">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-dash">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
<div class="text-end mt-2 mt-lg-3">
<a class="button button-md button-font-2 button-rounded button-turquoise" href="#">Apply Now</a>
</div>
</div>
</div>
<!-- end 4 -->
</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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,276 @@
<!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 - Careers 3</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-dark">
<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 -->
<!-- Hero section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06 section-divider-wavesOpacity-bottom">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1>Come and work with us</h1>
<p class="lead">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Job Listings section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-10 offset-lg-1">
<!-- Job Listing 1 -->
<div class="p-5 border border-radius hover-shadow">
<h4 class="fw-normal m-0">Web Developer</h4>
<div class="mb-2 mb-lg-3 text-dark-03">
<p><i class="fas fa-map-marker-alt me-2"></i><span>Remote</span></p>
</div>
<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. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<div class="mt-3">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-dash">
<li>PHP programming experience</li>
<li>JavaScript programming experience</li>
<li>Self-driven and solution oriented</li>
<li>Graphical user interface design experience</li>
<li>3+ years of hands-on experience with web development</li>
</ul>
</div>
<div class="text-end mt-2 mt-lg-3">
<a class="button button-md button-rounded button-font-2 button-turquoise" href="#">Apply Now</a>
</div>
</div>
<!-- Job Listing 2 -->
<div class="p-5 border border-radius hover-shadow mt-5">
<h4 class="fw-normal m-0">Project Manager</h4>
<div class="mb-2 mb-lg-3 text-dark-03">
<p><i class="fas fa-map-marker-alt me-2"></i><span>Melbourne, AUS</span></p>
</div>
<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. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<div class="mt-3">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-dash">
<li>Native-level proficiency in spoken and written English</li>
<li>Ability to travel on short notice</li>
<li>Self-driven and solution oriented</li>
<li>Impeccable attention to detail</li>
<li>3+ years of hands-on experience with project management</li>
</ul>
</div>
<div class="text-end mt-2 mt-lg-3">
<a class="button button-md button-rounded button-font-2 button-turquoise" href="#">Apply Now</a>
</div>
</div>
<!-- Job Listing 3 -->
<div class="p-5 border border-radius hover-shadow mt-5">
<h4 class="fw-normal m-0">Creative Director</h4>
<div class="mb-2 mb-lg-3 text-dark-03">
<p><i class="fas fa-map-marker-alt me-2"></i><span>Melbourne, AUS</span></p>
</div>
<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. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<div class="mt-3">
<h6 class="font-small fw-medium uppercase">Requirements:</h6>
<ul class="list-dash">
<li>Native-level proficiency in spoken and written English</li>
<li>Ability to travel on short notice</li>
<li>Self-driven and solution oriented</li>
<li>Impeccable attention to detail</li>
<li>3+ years of hands-on experience with project management</li>
</ul>
</div>
<div class="text-end mt-2 mt-lg-3">
<a class="button button-md button-rounded button-font-2 button-turquoise" href="#">Apply Now</a>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Job Listings 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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,274 @@
<!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 - Careers 4</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-dark">
<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 -->
<!-- Hero section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1>Come and work with us</h1>
<p class="lead">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Job Listings section -->
<div class="section">
<div class="container">
<!-- Job Listing 1 -->
<div class="py-4 py-5 border-bottom">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-8">
<h5 class="fw-normal m-0"><a class="text-link-2" href="#">Full Time: Creative Director</a></h5>
<h6 class="font-small fw-normal uppercase"><a class="text-link-0" href="#">Envato Pty Ltd</a></h6>
<p class="text-dark-03"><i class="fas fa-map-marker-alt me-2"></i><span>Melbourne, AUS</span></p>
</div>
<div class="col-12 col-lg-4 text-lg-end">
<a class="button button-md button-radius button-dark" href="#">Apply Now</a>
</div>
</div><!-- end row -->
</div>
<!-- Job Listing 2 -->
<div class="py-4 py-5 border-bottom">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-8">
<h5 class="fw-normal m-0"><a class="text-link-2" href="#">Full Time: Web Developer</a></h5>
<h6 class="font-small fw-normal uppercase"><a class="text-link-0" href="#">Envato Pty Ltd</a></h6>
<p class="text-dark-03"><i class="fas fa-map-marker-alt me-2"></i><span>Remote</span></p>
</div>
<div class="col-12 col-lg-4 text-lg-end">
<a class="button button-md button-radius button-dark" href="#">Apply Now</a>
</div>
</div><!-- end row -->
</div>
<!-- Job Listing 3 -->
<div class="py-4 py-5 border-bottom">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-8">
<h5 class="fw-normal m-0"><a class="text-link-2" href="#">Full Time: Marketing Specialist</a></h5>
<h6 class="font-small fw-normal uppercase"><a class="text-link-0" href="#">Envato Pty Ltd</a></h6>
<p class="text-dark-03"><i class="fas fa-map-marker-alt me-2"></i><span>Melbourne, AUS</span></p>
</div>
<div class="col-12 col-lg-4 text-lg-end">
<a class="button button-md button-radius button-dark" href="#">Apply Now</a>
</div>
</div><!-- end row -->
</div>
<!-- Job Listing 4 -->
<div class="py-4 py-5 border-bottom">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-8">
<h5 class="fw-normal m-0"><a class="text-link-2" href="#">Part Time: Photographer</a></h5>
<h6 class="font-small fw-normal uppercase"><a class="text-link-0" href="#">Envato Pty Ltd</a></h6>
<p class="text-dark-03"><i class="fas fa-map-marker-alt me-2"></i><span>Melbourne, AUS</span></p>
</div>
<div class="col-12 col-lg-4 text-lg-end">
<a class="button button-md button-radius button-dark" href="#">Apply Now</a>
</div>
</div><!-- end row -->
</div>
<!-- Job Listing 5 -->
<div class="py-4 py-5">
<div class="row g-3 align-items-center">
<div class="col-12 col-lg-8">
<h5 class="fw-normal m-0"><a class="text-link-2" href="#">Full Time: Graphic Designer</a></h5>
<h6 class="font-small fw-normal uppercase"><a class="text-link-0" href="#">Envato Pty Ltd</a></h6>
<p class="text-dark-03"><i class="fas fa-map-marker-alt me-2"></i><span>Remote</span></p>
</div>
<div class="col-12 col-lg-4 text-lg-end">
<a class="button button-md button-radius button-dark" href="#">Apply Now</a>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
</div>
<!-- end Job Listings 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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,312 @@
<!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 - Clients 1</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-dark">
<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 -->
<!-- Clients section -->
<div class="section-lg">
<div class="container">
<div class="row text-center">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
<h1 class="fw-normal">Our Amazing Clients</h1>
<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>
</div><!-- end row -->
<ul class="clients-grid column-5 mt-5">
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
</ul>
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Testimonial section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-04">
<div class="container">
<div class="mb-5 text-center">
<h6 class="fw-normal uppercase letter-spacing-2">What People Say?</h6>
</div>
<div class="owl-carousel" data-owl-margin="30" data-owl-xs="1" data-owl-sm="1" data-owl-md="1" data-owl-lg="2" data-owl-xl="2" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="bg-dark-03 backdrop-filter-blur border-radius p-4">
<div class="d-flex align-items-center mb-3">
<div class="d-inline-block me-3">
<img class="img-mask-avatar-sm" src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="d-inline-block">
<h5 class="fw-normal m-0 line-height-140">Emiley Haley</h5>
<span class="font-small fw-normal text-white-09">Manager - Mono</span>
</div>
</div>
<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>
<!-- Testimonial box 2 -->
<div class="bg-dark-03 backdrop-filter-blur border-radius p-4">
<div class="d-flex align-items-center mb-3">
<div class="d-inline-block me-3">
<img class="img-mask-avatar-sm" src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="d-inline-block">
<h5 class="fw-normal m-0 line-height-140">Andrew Palmer</h5>
<span class="font-small fw-normal text-white-09">Manager - Mono</span>
</div>
</div>
<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>
<!-- Testimonial box 3 -->
<div class="bg-dark-03 backdrop-filter-blur border-radius p-4">
<div class="d-flex align-items-center mb-3">
<div class="d-inline-block me-3">
<img class="img-mask-avatar-sm" src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="d-inline-block">
<h5 class="fw-normal m-0 line-height-140">Anna Mullen</h5>
<span class="font-small fw-normal text-white-09">Manager - Mono</span>
</div>
</div>
<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>
<!-- Testimonial box 4 -->
<div class="bg-dark-03 backdrop-filter-blur border-radius p-4">
<div class="d-flex align-items-center mb-3">
<div class="d-inline-block me-3">
<img class="img-mask-avatar-sm" src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="d-inline-block">
<h5 class="fw-normal m-0 line-height-140">John Smith</h5>
<span class="font-small fw-normal text-white-09">Manager - Mono</span>
</div>
</div>
<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>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end Testimonial 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>&copy; 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>

View File

@@ -0,0 +1,265 @@
<!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 - Clients 2</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 center header-color-dark">
<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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<h1 class="display-4 font-family-outfit fw-light m-0">Meet Our Clients</h1>
</div><!-- end container -->
</div>
</div>
<div class="section">
<div class="container">
<div class="row g-4 text-center text-sm-start">
<div class="col-12 col-lg-6">
<div class="row align-items-center g-4 gy-lg-5">
<!-- Client 1 -->
<div class="col-12 col-md-6">
<div class="border border-radius p-4 px-md-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6">
<h5 class="fw-medium">Company Name</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- Client 2 -->
<div class="col-12 col-md-6">
<div class="border border-radius p-4 px-md-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6">
<h5 class="fw-medium">Company Name</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- Client 3 -->
<div class="col-12 col-md-6">
<div class="border border-radius p-4 px-md-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6">
<h5 class="fw-medium">Company Name</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- end Client 3 -->
</div><!-- end row(inner 1) -->
</div>
<div class="col-12 col-lg-6">
<div class="row align-items-center g-4 gy-lg-5">
<!-- Client 4 -->
<div class="col-12 col-md-6">
<div class="border border-radius p-4 px-md-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6">
<h5 class="fw-medium">Company Name</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- Client 5 -->
<div class="col-12 col-md-6">
<div class="border border-radius p-4 px-md-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6">
<h5 class="fw-medium">Company Name</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- Client 6 -->
<div class="col-12 col-md-6">
<div class="border border-radius p-4 px-md-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6">
<h5 class="fw-medium">Company Name</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- end Client 6 -->
</div><!-- end row(inner 2) -->
</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>&copy; 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>

View File

@@ -0,0 +1,221 @@
<!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 - Clients 3</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 center header-color-dark">
<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-lg bg-image bg-fade-white-top parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-08">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h1 class="fw-light">Our Amazing Clients</h1>
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="row g-4 text-center">
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white border border-radius box-shadow p-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white border border-radius box-shadow p-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white border border-radius box-shadow p-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white border border-radius box-shadow p-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white border border-radius box-shadow p-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white border border-radius box-shadow p-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white border border-radius box-shadow p-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white border border-radius box-shadow p-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<div class="bg-white border border-radius box-shadow p-5">
<a href="#"><img src="../assets/images/col-3.jpg" alt=""></a>
</div>
</div>
</div><!-- end row -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-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>

View File

@@ -0,0 +1,263 @@
<!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 - Contact 1</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">
<!-- Custom Cursor -->
<div class="cursor-style-2" id="cursor"></div>
<!-- end Custom Cursor -->
<!-- Header -->
<div class="header right header-color-dark">
<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-image parallax section-divider-curve-bottom" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<h1 class="display-5 fw-normal m-0">Contact Us</h1>
</div><!-- end container -->
</div>
</div>
<!-- Contact Info section -->
<div class="container">
<div class="n-margin-4 bg-white-09 backdrop-filter-blur p-4 p-lg-5 border-radius box-shadow">
<div class="row icon-4xl">
<!-- Contact Info box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-envelope text-dark mb-3"></i>
<h6 class="fw-medium m-0">Email:</h6>
<p>contact@email.com</p>
</div>
<!-- Contact Info box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-telephone text-dark mb-3"></i>
<h6 class="fw-medium m-0">Phone:</h6>
<p>+(987) 654 321 01</p>
</div>
<!-- Contact Info box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-skype text-dark mb-3"></i>
<h6 class="fw-medium m-0">Skype:</h6>
<p>contact.skype</p>
</div>
<!-- Contact Info box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-pin-map text-dark mb-3"></i>
<h6 class="fw-medium m-0">Address:</h6>
<p>121 King St, Melbourne VIC 3000</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Contact Info section -->
<!-- Contact Form section -->
<div class="section">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="contact-form">
<form method="post" id="contactform">
<div class="row gx-3 gy-0">
<div class="col-12 col-sm-6">
<input type="text" id="name" name="name" placeholder="Name" required>
</div>
<div class="col-12 col-sm-6">
<input type="email" id="email" name="email" placeholder="E-Mail" required>
</div>
</div>
<input type="text" id="subject" name="subject" placeholder="Subject" required>
<textarea name="message" id="message" placeholder="Message"></textarea>
<button class="button button-lg button-rounded button-outline-dark" type="submit">Send Message</button>
</form>
<!-- Submit result -->
<div class="submit-result">
<span id="success">Thank you! Your Message has been sent.</span>
<span id="error">Something went wrong, Please try again!</span>
</div>
</div><!-- end contact-form -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Contact Form section -->
<!-- Google Maps -->
<div class="container-fluid p-0">
<div id="map1" class="gmap gmap-lg" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div><!-- end container-fluid -->
<!-- end Google Maps -->
<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>&copy; 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>

View File

@@ -0,0 +1,216 @@
<!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 - Contact 2</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">
<!-- Custom Cursor -->
<div class="cursor-style-2" id="cursor"></div>
<!-- end Custom Cursor -->
<!-- Header -->
<div class="header right transparent-light">
<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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<h1 class="fw-light m-0">Contact Us</h1>
</div><!-- end container -->
</div>
</div>
<!-- Google Maps section -->
<div class="container">
<div class="n-margin-4">
<div id="map1" class="gmap gmap-md box-shadow border-radius-1" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div><!-- end container -->
</div>
<!-- end Google Maps section -->
<!-- Contact section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-4">
<div class="mb-4">
<h6 class="fw-medium m-0">Phone:</h6>
<p>+(987) 654 321 01</p>
</div>
<div class="mb-4">
<h6 class="fw-medium m-0">Email:</h6>
<p>contact@email.com</p>
</div>
<div>
<h6 class="fw-medium m-0">Address:</h6>
<p>121 King St, Melbourne VIC 3000</p>
</div>
</div>
<div class="col-12 col-md-8">
<div class="contact-form text-md-end">
<form method="post" id="contactform">
<div class="row gx-3 gy-0">
<div class="col-12 col-sm-6">
<input type="text" id="name" name="name" placeholder="Name" required>
</div>
<div class="col-12 col-sm-6">
<input type="email" id="email" name="email" placeholder="E-Mail" required>
</div>
</div>
<input type="text" id="subject" name="subject" placeholder="Subject" required>
<textarea name="message" id="message" placeholder="Message"></textarea>
<button class="button button-lg button-rounded button-outline-dark" type="submit">Send Message</button>
</form>
<!-- Submit result -->
<div class="submit-result">
<span id="success">Thank you! Your Message has been sent.</span>
<span id="error">Something went wrong, Please try again!</span>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Contact section -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-md-6 text-center text-md-start">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 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>

View File

@@ -0,0 +1,206 @@
<!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 - Contact 3</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">
<!-- Custom Cursor -->
<div class="cursor-style-2" id="cursor"></div>
<!-- end Custom Cursor -->
<!-- Header -->
<div class="header right header-color-dark">
<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 -->
<!-- Google Maps -->
<div class="container-fluid p-0">
<div id="map1" class="gmap gmap-lg" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div>
<!-- end Google Maps -->
<!-- Contact section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-4">
<div class="mb-4">
<h6 class="fw-medium m-0">Phone:</h6>
<p>+(987) 654 321 01</p>
</div>
<div class="mb-4">
<h6 class="fw-medium m-0">Email:</h6>
<p>contact@email.com</p>
</div>
<div>
<h6 class="fw-medium m-0">Address:</h6>
<p>121 King St, Melbourne VIC 3000</p>
</div>
</div>
<div class="col-12 col-md-8">
<div class="contact-form text-md-end">
<form method="post" id="contactform">
<div class="row gx-3 gy-0">
<div class="col-12 col-sm-6">
<input type="text" id="name" name="name" placeholder="Name" required>
</div>
<div class="col-12 col-sm-6">
<input type="email" id="email" name="email" placeholder="E-Mail" required>
</div>
</div>
<input type="text" id="subject" name="subject" placeholder="Subject" required>
<textarea name="message" id="message" placeholder="Message"></textarea>
<button class="button button-lg button-backdrop-dark" type="submit">Send Message</button>
</form>
<!-- Submit result -->
<div class="submit-result">
<span id="success">Thank you! Your Message has been sent.</span>
<span id="error">Something went wrong, Please try again!</span>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Contact section -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-md-6 text-center text-md-start">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 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>

View File

@@ -0,0 +1,195 @@
<!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 - Contact 4</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-dark">
<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 -->
<!-- Google Maps section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1>Get In Touch</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
</div>
<div id="map1" class="gmap gmap-lg" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div><!-- end container -->
</div>
<!-- end Google Maps section -->
<!-- Contact Info section -->
<div class="section pt-0">
<div class="container">
<div class="row text-center icon-5xl">
<div class="col-12 col-sm-6 col-md-4">
<i class="bi bi-envelope text-dark mb-3"></i>
<h5 class="fw-normal">Email</h5>
<p>contact@email.com</p>
</div>
<div class="col-12 col-sm-6 col-md-4">
<i class="bi bi-telephone text-dark mb-3"></i>
<h5 class="fw-normal">Phone</h5>
<p>+(987) 654 321 01</p>
</div>
<div class="col-12 col-sm-6 col-md-4">
<i class="bi bi-pin-map text-dark mb-3"></i>
<h5 class="fw-normal">Address</h5>
<p>121 King St, Melbourne VIC 3000</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Contact Info section -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-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>

View File

@@ -0,0 +1,201 @@
<!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 - Contact 5</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 transparent-light">
<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-image parallax section-divider-curve-bottom" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<h1 class="fw-normal m-0">Contact Us</h1>
</div><!-- end container -->
</div>
</div>
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="display-5 fw-light mb-3">Say Hello!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 text-center">
<!-- Contact Form -->
<div class="contact-form">
<form method="post" id="contactform">
<div class="row gx-3 gy-0">
<div class="col-12 col-sm-6">
<input type="text" id="name" name="name" placeholder="Name" required>
</div>
<div class="col-12 col-sm-6">
<input type="email" id="email" name="email" placeholder="E-Mail" required>
</div>
</div>
<input type="text" id="subject" name="subject" placeholder="Subject" required>
<textarea name="message" id="message" placeholder="Message"></textarea>
<button class="button button-lg button-rounded button-turquoise" type="submit">Send Message</button>
</form>
<!-- Submit result -->
<div class="submit-result">
<span id="success">Thank you! Your Message has been sent.</span>
<span id="error">Something went wrong, Please try again!</span>
</div>
</div><!-- end contact-form -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-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>

View File

@@ -0,0 +1,219 @@
<!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 - Contact 6</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-dark">
<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 -->
<!-- Contact section -->
<div class="section">
<div class="container">
<!-- Contact Info -->
<div class="row icon-4xl">
<!-- Contact Info box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-envelope text-dark mb-3"></i>
<h6 class="fw-medium m-0">Email:</h6>
<p>contact@email.com</p>
</div>
<!-- Contact Info box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-telephone text-dark mb-3"></i>
<h6 class="fw-medium m-0">Phone:</h6>
<p>+(987) 654 321 01</p>
</div>
<!-- Contact Info box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-skype text-dark mb-3"></i>
<h6 class="fw-medium m-0">Skype:</h6>
<p>contact.skype</p>
</div>
<!-- Contact Info box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-pin-map text-dark mb-3"></i>
<h6 class="fw-medium m-0">Address:</h6>
<p>121 King St, Melbourne VIC 3000</p>
</div>
</div><!-- end row -->
<!-- end Contact Info -->
<!-- Contact Form -->
<div class="mt-5">
<div class="contact-form">
<form method="post" id="contactform">
<div class="row gx-3 gy-0">
<div class="col-12 col-sm-6">
<input class="border-radius" type="text" id="name" name="name" placeholder="Name" required>
</div>
<div class="col-12 col-sm-6">
<input class="border-radius" type="email" id="email" name="email" placeholder="E-Mail" required>
</div>
</div>
<input class="border-radius" type="text" id="subject" name="subject" placeholder="Subject" required>
<textarea class="border-radius" name="message" id="message" placeholder="Message"></textarea>
<button class="button button-lg button-backdrop-dark" type="submit">Send Message</button>
</form>
<!-- Submit result -->
<div class="submit-result">
<span id="success">Thank you! Your Message has been sent.</span>
<span id="error">Something went wrong, Please try again!</span>
</div>
</div><!-- end contact-form -->
</div>
<!-- end Contact Form -->
</div><!-- end container -->
</div>
<!-- end Contact section -->
<!-- Google Maps -->
<div class="container-fluid p-0">
<div id="map1" class="gmap gmap-lg" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div>
<!-- end Google Maps -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-md-6 text-center text-md-start">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 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>

View File

@@ -0,0 +1,284 @@
<!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 - FAQ 1</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 transparent-light">
<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-image parallax section-divider-wavesOpacity-bottom" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<h1 class="fw-light m-0">FAQ 1</h1>
</div><!-- end container -->
</div>
</div>
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-12 col-lg-6">
<ul class="accordion single-open rounded">
<li class="active">
<div class="accordion-title">
<h6 class="font-small fw-medium uppercase">First Question?</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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 Question?</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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 Question?</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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">Fourth Question?</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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">Fifth Question?</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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">Sixth Question?</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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-mediumuppercase">Seventh Question?</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</li>
</ul>
</div>
<div class="col-12 col-lg-6">
<div class="mb-4">
<h4>Refund Policy</h4>
</div>
<div>
<h5 class="fw-normal">I bought this template then changed my mind</h5>
<p>Unfortunately, Once you download the template package you're not able to get a refund.</p>
</div>
<div class="mt-4">
<h5 class="fw-normal">I mistakenly bought this template</h5>
<p>If you haven't downloaded the template package then you can get a refund.</p>
</div>
<div class="mt-4">
<h5 class="fw-normal">What i shouldn't do?</h5>
<p>You shouldn't include this template for your selling product or directly resell it to someone.</p>
</div>
<div class="mt-4">
<h5 class="fw-normal">Do i have to provide attribution?</h5>
<p>No you don't have to.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<div class="section pt-0">
<div class="container">
<div class="bg-light-golden-yellow p-4 p-lg-5 border-radius-1">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">First Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Second Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Third Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Fourth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Fifth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Sixth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
</div>
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-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>

View File

@@ -0,0 +1,279 @@
<!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 - FAQ 2</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 center header-color-dark">
<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 -->
<!-- Hero section -->
<div class="section-lg bg-gray-lighter section-divider-curve-bottom">
<div class="container text-center">
<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">
<h1 class="display-3">FAQ's</h1>
<p class="font-large">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<div class="container n-margin-6">
<div class="row g-4 g-lg-5 icon-5xl">
<div class="col-12 col-lg-6">
<div class="bg-gradient-1 box-shadow border-radius hover-float p-4 p-lg-5">
<i class="bi bi-person text-white"></i>
<h4 class="mt-2">Customer Care</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</p>
<a class="button-text-2 mt-3" href="#">Learn more</a>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="bg-gradient-6 box-shadow border-radius hover-float p-4 p-lg-5">
<i class="bi bi-envelope text-white"></i>
<h4 class="mt-2">Get In Touch</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</p>
<a class="button-text-2 mt-3" href="#">Contact us</a>
</div>
</div>
</div><!-- end row -->
</div>
<!-- FAQ Accordion section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-5 col-lg-4 order-lg-2">
<div class="row g-4">
<div class="col-12">
<h5 class="fw-medium">First Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-12">
<h5 class="fw-medium">Second Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-12">
<h5 class="fw-medium">Third Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="col-12 col-md-7 col-lg-8 order-lg-1">
<ul class="accordion single-open">
<li class="active">
<div class="accordion-title">
<h6 class="font-small uppercase fw-medium letter-spacing-1">First Title</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h6 class="font-small uppercase fw-medium letter-spacing-1">Second Title</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h6 class="font-small uppercase fw-medium letter-spacing-1">Third Title</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h6 class="font-small uppercase fw-medium letter-spacing-1">Fourth Title</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h6 class="font-small uppercase fw-medium letter-spacing-1">Fifth Title</h6>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end FAQ Accordion section -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-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>

View 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 - Prices 1</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-dark">
<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 -->
<!-- Title section -->
<div class="section-lg bg-gray-lighter section-divider-curve-bottom">
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h1 class="display-4">Pricing Table</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Integer tincidunt.</p>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Title section -->
<!-- Prices section -->
<div class="container">
<div class="n-margin-6">
<div class="row g-4 text-center">
<!-- Price box 1 -->
<div class="col-12 col-md-4">
<div class="bg-white-09 backdrop-filter-blur box-shadow hover-float border-radius p-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1 text-gradient-6">Personal</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$29.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-gradient-6 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 2 -->
<div class="col-12 col-md-4">
<div class="bg-white-09 backdrop-filter-blur box-shadow hover-float border-radius p-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1 text-gradient-6">Team</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$49.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-gradient-6 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 3 -->
<div class="col-12 col-md-4">
<div class="bg-white-09 backdrop-filter-blur box-shadow hover-float border-radius p-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1 text-gradient-6">Business</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$69.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-gradient-6 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Prices section -->
<!-- FAQ section -->
<div class="section">
<div class="container">
<div class="mb-5 text-center">
<h3>Frequently Asked Questions</h3>
</div>
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">First Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Second Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Third Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Fourth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Fifth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium">Sixth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end FAQ section -->
<!-- Testimonial section -->
<div class="section-sm pt-0">
<div class="container">
<div class="bg-light-blue bg-fade-white-top p-4 p-lg-5 border-radius-1">
<div class="owl-carousel icon-2xl" data-owl-items="1" data-owl-nav="true" data-owl-autoplay="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-dark mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Emiley Haley</h5>
<span class="font-small fw-normal text-dark-09">Manager - Mono</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-dark mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Andrew Palmer</h5>
<span class="font-small fw-normal text-dark-09">Developer - Mono</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-dark mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Anna Mullen</h5>
<span class="font-small fw-normal text-dark-09">Designer - Mono</span>
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end container -->
</div>
<!-- end Testimonial section -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-3">
<h3>mono</h3>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h6 class="font-small fw-normal uppercase">Useful Links</h6>
<ul class="list-dash">
<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-12 col-md-6 col-lg-3">
<h6 class="font-small fw-normal uppercase">Additional Links</h6>
<ul class="list-dash">
<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-12 col-md-6 col-lg-3">
<h6 class="font-small fw-normal 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(1) -->
<hr class="mt-5 mb-4">
<div class="row g-4">
<div class="col-12 col-md-6 text-center text-md-start">
<p>&copy; 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(2) -->
</div><!-- end container -->
</div><!-- end footer -->
</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>

View File

@@ -0,0 +1,265 @@
<!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 - Prices 2</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-dark">
<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="bg-gradient-2 bg-fade-white-top">
<div class="bg-white-01">
<div class="section-lg pb-0">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
<h1 class="display-4 font-family-outfit fw-medium text-dark">Pricing Table</h1>
<p class="text-dark-06">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- Prices section -->
<div class="section">
<div class="container">
<div class="row g-4 text-center">
<!-- Price box 1 -->
<div class="col-12 col-md-4">
<div class="bg-white box-shadow hover-float border-radius p-4 mt-lg-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1"><span class="text-gradient-6">Personal</span></h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$29.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-gradient-6 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 2 -->
<div class="col-12 col-md-4">
<div class="bg-white box-shadow hover-float border-radius p-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1"><span class="text-gradient-6">Team</span></h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$49.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-gradient-6 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 3 -->
<div class="col-12 col-md-4">
<div class="bg-white box-shadow hover-float border-radius p-4 mt-lg-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1"><span class="text-gradient-6">Business</span></h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$69.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-gradient-6 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Prices section -->
</div>
</div>
<!-- FAQ section -->
<div class="section-lg pt-0">
<div class="container">
<div class="mb-5 text-center">
<h3>Frequently Asked Questions</h3>
</div>
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-normal">First Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-normal">Second Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-normal">Third Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-normal">Fourth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-normal">Fifth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-normal">Sixth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end FAQ section -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-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>

View File

@@ -0,0 +1,312 @@
<!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 - Prices 3</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 transparent-light">
<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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06 section-divider-curve-bottom">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
<h1 class="fw-normal">Pricing Table</h1>
<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>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- Prices section -->
<div class="n-margin-5">
<div class="container">
<div class="row g-4 text-center">
<!-- Price box 1 -->
<div class="col-12 col-md-4">
<div class="bg-white-09 backdrop-filter-blur box-shadow hover-float border-radius p-4 py-lg-5 mt-lg-3">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Personal</h6>
<div class="mt-3 mt-lg-4">
<h1 class="line-height-100 fw-medium mb-0">$29.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-turquoise button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 2 -->
<div class="col-12 col-md-4">
<div class="bg-white-09 backdrop-filter-blur box-shadow hover-float border-radius p-4 py-lg-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Team</h6>
<div class="mt-3 mt-lg-4">
<h1 class="line-height-100 fw-medium mb-0">$49.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-turquoise button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 3 -->
<div class="col-12 col-md-4">
<div class="bg-white-09 backdrop-filter-blur box-shadow hover-float border-radius p-4 py-lg-5 mt-lg-3">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Business</h6>
<div class="mt-3 mt-lg-4">
<h1 class="line-height-100 fw-medium mb-0">$69.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-turquoise button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Prices section -->
<!-- FAQ section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-6">
<h5 class="fw-medium">First Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-medium">Second Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-medium">Third Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-medium">Fourth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end FAQ section -->
<!-- Testimonial section -->
<div class="section border-top">
<div class="container">
<div class="mb-5 text-center">
<h2 class="display-6 font-family-outfit fw-normal">What People Say?</h2>
</div>
<div class="owl-carousel" data-owl-items="1" data-owl-dots="false" data-owl-nav="true" data-owl-autoplay="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<p class="mb-4">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal m-0 line-height-140">Emily Haley</h5>
<span class="fw-normal font-small">Manager - Mono</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<p class="mb-4">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal m-0 line-height-140">Andrew Palmer</h5>
<span class="fw-normal font-small">Developer - Mono</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<p class="mb-4">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal m-0 line-height-140">Anna Mullen</h5>
<span class="fw-normal font-small">Designer - Mono</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial 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>&copy; 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>

View File

@@ -0,0 +1,300 @@
<!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 - Prices 4</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">
<link href="../assets/css/theme-colors/theme-color-turquoise.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 class="theme-color-turquoise preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header right header-color-dark">
<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 -->
<!-- Prices section -->
<div class="section-sm bg-gray-lighter">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-5">
<h1 class="fw-medium">Pricing Plans</h1>
<p>Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<a class="button-text-3 mt-4" href="#">Get In Touch</a>
</div>
<div class="col-12 col-lg-7">
<div class="row g-4">
<!-- Price box 1 -->
<div class="col-12 col-md-6">
<div class="bg-white box-shadow hover-float border-radius p-4 p-lg-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1 text-color-theme">Personal</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$29.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-theme button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 2 -->
<div class="col-12 col-md-6">
<div class="bg-white box-shadow hover-float border-radius p-4 p-lg-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1 text-color-theme">Team</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$49.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Unlimited User</li>
<li>Unlimited Storage</li>
<li>24/7 Support</li>
<li>Future Updates</li>
</ul>
<a class="button button-md button-theme button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div>
<!-- end Prices section -->
<!-- FAQ section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium text-color-theme">First Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium text-color-theme">Second Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium text-color-theme">Third Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium text-color-theme">Fourth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium text-color-theme">Fifth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h5 class="fw-medium text-color-theme">Sixth Question?</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end FAQ section -->
<!-- Testimonial section -->
<div class="section border-top">
<div class="container">
<div class="mb-5 text-center">
<h2 class="fw-medium">What People Say?</h2>
</div>
<div class="owl-carousel" data-owl-items="1" data-owl-dots="false" data-owl-nav="true" data-owl-autoplay="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<p class="mb-4">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal m-0 line-height-140">Emily Haley</h5>
<span class="fw-normal font-small">Manager - Mono</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<p class="mb-4">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal m-0 line-height-140">Andrew Palmer</h5>
<span class="fw-normal font-small">Developer - Mono</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<p class="mb-4">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal m-0 line-height-140">Anna Mullen</h5>
<span class="fw-normal font-small">Designer - Mono</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial 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>&copy; 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>

View File

@@ -0,0 +1,246 @@
<!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 - Process 1</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 transparent-light">
<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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<h1 class="fw-light m-0">Process 1</h1>
</div><!-- end container -->
</div>
</div>
<!-- section -->
<div class="section-lg">
<div class="container">
<!-- Process box 1 -->
<div class="row align-items-center g-5">
<div class="col-12 col-md-6">
<img class="border-radius hover-shadow hover-float" src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-md-6">
<h2 class="fw-light letter-spacing-1">01.</h2>
<h3 class="fw-normal">Bold heading</h3>
<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>
</div>
<!-- Process box 2 -->
<div class="row align-items-center g-5 mt-5">
<div class="col-12 col-md-6 order-md-2">
<img class="border-radius hover-shadow hover-float" src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-md-6 order-md-1">
<h2 class="fw-light letter-spacing-1">02.</h2>
<h3 class="fw-normal">Bold heading</h3>
<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>
</div>
<!-- Process box 3 -->
<div class="row align-items-center g-5 mt-5">
<div class="col-12 col-md-6">
<img class="border-radius hover-shadow hover-float" src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-md-6">
<h2 class="fw-light letter-spacing-1">03.</h2>
<h3 class="fw-normal">Bold heading</h3>
<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>
</div>
<!-- Process box 4 -->
<div class="row align-items-center g-5 mt-5">
<div class="col-12 col-md-6 order-md-2">
<img class="border-radius hover-shadow hover-float" src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-md-6 order-md-1">
<h2 class="fw-light letter-spacing-1">04.</h2>
<h3 class="fw-normal">Bold heading</h3>
<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>
</div>
</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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,229 @@
<!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 - Process 2</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-dark">
<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 -->
<!-- section 1 -->
<div class="section-lg">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-12 col-md-4">
<h1 class="display-4 fw-light m-0">01.</h1>
</div>
<div class="col-12 col-md-8">
<h2 class="fw-normal">Meeting</h2>
<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.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end section 1 -->
<!-- section 2 -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-12 col-md-4">
<h1 class="display-4 fw-light m-0">02.</h1>
</div>
<div class="col-12 col-md-8">
<h2 class="fw-normal">Planning</h2>
<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.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end section 2 -->
<!-- section 3 -->
<div class="section-lg">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-12 col-md-4">
<h1 class="display-4 fw-light m-0">03.</h1>
</div>
<div class="col-12 col-md-8">
<h2 class="fw-normal">Design &amp; Develop</h2>
<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.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end section 3 -->
<!-- section 4 -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-12 col-md-4">
<h1 class="display-4 fw-light m-0">04.</h1>
</div>
<div class="col-12 col-md-8">
<h2 class="fw-normal">Launching</h2>
<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.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end section 4 -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</footer>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,252 @@
<!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 - Process 3</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">
<link href="../assets/css/theme-colors/theme-color-blue.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 class="theme-color-blue preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header center header-color-dark">
<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-lg bg-image bg-fade-white-top parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-06">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 class="fw-light m-0">Team of highly skilled people are ready to work with you</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<div class="section pt-0">
<div class="container">
<div class="row icon-3xl g-4 g-lg-5 text-center">
<div class="col-12 col-lg-6">
<div class="border border-radius p-5 hover-shadow">
<div class="circle-box-xl bg-light-theme mb-3">
<h2 class="fw-medium text-color-theme">1</h2>
</div>
<h5 class="fw-medium">Facetime</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="border border-radius p-5 hover-shadow">
<div class="circle-box-xl bg-light-theme mb-3">
<h2 class="fw-medium text-color-theme">2</h2>
</div>
<h5 class="fw-medium">Planning</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="border border-radius p-5 hover-shadow">
<div class="circle-box-xl bg-light-theme mb-3">
<h2 class="fw-medium text-color-theme">3</h2>
</div>
<h5 class="fw-medium">Designing</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="border border-radius p-5 hover-shadow">
<div class="circle-box-xl bg-light-theme mb-3">
<h2 class="fw-medium text-color-theme">4</h2>
</div>
<h5 class="fw-medium">Developing</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="border border-radius p-5 hover-shadow">
<div class="circle-box-xl bg-light-theme mb-3">
<h2 class="fw-medium text-color-theme">5</h2>
</div>
<h5 class="fw-medium">Testing</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="border border-radius p-5 hover-shadow">
<div class="circle-box-xl bg-light-theme mb-3">
<h2 class="fw-medium text-color-theme">6</h2>
</div>
<h5 class="fw-medium">Launching</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 class="fw-light">We're ready to elevate your business, are you?</h1>
<div class="mt-4">
<a class="button button-lg button-radius button-outline-white" href="#">Let's Talk</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end Parallax section -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</footer>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,357 @@
<!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 - Services 1</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-dark">
<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 -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-4">
<img class="border-radius" src="../assets/images/col-2.jpg" alt="">
<h5 class="fw-medium mt-4">Professional</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-4">
<img class="border-radius" src="../assets/images/col-2.jpg" alt="">
<h5 class="fw-medium mt-4">Experienced</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-md-4">
<img class="border-radius" src="../assets/images/col-2.jpg" alt="">
<h5 class="fw-medium mt-4">Connected</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Pie Charts -->
<div class="section pt-0">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1">
<div class="row icon-3xl">
<div class="col-12 col-sm-6 col-lg-3">
<div class="pie-chart mb-2" data-size="140" data-percent="90" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)" data-line-width="2">
<div class="pie-chart-content">
<i class="bi bi-megaphone text-dark"></i>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">Marketing</h6>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="pie-chart mb-2" data-size="140" data-percent="85" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)" data-line-width="2">
<div class="pie-chart-content">
<i class="bi bi-chat-text text-dark"></i>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">Consulting</h6>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="pie-chart mb-2" data-size="140" data-percent="95" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)" data-line-width="2">
<div class="pie-chart-content">
<i class="bi bi-star text-dark"></i>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">Branding</h6>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="pie-chart mb-2" data-size="140" data-percent="80" data-bar-color="#141414" data-track-color="#e6e6e6" data-scale-color="rgba(0, 0, 0, 0.3)" data-line-width="2">
<div class="pie-chart-content">
<i class="bi bi-person-check text-dark"></i>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">Management</h6>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div>
<!-- end Pie Charts -->
<!-- Services section -->
<div class="section border-top">
<div class="container">
<div class="row g-4">
<!-- Service box 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="bi bi-star"></i>
</div>
<h5 class="fw-normal">Branding</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-bullhorn"></i>
</div>
<h5 class="fw-normal">Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-comments"></i>
</div>
<h5 class="fw-normal">Consulting</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-users"></i>
</div>
<h5 class="fw-normal">Management</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-balance-scale"></i>
</div>
<h5 class="fw-normal">Finance</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Service box 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-dark text-white">
<i class="fas fa-chess-pawn"></i>
</div>
<h5 class="fw-normal">Strategy</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Testimonial -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="owl-carousel icon-2xl" data-owl-items="1" data-owl-dots="false" data-owl-nav="true" data-owl-autoplay="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Emiley Haley</h5>
<span class="font-small fw-normal text-white-09">Manager - Mono</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Andrew Palmer</h5>
<span class="font-small fw-normal text-white-09">Developer - Mono</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Anna Mullen</h5>
<span class="font-small fw-normal text-white-09">Designer - Mono</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
</div>
<!-- end Testimonial -->
<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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,326 @@
<!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 - Services 2</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">
<link href="../assets/css/theme-colors/theme-color-blue.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 class="theme-color-blue preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header right transparent-light">
<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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06 section-divider-curve-bottom">
<div class="container text-center">
<h1 class="fw-light m-0">Services Clean</h1>
</div><!-- end container -->
</div>
</div>
<!-- Features section -->
<div class="n-margin-4">
<div class="container">
<div class="bg-dark-09 backdrop-filter-blur p-4 p-lg-5 border-radius box-shadow">
<div class="row text-center icon-4xl">
<!-- Icon text box 1 -->
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<i class="bi bi-check-circle text-color-theme mb-2"></i>
<h6 class="fw-normal m-0">Feature One</h6>
</div>
<!-- Icon text box 2 -->
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<i class="bi bi-check-circle text-color-theme mb-2"></i>
<h6 class="fw-normal m-0">Feature Two</h6>
</div>
<!-- Icon text box 3 -->
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<i class="bi bi-check-circle text-color-theme mb-2"></i>
<h6 class="fw-normal m-0">Feature Three</h6>
</div>
<!-- Icon text box 4 -->
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<i class="bi bi-check-circle text-color-theme mb-2"></i>
<h6 class="fw-normal m-0">Feature Four</h6>
</div>
<!-- Icon text box 5 -->
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<i class="bi bi-check-circle text-color-theme mb-2"></i>
<h6 class="fw-normal m-0">Feature Five</h6>
</div>
<!-- Icon text box 6 -->
<div class="col-12 col-sm-6 col-md-4 col-lg-2">
<i class="bi bi-check-circle text-color-theme mb-2"></i>
<h6 class="fw-normal m-0">Feature Six</h6>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
</div>
<!-- end Features section -->
<!-- section -->
<div class="section">
<div class="container">
<!-- box 1 -->
<div class="row align-items-center g-5">
<div class="col-12 col-md-6">
<img class="border-radius box-shadow" src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-md-6">
<div class="d-inline-block bg-gray px-3 py-2 border-radius mb-2">
<h6 class="font-small fw-medium uppercase line-height-140 text-color-theme m-0">Heading</h6>
</div>
<h3>Bold heading</h3>
<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>
</div>
<!-- box 2 -->
<div class="row align-items-center g-5 mt-4 text-md-end">
<div class="col-12 col-md-6 order-md-2">
<img class="border-radius box-shadow" src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-md-6 order-md-1">
<div class="d-inline-block bg-gray px-3 py-2 border-radius mb-2">
<h6 class="font-small fw-medium uppercase line-height-140 text-color-theme m-0">Heading</h6>
</div>
<h3>Bold heading</h3>
<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>
</div>
<!-- box 3 -->
<div class="row align-items-center g-5 mt-4">
<div class="col-12 col-md-6">
<img class="border-radius box-shadow" src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-md-6">
<div class="d-inline-block bg-gray px-3 py-2 border-radius mb-2">
<h6 class="font-small fw-medium uppercase line-height-140 text-color-theme m-0">Heading</h6>
</div>
<h3>Bold heading</h3>
<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>
</div>
<!-- box 4 -->
<div class="row align-items-center g-5 mt-4 text-md-end">
<div class="col-12 col-md-6 order-md-2">
<img class="border-radius box-shadow" src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-md-6 order-md-1">
<div class="d-inline-block bg-gray px-3 py-2 border-radius mb-2">
<h6 class="font-small fw-medium uppercase line-height-140 text-color-theme m-0">Heading</h6>
</div>
<h3>Bold heading</h3>
<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>
</div>
</div><!-- end container -->
</div>
<!-- end section -->
<!-- Testimonial section -->
<div class="section border-top">
<div class="container">
<div class="owl-carousel" data-owl-nav="true" data-owl-items="1">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<p class="mb-4">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal m-0 line-height-140">Johnny Doe</h5>
<span>CEO - Company</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<p class="mb-4">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal m-0 line-height-140">Johnny Doe</h5>
<span>CEO - Company</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<p class="mb-4">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal m-0 line-height-140">Johnny Doe</h5>
<span>CEO - Company</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial 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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,366 @@
<!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 - Services 3</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">
<link href="../assets/css/theme-colors/theme-color-turquoise.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 class="theme-color-turquoise preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header right header-color-dark">
<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 -->
<!-- Services section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h2 class="fw-light">Team of highly skilled people are ready to work for you</h2>
</div>
</div>
</div>
<div class="row g-4 g-lg-5 icon-3xl text-center">
<!-- Service box 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-globe text-color-theme"></i>
</div>
<h5 class="fw-normal">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- Service box 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-globe text-color-theme"></i>
</div>
<h5 class="fw-normal">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- Service box 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-globe text-color-theme"></i>
</div>
<h5 class="fw-normal">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- Service box 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-globe text-color-theme"></i>
</div>
<h5 class="fw-normal">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- Service box 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-globe text-color-theme"></i>
</div>
<h5 class="fw-normal">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
<!-- Service box 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-globe text-color-theme"></i>
</div>
<h5 class="fw-normal">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
</div><!-- end row -->
<div class="mt-5 text-center">
<a class="button button-lg button-rounded button-theme" href="#">Get In Touch</a>
</div>
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Clients section -->
<div class="container">
<div class="bg-gray-lighter p-4 p-lg-5 border-radius-1">
<div class="owl-carousel" data-owl-nav="true" data-owl-dots="false" data-owl-margin="50" data-owl-autoplay="true" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="4" data-owl-xl="5">
<!-- Client box 1 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 2 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 3 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 4 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 5 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 6 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 7 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end container -->
<!-- end Clients section -->
<!-- Testimonial section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h2 class="fw-light text-color-theme">What People Say</h2>
</div>
</div>
</div>
<div class="testimonial-grid column-2">
<!-- Testimonial Grid box 1 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
</div>
<!-- Testimonial Grid box 2 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
</div>
<!-- Testimonial Grid box 3 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
</div>
<!-- Testimonial Grid box 4 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Testimonial 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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,237 @@
<!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 - Services 4</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 center header-color-dark">
<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 -->
<!-- Services section 1 -->
<div class="section-lg">
<div class="container">
<div class="row text-center">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div class="icon-5xl mb-3">
<i class="bi bi-star text-dark"></i>
</div>
<h3 class="fw-normal">Social Marketing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section 1 -->
<!-- Services section 2 -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-07">
<div class="container">
<div class="row text-center">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div class="icon-5xl mb-3">
<i class="bi bi-camera text-white"></i>
</div>
<h3 class="fw-normal">Photoshoot</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Services section 2 -->
<!-- Services section 3 -->
<div class="section-lg">
<div class="container">
<div class="row text-center">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div class="icon-5xl mb-3">
<i class="bi bi-chat-text text-dark"></i>
</div>
<h3 class="fw-normal">Consulting</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section 3 -->
<!-- Services section 4 -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-07">
<div class="container">
<div class="row text-center">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<div class="icon-5xl mb-3">
<i class="bi bi-globe text-white"></i>
</div>
<h3 class="fw-normal">Web Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Services section 4 -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</footer>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,291 @@
<!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 - Services 5</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-dark">
<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 -->
<!-- About section -->
<div class="section">
<div class="container text-center">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1>We Are Mono</h1>
<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>
</div>
</div>
<img src="../assets/images/col-1.jpg" alt="">
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Services section -->
<div class="container text-center">
<div class="row icon-5xl g-4">
<div class="col-12 col-lg-4">
<div class="bg-white border-radius border p-5">
<i class="bi bi-chat-text text-dark mt-2"></i>
<h5 class="fw-normal mt-2">Consulting</h5>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="bg-white border-radius border p-5">
<i class="bi bi-star text-dark mt-2"></i>
<h5 class="fw-normal mt-2">Social Marketing</h5>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="bg-white border-radius border p-5">
<i class="bi bi-camera text-dark mt-2"></i>
<h5 class="fw-normal mt-2">Photography</h5>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
<!-- end Services section -->
<!-- Testimonial section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h2 class="fw-semi-bold display-6">What People Say</h2>
</div>
</div>
</div>
<div class="testimonial-grid column-2">
<!-- Testimonial Grid box 1 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<h5 class="fw-normal m-0 line-height-140">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
</div>
<!-- Testimonial Grid box 2 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<h5 class="fw-normal m-0 line-height-140">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
</div>
<!-- Testimonial Grid box 3 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<h5 class="fw-normal m-0 line-height-140">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
</div>
<!-- Testimonial Grid box 4 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<h5 class="fw-normal m-0 line-height-140">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Testimonial 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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View 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 - Services 6</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">
<link href="../assets/css/theme-colors/theme-color-turquoise.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 class="theme-color-turquoise preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header center header-color-dark">
<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="bg-gradient-2 bg-fade-white-top">
<div class="bg-white-03 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">
<h1 class="display-5 font-family-outfit fw-light m-0">Team of highly skilled people are ready to work with you</h1>
</div>
</div><!-- end row -->
<div class="row icon-3xl g-4 g-lg-5 mt-3">
<div class="col-12 col-md-6">
<div class="bg-white-09 border-radius p-5 box-shadow hover-float">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-camera text-color-theme"></i>
</div>
<h5 class="fw-medium mt-2">Photoshoot</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-md-6">
<div class="bg-white-09 border-radius p-5 box-shadow hover-float">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-megaphone text-color-theme"></i>
</div>
<h5 class="fw-medium mt-2">Social Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-md-6">
<div class="bg-white-09 border-radius p-5 box-shadow hover-float">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-chat-text text-color-theme"></i>
</div>
<h5 class="fw-medium mt-2">Consulting</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-md-6">
<div class="bg-white-09 border-radius p-5 box-shadow hover-float">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-star text-color-theme"></i>
</div>
<h5 class="fw-medium mt-2">Branding</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-md-6">
<div class="bg-white-09 border-radius p-5 box-shadow hover-float">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-globe text-color-theme"></i>
</div>
<h5 class="fw-medium mt-2">Web Development</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<div class="col-12 col-md-6">
<div class="bg-white-09 border-radius p-5 box-shadow hover-float">
<div class="circle-box-lg bg-light-theme mb-3">
<i class="bi bi-brush text-color-theme"></i>
</div>
<h5 class="fw-medium mt-2">Graphic Design</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<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">
<h1 class="fw-light">We're ready to elevate your business, are you?</h1>
<div class="mt-4">
<a class="button button-lg button-radius button-theme" href="#">Let's Talk</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end Parallax section -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</footer>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,392 @@
<!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 - Team 1</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-dark">
<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 -->
<!-- About with Text section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-4">
<h4 class="fw-light m-0">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Phasellus viverra nulla ut metus varius laoreet.</h4>
</div>
<div class="col-12 col-md-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat</p>
</div>
<div class="col-12 col-md-4">
<!-- Progress bar box 1 -->
<div class="progress-box">
<h6 class="fw-medium">Social Marketing</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
<!-- Progress bar box 2 -->
<div class="progress-box mt-4">
<h6 class="fw-medium">Sales Training</h6>
<div class="animated-progress">
<div data-progress="88"></div>
</div>
</div>
<!-- Progress bar box 3 -->
<div class="progress-box mt-4">
<h6 class="fw-medium">Copywriting</h6>
<div class="animated-progress">
<div data-progress="92"></div>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About with Text section -->
<!-- Team section -->
<div class="section border-top">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h2>Meet Our Creative Team</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Integer tincidunt.</p>
</div>
</div>
</div>
<div class="row g-3 gy-4 gy-lg-5 team-wrapper border-radius" data-cues="fadeIn">
<!-- Team box 1 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Violet Walker</h5>
<span>Founder</span>
</div>
<!-- Team box 2 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
<!-- Team box 3 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Jamie Mills</h5>
<span>Creative Director</span>
</div>
<!-- Team box 4 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Winston Frank</h5>
<span>Photographer</span>
</div>
<!-- Team box 5 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Ashley Williamsan</h5>
<span>Marketing Specialist</span>
</div>
<!-- Team box 6 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Betsy Fletcher</h5>
<span>Senior Designer</span>
</div>
<!-- Team box 7 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Violet Walker</h5>
<span>Founder</span>
</div>
<!-- Team box 8 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Services section -->
<div class="section border-top">
<div class="container text-center">
<div class="row icon-5xl g-4 g-lg-5" data-cues="fadeIn">
<!-- Icon text box 1 -->
<div class="col-12 col-md-4">
<i class="bi bi-star text-dark"></i>
<h5 class="fw-normal mt-2">Branding</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Icon text box 2 -->
<div class="col-12 col-md-4">
<i class="bi bi-globe text-dark"></i>
<h5 class="fw-normal mt-2">Social Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Icon text box 3 -->
<div class="col-12 col-md-4">
<i class="bi bi-camera text-dark"></i>
<h5 class="fw-normal mt-2">Photography</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services 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>&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,344 @@
<!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 - Team 2</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-dark">
<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-lg bg-image bg-fade-white-top" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-07">
<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">
<h1 class="fw-light m-0">We believe that great things in business are never done by one person. They're done by a team of people.</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- Team section -->
<div class="section-lg pt-0">
<div class="container">
<div class="row g-4 text-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="border border-radius p-4">
<img class="img-mask-avatar-md" src="../assets/images/img-avatar-md.jpg" alt="">
<div class="mt-4">
<h5 class="fw-normal mb-0">Robert Vincent</h5>
<span class="font-small fw-normal">Founder</span>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<ul class="list-inline mt-3">
<li><a class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="border border-radius p-4">
<img class="img-mask-avatar-md" src="../assets/images/img-avatar-md.jpg" alt="">
<div class="mt-4">
<h5 class="fw-normal mb-0">Brenda Johnson</h5>
<span class="font-small fw-normal">Co-Founder</span>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<ul class="list-inline mt-3">
<li><a class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="border border-radius p-4">
<img class="img-mask-avatar-md" src="../assets/images/img-avatar-md.jpg" alt="">
<div class="mt-4">
<h5 class="fw-normal mb-0">Rodney Scott</h5>
<span class="font-small fw-normal">Manager</span>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<ul class="list-inline mt-3">
<li><a class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="border border-radius p-4">
<img class="img-mask-avatar-md" src="../assets/images/img-avatar-md.jpg" alt="">
<div class="mt-4">
<h5 class="fw-normal mb-0">Michelle White</h5>
<span class="font-small fw-normal">Marketer</span>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<ul class="list-inline mt-3">
<li><a class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="border border-radius p-4">
<img class="img-mask-avatar-md" src="../assets/images/img-avatar-md.jpg" alt="">
<div class="mt-4">
<h5 class="fw-normal mb-0">Alice Trumbo</h5>
<span class="font-small fw-normal">Designer</span>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<ul class="list-inline mt-3">
<li><a class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="border border-radius p-4">
<img class="img-mask-avatar-md" src="../assets/images/img-avatar-md.jpg" alt="">
<div class="mt-4">
<h5 class="fw-normal mb-0">Thomas Willis</h5>
<span class="font-small fw-normal">Developer</span>
<p class="mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<ul class="list-inline mt-3">
<li><a class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Clients section -->
<div class="section-lg pt-0">
<div class="container">
<div class="mb-5 text-center">
<h2 class="fw-light">Our Amazing Clients</h2>
</div>
<ul class="clients-grid column-5">
<!-- 1 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 2 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 3 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 4 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 5 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 6 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 7 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 8 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 9 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 10 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
</ul>
</div><!-- end container -->
</div>
<!-- end Clients section -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<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-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</footer>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,452 @@
<!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 - Team 3</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 transparent-light">
<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-image parallax section-divider-curve-bottom" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 class="display-4 m-0">We Are Mono</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-6">
<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.</p>
</div>
<div class="col-12 col-lg-6">
<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
</div>
</div><!-- end row -->
<div class="row g-4 mt-5 text-center">
<!-- Counter box 1 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 2 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 3 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 4 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 5 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 6 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- Team section -->
<div class="section pt-0">
<div class="container">
<div class="row g-4 gy-5 team-wrapper border-radius">
<!-- Team box 1 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<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>
</ul>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>CEO</p>
</div>
<!-- Team box 2 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<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>
</ul>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Co-Founder</p>
</div>
<!-- Team box 3 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<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>
</ul>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Lead Developer</p>
</div>
<!-- Team box 4 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<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>
</ul>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Lead Designer</p>
</div>
<!-- Team box 5 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<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>
</ul>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Manager</p>
</div>
<!-- Team box 6 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<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>
</ul>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Designer</p>
</div>
<!-- Team box 7 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<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>
</ul>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Developer</p>
</div>
<!-- Team box 8 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<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>
</ul>
</div>
</div>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Photographer</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Services section -->
<div class="section pt-0">
<div class="container text-center icon-5xl">
<div class="row g-4 g-lg-5">
<!-- Service box 1 -->
<div class="col-12 col-lg-4">
<div class="text-dark mb-3">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-normal">Service Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Service box 2 -->
<div class="col-12 col-lg-4">
<div class="text-dark mb-3">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-normal">Service Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Service box 3 -->
<div class="col-12 col-lg-4">
<div class="text-dark mb-3">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-normal">Service Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Clients section -->
<div class="section-sm border-top">
<div class="container text-center">
<div class="owl-carousel" data-owl-dots="false" data-owl-margin="50" data-owl-autoplay="true" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="4" data-owl-xl="5">
<!-- Client box 1 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 2 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 3 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 4 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 5 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 6 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 7 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Testimonial section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="owl-carousel icon-2xl" data-owl-items="1" data-owl-dots="false" data-owl-nav="true" data-owl-autoplay="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal m-0 line-height-140">Emiley Haley</h4>
<span class="fw-normal text-white-09">Manager - Mono</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal m-0 line-height-140">Andrew Palmer</h4>
<span class="fw-normal text-white-09">Developer - Mono</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal m-0 line-height-140">Anna Mullen</h4>
<span class="fw-normal text-white-09">Designer - Mono</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
</div>
<!-- end Testimonial section -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-md-6 text-center text-md-start">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 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>
<!-- 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 -->
<!-- ***** 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>

View File

@@ -0,0 +1,459 @@
<!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 - Team 4</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-dark">
<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="bg-gradient-2 bg-fade-white-top">
<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">
<h1 class="fw-light m-0 text-dark">We believe that great things in business are never done by one person. They're done by a team of people.</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- Team section -->
<div class="section pt-0">
<div class="container">
<div class="row g-3 gy-4 gy-lg-5 team-wrapper border-radius">
<!-- Team box 1 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Violet Walker</h5>
<span>Founder</span>
</div>
<!-- Team box 2 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
<!-- Team box 3 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Jamie Mills</h5>
<span>Creative Director</span>
</div>
<!-- Team box 4 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Winston Frank</h5>
<span>Photographer</span>
</div>
<!-- Team box 5 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Ashley Williamsan</h5>
<span>Marketing Specialist</span>
</div>
<!-- Team box 6 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Betsy Fletcher</h5>
<span>Senior Designer</span>
</div>
<!-- Team box 7 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Violet Walker</h5>
<span>Founder</span>
</div>
<!-- Team box 8 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div>
<ul>
<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>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Clients section -->
<div class="section border-top">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h2 class="fw-light display-6">Our Clients</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<ul class="clients-grid column-5">
<!-- 1 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 2 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 3 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 4 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 5 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 6 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 7 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 8 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 9 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
<!-- 10 -->
<li>
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</li>
</ul>
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Testimonial section -->
<div class="section border-top">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h2 class="fw-light display-6">What People Say</h2>
</div>
</div>
</div>
<div class="owl-carousel" data-owl-margin="30" data-owl-xs="1" data-owl-sm="1" data-owl-md="1" data-owl-lg="2" data-owl-xl="2" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="border-radius bg-white border p-4 p-xl-5">
<div class="d-lg-flex justify-content-between mb-2">
<div class="d-block d-lg-inline-block mb-2">
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
</div>
<div class="d-inline-block text-golden-yellow">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
</div>
<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>
<!-- Testimonial box 2 -->
<div class="border-radius bg-white border p-4 p-xl-5">
<div class="d-lg-flex justify-content-between mb-2">
<div class="d-block d-lg-inline-block mb-2">
<h5 class="fw-normal line-height-140 m-0">Robert Vincent</h5>
<span class="font-small fw-normal">Marketer - Mono</span>
</div>
<div class="d-inline-block text-golden-yellow">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
</div>
<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>
<!-- Testimonial box 3 -->
<div class="border-radius bg-white border p-4 p-xl-5">
<div class="d-lg-flex justify-content-between mb-2">
<div class="d-block d-lg-inline-block mb-2">
<h5 class="fw-normal line-height-140 m-0">Andrew Palmer</h5>
<span class="font-small fw-normal">Developer - Mono</span>
</div>
<div class="d-inline-block text-golden-yellow">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
</div>
<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>
<!-- Testimonial box 4 -->
<div class="border-radius bg-white border p-4 p-xl-5">
<div class="d-lg-flex justify-content-between mb-2">
<div class="d-block d-lg-inline-block mb-2">
<h5 class="fw-normal line-height-140 m-0">Rodney Scott</h5>
<span class="font-small fw-normal">Designer - Mono</span>
</div>
<div class="d-inline-block text-golden-yellow">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
</div>
</div>
<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>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial section -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-md-6 text-center text-md-start">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 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>
<!-- 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 -->
<!-- ***** 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>