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/Mono v10.0.1 HTML5/Mono v10.0.1/1. Home Pages/creative-agency-6.html
2025-08-18 16:50:55 +02:00

573 lines
22 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 - Creative Agency 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">
<!-- Page Scroll Progress -->
<div class="page-progress-container">
<div id="pageProgress" class="page-progress-bar"></div>
</div>
<!-- end Page Scroll Progress -->
<!-- Header -->
<div class="header center">
<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="px-4 px-lg-5">
<div class="section-xl bg-dark-01 position-relative border-radius-1">
<!-- Background Video -->
<div class="bg-video">
<video playsinline autoplay muted loop>
<source src="../assets/video-bg-src.mp4" type="video/mp4">
</video>
</div>
<!-- end Background Video -->
<div class="container text-center">
<div class="row">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 class="display-4 fw-medium mb-0">Getting you connected to your Audience</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-5">
<div class="col-12 col-lg-5">
<h6 class="font-small uppercase letter-spacing-1 mb-3 text-dark-03">Little About Us</h6>
<h2 class="fw-medium">We integrate strategy, creativity & experience to solve problems</h2>
<a class="button button-md button-rounded button-font-2 button-gradient-1 mt-3" href="#contact">Let's Talk</a>
</div>
<div class="col-12 col-lg-7">
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
<div class="row g-4 mt-2">
<!-- Progress bar 1 -->
<div class="col-12 col-sm-6">
<div class="progress-box">
<h6 class="fw-medium">Photoshoot</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
</div>
<!-- Progress bar 2 -->
<div class="col-12 col-sm-6">
<div class="progress-box">
<h6 class="fw-medium">Social Marketing</h6>
<div class="animated-progress">
<div data-progress="89"></div>
</div>
</div>
</div>
<!-- Progress bar 3 -->
<div class="col-12 col-sm-6">
<div class="progress-box">
<h6 class="fw-medium">Copywriting</h6>
<div class="animated-progress">
<div data-progress="90"></div>
</div>
</div>
</div>
<!-- Progress bar 4 -->
<div class="col-12 col-sm-6">
<div class="progress-box">
<h6 class="fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="80"></div>
</div>
</div>
</div>
<!-- end Progress bar 4 -->
</div><!-- end row(inner) -->
<!-- Counters -->
<div class="row g-4 mt-3">
<!-- Counter 1 -->
<div class="col-4">
<h1 class="fw-normal mb-0">+<span class="counter">10</span></h1>
<p>Years of experience</p>
</div>
<!-- Counter 2 -->
<div class="col-4">
<h1 class="fw-normal mb-0">+<span class="counter">80</span></h1>
<p>Happy Clients</p>
</div>
<!-- Counter 3 -->
<div class="col-4">
<h1 class="fw-normal 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 About section -->
<!-- Masonry Portfolio section -->
<div class="section pt-0">
<div class="container">
<div class="filter filter-style-3 filter-font-2 mb-5"><!-- filter-style-(1/2/3/4) -->
<ul>
<li class="active" data-filter="*">Show All</li>
<li data-filter=".category-creative">Creative</li>
<li data-filter=".category-branding">Branding</li>
</ul>
</div>
<div class="portfolio-masonry column-2 spacing-3 hover-style-3 border-radius"><!-- column-(1/2/3/4/5/6) -->
<!-- Portfolio box 1 -->
<div class="portfolio-item category-creative">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-square.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<!-- Portfolio Hover Title -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h4 class="fw-medium">Project Title</h4>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
<!-- end Portfolio Hover Title -->
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-branding">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<!-- Portfolio Hover Title -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h4 class="fw-medium">Project Title</h4>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
<!-- end Portfolio Hover Title -->
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-creative">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-square.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<!-- Portfolio Hover Title -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h4 class="fw-medium">Project Title</h4>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
<!-- end Portfolio Hover Title -->
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-branding">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<!-- Portfolio Hover Title -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h4 class="fw-medium">Project Title</h4>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
<!-- end Portfolio Hover Title -->
</div>
</div>
</div><!-- end portfolio-masonry -->
</div><!-- end container -->
</div>
<!-- end Masonry Portfolio section -->
<!-- Clients section -->
<div class="section pt-0">
<div class="container">
<div class="row gx-5 gy-4 align-items-center">
<div class="col-12 col-lg-5">
<h6 class="font-small uppercase letter-spacing-1 mb-3 text-dark-03">Our Awesome Clients</h6>
<h2 class="fw-medium">Amazing companies We've worked with in the past 10 years</h2>
<a class="button button-md button-rounded button-font-2 button-gradient-1 mt-3" href="#">Become a Client</a>
</div>
<div class="col-12 col-lg-7">
<div class="row g-4 g-lg-5">
<!-- Client box 1 -->
<div class="col-6 col-sm-6 col-lg-4">
<div class="client-box">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
</a>
</div>
</div>
<!-- Client box 2 -->
<div class="col-6 col-sm-6 col-lg-4">
<div class="client-box">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
</a>
</div>
</div>
<!-- Client box 3 -->
<div class="col-6 col-sm-6 col-lg-4">
<div class="client-box">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
</a>
</div>
</div>
<!-- Client box 4 -->
<div class="col-6 col-sm-6 col-lg-4">
<div class="client-box">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
</a>
</div>
</div>
<!-- Client box 5 -->
<div class="col-6 col-sm-6 col-lg-4">
<div class="client-box">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
</a>
</div>
</div>
<!-- Client box 6 -->
<div class="col-6 col-sm-6 col-lg-4">
<div class="client-box">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
</a>
</div>
</div>
<!-- end Client box 6 -->
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Services section -->
<div class="section pt-0">
<div class="container text-center icon-5xl">
<div class="row">
<div class="col-12 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow hover-float">
<div class="text-blue mb-2">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-medium">Service Title</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 hover-float">
<div class="text-pink-edge mb-2">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-medium">Service Title</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 hover-float">
<div class="text-turquoise mb-2">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-medium">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 -->
<!-- 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">
<h6 class="font-small uppercase letter-spacing-1 text-dark-03">Meet Our Team</h6>
<h2 class="fw-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit sod de</h2>
</div>
</div><!-- end row -->
<div class="row mt-4 g-4 gy-5 team-wrapper team-box-hover-2 border-radius">
<!-- 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>
<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>
<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>
<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>
<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>
<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>
<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 -->
<footer>
<div class="section bg-black">
<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-gradient-1" 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>