This repository has been archived on 2025-08-21. You can view files and clone it. You cannot open issues or pull requests or push a commit.
Files
hugo-mistergeek/docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/1. Home Pages/business-11.html
2025-08-18 17:15:47 +02:00

478 lines
21 KiB
HTML

<!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 - Business 11</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">
<!-- Page Scroll Progress -->
<div class="page-progress-container">
<div id="pageProgress" class="page-progress-bar page-progress-gradient-6"></div>
</div>
<!-- end Page Scroll Progress -->
<!-- Header -->
<div class="header">
<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 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>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<!-- Hero section -->
<div class="bg-gray border-radius-1 section-sm px-4 px-lg-5 mx-4 mx-lg-5">
<div class="container">
<div class="row align-items-center g-4 g-lg-5">
<div class="col-12 col-lg-7 order-lg-2">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-5 order-lg-1">
<ul class="list-inline mb-3">
<li><i class="bi bi-check-circle-fill text-gradient-6 pe-2"></i>Professional Team</li>
<li><i class="bi bi-check-circle-fill text-gradient-6 pe-2"></i>Fast & Friendly Support</li>
</ul>
<h1 class="fw-medium">We transform brands, and businesses from inside out</h1>
<a class="button button-md button-rounded button-gradient-6 mt-3 mt-lg-4" href="#">More About Us</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Clients section -->
<div class="n-margin-3">
<div class="container">
<div class="bg-white border-radius-1 box-shadow p-4 p-lg-5">
<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>
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Team section -->
<div class="section">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 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-gradient-6">Meet Our Team</span></h6>
<h2 class="fw-medium">Introducing the talents behind all the amazing works</h2>
</div>
</div><!-- end row -->
<div class="row g-4 gy-5 team-wrapper team-box-hover-2 border-radius mt-0" data-cues="fadeIn">
<!-- Team box 1 -->
<div class="col-12 col-md-6 col-lg-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div class="border-radius">
<ul>
<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>
<h5 class="fw-medium m-0">Dan Demarco</h5>
<span>Founder</span>
</div>
<!-- Team box 2 -->
<div class="col-12 col-md-6 col-lg-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div class="border-radius">
<ul>
<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>
<h5 class="fw-medium m-0">Brenda Johnson</h5>
<span>Manager</span>
</div>
<!-- Team box 3 -->
<div class="col-12 col-md-6 col-lg-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div class="border-radius">
<ul>
<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>
<h5 class="fw-medium m-0">Anna Mullen</h5>
<span>Senior Designer</span>
</div>
<!-- Team box 4 -->
<div class="col-12 col-md-6 col-lg-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-square.jpg" alt="">
<div class="border-radius">
<ul>
<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="mb-2">
<h5 class="fw-medium mb-0">Winston Frank</h5>
<span>Photographer</span>
</div>
</div>
<!-- Team box 5 -->
<div class="col-12 col-md-6 col-lg-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-square.jpg" alt="">
<div class="border-radius">
<ul>
<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="mb-2">
<h5 class="fw-medium mb-0">Ashley Williamsan</h5>
<span>Marketing Specialist</span>
</div>
</div>
<!-- Team box 6 -->
<div class="col-12 col-md-6 col-lg-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-square.jpg" alt="">
<div class="border-radius">
<ul>
<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="mb-2">
<h5 class="fw-medium mb-0">Betsy Fletcher</h5>
<span>Senior Designer</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Testimonial/Facts section -->
<div class="section pt-0">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-12 col-lg-8">
<div class="bg-gray-lighter border-radius-1 p-4 p-lg-5 text-center">
<div class="owl-carousel" data-owl-items="1" data-owl-margin="40">
<!-- Testimonial Carousel Item 1 -->
<div>
<img class="d-inline-block img-mask-avatar-sm mb-4" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-medium">Nicholas Shirley</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>
<!-- Testimonial Carousel Item 2 -->
<div>
<img class="d-inline-block img-mask-avatar-sm mb-4" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-medium">Judy Jones</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>
<!-- Testimonial Carousel Item 3 -->
<div>
<img class="d-inline-block img-mask-avatar-sm mb-4" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-medium">Sandra Ritchey</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>
</div>
<div class="col-12 col-lg-4 icon-4xl">
<div class="d-flex flex-row align-items-center">
<div class="pe-4">
<i class="bi bi-people text-gradient-6"></i>
</div>
<div>
<h2 class="fw-medium text-gradient-6 mb-0"><span class="counter">80</span>+</h2>
<p>Long Term Clients</p>
</div>
</div>
<div class="d-flex flex-row align-items-center mt-4">
<div class="pe-4">
<i class="bi bi-person-workspace text-gradient-6"></i>
</div>
<div>
<h2 class="fw-medium text-gradient-6 mb-0 counter">24</h2>
<p>Talented Workers</p>
</div>
</div>
<div class="d-flex flex-row align-items-center mt-4">
<div class="pe-4">
<i class="bi bi-star text-gradient-6"></i>
</div>
<div>
<h2 class="fw-medium text-gradient-6 mb-0"><span class="counter">300</span>+</h2>
<p>Projects Done</p>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Testimonial/Facts section -->
<!-- FAQ section -->
<div class="section pt-0">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-12 col-lg-5 order-lg-2" data-cue="fadeIn">
<img src="../assets/images/col-2-square.jpg" alt="">
</div>
<div class="col-12 col-lg-7 order-lg-1">
<ul class="accordion single-open rounded">
<li class="active">
<div class="accordion-title">
<h5 class="fw-medium">How many years of experience your company has?</h5>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h5 class="fw-medium">Are the pricing plans fixed or?</h5>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h5 class="fw-medium">How fast can you deliver?</h5>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</li>
<li>
<div class="accordion-title">
<h5 class="fw-medium">What's the process till end product?</h5>
</div>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end FAQ 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-gradient-6" 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>