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/media-agency-5.html
2025-08-18 17:15:47 +02:00

547 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 - Media Agency 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 sticky-autohide">
<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-curve-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">
<a class="button-circle button-circle-xl button-circle-gradient-6 lightbox-media-link mb-4" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="fas fa-play"></i></a>
<h1 class="fw-light line-height-140 m-0">We help innovators to successfully bring their business in life</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-4">
<div class="col-12 col-lg-3">
<h6 class="uppercase fw-medium">About us</h6>
</div>
<div class="col-12 col-lg-9">
<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.</p>
</div>
<div class="col-12 col-lg-6">
<p>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div><!-- end row(inner 1) -->
<div class="row g-4 mt-5">
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light m-0"><span class="counter">100</span></h1>
<p>Award Wins</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light m-0"><span class="counter">100</span></h1>
<p>Award Wins</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light m-0"><span class="counter">100</span></h1>
<p>Award Wins</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light m-0"><span class="counter">100</span></h1>
<p>Award Wins</p>
</div>
</div><!-- end row(inner 2) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Team section -->
<div class="section pt-0">
<div class="container">
<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 class="mt-5 text-center">
<a class="button button-lg button-rounded button-font-2 button-dark" href="#">Meet Our Team</a>
</div>
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Services section -->
<div class="section border-top">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-3">
<h6 class="uppercase fw-medium">What We Do</h6>
</div>
<div class="col-12 col-lg-9">
<div class="row g-4 icon-5xl" data-cues="fadeIn">
<div class="col-12 col-lg-6">
<div class="text-dark mb-2">
<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 class="col-12 col-lg-6">
<div class="text-dark mb-2">
<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 class="col-12 col-lg-6">
<div class="text-dark mb-2">
<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 class="col-12 col-lg-6">
<div class="text-dark mb-2">
<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>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Portfolio section -->
<div class="section pt-0">
<div class="container">
<div class="portfolio-masonry column-3 spacing-1 border-radius hover-style-1">
<!-- Portfolio box 1 -->
<div class="portfolio-item">
<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 -->
<div class="portfolio-title">
<div>
<h5 class="fw-normal">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item">
<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 -->
<div class="portfolio-title">
<div>
<h5 class="fw-normal">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item">
<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 -->
<div class="portfolio-title">
<div>
<h5 class="fw-normal">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item">
<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 -->
<div class="portfolio-title">
<div>
<h5 class="fw-normal">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item">
<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 -->
<div class="portfolio-title">
<div>
<h5 class="fw-normal">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="portfolio-item">
<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 -->
<div class="portfolio-title">
<div>
<h5 class="fw-normal">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry-->
<div class="mt-5 text-center" data-cue="fadeIn">
<a class="button button-lg button-rounded button-font-2 button-dark" href="#">View More Works</a>
</div>
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Clients section -->
<div class="section-sm border-top">
<div class="container text-center">
<div class="owl-carousel" data-owl-dots="false" data-owl-nav="true" 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 -->
<!-- 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" data-cues="fadeIn">
<h1 class="fw-light">We're ready to elevate your business, are you?</h1>
<div class="mt-4">
<a class="button button-lg button-rounded button-gradient-6" 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">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</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>