Add Mono theme

This commit is contained in:
kbe
2025-08-18 16:50:55 +02:00
parent 710e63afda
commit 7432ac7d4d
2559 changed files with 493878 additions and 0 deletions

View File

@@ -0,0 +1,227 @@
<!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 - Artist</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 class="preloader-blue" data-preloader="1">
<!-- Page Scroll Progress -->
<div class="page-progress-container">
<div id="pageProgress" class="page-progress-bar page-progress-gradient-5"></div>
</div>
<!-- end Page Scroll Progress -->
<!-- Header -->
<div class="header header-lg transparent-dark">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<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-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-xl">
<div class="container text-center">
<div>
<img class="img-mask-avatar-3xl" src="../assets/images/col-3-square.jpg" alt="" data-rjs="2">
</div>
<h1 class="display-2 fw-medium text-gradient-6 mb-0 mt-3 mt-lg-4">Christy The Artist</h1>
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Portfolio section -->
<div class="section-lg pt-0">
<!-- Swiper -->
<div class="swiper hero-portfolio-slider">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="hero-portfolio-box">
<div class="hero-portfolio-img">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="hero-portfolio-caption">
<h3><a href="#">Project Title</a></h3>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="hero-portfolio-box">
<div class="hero-portfolio-img">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="hero-portfolio-caption">
<h3><a href="#">Project Title</a></h3>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="swiper-slide">
<div class="hero-portfolio-box">
<div class="hero-portfolio-img">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="hero-portfolio-caption">
<h3><a href="#">Project Title</a></h3>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- end Swiper -->
</div>
<!-- end Portfolio section -->
<!-- Services section -->
<div class="section-lg 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">
<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 mt-lg-5 icon-5xl">
<!-- Services box 1 -->
<div class="col-12 col-lg-4">
<i class="bi bi-palette text-gradient-6"></i>
<h4 class="fw-medium mt-2">Wall Artwork</h4>
<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-brush text-gradient-6"></i>
<h4 class="fw-medium mt-2">Portrait Painting</h4>
<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-camera text-gradient-6"></i>
<h4 class="fw-medium mt-2">Photoshoot</h4>
<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 -->
<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="#">Clients</a></li>
<li><a href="#">Contact</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-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>

View File

@@ -0,0 +1,412 @@
<!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 - Blog 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 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="owl-carousel owl-nav-overlay owl-dots-overlay" data-owl-autoplay="true" data-owl-nav="true" data-owl-dots="true" data-owl-items="1">
<!-- Slider Item 1 -->
<div class="section-xl bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<h6 class="font-small fw-normal uppercase mb-3">Lifestyle, Fashion</h6>
<h1>Hero Post with Image</h1>
<a class="button button-lg button-radius button-border-2 button-reveal-right-outline-white mt-3" href="#"><i class="bi bi-arrow-right"></i><span>Read More</span></a>
</div>
</div>
</div>
<!-- Slider Item 2 -->
<div class="section-xl bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<h6 class="font-small fw-normal uppercase mb-3">Travel, Nature</h6>
<h1>Hero Post with Image</h1>
<a class="button button-lg button-radius button-border-2 button-reveal-right-outline-white mt-3" href="#"><i class="bi bi-arrow-right"></i><span>Read More</span></a>
</div>
</div>
</div>
</div><!-- end owl-carousel -->
<!-- end Hero section -->
<!-- Category section -->
<div class="section pb-0">
<div class="container">
<div class="row g-3">
<!-- 1 -->
<div class="col-12 col-md-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content center">
<h6 class="font-small fw-medium uppercase m-0">Fashion</h6>
</div>
</a>
</div>
</div>
<!-- 2 -->
<div class="col-12 col-md-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content center">
<h6 class="font-small fw-medium uppercase m-0">Lifestyle</h6>
</div>
</a>
</div>
</div>
<!-- 3 -->
<div class="col-12 col-md-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content center">
<h6 class="font-small fw-medium uppercase m-0">Travel</h6>
</div>
</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Category section -->
<div class="section">
<div class="container">
<div class="row g-5">
<div class="col-12 col-lg-8">
<!-- Blog Post box 1 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Lifestyle</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Tips for Street Photography</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 2 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Knowledge</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">10 Books that I will recommend</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 3 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Health</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Benefits of house plants</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Pagination -->
<nav>
<ul class="pagination justify-content-center mt-5">
<li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>
</nav>
</div>
<!-- end Blog Posts -->
<!-- Blog Sidebar -->
<div class="col-12 col-lg-4 d-none d-lg-block">
<!-- Sidebar box 1 - About me -->
<div class="border p-4 mb-4 text-center">
<h6 class="font-small fw-medium uppercase mb-4">About Me</h6>
<img class="img-mask-avatar-md mb-3" src="../assets/images/img-avatar-md.jpg" alt="">
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<ul class="list-inline mt-3">
<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>
<!-- Sidebar box 2 - Categories -->
<div class="border p-4 mb-4">
<h6 class="font-small fw-medium uppercase mb-4 text-center">Categories</h6>
<ul class="list-unstyled">
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Art <span>11</span></a></li>
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Fashion <span>4</span></a></li>
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Lifestyle <span>12</span></a></li>
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Nature <span>8</span></a></li>
<li class="pb-2"><a class="d-flex justify-content-between" href="#">Travel <span>15</span></a></li>
</ul>
</div>
<!-- Sidebar box 3 - Popular Posts -->
<div class="border p-4 mb-4">
<h6 class="font-small fw-medium uppercase mb-4 text-center">Popular Posts</h6>
<!-- Popular post 1 -->
<div class="d-flex align-items-center mb-3">
<a href="#">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</a>
<div class="ps-3">
<h6 class="fw-normal mb-0"><a class="text-link-1" href="#">Blog Post with Image</a></h6>
<span class="font-small">January 07, 2018</span>
</div>
</div>
<!-- Popular post 2 -->
<div class="d-flex align-items-center mb-3">
<a href="#">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</a>
<div class="ps-3">
<h6 class="fw-normal mb-0"><a class="text-link-1" href="#">Blog Post with Image</a></h6>
<span class="font-small">January 07, 2018</span>
</div>
</div>
<!-- Popular post 3 -->
<div class="d-flex align-items-center">
<a href="#">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</a>
<div class="ps-3">
<h6 class="fw-normal mb-0"><a class="text-link-1" href="#">Blog Post with Image</a></h6>
<span class="font-small">January 07, 2018</span>
</div>
</div>
</div>
<!-- Sidebar box 4 - Banner Image -->
<div class="mb-4">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
</a>
</div>
<!-- Sidebar box 5 - Tags -->
<div class="border p-4 mb-4">
<h6 class="font-small fw-medium uppercase mb-4 text-center">Tags</h6>
<ul class="list-inline">
<li><a class="button-text-1" href="#">Art</a></li>
<li><a class="button-text-1" href="#">Design</a></li>
<li><a class="button-text-1" href="#">Event</a></li>
<li><a class="button-text-1" href="#">Fashion</a></li>
<li><a class="button-text-1" href="#">Food</a></li>
<li><a class="button-text-1" href="#">Inspiration</a></li>
<li><a class="button-text-1" href="#">Movie</a></li>
<li><a class="button-text-1" href="#">Music</a></li>
<li><a class="button-text-1" href="#">Nature</a></li>
<li><a class="button-text-1" href="#">Office</a></li>
<li><a class="button-text-1" href="#">Painting</a></li>
<li><a class="button-text-1" href="#">Photography</a></li>
<li><a class="button-text-1" href="#">People</a></li>
<li><a class="button-text-1" href="#">Work</a></li>
</ul>
</div>
<!-- Sidebar box 6 - Facebook Like box -->
<div class="border p-4 mb-4 text-center">
<h6 class="font-small fw-medium uppercase mb-4">Follow on</h6>
<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-behance"></i></a></li>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
<!-- end Blog Sidebar -->
</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">
<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,384 @@
<!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 - Blog 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 left dark 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 -->
<div class="section-xs">
<div class="container text-center">
<h3 class="font-family-playfair m-0">mono blog.</h3>
</div><!-- end container -->
</div>
<!-- Post Category section -->
<div class="container">
<div class="row g-2">
<div class="col-12 col-md-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content center">
<span class="fw-normal">Category</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content center">
<span class="fw-normal">Category</span>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content center">
<span class="fw-normal">Category</span>
</div>
</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
<!-- end Post Category section -->
<!-- Blog Posts -->
<div class="section">
<div class="container">
<div class="row g-5">
<div class="col-12 col-lg-8">
<!-- Blog Post box 1 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Lifestyle</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Tips for Street Photography</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 2 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Knowledge</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">10 Books that I will recommend</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 3 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Health</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Benefits of house plants</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Pagination -->
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>
</nav>
</div>
<!-- end Blog Posts -->
<!-- Blog Sidebar -->
<div class="col-12 col-lg-4 d-none d-lg-block">
<!-- Sidebar box 1 - About me -->
<div class="border p-4 mb-4 text-center">
<h6 class="font-small fw-medium uppercase mb-4">About Me</h6>
<img class="img-mask-avatar-md mb-3" src="../assets/images/img-avatar-md.jpg" alt="">
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<ul class="list-inline mt-3">
<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>
<!-- Sidebar box 2 - Categories -->
<div class="border p-4 mb-4">
<h6 class="font-small fw-medium uppercase mb-4 text-center">Categories</h6>
<ul class="list-unstyled">
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Art <span>11</span></a></li>
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Fashion <span>4</span></a></li>
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Lifestyle <span>12</span></a></li>
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Nature <span>8</span></a></li>
<li class="pb-2"><a class="d-flex justify-content-between" href="#">Travel <span>15</span></a></li>
</ul>
</div>
<!-- Sidebar box 3 - Popular Posts -->
<div class="border p-4 mb-4">
<h6 class="font-small fw-medium uppercase mb-4 text-center">Popular Posts</h6>
<!-- Popular post 1 -->
<div class="d-flex align-items-center mb-3">
<a href="#">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</a>
<div class="ps-3">
<h6 class="fw-normal mb-0"><a class="text-link-1" href="#">Blog Post with Image</a></h6>
<span class="font-small">January 07, 2018</span>
</div>
</div>
<!-- Popular post 2 -->
<div class="d-flex align-items-center mb-3">
<a href="#">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</a>
<div class="ps-3">
<h6 class="fw-normal mb-0"><a class="text-link-1" href="#">Blog Post with Image</a></h6>
<span class="font-small">January 07, 2018</span>
</div>
</div>
<!-- Popular post 3 -->
<div class="d-flex align-items-center">
<a href="#">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</a>
<div class="ps-3">
<h6 class="fw-normal mb-0"><a class="text-link-1" href="#">Blog Post with Image</a></h6>
<span class="font-small">January 07, 2018</span>
</div>
</div>
</div>
<!-- Sidebar box 4 - Banner Image -->
<div class="mb-4">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
</a>
</div>
<!-- Sidebar box 5 - Tags -->
<div class="border p-4 mb-4">
<h6 class="font-small fw-medium uppercase mb-4 text-center">Tags</h6>
<ul class="list-inline">
<li><a class="button-text-1" href="#">Art</a></li>
<li><a class="button-text-1" href="#">Design</a></li>
<li><a class="button-text-1" href="#">Event</a></li>
<li><a class="button-text-1" href="#">Fashion</a></li>
<li><a class="button-text-1" href="#">Food</a></li>
<li><a class="button-text-1" href="#">Inspiration</a></li>
<li><a class="button-text-1" href="#">Movie</a></li>
<li><a class="button-text-1" href="#">Music</a></li>
<li><a class="button-text-1" href="#">Nature</a></li>
<li><a class="button-text-1" href="#">Office</a></li>
<li><a class="button-text-1" href="#">Painting</a></li>
<li><a class="button-text-1" href="#">Photography</a></li>
<li><a class="button-text-1" href="#">People</a></li>
<li><a class="button-text-1" href="#">Work</a></li>
</ul>
</div>
<!-- Sidebar box 6 - Facebook Like box -->
<div class="border p-4 mb-4 text-center">
<h6 class="font-small fw-medium uppercase mb-4">Follow on</h6>
<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-behance"></i></a></li>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
<!-- end Blog Sidebar -->
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Blog Posts -->
<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="#">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,294 @@
<!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 - Blog 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 border-bottom">
<div class="container">
<!-- 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-xs">
<div class="container text-center">
<h3 class="font-family-playfair m-0">mono blog.</h3>
</div><!-- end container -->
</div>
<!-- Post Category section -->
<div class="container-fluid p-3">
<div class="owl-carousel text-center" data-owl-margin="20" data-owl-autoplay="true" data-owl-xs="1" data-owl-sm="2" data-owl-md="2" data-owl-lg="3" data-owl-xl="3">
<!-- 1 -->
<div class="hoverbox-4 center">
<a href="#">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<h4 class="fw-normal">Travel</h4>
<p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p>
</div>
<div class="hover-content">
<a class="button button-rounded button-md button-font-2 button-outline-white" href="#">Read More</a>
</div>
</a>
</div>
<!-- 2 -->
<div class="hoverbox-4 center">
<a href="#">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<h4 class="fw-normal">Lifestyle</h4>
<p>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</p>
</div>
<div class="hover-content">
<a class="button button-rounded button-md button-font-2 button-outline-white" href="#">Read More</a>
</div>
</a>
</div>
<!-- 3 -->
<div class="hoverbox-4 center">
<a href="#">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<h4 class="fw-normal">Experience</h4>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
</div>
<div class="hover-content">
<a class="button button-rounded button-md button-font-2 button-outline-white" href="#">Read More</a>
</div>
</a>
</div>
<!-- 4 -->
<div class="hoverbox-4 center">
<a href="#">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<h4 class="fw-normal">Tips &amp; Tricks</h4>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
</div>
<div class="hover-content">
<a class="button button-rounded button-md button-font-2 button-outline-white" href="#">Read More</a>
</div>
</a>
</div>
</div>
</div><!-- end container-fluid -->
<!-- end Post Category section -->
<!-- Blog Posts section -->
<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">
<!-- Blog Post box 1 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Tips &amp; Tricks</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">How to take good pictures</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 2 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Architecture</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Great buildings around the city</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 3 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Knowledge</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Events you should attend</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- end Blog Post box 3 -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Blog Posts 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,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 - Blog 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 sticky-autohide">
<div class="container">
<!-- Logo -->
<!--<div class="header-logo">
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
</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 bg-gray-lighter section-divider-curve-bottom">
<div class="container">
<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 text-center">
<img class="img-mask-avatar-lg mb-3" src="../assets/images/img-avatar-lg.jpg">
<h4>Caroline Williams</h4>
<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>
<!-- Social links -->
<ul class="list-inline-sm mt-3">
<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>
<!-- end About section -->
<!-- Blog Posts -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
<!-- Blog Post box 1 -->
<div class="mb-5">
<div class="img-link-box border-radius">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Lifestyle</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Benefits of Minimalism</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 2 -->
<div class="mb-5">
<div class="img-link-box border-radius">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Knowledge</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">10 Books that I will recommend</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 3 -->
<div class="mb-5">
<div class="img-link-box border-radius">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4 text-start">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Health</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Benefits of house plants</a></h4>
<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">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Pagination -->
<nav>
<ul class="pagination justify-content-center mt-5">
<li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>
</nav>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Blog Posts -->
<footer>
<div class="section-sm bg-dark">
<div class="container text-center">
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</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,323 @@
<!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 - Blog 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 header-lg center border-bottom">
<div class="container-fluid">
<!-- 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 Posts -->
<div class="section-sm">
<div class="container">
<div class="owl-carousel" data-owl-items="1" data-owl-autoplay="true">
<!-- Carousel Item 1 -->
<div class="hoverbox-4 bottom aspect-ratio-2x1">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content">
<h3 class="fw-normal">Blog Post Title</h3>
<p class="d-none d-lg-block">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="hover-content">
<a class="button button-md button-radius button-outline-white" href="#">Continue Reading</a>
</div>
</div>
<!-- Carousel Item 2 -->
<div class="hoverbox-4 bottom aspect-ratio-2x1">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content">
<h3 class="fw-normal">Blog Post Title</h3>
<p class="d-none d-lg-block">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="hover-content">
<a class="button button-md button-radius button-outline-white" href="#">Continue Reading</a>
</div>
</div>
<!-- Carousel Item 3 -->
<div class="hoverbox-4 bottom aspect-ratio-2x1">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content">
<h3 class="fw-normal">Blog Post Title</h3>
<p class="d-none d-lg-block">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="hover-content">
<a class="button button-md button-radius button-outline-white" href="#">Continue Reading</a>
</div>
</div>
<!-- end Carousel Item 3 -->
</div>
</div><!-- end container -->
</div>
<!-- end Hero Posts -->
<!-- Blog Posts -->
<div class="section-sm pt-0">
<div class="container">
<div class="row g-4 gy-5">
<!-- Blog Post box 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- end Blog Post box 6 -->
</div><!-- end row -->
<div class="mt-4 mt-lg-5 text-center">
<a class="button button-lg button-radius button-outline-gray" href="#">View More Posts</a>
</div>
</div><!-- end container -->
</div>
<!-- end Blog Posts -->
<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>
<!-- 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,395 @@
<!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 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">
<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 sticky-autohide header-boxed">
<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-05 section-divider-curve-bottom pt-5">
<div class="container text-center">
<h5 class="fw-light mb-3">Let us help you to</h5>
<h1 class="display-4 fw-bold">Grow Your Business</h1>
<a class="button button-xl button-rounded button-gradient-7 mt-3" href="#">Learn more</a>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-12 col-lg-6">
<h2 class="fw-light mb-3">We believe that teamwork divides the tasks and multiplies the success</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>
</div>
<div class="col-12 col-lg-6">
<!-- Progress bar box 1 -->
<div class="progress-box progress-theme">
<h6 class="fw-medium">Social Marketing</h6>
<div class="animated-progress">
<div data-progress="92"></div>
</div>
</div>
<!-- Progress bar box 2 -->
<div class="progress-box progress-theme mt-4">
<h6 class="fw-medium">Sales Training</h6>
<div class="animated-progress">
<div data-progress="98"></div>
</div>
</div>
<div class="row g-4 mt-2">
<!-- Counter 1 -->
<div class="col-4">
<h1 class="display-5 fw-normal 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="display-5 fw-normal text-color-theme mb-0"><span class="counter">80</span>+</h1>
<p>Happy Clients</p>
</div>
<!-- Counter 3 -->
<div class="col-4">
<h1 class="display-5 fw-normal text-color-theme mb-0"><span class="counter">144</span></h1>
<p>Projects Done</p>
</div>
<!-- end Counter 3 -->
</div><!-- end row -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Lightbox Media -->
<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 Lightbox Media -->
<!-- Services section -->
<div class="section pt-0">
<div class="container">
<div class="row g-4 g-lg-5 text-center icon-5xl" data-cues="fadeIn">
<!-- Services box 1 -->
<div class="col-12 col-md-4">
<i class="bi bi-chat-text text-color-theme"></i>
<h5 class="fw-medium mt-2">Consulting</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Services box 2 -->
<div class="col-12 col-md-4">
<i class="bi bi-star text-color-theme"></i>
<h5 class="fw-medium mt-2">Branding</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Services box 3 -->
<div class="col-12 col-md-4">
<i class="bi bi-bar-chart text-color-theme"></i>
<h5 class="fw-medium mt-2">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 -->
<!-- Clients section -->
<div class="section border-top">
<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">
<h2>Meet Our Partners</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>
</div>
</div><!-- end row -->
</div>
<ul class="clients-grid column-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 -->
<!-- Blog section -->
<div class="section pt-0">
<div class="container" data-cues="fadeIn">
<!-- Blog post box 1 -->
<div class="blog-card-wrapper bg-image" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">04</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 2 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">03</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 3 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">02</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Blog section -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="row align-items-center" data-cues="fadeIn">
<div class="col-12 col-lg-8 col-xl-7">
<h1 class="fw-light">Feel free to ask any questions</h1>
<p class="font-large">Etiam sit amet orci eget eros faucibus tincidunt.</p>
</div>
<div class="col-12 col-lg-4 col-xl-5 text-lg-end">
<a class="button button-xl button-rounded button-gradient-7" href="#">Get In Touch</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax 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,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 - Business 10</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 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-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-06 section-divider-curve-bottom backdrop-filter-blur">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-5 order-lg-2 text-center">
<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple button-hover-scale lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="fas fa-play"></i></a>
</div>
<div class="col-12 col-lg-7 order-lg-1">
<h1 class="display-4 font-family-outfit fw-normal">We transform brands & businesses from inside out</h1>
<div class="d-flex align-items-center mt-4">
<ul class="avatar-group">
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
</ul>
<div class="d-inline-block ps-3">
<ul class="list-inline-sm text-golden-yellow">
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
<li><i class="bi bi-star-fill"></i></li>
</ul>
<span>Best rated solutions</span>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end Hero section -->
<!-- Features section -->
<div class="n-margin-6">
<div class="container icon-5xl">
<div class="row g-4">
<!-- Feature box 1 -->
<div class="col-12 col-lg-4">
<div class="bg-white border-radius-1 box-shadow hover-float p-4 p-xl-5">
<div class="text-color-theme mb-2 mb-lg-3">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-medium">Feature Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Feature box 2 -->
<div class="col-12 col-lg-4">
<div class="bg-white border-radius-1 box-shadow hover-float p-4 p-xl-5">
<div class="text-color-theme mb-2 mb-lg-3">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-medium">Feature Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Feature box 3 -->
<div class="col-12 col-lg-4">
<div class="bg-white border-radius-1 box-shadow hover-float p-4 p-xl-5">
<div class="text-color-theme mb-2 mb-lg-3">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-medium">Feature 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 Features section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
<div class="box-shadow">
<img class="border-radius" src="../assets/images/col-2.jpg" alt="">
</div>
</div>
<div class="col-12 col-lg-6">
<h2 class="fw-normal mb-lg-3">Vivamus elementum semper nisi. Aenean vulputate eleifend</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,
quis nostrud exercitation ullamco laboris</p>
<a class="button-text-2 mt-3 mt-lg-4" href="#">Read more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About 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 -->
<!-- Services section -->
<div class="section border-top">
<div class="container">
<div class="row g-4 g-lg-5" data-cues="fadeIn">
<!-- Service box 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-heart"></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>
<!-- Service box 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-heart"></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>
<!-- Service box 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-heart"></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>
<!-- Service box 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-heart"></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>
<!-- Service box 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-heart"></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>
<!-- Service box 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-heart"></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 -->
<!-- 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 -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-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" data-cues="fadeIn">
<h1 class="display-4 font-family-outfit fw-normal">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-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,478 @@
<!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>

View File

@@ -0,0 +1,442 @@
<!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 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 bg-gray-lightest" data-preloader="1">
<!-- Header -->
<div class="header header-lg header-color-dark center sticky-autohide">
<div class="container-fluid">
<!-- Logo -->
<div class="header-logo">
<h3 class="font-family-outfit 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-color-theme-05 backdrop-filter-blur">
<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-5 font-family-outfit fw-normal line-height-140 mb-5">Quality is not only our standard. It's also an attitude instilled in our company</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-color-theme-* -->
</div>
<!-- end Hero section -->
<!-- Clients section -->
<div class="container">
<div class="bg-white-09 backdrop-filter-blur border-radius box-shadow p-4 p-lg-5 n-margin-4">
<div class="row g-4 align-items-center">
<div class="col-12 col-lg-5 col-xxl-4">
<div class="d-flex align-items-center">
<ul class="avatar-group">
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
</ul>
<div class="d-inline-block ps-3">
<p>We've over 4,000 clients <br class="d-md-block">around the world</p>
</div>
</div>
</div>
<div class="col-12 col-lg-7 col-xxl-8">
<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="3" data-owl-xl="3">
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
<!-- end Clients section -->
<!-- About section -->
<div id="about" class="section-xs">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-12 col-lg-5">
<div class="img-mask-blob-2">
<img src="../assets/images/col-2-square.jpg" alt="" data-rjs="2">
</div>
</div>
<div class="col-12 col-lg-7">
<h2 class="display-6 fw-medium uppercase letter-spacing-1 text-color-theme">We Are Mono</h2>
<ul class="list-inline-sm mt-3 mb-3">
<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>
<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. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<!-- Counters -->
<div class="row g-4 mt-2">
<!-- Counter 1 -->
<div class="col-4">
<h1 class="display-5 fw-normal 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="display-5 fw-normal text-color-theme mb-0"><span class="counter">80</span>+</h1>
<p>Happy Clients</p>
</div>
<!-- Counter 3 -->
<div class="col-4">
<h1 class="display-5 fw-normal 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 About section -->
<!-- Sliding Text -->
<div class="swiper sliding-text pb-3">
<div class="swiper-wrapper">
<!-- Item 1 -->
<div class="swiper-slide">
<h2 class="display-1 fw-semi-bold uppercase stroke-text mb-0 opacity-25">Best Rated HTML Template</h2>
</div>
<!-- Item 2 -->
<div class="swiper-slide">
<h2 class="display-1 fw-semi-bold uppercase text-color-theme mb-0 opacity-15">The Ultimate Multipurpose Template</h2>
</div>
</div>
</div>
<!-- end Sliding Text -->
<!-- Services section -->
<div class="section pt-0">
<div class="container">
<div class="row icon-5xl g-0 mt-5">
<div class="col-12 col-lg-4">
<div class="bg-white box-shadow hover-shadow p-4 px-lg-5">
<i class="bi bi-chat-text text-color-theme mb-4"></i>
<h6 class="fw-medium uppercase">Consulting</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<a class="button button-md button-theme button-radius button-font-2 mt-4" href="#">Learn more</a>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="p-4 px-lg-5">
<i class="bi bi-megaphone text-color-theme mb-4"></i>
<h6 class="fw-medium uppercase">Social Marketing</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<a class="button button-md button-theme button-radius button-font-2 mt-4" href="#">Learn more</a>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="p-4 px-lg-5">
<i class="bi bi-star text-color-theme mb-4"></i>
<h6 class="fw-medium uppercase">Branding</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<a class="button button-md button-theme button-radius button-font-2 mt-4" href="#">Learn more</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services setion -->
<!-- Parallax section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-very-peri-05">
<div class="container text-center">
<a class="button-circle button-circle-xl button-circle-white-2 icon-xl mt-3 lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="bi bi-play"></i></a>
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Contact section -->
<div class="section bg-white">
<div class="container">
<div class="row g-4">
<!-- Contact Info -->
<div class="col-12 col-lg-4">
<div>
<h6 class="fw-medium m-0">Phone:</h6>
<p>+(987) 654 321 01</p>
</div>
<div class="mt-3">
<h6 class="fw-medium m-0">Email:</h6>
<p>contact@email.com</p>
</div>
<div class="mt-3">
<h6 class="fw-medium m-0">Skype:</h6>
<p>skype.contact</p>
</div>
<div class="mt-3">
<h6 class="fw-medium m-0">Address:</h6>
<p>121 King St, Melbourne VIC 3000</p>
</div>
</div>
<!-- Contact Form -->
<div class="col-12 col-lg-8 text-lg-end">
<div class="contact-form">
<form class="form-style-4" 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-radius button-theme button-font-2" 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 row -->
</div><!-- end container -->
</div>
<!-- end Contact section -->
<!-- Google Maps -->
<div class="section pt-0">
<div class="container">
<div id="map1" class="gmap gmap-lg" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div><!-- end container -->
</div>
<!-- end Google Maps -->
<!-- Footer -->
<div class="section bg-dark">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-6 col-lg-3">
<h1 class="display-5 mb-2">Mono</h1>
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 col-lg-3">
<!-- Contact Info -->
<ul class="list-unstyled">
<li>+(976) 444 444 11</li>
<li>contact@flatheme.net</li>
<li>Ulaanbaatar, Khan-Uul, 11000</li>
</ul>
<!-- Social Links -->
<ul class="list-inline-sm mt-4">
<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>
<li>
<a class="button-circle button-circle-sm button-circle-white-2" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash animate-links">
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Pricing Plans</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash animate-links">
<li>
<a href="#">Our Team</a>
</li>
<li>
<a href="#">Our Clients</a>
</li>
<li>
<a href="#">Photo Gallery</a>
</li>
<li>
<a href="#">Process</a>
</li>
<li>
<a href="#">GDPR Compliance</a>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Footer -->
<!-- Scroll to top button -->
<div class="scrolltotop icon-lg">
<a class="button-circle button-circle-md button-circle-theme" 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,536 @@
<!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 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 header-boxed">
<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="owl-carousel owl-nav-overlay owl-dots-overlay" data-owl-nav="true" data-owl-dots="true" data-owl-items="1">
<!-- Slider Item 1 -->
<div class="bg-image" data-bg-src="../assets/images/background.jpg">
<div class="section-xl bg-dark-03">
<div class="container text-center pt-5">
<div class="row g-4">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
<h5 class="fw-normal mb-3 text-white">Hello there! This Template is</h5>
<h1 class="fw-bold uppercase letter-spacing-1">Made for your Business</h1>
<a class="button button-xl button-radius button-outline-white mt-3 button-font-2" href="#">Explore</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- Slider Item 2 -->
<div class="bg-image" data-bg-src="../assets/images/background.jpg">
<div class="section-xl bg-dark-03">
<div class="container text-center pt-5">
<div class="row g-4">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
<h5 class="fw-normal mb-3 text-white">Hello there! This Template is</h5>
<h1 class="fw-bold uppercase letter-spacing-1">Made for your Business</h1>
<a class="button button-xl button-radius button-outline-white mt-3 button-font-2" href="#">Explore</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
</div><!-- end owl-carousel -->
<!-- end Hero section -->
<!-- Services section -->
<div class="border-bottom">
<div class="container">
<div class="row g-0 icon-5xl text-center">
<div class="col-12 col-md-4">
<div class="p-4 p-lg-5 hover-shadow">
<i class="bi bi-star text-dark"></i>
<h5 class="fw-medium mt-2">Social Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="col-12 col-md-4">
<div class="p-4 p-lg-5 hover-shadow">
<i class="bi bi-journal-text text-dark"></i>
<h5 class="fw-medium mt-2">Strategy Planning</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="col-12 col-md-4">
<div class="p-4 p-lg-5 hover-shadow">
<i class="bi bi-chat-text text-dark"></i>
<h5 class="fw-medium mt-2">Consulting</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
<img class="box-shadow" src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<h3 class="fw-normal mb-3">We believe that teamwork divides the tasks and multiplies the success</h3>
<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>
<a class="button button-lg button-backdrop-dark mt-4" href="#">Learn More</a>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Progress bars -->
<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-4">
<h2 class="display-3 font-family-outfit fw-normal mb-1"><span class="counter">4000</span>+</h2>
<span>Satisfied Clients around the globe</span>
</div>
<div class="col-12 col-lg-8">
<div class="row g-4 gx-lg-5">
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Management</h6>
<div class="animated-progress">
<div data-progress="90"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Strategy & Planning</h6>
<div class="animated-progress">
<div data-progress="88"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Digital Solutions</h6>
<div class="animated-progress">
<div data-progress="96"></div>
</div>
</div>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Progress bars -->
<!-- Parallax section -->
<div class="section-xl 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" data-cues="fadeIn">
<div class="col-12 col-lg-8 col-xl-7">
<h1 class="fw-light">Feel free to ask any questions</h1>
<p class="font-large">Etiam sit amet orci eget eros faucibus tincidunt.</p>
</div>
<div class="col-12 col-lg-4 col-xl-5 text-lg-end">
<a class="button button-xl button-radius button-reveal-right-outline-white" href="#"><i class="bi bi-arrow-right"></i><span>Get In Touch</span></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Testimonial section -->
<div class="bg-gray bg-fade-white-top">
<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">
<h6 class="font-small fw-medium uppercase">Testimonial</h6>
<h2 class="display-6 fw-medium">What People Say</h2>
</div>
</div>
</div>
<div class="masonry column-3 spacing-2" data-cues="fadeIn">
<!-- Masonry Item 1 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<div class="d-flex align-items-center mt-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">COO - Mono</span>
</div>
</div>
</div>
</div>
<!-- Masonry Item 2 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis"</p>
<div class="d-flex align-items-center mt-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">Developer - Mono</span>
</div>
</div>
</div>
</div>
<!-- Masonry Item 3 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<div class="d-flex align-items-center mt-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">Designer - Mono</span>
</div>
</div>
</div>
</div>
<!-- Masonry Item 4 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<div class="d-flex align-items-center mt-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">Marketer - Mono</span>
</div>
</div>
</div>
</div>
<!-- Masonry Item 5 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis"</p>
<div class="d-flex align-items-center mt-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">Beth Reynolds</h5>
<span class="font-small fw-normal">Designer - Mono</span>
</div>
</div>
</div>
</div>
<!-- Masonry Item 6 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis"</p>
<div class="d-flex align-items-center mt-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">Manager - Mono</span>
</div>
</div>
</div>
</div>
</div><!-- end masonry -->
</div><!-- end row -->
</div>
</div>
<!-- end Testimonial section -->
<!-- Clients section -->
<div class="section pt-0">
<div class="container">
<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><!-- end container -->
</div>
<!-- end Clients 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,413 @@
<!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 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-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 font-2">
<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="bg-gradient-2 bg-fade-white-top">
<div class="section-lg">
<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 font-family-outfit fw-normal text-dark line-height-120">We <span class="text-highlight-gradient-2">transform</span> brands & businesses from inside out</h1>
<ul class="list-inline mt-4">
<li>
<a class="button button-lg button-rounded button-font-2 button-theme" href="#">Our Services</a>
</li>
<li>
<a class="button button-lg button-rounded button-font-2 button-white button-shadow button-hover-float" href="#">Get In Touch</a>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section pt-0">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-6">
<div class="row g-4">
<div class="col-12">
<a class="lightbox-media-box border-radius-1 box-shadow icon-xl" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<img src="../assets/images/col-2-short.jpg" alt="">
<i class="bi bi-play"></i>
</a>
</div>
<div class="col-6">
<img class="border-radius-1 box-shadow" src="../assets/images/col-4.jpg" alt="">
</div>
<div class="col-6">
<img class="border-radius-1 box-shadow" src="../assets/images/col-4.jpg" alt="">
</div>
</div><!-- end row(inner) -->
</div>
<div class="col-12 col-lg-6">
<h2 class="fw-light 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>
<div class="row g-4 mt-2">
<!-- Progress bar 1 -->
<div class="col-12 col-sm-6">
<div class="progress-box progress-theme">
<h6 class="font-small uppercase fw-medium">Branding</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 progress-theme">
<h6 class="font-small uppercase 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 progress-theme">
<h6 class="font-small uppercase 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 progress-theme">
<h6 class="font-small uppercase fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="80"></div>
</div>
</div>
</div>
<!-- end Progress bar 4 -->
</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 g-4 g-lg-5 icon-xl" data-cues="fadeIn">
<!-- Service box 1 -->
<div class="col-12 col-lg-4">
<div class="circle-box-xl bg-light-theme mb-3">
<i class="bi bi-star text-color-theme"></i>
</div>
<h4 class="font-family-outfit fw-normal">Branding</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<!-- Service box 2 -->
<div class="col-12 col-lg-4">
<div class="circle-box-xl bg-light-theme mb-3">
<i class="bi bi-megaphone text-color-theme"></i>
</div>
<h4 class="font-family-outfit fw-normal">Marketing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<!-- Service box 3 -->
<div class="col-12 col-lg-4">
<div class="circle-box-xl bg-light-theme mb-3">
<i class="bi bi-chat-text text-color-theme"></i>
</div>
<h4 class="font-family-outfit fw-normal">Consulting</h4>
<p>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 Services section -->
<!-- Testimonial section -->
<div class="section pt-0">
<div class="container">
<div class="bg-gray-lighter border-radius-1 p-4 p-lg-5" data-cue="fadeIn">
<div class="owl-carousel" data-owl-items="1" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<img class="mb-3" src="../assets/images/col-4-square.jpg" alt="">
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/col-4-square.jpg" alt="">
<h5 class="fw-normal line-height-140 m-0">Andrew Palmer</h5>
<span class="font-small fw-normal">Developer - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/col-4-square.jpg" alt="">
<h5 class="fw-normal line-height-140 m-0">Anna Mullen</h5>
<span class="font-small fw-normal">Designer - Mono</span>
<p class="mt-3">"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>
</div><!-- end container -->
</div>
<!-- end Testimonial 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="display-6 font-family-outfit 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" data-cues="fadeIn">
<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 -->
<!-- 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="font-family-outfit fw-normal">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="font-family-outfit fw-normal">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="font-family-outfit fw-normal">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="font-family-outfit fw-normal">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 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,416 @@
<!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 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-spring-red.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-spring-red preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header right header-color-dark header-boxed 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="bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="section-lg bg-dark-04 backdrop-filter-blur">
<div class="container pt-5">
<div class="row g-4">
<div class="col-12 col-sm-10 col-md-9 col-lg-8 col-xl-7">
<h1 class="display-5 font-family-outfit fw-normal mb-0">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>
<!-- end Hero section -->
<!-- Services section -->
<div class="border-bottom">
<div class="container">
<div class="row icon-5xl g-0">
<div class="col-12 col-md-4">
<div class="p-4 p-lg-5 hover-shadow">
<i class="bi bi-chat-text text-color-theme"></i>
<h5 class="fw-medium mt-2">Business Consultent</h5>
<p>Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<a class="button-text-3 button-text-theme mt-3" href="#">Learn More</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="p-4 p-lg-5 hover-shadow">
<i class="bi bi-gear text-color-theme"></i>
<h5 class="fw-medium mt-2">Factory Consultent</h5>
<p>Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<a class="button-text-3 button-text-theme mt-3" href="#">Learn More</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="p-4 p-lg-5 hover-shadow">
<i class="bi bi-journal-text text-color-theme"></i>
<h5 class="fw-medium mt-2">Strategy &amp; Planning</h5>
<p>Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<a class="button-text-3 button-text-theme mt-3" href="#">Learn More</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6 col-xl-7">
<img class="border-radius" src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-6 col-xl-5">
<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">Professionals</span>
</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.</p>
<!-- Progress bars -->
<div class="mt-4">
<!-- Progress bar box 1 -->
<div class="progress-box progress-theme">
<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-theme 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 progress-theme mt-4">
<h6 class="fw-medium">Copywriting</h6>
<div class="animated-progress">
<div data-progress="92"></div>
</div>
</div>
</div>
</div>
</div><!-- end row -->
</div>
</div>
<!-- end About section -->
<!-- Clients section -->
<div class="section pt-0">
<div class="container">
<div class="row align-items-center g-4 g-lg-5">
<div class="col-12 col-xl-4">
<h2 class="fw-normal">Our Amazing Clients</h2>
<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 col-xl-8">
<ul class="clients-grid column-4">
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Testimonial section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="owl-carousel" data-owl-dots="false" data-owl-nav="true" data-owl-margin="30" data-owl-xs="1" data-owl-sm="1" data-owl-md="1" data-owl-lg="2" data-owl-xl="2">
<!-- Testimonial Slider Item 1 -->
<div class="bg-dark-07 border-radius p-5">
<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 text-white-09">Manager - Mono</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- Testimonial Slider Item 2 -->
<div class="bg-dark-07 border-radius p-5">
<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 text-white-09">Developer - Mono</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- Testimonial Slider Item 3 -->
<div class="bg-dark-07 border-radius p-5">
<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 text-white-09">Designer - Mono</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- Testimonial Slider Item 4 -->
<div class="bg-dark-07 border-radius p-5">
<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 text-white-09">Marketer - Mono</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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 -->
<!-- Contact section -->
<div class="section">
<div class="container">
<div class="row g-4">
<!-- Contact Info -->
<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>
<!-- Contact Form -->
<div class="col-12 col-md-8">
<div class="contact-form text-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-theme button-radius" 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>
<!-- end Contact Form -->
</div><!-- end row -->
<!-- Google Maps -->
<div id="map1" class="gmap gmap-md mt-5" data-latitude="51.513569" data-longitude="-0.123443"v></div>
</div><!-- end container -->
</div>
<!-- end Contact 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,421 @@
<!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 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-black 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">
<a class="button button-sm button-rounded button-white-2 align-middle" href="#">Button</a>
</div>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<!-- Hero section -->
<div class="section-2xl bg-dark section-divider-curve-bottom">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 col-lg-8">
<h1 class="display-5 font-family-outfit fw-light">We help innovators to successfully bring their business to life</h1>
<a class="button-text-3 mt-3" href="#">Get in Touch</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="container">
<div class="n-margin-6">
<div class="row g-3 g-lg-4">
<div class="col-12 col-lg-4">
<div class="hoverbox-4 bottom border-radius">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<h5>Experienced</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="hover-content">
<a class="button button-md button-radius button-outline-white" href="#">Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="hoverbox-4 bottom border-radius">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<h5>Creative</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="hover-content">
<a class="button button-md button-radius button-outline-white" href="#">Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="hoverbox-4 bottom border-radius">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<h5>Professional</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="hover-content">
<a class="button button-md button-radius button-outline-white" href="#">Learn More</a>
</div>
</div>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
<!-- end About section -->
<!-- Accordion/Counters section -->
<div class="section">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-7">
<ul class="accordion single-open rounded">
<li class="active">
<div class="accordion-title">
<h6 class="fw-medium">First question?</h6>
</div>
<div class="accordion-content">
<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>
</li>
<li>
<div class="accordion-title">
<h6 class="fw-medium">Second question?</h6>
</div>
<div class="accordion-content">
<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>
</li>
<li>
<div class="accordion-title">
<h6 class="fw-medium">Third question?</h6>
</div>
<div class="accordion-content">
<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>
</li>
</ul>
</div>
<div class="col-12 col-lg-5">
<div class="row g-4">
<div class="col-6 col-sm-4 col-md-6">
<h2 class="display-6 fw-normal m-0"><span class="counter">50</span>+</h2>
<h6 class="font-small fw-medium uppercase text-dark-05">Projects Done</h6>
</div>
<div class="col-6 col-sm-4 col-md-6">
<h2 class="display-6 fw-normal m-0"><span class="counter">74</span>+</h2>
<h6 class="font-small fw-medium uppercase text-dark-05">Hours of Meeting</h6>
</div>
<div class="col-6 col-sm-4 col-md-6">
<h2 class="display-6 fw-normal m-0"><span class="counter">300</span>+</h2>
<h6 class="font-small fw-medium uppercase text-dark-05">Happy Clients</h6>
</div>
<div class="col-6 col-sm-4 col-md-6">
<h2 class="display-6 fw-normal m-0"><span class="counter">35</span>+</h2>
<h6 class="font-small fw-medium uppercase text-dark-05">Hours of Cycling</h6>
</div>
<div class="col-12">
<div class="progress-box">
<h6 class="fw-medium">Branding</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
<div class="progress-box mt-4">
<h6 class="fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="88"></div>
</div>
</div>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Accordion/Counters section -->
<!-- Clients section -->
<div class="container">
<div class="bg-gray-lighter p-4 p-lg-5 border-radius" data-cue="fadeIn">
<div class="row g-4 align-items-center">
<div class="col-12 col-lg-5 col-xxl-4">
<div class="d-flex align-items-center">
<ul class="avatar-group">
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
</ul>
<div class="d-inline-block ps-3">
<p>We've over 4,000 clients <br class="d-md-block">around the world</p>
</div>
</div>
</div>
<div class="col-12 col-lg-7 col-xxl-8">
<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="3" data-owl-xl="3">
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
<!-- end Clients section -->
<!-- Services section -->
<div class="section">
<div class="container">
<div class="mb-5" data-cue="fadeIn">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="display-6 font-family-outfit fw-light m-0">We integrate staregy, creativity & experience to build brands</h3>
</div>
</div><!-- end row -->
</div>
<div class="row g-4 icon-5xl" data-cues="fadeIn">
<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-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-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-medium 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-medium 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 -->
<!-- Testimonial section -->
<div class="section pt-0">
<div class="container">
<div class="owl-carousel" data-owl-items="1" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<img class="mb-3" src="../assets/images/col-4-square.jpg" alt="">
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/col-4-square.jpg" alt="">
<h5 class="fw-normal line-height-140 m-0">Andrew Palmer</h5>
<span class="font-small fw-normal">Developer - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/col-4-square.jpg" alt="">
<h5 class="fw-normal line-height-140 m-0">Anna Mullen</h5>
<span class="font-small fw-normal">Designer - Mono</span>
<p class="mt-3">"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 -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-07">
<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" data-cues="fadeIn">
<h3 class="display-5 font-family-outfit fw-normal mb-3">Any Questions?</h3>
<p class="font-large">Maecenas nec odio et ante tincidunt tempus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.</p>
<a class="button button-lg button-radius button-white-2 mt-4" href="#">Get In Touch</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</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,429 @@
<!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 7</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 header-color-dark 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="owl-carousel owl-nav-overlay owl-dots-overlay" data-owl-nav="true" data-owl-dots="true" data-owl-items="1" data-owl-autoPlay="true">
<!-- Slider Item 1 -->
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="position-middle">
<div class="row">
<div class="col-12 col-sm-10 col-md-9">
<h1 class="display-4 font-family-outfit fw-semi-bold line-height-130">We have the right Solutions for your Business</h1>
<a class="button button-xl button-radius button-white-2 mt-4" href="#">Let's Start</a>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
</div>
</div>
<!-- Slider Item 2 -->
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="position-middle">
<div class="row">
<div class="col-12 col-sm-10 col-md-9">
<h1 class="display-4 font-family-outfit fw-semi-bold line-height-130">We have the right Solutions for your Business</h1>
<a class="button button-xl button-radius button-white-2 mt-4" href="#">Start Here</a>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
</div>
</div>
</div><!-- end owl-carousel -->
<!-- end Hero section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-5 align-items-center" data-cues="fadeIn">
<div class="col-12 col-lg-5 col-xl-6">
<img class="border-radius box-shadow" src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-7 col-xl-6">
<h2 class="fw-normal display-6 mb-3">We Focus on Quality,<br>not Quantity</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>
<a class="button button-lg button-radius button-reveal-right-dark mt-4" href="#"><span>More About Us</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Testimonial 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">
<h6 class="fw-medium uppercase">What People Say?</h6>
</div>
</div>
</div>
<div class="testimonial-grid column-2" data-cues="fadeIn">
<!-- Testimonial box 1 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-md.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h5 class="fw-medium m-0 line-height-140">Emiley Haley</h5>
<span class="font-small fw-medium text-dark-05">Manager - Mono</span>
</div>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-md.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h5 class="fw-medium m-0 line-height-140">Andrew Palmer</h5>
<span class="font-small fw-medium text-dark-05">Developer - Mono</span>
</div>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-md.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h5 class="fw-medium m-0 line-height-140">Anna Mullen</h5>
<span class="font-small fw-medium text-dark-05">Designer - Mono</span>
</div>
</div>
<!-- Testimonial box 4 -->
<div class="testimonial-grid-box">
<div class="testimonial-img">
<img src="../assets/images/img-avatar-md.jpg" alt="">
</div>
<div class="testimonial-content">
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h5 class="fw-medium m-0 line-height-140">John Smith</h5>
<span class="font-small fw-medium text-dark-05">Marketer - Mono</span>
</div>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Testimonial section -->
<!-- Services section -->
<div class="container text-center">
<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="font-family-outfit fw-normal display-6">What We Do</h2>
</div>
</div>
</div>
<div class="row g-4 g-lg-5 icon-5xl" data-cues="fadeIn">
<!-- Icon text box 1 -->
<div class="col-12 col-lg-4">
<i class="bi bi-chat-text text-dark mt-2"></i>
<h5 class="fw-medium mt-2">Consulting</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-megaphone text-dark mt-2"></i>
<h5 class="fw-medium 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-lg-4">
<i class="bi bi-star text-dark mt-2"></i>
<h5 class="fw-medium mt-2">Branding</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 -->
<!-- end Services section -->
<!-- Clients section -->
<div class="section">
<div class="container">
<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">
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<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 -->
<!-- About section -->
<div class="section pt-0">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-6">
<div class="row g-4" data-cues="fadeIn">
<div class="col-12">
<a class="lightbox-media-box border-radius-1 box-shadow icon-xl" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<img src="../assets/images/col-2-short.jpg" alt="">
<i class="bi bi-play"></i>
</a>
</div>
<div class="col-6">
<img class="border-radius-1 box-shadow" src="../assets/images/col-4.jpg" alt="">
</div>
<div class="col-6">
<img class="border-radius-1 box-shadow" src="../assets/images/col-4.jpg" alt="">
</div>
</div><!-- end row(inner) -->
</div>
<div class="col-12 col-lg-6" data-cues="fadeIn">
<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>
<div class="row g-4 mt-2">
<!-- Progress bar 1 -->
<div class="col-12 col-sm-6">
<div class="progress-box">
<h6 class="font-small uppercase fw-medium">Branding</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="font-small uppercase 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="font-small uppercase 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="font-small uppercase fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="80"></div>
</div>
</div>
</div>
<!-- end Progress bar 4 -->
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About 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,456 @@
<!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 8</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">
<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 -->
<!-- About section -->
<div class="section border-top">
<div class="container">
<div class="row">
<div class="col-12 col-sm-10 col-md-8 col-lg-7">
<div class="d-inline-block bg-light-purple 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 display-6 line-height-140">We help innovators to successfully bring their business to life</h2>
<a class="button-text-3 mt-3" href="#">More About Us</a>
</div>
</div><!-- end row -->
<div class="row g-4 g-lg-5 align-items-center mt-4">
<div class="col-12 col-lg-8">
<div class="row g-4">
<div class="col-12 col-md-6">
<div class="hoverbox-4 bottom border-radius">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<h5 class="fw-medium">Experienced</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="hover-content">
<a class="button button-lg button-white-2 button-rounded" href="#">Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="hoverbox-4 bottom border-radius mt-lg-4">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<h5 class="fw-medium">Professional</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="hover-content">
<a class="button button-lg button-white-2 button-rounded" href="#">Learn More</a>
</div>
</div>
</div>
</div><!-- end row -->
</div>
<div class="col-12 col-lg-4">
<div class="row g-4">
<div class="col-12 col-sm-6 col-md-4 col-lg-6">
<h2 class="fw-normal display-6 m-0"><span class="counter">50</span>+</h2>
<span>Projects Done</span>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-6">
<h2 class="fw-normal display-6 counter m-0">74</h2>
<span>Hours of Meeting</span>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-6">
<h2 class="fw-normal display-6 counter m-0">4000</h2>
<span>Happy Clients</span>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-6">
<h2 class="fw-normal display-6 counter m-0">35</h2>
<span>Hours of Cycling</span>
</div>
<div class="col-12">
<div class="progress-box progress-theme">
<h6 class="fw-medium">Branding</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
<div class="progress-box progress-theme mt-4">
<h6 class="fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="88"></div>
</div>
</div>
</div>
</div><!-- end row -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About 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-normal">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-normal">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-normal">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-normal">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 -->
<!-- Testimonial section -->
<div class="bg-gray bg-fade-white-top">
<div class="section pb-0">
<div class="container">
<div class="row">
<div class="col-12 col-sm-10 col-md-8 col-lg-7">
<h2 class="fw-normal display-6 line-height-140 m-0">We have over 4,000 satisfied clients around the world</h2>
</div>
</div><!-- end row -->
<div class="masonry column-2 spacing-2 mt-5" data-cues="fadeIn">
<!-- Masonry Item 1 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<div class="d-flex align-items-center mt-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-medium m-0 line-height-140">Emiley Haley</h5>
<span class="d-block font-small uppercase fw-medium text-dark-05">COO - Mono</span>
</div>
</div>
</div>
</div>
<!-- Masonry Item 2 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis"</p>
<div class="d-flex align-items-center mt-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-medium m-0 line-height-140">Andrew Palmer</h5>
<span class="d-block font-small uppercase fw-medium text-dark-05">Developer - Mono</span>
</div>
</div>
</div>
</div>
<!-- Masonry Item 3 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<div class="d-flex align-items-center mt-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-medium m-0 line-height-140">Anna Mullen</h5>
<span class="d-block font-small uppercase fw-medium text-dark-05">Designer - Mono</span>
</div>
</div>
</div>
</div>
<!-- Masonry Item 4 -->
<div class="masonry-item">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<div class="d-block text-golden-yellow mb-3">
<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>
<p class="font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis."</p>
<div class="d-flex align-items-center mt-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-medium m-0 line-height-140">John Smith</h5>
<span class="d-block font-small uppercase fw-medium text-dark-05">Marketer - Mono</span>
</div>
</div>
</div>
</div>
</div><!-- end masonry -->
</div><!-- end container -->
</div>
</div>
<!-- end Testimonial section -->
<!-- Clients section -->
<div class="section-sm">
<div class="container">
<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><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Parallax section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-02">
<div class="container text-center">
<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple icon-xl button-hover-scale lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<i class="bi bi-play"></i>
</a>
</div><!-- end container -->
</div>
</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,364 @@
<!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 9</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">
<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">
<div class="section-lg bg-image parallax border-radius" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-01">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<h1 class="fw-semi-bold mb-2">A satisfied customer is the best business strategy of all</h1>
<p class="font-large text-dark-08">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="mt-4">
<a class="button button-xl button-radius button-dark" href="#">Learn More</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
</div>
<!-- end Hero section -->
<div class="section">
<div class="container text-center">
<div class="row">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h3 class="fw-normal line-height-160 mb-0">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</h3>
</div>
</div>
</div><!-- end container -->
</div>
<!-- Services section -->
<div class="container-fluid px-3 px-lg-4">
<div class="row g-3 g-lg-4">
<div class="col-12 col-md-4">
<div class="hoverbox-1 border-radius">
<img src="../assets/images/col-1.jpg" alt="">
<div class="hover-content bottom">
<h5 class="fw-medium">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<a class="button-text-3 mt-4" href="#">Learn more</a>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="hoverbox-1 border-radius">
<img src="../assets/images/col-1.jpg" alt="">
<div class="hover-content bottom">
<h5 class="fw-medium">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<a class="button-text-3 mt-4" href="#">Learn more</a>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="hoverbox-1 border-radius">
<img src="../assets/images/col-1.jpg" alt="">
<div class="hover-content bottom">
<h5 class="fw-medium">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<a class="button-text-3 mt-4" href="#">Learn more</a>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container-fluid -->
<!-- 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">
<h6 class="uppercase">What People Say?</h6>
</div>
</div>
</div>
<div class="owl-carousel" data-owl-nav="true" data-owl-margin="30" data-owl-xs="1" data-owl-sm="1" data-owl-md="1" data-owl-lg="2" data-owl-xl="2">
<!-- Testimonial Slider Item 1 -->
<div class="border border-radius p-5">
<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-medium m-0 line-height-140">Emiley Haley</h5>
<span class="font-small fw-medium text-dark-05">Manager - Mono</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- Testimonial Slider Item 2 -->
<div class="border border-radius p-5">
<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-medium m-0 line-height-140">Andrew Palmer</h5>
<span class="font-small fw-medium text-dark-05">Developer - Mono</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- Testimonial Slider Item 3 -->
<div class="border border-radius p-5">
<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-medium m-0 line-height-140">Anna Mullen</h5>
<span class="font-small fw-medium text-dark-05">Designer - Mono</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- Testimonial Slider Item 4 -->
<div class="border border-radius p-5">
<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-medium m-0 line-height-140">John Smith</h5>
<span class="font-small fw-medium text-dark-05">Marketer - Mono</span>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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 -->
<!-- About section -->
<div class="section pt-0">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
<img class="border-radius" src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<h2 class="fw-normal mb-3">Vivamus elementum semper nisi. Aenean vulputate eleifend</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,
quis nostrud exercitation ullamco</p>
<a class="button-text-2 mt-3 mt-lg-4" href="#">Read more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About 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-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-01">
<div class="container text-center">
<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple button-hover-shrink mt-3 lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="fas fa-play"></i></a>
</div><!-- end container -->
</div>
</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,437 @@
<!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 - Cafe</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-dark">
<!-- Header -->
<div class="header center header-color-black transparent-light sticky">
<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="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonial">Testimonial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu">Our Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</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 id="home" class="section-2xl 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="display-2 fw-medium">Mono Cafe</h1>
<h6 class="uppercase fw-medium letter-spacing-2">Since 2017</h6>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end Hero section -->
<!-- About section -->
<div id="about" class="section-lg bg-black">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-6">
<img src="../assets/images/col-1-square.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<h1 class="fw-normal">About Mono Cafe</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<a class="button button-lg button-outline-white mt-4 mt-lg-5" href="">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Testimonial section -->
<div id="testimonial" class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="owl-carousel icon-3xl" 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="bi bi-chat-square-quote text-white mb-4"></i>
<p class="mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal line-height-120">Emiley Haley</h4>
<h6 class="font-small fw-normal uppercase m-0">Coffee Lover</h6>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<i class="bi bi-chat-square-quote text-white mb-4"></i>
<p class="mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal line-height-120">Emiley Haley</h4>
<h6 class="font-small fw-normal uppercase m-0">Coffee Lover</h6>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<i class="bi bi-chat-square-quote text-white mb-4"></i>
<p class="mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal line-height-120">Emiley Haley</h4>
<h6 class="font-small fw-normal uppercase m-0">Coffee Lover</h6>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end Testimonial section -->
<!-- Our Menu section -->
<div id="menu" class="section-lg bg-black">
<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="fw-normal">Explore Our Menu</h1>
</div>
</div><!-- end row(1) -->
<!-- Tab Contents -->
<div class="tab-content mt-5">
<!-- Drinks -->
<div class="tab-pane fade show active" id="drinks">
<div class="row g-5">
<div class="col-12 col-lg-6">
<!-- Menu Item -->
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Cafe Latte</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$3.5</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Americano</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$2.5</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Espresso</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$2.5</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Cappucino</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.0</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Hot Chocolate</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.0</h4>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<!-- Menu Item -->
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Mocha</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$3.0</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Macchiato</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.0</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Iced Coffee</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.0</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Iced Tea</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.0</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Iced Frappe</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.0</h4>
</div>
</div>
</div>
</div><!-- end row -->
</div>
<!-- Desserts -->
<div class="tab-pane fade" id="desserts">
<div class="row g-5">
<div class="col-12 col-lg-6">
<!-- Menu Item -->
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Classic Cheesecake</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.5</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Chocolate Cheesecake</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.5</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Strawberry Cheesecake</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.5</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Nutella Cheesecake</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.5</h4>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<!-- Menu Item -->
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Classic Cheesecake</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.5</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Chocolate Cheesecake</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.5</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Strawberry Cheesecake</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.5</h4>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="fw-normal m-0">Nutella Cheesecake</h5>
<p class="fw-light">Product description</p>
</div>
<div class="d-md-inline-block text-md-end">
<h4 class="fw-light">$4.5</h4>
</div>
</div>
</div>
</div><!-- end row -->
</div>
</div>
<!-- Nav for Tab Contents -->
<ul class="nav nav-custom justify-content-center font-family-poppins font-small uppercase mt-5">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#drinks">Coffee Drinks</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#desserts">Desserts</button>
</li>
</ul>
</div><!-- end container -->
</div>
<!-- end Our Menu section -->
<!-- Contact section -->
<div id="contact" class="section-lg 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-normal">Opening Hours & Reservations</h1>
<div class="row g-4 mt-5">
<div class="col-12 col-sm-6">
<ul class="list-unstyled font-large">
<li>Mon - Thu // 9:00 - 23:00</li>
<li>Fri - Sun // 8:00 - 24:00</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="list-unstyled font-large">
<li>Table : +(123) 456 789 01</li>
<li>Manager : +(123) 456 789 02</li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end Contact section -->
<footer>
<div class="section-sm bg-black">
<div class="container fw-light">
<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="#">Contact</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">
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</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,61 @@
<!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 - Coming Soon 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">
<div class="section-fullscreen bg-gradient-4">
<div class="container text-center">
<div class="position-top">
<div class="row align-items-center g-0">
<div class="col-6 text-start">
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
</div>
<div class="col-6 text-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-linkedin"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</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-4 fw-lighter mb-4">We're Launching In</h1>
<h1><span class="countdown" data-countdown="2025/12/31"></span></h1>
</div>
</div><!-- end row -->
</div><!-- end position-middle -->
<div class="position-bottom">
<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,72 @@
<!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 - Coming Soon 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-dark">
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-04">
<div class="container">
<div class="position-top">
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
</div><!-- end position-top -->
<div class="position-middle">
<div class="row">
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<h1 class="display-5"><span class="countdown" data-countdown="2025/12/31"></span></h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<ul class="list-inline-sm mt-4">
<li>
<a class="button-circle button-circle-sm button-circle-white-2 button-circle-hover-slide" href="#">
<i class="bi bi-facebook"></i>
<i class="bi bi-facebook"></i>
</a>
</li>
<li>
<a class="button-circle button-circle-sm button-circle-white-2 button-circle-hover-slide" href="#">
<i class="bi bi-twitter-x"></i>
<i class="bi bi-twitter-x"></i>
</a>
</li>
<li>
<a class="button-circle button-circle-sm button-circle-white-2 button-circle-hover-slide" href="#">
<i class="bi bi-pinterest"></i>
<i class="bi bi-pinterest"></i>
</a>
</li>
</ul>
</div>
</div>
</div><!-- end position-middle -->
<div class="position-bottom text-end">
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div><!-- end position-bottom -->
</div><!-- end container -->
</div>
</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,72 @@
<!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 - Coming Soon 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="row g-0 h-100 text-center">
<div class="col-12 col-lg-6 h-100 bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-03">
<div class="container">
<div class="position-middle">
<div class="row">
<div class="col-12 col-sm-10 offset-sm-1">
<h1 class="display-5"><span class="countdown" data-countdown="2025/12/31"></span></h1>
</div>
</div><!-- end row -->
</div><!-- end position-middle -->
</div><!-- end container -->
</div>
</div>
<div class="col-12 col-lg-6 h-100">
<div class="container text-center">
<div class="position-top">
<h3>mono</h3>
</div><!-- end postion-top -->
<div class="position-middle">
<div class="row">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2">
<h2>We're Launching Soon</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div><!-- end row(inner) -->
</div><!-- end position-middle -->
<div class="position-bottom">
<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-instagram" href="#"><i class="bi bi-instagram"></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-dribbble" href="#"><i class="bi bi-dribbble"></i></a></li>
</ul>
</div><!-- end position-bottom -->
</div><!-- end container -->
</div>
</div><!-- end row -->
</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,52 @@
<!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 - Coming Soon 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-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-03">
<div class="container text-center">
<div class="position-top">
<h4><a href="#">mono</a></h4>
</div>
<div class="position-middle">
<h1 class="display-2 fw-light">Coming Soon</h1>
<h3 class="fw-light m-0"><span class="countdown" data-countdown="2025/12/31"></span></h3>
</div><!-- end position-middle -->
<div class="position-bottom">
<ul class="list-inline mb-2">
<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><!-- end position-bottom -->
</div><!-- end container -->
</div>
</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,50 @@
<!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 - Coming Soon 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">
<div class="section-fullscreen">
<div class="container">
<div class="position-top">
<h3 class="uppercase letter-spacing-1"><a class="text-dark" href="/">mono</a></h3>
</div><!-- end position-top -->
<div class="position-middle">
<h1 class="display-2 fw-bold">Coming Soon</h1>
<h3 class="fw-light m-0 text-dark-06">We'll launch in <span class="countdown" data-countdown="2025/12/31"></span></h3>
</div><!-- end position-middle -->
<div class="position-bottom">
<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-instagram" href="#"><i class="bi bi-instagram"></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>
</ul>
</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,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 - Coming Soon 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">
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<div class="position-top">
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
</div>
<div class="position-middle">
<h1 class="display-1 fw-bold uppercase letter-spacing-3 stroke-text">Coming Soon</h1>
<h1 class="fw-thin"><span class="countdown" data-countdown="2025/12/31"></span></h1>
</div><!-- end position-middle -->
<div class="position-bottom">
<ul class="list-inline-sm mb-2">
<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-instagram"></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-linkedin"></i></a></li>
</ul>
</div><!-- end position-bottom -->
</div><!-- end container -->
</div>
</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,497 @@
<!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 - Construction</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 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="owl-carousel owl-nav-overlay owl-dots-overlay" data-owl-nav="true" data-owl-items="1" data-owl-autoplay="true">
<!-- Slide 1 -->
<div class="section-xl bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-05">
<div class="container">
<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 fw-normal mb-3">Construction Company</h1>
<p class="font-large">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<a class="button button-lg button-radius button-outline-white mt-5" href="#">Learn More</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-black -->
</div>
<!-- Slide 2 -->
<div class="section-xl bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-05">
<div class="container">
<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 fw-normal mb-3">Construction Company</h1>
<p class="font-large">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<a class="button button-lg button-radius button-outline-white mt-5" href="#">Learn More</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-black -->
</div>
</div><!-- end owl-carousel -->
<!-- end Hero section -->
<!-- Features section -->
<div class="section">
<div class="container text-center">
<div class="row g-3">
<!-- 1 -->
<div class="col-12 col-md-4">
<img src="../assets/images/col-2.jpg" alt="">
<div class="border p-4 py-lg-5">
<h5 class="fw-normal line-height-120">Professional Team</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- 2 -->
<div class="col-12 col-md-4">
<img src="../assets/images/col-2.jpg" alt="">
<div class="border p-4 py-lg-5">
<h5 class="fw-normal line-height-120">Creative Solutions</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- 3 -->
<div class="col-12 col-md-4">
<img src="../assets/images/col-2.jpg" alt="">
<div class="border p-4 py-lg-5">
<h5 class="fw-normal line-height-120">Highest Standards</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 Features section -->
<!-- About section -->
<div class="section pt-0">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
<img class="box-shadow border-radius" src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<h2 class="fw-medium">Who We Are</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.</p>
<a class="button button-md button-radius button-theme mt-4" href="#">More About Us</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Clients section -->
<div class="section pt-0">
<div class="container">
<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-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><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Facts section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-05">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light"><span class="counter">144</span>+</h1>
<h6 class="font-small fw-normal uppercase">Projects Done</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">98</h1>
<h6 class="font-small fw-normal uppercase">Professionals</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light"><span class="counter">300</span>+</h1>
<h6 class="font-small fw-normal uppercase">Happy Clients</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">24</h1>
<h6 class="font-small fw-normal uppercase">International Offices</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts section -->
<!-- Portfolio section -->
<div class="section">
<div class="container">
<div class="mb-5 text-center">
<h2 class="fw-medium m-0">Our Works</h2>
</div>
<!-- Portfolio filter -->
<div class="filter filter-style-3 text-center mb-5">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-2 hover-style-1"><!-- column-(1/2/3/4/5/6) -->
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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 category-2">
<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 category-3">
<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 category-1">
<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 category-2">
<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 category-3">
<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><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Services section -->
<div class="section pt-0">
<div class="container">
<div class="row icon-5xl g-4 text-center">
<div class="col-12 col-md-6 col-lg-4">
<div class="mb-2 text-color-theme">
<i class="bi bi-paint-bucket"></i>
</div>
<h5 class="fw-normal">Renovate</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">
<div class="mb-2 text-color-theme">
<i class="bi bi-tools"></i>
</div>
<h5 class="fw-normal">Construct</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">
<div class="mb-2 text-color-theme">
<i class="bi bi-building"></i>
</div>
<h5 class="fw-normal">Buildings</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 -->
<!-- Testimonial section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-06">
<div class="container">
<div class="owl-carousel" data-owl-nav="true" data-owl-dots="false" data-owl-items="1">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<img class="mb-4" src="../assets/images/img-avatar-sm.jpg" alt="">
<p class="font-large mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Johnny Smith</h5>
<span class="font-family-poppins font-small uppercase">CEO - Company</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<img class="mb-4" src="../assets/images/img-avatar-sm.jpg" alt="">
<p class="font-large mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Johnny Smith</h5>
<span class="font-family-poppins font-small uppercase">CEO - Company</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<img class="mb-4" src="../assets/images/img-avatar-sm.jpg" alt="">
<p class="font-large mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Johnny Smith</h5>
<span class="font-family-poppins font-small uppercase">CEO - Company</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
</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">
<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,420 @@
<!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 - Corporate 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 sticky-autohide header-boxed">
<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="owl-carousel owl-nav-overlay owl-dots-overlay" data-owl-nav="false" data-owl-dots="true" data-owl-items="1" data-owl-autoPlay="true">
<!-- Slider Item 1 -->
<div class="bg-image" data-bg-src="../assets/images/background.jpg">
<div class="section-xl bg-dark-03">
<div class="container pt-5">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-7">
<h1 class="display-5 fw-medium">Professionally Designed for Corporates</h1>
<a class="button button-lg button-radius button-white-2 mt-3" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- Slider Item 2 -->
<div class="bg-image" data-bg-src="../assets/images/background.jpg">
<div class="section-xl bg-dark-03">
<div class="container pt-5">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-7">
<h1 class="display-5 fw-medium">Professionally Designed for Corporates</h1>
<a class="button button-lg button-radius button-white-2 mt-3" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
</div><!-- end owl-carousel -->
<!-- end Hero section -->
<!-- Features section -->
<div class="section">
<div class="container">
<div class="row icon-5xl g-4">
<div class="col-12 col-md-4">
<i class="bi bi-briefcase text-dark"></i>
<h5 class="fw-medium mt-2">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">
<i class="bi bi-gear text-dark"></i>
<h5 class="fw-medium mt-2">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">
<i class="bi bi-emoji-smile text-dark"></i>
<h5 class="fw-medium mt-2">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 Features section -->
<!-- About section -->
<div class="section pt-0">
<div class="container">
<div class="row align-items-center g-5">
<!-- About Image -->
<div class="col-12 col-lg-6">
<div class="box-backdrop">
<img src="../assets/images/col-1.jpg" alt="">
</div>
</div>
<!-- About Content -->
<div class="col-12 col-lg-6">
<h3 class="fw-normal">We believe that teamwork divides the tasks and multiplies the success</h3>
<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>
<a class="button button-lg button-backdrop-dark mt-4" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Facts section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-07">
<div class="container text-center">
<div class="row g-4">
<!-- Counter box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">100</h1>
<h6 class="font-small fw-normal uppercase">Fact One</h6>
</div>
<!-- Counter box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">100</h1>
<h6 class="font-small fw-normal uppercase">Fact Two</h6>
</div>
<!-- Counter box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">100</h1>
<h6 class="font-small fw-normal uppercase">Fact Three</h6>
</div>
<!-- Counter box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">100</h1>
<h6 class="font-small fw-normal uppercase">Fact Four</h6>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts section -->
<!-- Blog section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row align-items-end">
<div class="col-12 col-sm-6">
<h2 class="fw-normal m-0">Latest Posts</h2>
</div>
<div class="col-12 col-sm-6 text-sm-end">
<a class="button-text-1" href="#">Read All Posts</a>
</div>
</div>
</div>
<div class="owl-carousel" data-owl-nav="false" 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-autoPlay="true">
<!-- Blog Slider Item 1 -->
<div>
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content top bg-dark">
<span class="font-small fw-normal uppercase m-0 text-white">Category</span>
</div>
</a>
</div>
<div class="p-3">
<h5 class="fw-medium m-0"><a href="#">Blog Post Title</a></h5>
<span>Apr 29, 2019</span>
</div>
</div>
<!-- Blog Slider Item 2 -->
<div>
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content top bg-dark">
<span class="font-small fw-normal uppercase m-0 text-white">Category</span>
</div>
</a>
</div>
<div class="p-3">
<h5 class="fw-medium m-0"><a href="#">Blog Post Title</a></h5>
<span>Apr 28, 2019</span>
</div>
</div>
<!-- Blog Slider Item 3 -->
<div>
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content top bg-dark">
<span class="font-small fw-normal uppercase m-0 text-white">Category</span>
</div>
</a>
</div>
<div class="p-3">
<h5 class="fw-medium m-0"><a href="#">Blog Post Title</a></h5>
<span>Apr 27, 2019</span>
</div>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Blog section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6">
<h1 class="fw-light m-0">High Performance Multipurpose HTML5 Template</h1>
</div>
<div class="col-12 col-lg-6 text-lg-end">
<a class="button button-xl button-radius button-white-2" href="#">Buy Now</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- 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">
<h2 class="fw-normal">Our Trusted 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">
<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 -->
<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,445 @@
<!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 - Corporate 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 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">
<a class="button button-sm button-rounded button-white-2 align-middle" href="#">Button</a>
</div>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<!-- Hero section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-04 section-divider-curve-bottom">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-lg-10 offset-lg-1">
<h1 class="display-4 fw-normal m-0">Brand & Business Strategy</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Contact Info section -->
<div class="container">
<div class="bg-white p-4 px-lg-5 border-radius-1 box-shadow n-margin-3">
<div class="row g-2">
<div class="col-12 col-sm-6 col-lg-3">
<div class="d-flex align-items-center">
<div class="circle-box-sm bg-gray text-color-theme me-3">
<i class="fas fa-phone"></i>
</div>
<div class="d-inline-block">
<p>+987 654 321 01</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="d-flex align-items-center">
<div class="circle-box-sm bg-gray text-color-theme me-3">
<i class="fas fa-envelope"></i>
</div>
<div class="d-inline-block">
<p>contact@example.com</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="d-flex align-items-center">
<div class="circle-box-sm bg-gray text-color-theme me-3">
<i class="bi bi-skype"></i>
</div>
<div class="d-inline-block">
<p>contact.support</p>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="d-flex align-items-center">
<div class="circle-box-sm bg-gray text-color-theme me-3">
<i class="fab fa-viber"></i>
</div>
<div class="d-inline-block">
<p>+987 654 321 01</p>
</div>
</div>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
<!-- end Contact Info section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row align-items-center g-5">
<!-- About Image -->
<div class="col-12 col-lg-6">
<img class="border-radius box-shadow" src="../assets/images/col-1.jpg" alt="">
</div>
<!-- About Content -->
<div class="col-12 col-lg-6">
<h3 class="fw-light mb-3">Maecenas tempus, tellus eget condimentum rhoncus</h3>
<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>
<a class="button button-md button-radius button-theme mt-4" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Features section -->
<div class="section pt-0">
<div class="container">
<div class="row icon-5xl g-4">
<div class="col-12 col-md-4">
<i class="bi bi-briefcase text-color-theme"></i>
<h5 class="fw-normal mt-2">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">
<i class="bi bi-gear text-color-theme"></i>
<h5 class="fw-normal mt-2">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">
<i class="bi bi-emoji-smile text-color-theme"></i>
<h5 class="fw-normal mt-2">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 Features section -->
<!-- Blog Posts section -->
<div class="section pt-0">
<div class="container">
<!-- Blog post box 1 -->
<div class="blog-card-wrapper bg-image" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">04</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 2 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">03</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 3 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">02</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Blog Posts section -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-04">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6">
<h1 class="fw-light line-height-150">Youtube &amp; vimeo lightbox <br> video player</h1>
</div>
<div class="col-12 col-md-6 text-md-end">
<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple icon-lg lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="bi bi-play"></i></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Clients section -->
<div class="section">
<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">
<h2 class="fw-normal text-color-theme">Meet Our Partners</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>
</div>
</div><!-- end row -->
</div>
<ul class="clients-grid column-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 -->
<!-- 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">
<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-normal">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-normal">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-normal">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-normal">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-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,409 @@
<!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 - Corporate 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 center header-color-dark 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 bg-image bg-fade-white-top" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-06 backdrop-filter-blur">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-6">
<h1 class="fw-light line-height-150 mb-3">Experienced and Professional Community</h1>
<p class="font-large">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</p>
<a class="button button-lg button-radius button-font-2 button-gradient-7 mt-4" href="#">More About Us</a>
</div>
<div class="col-12 col-lg-6 icon-5xl">
<!-- Feature box 1 -->
<div class="bg-color-theme-02 border-radius p-4 p-lg-5">
<div class="d-flex">
<div class="d-inline-block me-4">
<i class="bi bi-briefcase text-gradient-7"></i>
</div>
<div class="d-inline-block">
<h5 class="fw-medium text-dark mt-2">Professional</h5>
<p class="text-dark-07">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div>
<!-- Feature box 2 -->
<div class="bg-color-theme-02 border-radius p-4 p-lg-5 mt-3">
<div class="d-flex">
<div class="d-inline-block me-4">
<i class="bi bi-gear text-gradient-7"></i>
</div>
<div class="d-inline-block">
<h5 class="fw-medium text-dark mt-2">Experienced</h5>
<p class="text-dark-07">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Accordion section -->
<div class="section pt-0">
<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 box-shadow icon-lg" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<img src="../assets/images/col-2.jpg" alt="">
<i class="bi bi-play"></i>
</a>
</div>
<div class="col-12 col-lg-6">
<ul class="accordion single-open style-2 border-radius">
<!-- Accordion item 1 -->
<li class="active">
<div class="accordion-title">
<h6 class="fw-medium font-small uppercase text-color-theme">First Question?</h6>
</div>
<div class="accordion-content">
<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>
</div>
</li>
<!-- Accordion item 2 -->
<li>
<div class="accordion-title">
<h6 class="fw-medium font-small uppercase text-color-theme">Second Question?</h6>
</div>
<div class="accordion-content">
<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>
</div>
</li>
<!-- Accordion item 3 -->
<li>
<div class="accordion-title">
<h6 class="fw-medium font-small uppercase text-color-theme">Third Question?</h6>
</div>
<div class="accordion-content">
<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>
</div>
</li>
<!-- Accordion item 4 -->
<li>
<div class="accordion-title">
<h6 class="fw-medium font-small uppercase text-color-theme">Fourth Question?</h6>
</div>
<div class="accordion-content">
<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>
</div>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Accordion section -->
<!-- Clients 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">
<h2 class="fw-normal text-color-theme">Our Trusted 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">
<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 -->
<!-- About section -->
<div class="section pt-0">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
<img class="border-radius" src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<h2 class="fw-light">Vivamus elementum semper nisi. Aenean vulputate eleifend</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-radius button-font-2 button-gradient-7 mt-3 mt-lg-4" href="/pages/about-us-1.html">Read more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Blog Posts section -->
<div class="section pt-0">
<div class="container">
<!-- Blog post box 1 -->
<div class="blog-card-wrapper bg-image" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">04</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 button-text-theme d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 2 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">03</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 button-text-theme d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 3 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">02</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 button-text-theme d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Blog Posts section -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-04">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6">
<h1 class="fw-light line-height-150">The Ultimate Multipurpose HTML5 Template</h1>
</div>
<div class="col-12 col-md-6 text-md-end">
<a class="button-circle button-circle-xl button-circle-white-2 icon-lg button-circle-ripple" href="#"><i class="bi bi-cart"></i></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax 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-7" 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,413 @@
<!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 - Corporate 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-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 -->
<!-- Hero section -->
<div class="section-2xl bg-gradient-6 section-divider-curve-bottom">
<div class="container">
<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 don't build services to make money, we make money to build services</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Contact Info section -->
<div class="container">
<div class="n-margin-5">
<div class="row g-3 g-lg-4">
<div class="col-12 col-md-6 col-lg-3">
<div class="bg-white-09 backdrop-filter-blur box-shadow p-4 border-radius">
<h6 class="font-small uppercase fw-medium m-0">Phone:</h6>
<p>+987 654 321 01</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="bg-white-09 backdrop-filter-blur box-shadow p-4 border-radius">
<h6 class="font-small uppercase fw-medium m-0">Email:</h6>
<p>contact@example.com</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="bg-white-09 backdrop-filter-blur box-shadow p-4 border-radius">
<h6 class="font-small uppercase fw-medium m-0">Skype:</h6>
<p>contact.skype</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="bg-white-09 backdrop-filter-blur box-shadow p-4 border-radius">
<h6 class="font-small uppercase fw-medium m-0">Viber:</h6>
<p>+987 654 321 01</p>
</div>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
<!-- end Contact Info section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row align-items-center g-5">
<!-- About Image -->
<div class="col-12 col-lg-6">
<img class="border-radius-1 box-shadow" src="../assets/images/col-1.jpg" alt="">
</div>
<!-- About Content -->
<div class="col-12 col-lg-6">
<h2 class="fw-light mb-3 text-color-theme">We believe that teamwork divides the tasks and multiplies the success</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>
<a class="button button-lg button-radius button-theme mt-4" href="#">Learn More</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Clients section -->
<div class="section pt-0">
<div class="container">
<div class="row align-items-center g-4 g-lg-5" data-cues="fadeIn">
<div class="col-12 col-xl-4">
<h2 class="fw-normal">Our Amazing Clients</h2>
<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 col-xl-8">
<ul class="clients-grid column-4">
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
<li><a href="#"><img src="../assets/images/col-4.jpg" alt=""></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Blog Posts section -->
<div class="section pt-0">
<div class="container" data-cues="fadeIn">
<!-- Blog post box 1 -->
<div class="blog-card-wrapper bg-image" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">04</h1>
<h6 class="font-small uppercase letter-spacing-1 text-color-theme">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 2 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">03</h1>
<h6 class="font-small uppercase letter-spacing-1 text-color-theme">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 3 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">02</h1>
<h6 class="font-small uppercase letter-spacing-1 text-color-theme">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 mt-4" href="#">Read more</a>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Blog Posts section -->
<!-- Features section -->
<div class="section pt-0">
<div class="container icon-5xl">
<div class="row g-4 g-lg-5" data-cues="fadeIn">
<!-- Feature box 1 -->
<div class="col-12 col-lg-4">
<div class="circle-box-xl bg-color-theme-01 text-color-theme icon-2xl mb-3">
<i class="bi bi-person"></i>
</div>
<h6 class="fw-medium font-small uppercase">Professional Team</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Feature box 2 -->
<div class="col-12 col-lg-4">
<div class="circle-box-xl bg-color-theme-01 text-color-theme icon-2xl mb-3">
<i class="bi bi-lightbulb"></i>
</div>
<h6 class="fw-medium font-small uppercase">Creative Solutions</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Feature box 3 -->
<div class="col-12 col-lg-4">
<div class="circle-box-xl bg-color-theme-01 text-color-theme icon-2xl mb-3">
<i class="bi bi-award"></i>
</div>
<h6 class="fw-medium font-small uppercase">Highest Standards</h6>
<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 Features section -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-blue-03">
<div class="container" data-cues="fadeIn">
<h1 class="fw-light">Create your perfect website <br> today with Mono</h1>
<a class="button button-lg button-radius button-outline-white mt-3" href="#">Start Now</a>
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- FAQ section -->
<div class="section">
<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-normal">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-normal">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-normal">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-normal">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-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,417 @@
<!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 - Corporate 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 sticky-autohide 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="owl-carousel owl-dots-overlay owl-nav-overlay" data-owl-items="1" data-owl-nav="true" data-owl-autoplay="true">
<!-- Slider Item 1 -->
<div class="section-lg bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-02">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 col-lg-8 col-xl-6">
<h1 class="fw-normal mb-3">Experienced and Professional Community</h1>
<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>
<a class="button button-lg button-radius button-outline-white mt-4" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- Slider Item 2 -->
<div class="section-lg bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-02">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 col-lg-8 col-xl-6">
<h1 class="fw-normal mb-3">Experienced and Professional Community</h1>
<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>
<a class="button button-lg button-radius button-outline-white mt-4" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- Slider Item 3 -->
<div class="section-lg bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-02">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 col-lg-8 col-xl-6">
<h1 class="fw-normal mb-3">Experienced and Professional Community</h1>
<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>
<a class="button button-lg button-radius button-outline-white mt-4" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
</div>
<!-- end Hero section -->
<!-- Features section -->
<div class="section">
<div class="container icon-5xl text-start text-lg-center">
<div class="row g-4">
<!-- Feature box 1 -->
<div class="col-12 col-lg-4">
<div class="text-color-theme mb-2">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-normal">Feature Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Feature box 2 -->
<div class="col-12 col-lg-4">
<div class="text-color-theme mb-2">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-normal">Feature Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Feature box 3 -->
<div class="col-12 col-lg-4">
<div class="text-color-theme mb-2">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-normal">Feature 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 Features section -->
<!-- About section -->
<div class="section border-top">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6 order-lg-2">
<img class="border-radius" src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-6 order-lg-1">
<h3 class="fw-light">Vivamus elementum semper nisi. Aenean vulputate eleifend</h3>
<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>
<a class="button button-lg button-backdrop-color-theme mt-4" href="#">Read more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Blog Posts section -->
<div class="section pt-0">
<div class="container">
<!-- Blog post box 1 -->
<div class="blog-card-wrapper bg-image" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">04</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 button-text-theme d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 2 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">03</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 button-text-theme d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 3 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">02</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 button-text-theme d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Blog Posts section -->
<!-- Clients section -->
<div class="section pt-0">
<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">
<h2 class="fw-normal text-color-theme">Meet Our Partners</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>
</div>
</div><!-- end row(1) -->
<div class="row mt-5">
<div class="col-12 col-lg-10 offset-lg-1">
<ul class="clients-grid column-4">
<li>
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</li>
</ul>
</div>
</div><!-- end row(2) -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Accordion section -->
<div class="section border-top">
<div class="container">
<div class="row g-5">
<div class="col-12 col-lg-6 order-lg-2">
<a class="lightbox-media-box border-radius icon-lg" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<img src="../assets/images/col-1.jpg" alt="">
<i class="bi bi-play"></i>
</a>
</div>
<div class="col-12 col-lg-6 order-lg-1">
<ul class="accordion single-open style-1 border-radius">
<!-- Accordion item 1 -->
<li class="active">
<div class="accordion-title">
<h6 class="fw-medium font-small uppercase">First Question?</h6>
</div>
<div class="accordion-content">
<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>
</div>
</li>
<!-- Accordion item 2 -->
<li>
<div class="accordion-title">
<h6 class="fw-medium font-small uppercase">Second Question?</h6>
</div>
<div class="accordion-content">
<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>
</div>
</li>
<!-- Accordion item 3 -->
<li>
<div class="accordion-title">
<h6 class="fw-medium font-small uppercase">Third Question?</h6>
</div>
<div class="accordion-content">
<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>
</div>
</li>
<!-- Accordion item 4 -->
<li>
<div class="accordion-title">
<h6 class="fw-medium font-small uppercase">Fourth Question?</h6>
</div>
<div class="accordion-content">
<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>
</div>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Accordion section -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-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-theme" 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,434 @@
<!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 - Corporate 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-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 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 -->
<!-- Hero section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-05 section-divider-curve-bottom">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-7">
<h1 class="display-4 fw-light">We integrate staregy, creativity & experience to solve problems</h1>
<a class="button button-lg button-radius button-white-2 mt-4" href="#">Let's Talk</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="container">
<div class="bg-white p-4 p-lg-5 border-radius-1 box-shadow n-margin-5">
<div class="row align-items-center g-4 g-lg-5">
<!-- About Image -->
<div class="col-12 col-lg-6">
<div class="row gallery-wrapper border-radius g-4">
<div class="col-6 pt-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-2-square.jpg" alt="">
</a>
</div>
</div>
<div class="col-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-2-square.jpg" alt="">
</a>
</div>
</div>
</div><!-- end row/gallery-wrapper -->
</div>
<!-- About Content -->
<div class="col-12 col-lg-6">
<h3 class="fw-light mb-3">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus</p>
<ul class="list-unstyled mt-3">
<li><i class="bi bi-check-circle-fill text-color-theme me-2"></i>Lifetime Free Update</li>
<li><i class="bi bi-check-circle-fill text-color-theme me-2"></i>Re-usable custom web elements</li>
<li><i class="bi bi-check-circle-fill text-color-theme me-2"></i>Responsive Carousel with various options</li>
</ul>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
<!-- end About section -->
<!-- Features section -->
<div class="section">
<div class="container icon-5xl">
<div class="row g-4 g-lg-5" data-cues="fadeIn">
<!-- Feature box 1 -->
<div class="col-12 col-lg-4">
<div class="text-color-theme mb-2">
<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. Aenean massa.</p>
</div>
<!-- Feature box 2 -->
<div class="col-12 col-lg-4">
<div class="text-color-theme mb-2">
<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. Aenean massa.</p>
</div>
<!-- Feature box 3 -->
<div class="col-12 col-lg-4">
<div class="text-color-theme mb-2">
<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. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Features section -->
<!-- Clients section -->
<div class="container text-center">
<div class="bg-gray-lighter p-4 p-lg-5 border-radius-1">
<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>
</div><!-- end container -->
<!-- end Clients section -->
<!-- Services section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-7">
<h2 class="fw-light">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</h2>
</div>
</div><!-- end row -->
<div class="row g-4 g-lg-5 mt-1" data-cues="fadeIn">
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-street-view"></i>
</div>
<h5 class="fw-normal">Human Resource</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 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-users"></i>
</div>
<h5 class="fw-normal">Outsourcing</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 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-users-cog"></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>
<div class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme 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 class="col-12 col-md-6 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-balance-scale"></i>
</div>
<h5 class="fw-normal">Financial Advisory</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 col-lg-4">
<div class="feature-box">
<div class="feature-box-icon bg-color-theme text-white">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<h5 class="fw-normal">Training Employees</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 -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-05">
<div class="container text-center">
<div class="row">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2" data-cues="fadeIn">
<h2 class="display-4 fw-light">Create your perfect website today with Mono</h2>
<a class="button button-lg button-radius button-white-2 mt-3" href="#">Start Now</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Contact Info section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3">
<h6 class="font-small fw-medium uppercase">Phone:</h6>
<ul class="list-unstyled">
<li>+(123) 456 789 01</li>
<li>+(123) 456 789 02</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h6 class="font-small fw-medium uppercase">Email:</h6>
<ul class="list-unstyled">
<li>contact@example.com</li>
<li>help@example.com</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h6 class="font-small fw-medium uppercase">Viber:</h6>
<ul class="list-unstyled">
<li>+(123) 456 789 01</li>
<li>+(123) 456 789 02</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h6 class="font-small fw-medium uppercase">Address:</h6>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Contact Info section -->
<!-- Google Maps -->
<div id="map1" class="gmap gmap-xl" data-latitude="51.513569" data-longitude="-0.123443"></div>
<!-- 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>
<!-- Scroll to top button -->
<div class="scrolltotop icon-lg">
<a class="button-circle button-circle-md button-circle-theme" 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,485 @@
<!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 - Corporate 7</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 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-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05 backdrop-filter-blur">
<div class="container">
<div class="section-lg pb-0">
<div class="row g-4">
<div class="col-12 col-lg-8 col-xl-7">
<h1 class="display-5 font-family-outfit fw-light">Satisfied customer is the best business strategy of all</h1>
<a class="button button-lg button-radius button-white-2 mt-4" href="#">Get in Touch</a>
</div>
</div><!-- end row -->
</div>
<div class="section pb-4">
<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">
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-6">
<div class="row g-4">
<div class="col-12">
<a class="lightbox-media-box border-radius box-shadow icon-xl" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<img src="../assets/images/col-2-short.jpg" alt="">
<i class="bi bi-play"></i>
</a>
</div>
<div class="col-6">
<img class="border-radius box-shadow" src="../assets/images/col-4.jpg" alt="">
</div>
<div class="col-6">
<img class="border-radius box-shadow" src="../assets/images/col-4.jpg" alt="">
</div>
</div><!-- end row(inner) -->
</div>
<div class="col-12 col-lg-6">
<div class="d-inline-block bg-light-blue px-3 py-2 border-radius-2 mb-3">
<span class="font-family-poppins font-small fw-medium uppercase line-height-100 text-dark">Professionals</span>
</div>
<h2 class="fw-light 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>
<div class="row g-4 mt-2">
<!-- Progress bar 1 -->
<div class="col-12 col-sm-6">
<div class="progress-box progress-theme">
<h6 class="fw-medium">Branding</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 progress-theme">
<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 progress-theme">
<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 progress-theme">
<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) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Features section -->
<div class="section pt-0">
<div class="container icon-5xl text-lg-center">
<div class="row g-4 g-lg-5" data-cues="fadeIn">
<!-- Feature box 1 -->
<div class="col-12 col-lg-4">
<div class="text-dark mb-2">
<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. Aenean massa.</p>
</div>
<!-- Feature box 2 -->
<div class="col-12 col-lg-4">
<div class="text-dark mb-2">
<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. Aenean massa.</p>
</div>
<!-- Feature box 3 -->
<div class="col-12 col-lg-4">
<div class="text-dark mb-2">
<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. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Features section -->
<!-- Testimonial section -->
<div class="container">
<div class="bg-gray bg-fade-white-top border-radius-1">
<div class="p-4 p-lg-5">
<div class="owl-carousel" data-owl-items="1" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal line-height-140 m-0">Andrew Palmer</h5>
<span class="font-small fw-normal">Developer - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-normal line-height-140 m-0">Anna Mullen</h5>
<span class="font-small fw-normal">Designer - Mono</span>
<p class="mt-3">"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>
</div>
</div><!-- end container -->
<!-- end Testimonial section -->
<!-- Services section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5" data-cues="fadeIn">
<!-- 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 -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-end" data-cues="fadeIn">
<h1 class="display-5 font-family-outfit fw-light">Create your perfect website <br> today with Mono</h1>
<a class="button button-lg button-radius button-white-2 mt-3" href="#">Start Now</a>
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Contact Info section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3">
<h6 class="font-small fw-medium uppercase">Phone:</h6>
<ul class="list-unstyled">
<li>+(123) 456 789 01</li>
<li>+(123) 456 789 02</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h6 class="font-small fw-medium uppercase">Email:</h6>
<ul class="list-unstyled">
<li>contact@example.com</li>
<li>help@example.com</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h6 class="font-small fw-medium uppercase">Viber:</h6>
<ul class="list-unstyled">
<li>+(123) 456 789 01</li>
<li>+(123) 456 789 02</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h6 class="font-small fw-medium uppercase">Address:</h6>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Contact Info section -->
<!-- Google Maps -->
<div id="map1" class="gmap gmap-xl" data-latitude="51.513569" data-longitude="-0.123443"></div>
<!-- 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>
<!-- 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,488 @@
<!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 - Coworking</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 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="bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="section-lg pb-0">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1 col-xl-9">
<h1 class="display-4 font-family-outfit fw-light line-height-130 m-0">We turn workspaces into digital products tenants love</h1>
<a class="button button-xl button-radius button-gradient-7 mt-4" href="#features">Start Here</a>
</div>
</div><!-- end row -->
</div>
<div class="section pb-4">
<div class="row text-center icon-3xl">
<div class="col-12 col-sm-4 col-lg-2">
<i class="bi bi-journal-text text-white"></i>
<h6 class="font-small fw-normal uppercase mt-2">Flexible Plans</h6>
</div>
<div class="col-12 col-sm-4 col-lg-2">
<i class="bi bi-wifi text-white"></i>
<h6 class="font-small fw-normal uppercase mt-2">Free Wi-Fi</h6>
</div>
<div class="col-12 col-sm-4 col-lg-2">
<i class="bi bi-controller text-white"></i>
<h6 class="font-small fw-normal uppercase mt-2">Gaming Room</h6>
</div>
<div class="col-12 col-sm-4 col-lg-2">
<i class="bi bi-printer text-white"></i>
<h6 class="font-small fw-normal uppercase mt-2">Printing</h6>
</div>
<div class="col-12 col-sm-4 col-lg-2">
<i class="bi bi-geo-alt text-white"></i>
<h6 class="font-small fw-normal uppercase mt-2">Multi-location</h6>
</div>
<div class="col-12 col-sm-4 col-lg-2">
<i class="bi bi-clock text-white"></i>
<h6 class="font-small fw-normal uppercase mt-2">Open 24/7</h6>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section pb-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">
<h2 class="display-6 font-family-outfit fw-normal">Welcome to Mono</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>
</div>
</div>
</div>
</div><!-- end container -->
<div class="container-fluid px-4">
<div class="row gallery-wrapper g-4 border-radius">
<!-- Gallery box 1 -->
<div class="col-12 col-md-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 2 -->
<div class="col-12 col-md-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 3 -->
<div class="col-12 col-md-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 3">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 4 -->
<div class="col-12 col-md-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 5 -->
<div class="col-12 col-md-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 6 -->
<div class="col-12 col-md-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 3">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container-fluid -->
</div>
<!-- end About section -->
<!-- Features section -->
<div class="section">
<div class="container">
<div class="row icon-4xl">
<div class="col-12 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-4 text-color-theme">
<i class="bi bi-house-door"></i>
</div>
<div class="d-inline-block">
<h4 class="font-family-outfit fw-medium">Comfy desk &amp; chair</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-4 text-color-theme">
<i class="bi bi-emoji-smile"></i>
</div>
<div class="d-inline-block">
<h4 class="font-family-outfit fw-medium">Awesome Community</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-4 text-color-theme">
<i class="bi bi-globe"></i>
</div>
<div class="d-inline-block">
<h4 class="font-family-outfit fw-medium">High speed Internet</h4>
<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>
<!-- end Features 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">
<h1 class="display-5 font-family-outfit fw-light">Shared &amp; Private offices for rent</h1>
<a class="button button-xl button-radius button-white-2 mt-3" href="#">Order Now</a>
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-6">
<div class="row gallery-wrapper g-3">
<!-- Gallery box 1 -->
<div class="col-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-2-tall.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 2 -->
<div class="col-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-2-tall.jpg" alt="">
</a>
</div>
</div>
</div><!-- end gallery-wrapper -->
</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">Inspiring People</span>
</div>
<h3 class="fw-normal">We believe that great things in business are never done by one person. They're done by a team of people.</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.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Prices section -->
<div class="bg-gray-lighter bg-fade-white-top">
<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="display-6 font-family-outfit fw-normal">Prices We Offer</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-4 mt-5 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">Personal</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0 text-color-theme">$29.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Private Office</li>
<li>Conference Room</li>
<li>Free Coffees & Teas</li>
<li>Daily Pass</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-4">
<div class="bg-white box-shadow hover-float border-radius p-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Team</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0 text-color-theme">$49.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Private Office</li>
<li>Conference Room</li>
<li>Free Coffees & Teas</li>
<li>Daily Pass</li>
</ul>
<a class="button button-md button-theme 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">Business</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0 text-color-theme">$69.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>Private Office</li>
<li>Conference Room</li>
<li>Free Coffees & Teas</li>
<li>Daily Pass</li>
</ul>
<a class="button button-md button-theme button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Prices section -->
<!-- Testimonial -->
<div class="section pt-0">
<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="font-family-outfit fw-medium m-0">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="font-family-outfit fw-medium m-0">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="font-family-outfit fw-medium m-0">Johnny Doe</h5>
<span>CEO - Company</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial -->
<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">
<h2>mono</h2>
</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>
</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,483 @@
<!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 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 header-color-dark transparent-dark 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-top">
<ul class="list-unstyled uppercase">
<li>
<h2 class="font-family-outfit letter-spacing-1"><a class="text-link-2" href="#">Home</a></h2>
</li>
<li>
<h2 class="font-family-outfit letter-spacing-1"><a class="text-link-2" href="#">About</a></h2>
</li>
<li>
<h2 class="font-family-outfit letter-spacing-1"><a class="text-link-2" href="#">Portfolio</a></h2>
</li>
<li>
<h2 class="font-family-outfit letter-spacing-1"><a class="text-link-2" href="#">Blog</a></h2>
</li>
<li>
<h2 class="font-family-outfit letter-spacing-1"><a class="text-link-2" href="#">Shop</a></h2>
</li>
</ul>
</div>
<div class="position-bottom">
<ul class="list-inline-sm">
<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>
<li><a class="button-circle button-circle-sm button-circle-white-2" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
<p class="mt-3">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-lg bg-image bg-fade-white-top" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-08">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2 text-center">
<h1 class="fw-semi-bold display-3 line-height-120 stroke-text mb-0 mt-2 mt-lg-5">We're leading brands & businesses into a digital world</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Portfolio section -->
<div class="container">
<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5 text-center">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-1 border-radius">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item category-2">
<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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="portfolio-item category-3">
<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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
<!-- end Portfolio section -->
<!-- Services section -->
<div class="section">
<div class="container text-center">
<div class="row icon-4xl g-4 g-lg-5 align-items-center" data-cues="fadeIn">
<div class="col-12 col-xl-4">
<div class="bg-gray-lighter bg-fade-white-top">
<div class="p-4 p-xl-5">
<h2 class="display-3 font-family-outfit fw-medium"><span class="counter">4000</span>+</h2>
<span>Satisfied Clients around the globe</span>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-xl-4 text-md-start">
<i class="bi bi-megaphone text-dark"></i>
<h4 class="font-family-outfit fw-medium mt-2 mt-lg-3">Social Marketing</h4>
<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-xl-4 text-md-start">
<i class="bi bi-camera text-dark"></i>
<h4 class="font-family-outfit fw-medium mt-2 mt-lg-3">Production</h4>
<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 -->
<!-- Sliding Text -->
<div class="swiper sliding-text pb-3">
<div class="swiper-wrapper">
<!-- Item 1 -->
<div class="swiper-slide">
<h2 class="display-1 fw-semi-bold uppercase stroke-text mb-0 opacity-25">Best Rated HTML Template</h2>
</div>
<!-- Item 2 -->
<div class="swiper-slide">
<h2 class="display-1 fw-semi-bold uppercase text-color-theme mb-0 opacity-10">The Ultimate Multipurpose Template</h2>
</div>
</div>
</div>
<!-- end Sliding Text -->
<!-- Clients section -->
<div class="section bg-dark-lighter">
<div class="container">
<ul class="clients-grid column-5" data-cues="fadeIn">
<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 -->
<!-- Parallax section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-03">
<div class="container text-center">
<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple icon-xl button-hover-shrink lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<i class="bi bi-play"></i>
</a>
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Team section -->
<div class="section pb-0">
<div class="container">
<div class="mb-5">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="row g-1 gx-xl-4 align-items-center" data-cues="fadeIn">
<div class="col-12 col-xl-6 col-xxl-5">
<h2 class="display-4 font-family-outfit fw-medium">Meet Our Creative Team</h2>
</div>
<div class="col-12 col-xl-6 col-xxl-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</p>
<a class="button button-md button-reveal-right-outline-dark button-rounded mt-3" href="#"><i class="bi bi-arrow-right"></i><span>More About Us</span></a>
</div>
</div><!-- end row -->
</div>
</div>
</div>
<div class="row team-wrapper border-radius g-3">
<!-- Team box 1 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<!-- 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>
<h5 class="fw-medium mb-1">Robert Vincent</h5>
<span>CEO</span>
</div>
<!-- Team box 2 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<!-- 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>
<h5 class="fw-medium mb-1">Brenda Johnson</h5>
<span>Co-Founder</span>
</div>
<!-- Team box 3 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
<!-- 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>
<h5 class="fw-medium mb-1">Dan Breeze</h5>
<span>Senior Developer</span>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- FAQ section -->
<div class="section-sm">
<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="font-family-outfit 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="font-family-outfit 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="font-family-outfit 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="font-family-outfit 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-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,561 @@
<!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 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-black sticky-autohide">
<div class="container">
<!-- Logo -->
<div class="header-logo">
<h3 class="font-family-outfit 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-dark">
<div class="container text-center">
<h1 class="display-1 font-family-outfit fw-semi-bold stroke-text">Design Matters</h1>
<h4 class="display-3 font-family-outfit fw-lighter fst-italic"><span class="text-white-02">Good Design is Good Business</span></h4>
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Portfolio section -->
<div class="container-fluid p-0">
<div class="row portfolio-grid g-0 hover-style-1">
<!-- Portfolio box 1 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end row/portfolio-grid -->
</div><!-- end container -->
<!-- end Portfolio section -->
<!-- Services section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5 icon-5xl">
<!-- Service box 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-4">
<i class="bi bi-brush text-dark"></i>
</div>
<div class="d-inline-block">
<h4 class="font-family-outfit fw-normal">Graphic Design</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
</div>
<!-- Service box 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-4">
<i class="bi bi-star text-dark"></i>
</div>
<div class="d-inline-block">
<h4 class="font-family-outfit fw-normal">Social Marketing</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
</div>
<!-- Service box 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-4">
<i class="bi bi-globe text-dark"></i>
</div>
<div class="d-inline-block">
<h4 class="font-family-outfit fw-normal">Web Development</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
</div>
<!-- Service box 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-4">
<i class="bi bi-camera text-dark"></i>
</div>
<div class="d-inline-block">
<h4 class="font-family-outfit fw-normal">Photography</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
</div>
<!-- Service box 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-4">
<i class="bi bi-telephone text-dark"></i>
</div>
<div class="d-inline-block">
<h4 class="font-family-outfit fw-normal">Mobile App</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
</div>
<!-- Service box 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-4">
<i class="bi bi-chat-text text-dark"></i>
</div>
<div class="d-inline-block">
<h4 class="font-family-outfit fw-normal">Consulting</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Clients section -->
<div class="section-sm border-top">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-lg-5 col-xxl-4">
<div class="d-flex align-items-center">
<ul class="avatar-group">
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
</ul>
<div class="d-inline-block ps-3">
<p>We've over 4,000 clients <br class="d-md-block">around the world</p>
</div>
</div>
</div>
<div class="col-12 col-lg-7 col-xxl-8">
<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="3" data-owl-xl="3">
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Clients 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 class="display-6 font-family-outfit fw-medium">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 team-wrapper border-radius gx-3 gy-4">
<!-- Team box 1 -->
<div class="col-12 col-sm-6 col-lg-4 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Violet Walker</h5>
<span>Founder</span>
</div>
</div>
<!-- Team box 2 -->
<div class="col-12 col-sm-6 col-lg-4 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
</div>
<!-- Team box 3 -->
<div class="col-12 col-sm-6 col-lg-4 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Jamie Mills</h5>
<span>Creative Director</span>
</div>
</div>
<!-- Team box 4 -->
<div class="col-12 col-sm-6 col-lg-4 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Winston Frank</h5>
<span>Photographer</span>
</div>
</div>
<!-- Team box 5 -->
<div class="col-12 col-sm-6 col-lg-4 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Ashley Williamsan</h5>
<span>Marketing Specialist</span>
</div>
</div>
<!-- Team box 6 -->
<div class="col-12 col-sm-6 col-lg-4 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Betsy Fletcher</h5>
<span>Senior Designer</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" 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">
<h2 class="display-4 font-family-outfit fw-medium">Any Questions?</h2>
<p>Maecenas nec odio et ante tincidunt tempus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.</p>
<a class="button button-lg button-radius button-outline-white mt-4" href="#">Get In Touch</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax 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,533 @@
<!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 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">
<!-- Page Scroll Progress -->
<div class="page-progress-container">
<div id="pageProgress" class="page-progress-bar page-progress-gradient-5"></div>
</div>
<!-- end Page Scroll Progress -->
<!-- Header -->
<div class="header right transparent-dark 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">
<a class="button button-sm button-rounded button-gradient-5 align-middle" href="#">Buy Now</a>
</div>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<!-- Hero section -->
<div class="section-2xl">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-10 col-xl-9">
<h1 class="display-4 fw-bold m-0 line-height-130"><span class="text-gradient-5">Whatever you want online, come and talk to us.</span></h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Portfolio section -->
<div class="section-lg pt-0">
<div class="container">
<div class="row g-4 portfolio-grid hover-style-3 border-radius">
<!-- Portfolio box 1 -->
<div class="col-12 col-md-6 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 class="portfolio-title-item">
<h4 class="fw-normal">Project Title</h4>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="col-12 col-md-6 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 class="portfolio-title-item">
<h4 class="fw-normal">Project Title</h4>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="col-12 col-md-6 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 class="portfolio-title-item">
<h4 class="fw-normal">Project Title</h4>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="col-12 col-md-6 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 class="portfolio-title-item">
<h4 class="fw-normal">Project Title</h4>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end row/portfolio-grid -->
<!-- button -->
<div class="text-end mt-5">
<a class="button-text-2" href="#">View All Works</a>
</div>
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- About section -->
<div class="section-lg bg-dark-lighter">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-6">
<h3 class="fw-light mb-3">We believe that teamwork divides the tasks and multiplies the success</h3>
<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>
</div>
<div class="col-12 col-lg-6">
<!-- Progress bar box 1 -->
<div class="progress-box">
<h6 class="fw-normal">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-normal">Product Development</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-normal">Copywriting</h6>
<div class="animated-progress">
<div data-progress="92"></div>
</div>
</div>
<!-- Progress bar box 4 -->
<div class="progress-box mt-4">
<h6 class="fw-normal">Consulting</h6>
<div class="animated-progress">
<div data-progress="90"></div>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<div class="container-fluid p-0 bg-gray-lighter">
<div class="row g-0 align-items-center">
<div class="col-12 col-lg-6">
<img src="../assets/images/col-1-square.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<div class="p-5 text-center">
<h6 class="font-small fw-normal uppercase">Watch Youtube &amp; Vimeo Video</h6>
<a class="button-circle button-circle-xl button-circle-gradient-5 button-circle-ripple icon-lg mt-3 lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="bi bi-play"></i></a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container-fluid -->
<!-- Services section -->
<div class="section-lg">
<div class="container">
<div class="mb-5">
<div class="row g-4">
<div class="col-12 col-md-10 col-lg-8">
<h6 class="font-small fw-medium uppercase letter-spacing-1"><span class="text-gradient-5">Services</span></h6>
<h2>What We Do</h2>
</div>
</div>
</div>
<div class="row icon-5xl g-4">
<!-- Icon text box 1 -->
<div class="col-12 col-md-4">
<i class="bi bi-star text-gradient-5"></i>
<h4 class="fw-normal mt-2">Social Marketing</h4>
<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-brush text-gradient-5"></i>
<h4 class="fw-normal mt-2">Graphic Design</h4>
<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-gradient-5"></i>
<h4 class="fw-normal mt-2">Photography</h4>
<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 bg-gray-lighter">
<div class="container">
<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><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Team section -->
<div class="section-lg">
<div class="container">
<div class="mb-5">
<div class="row g-4">
<div class="col-12 col-md-10 col-lg-8">
<h6 class="font-small fw-medium uppercase letter-spacing-1"><span class="text-gradient-5">Team Members</span></h6>
<h2>Meet Our Leadership Team</h2>
</div>
</div>
</div>
<div class="row g-4 gy-5 team-wrapper border-radius text-start">
<!-- 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-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>
<h5 class="fw-normal mb-1">Robert Vincent</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-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>
<h5 class="fw-normal mb-1">Brenda Johnson</h5>
<span>Manager</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-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>
<h5 class="fw-normal mb-1">Rodney Scott</h5>
<span>Senior Developer</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-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>
<h5 class="fw-normal mb-1">Michelle White</h5>
<span>Designer</span>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Footer -->
<div class="section bg-dark">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-6 col-lg-3">
<h1 class="display-5 mb-2">Mono</h1>
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 col-lg-3">
<!-- Contact Info -->
<ul class="list-unstyled">
<li>+(976) 444 444 11</li>
<li>contact@flatheme.net</li>
<li>Ulaanbaatar, Khan-Uul, 11000</li>
</ul>
<!-- Social Links -->
<ul class="list-inline-sm mt-4">
<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>
<li>
<a class="button-circle button-circle-sm button-circle-white-2" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash animate-links">
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Pricing Plans</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash animate-links">
<li>
<a href="#">Our Team</a>
</li>
<li>
<a href="#">Our Clients</a>
</li>
<li>
<a href="#">Photo Gallery</a>
</li>
<li>
<a href="#">Process</a>
</li>
<li>
<a href="#">GDPR Compliance</a>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Footer -->
<!-- Scroll to top button -->
<div class="scrolltotop icon-lg">
<a class="button-circle button-circle-md button-circle-gradient-5" 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,595 @@
<!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 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">
<!-- 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-fluid px-lg-5">
<!-- Logo -->
<div class="header-logo">
<h3 class="font-family-outfit 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="px-4 px-lg-5">
<div class="section-xl position-relative bg-dark-01">
<div class="bg-video">
<video playsinline autoplay muted loop>
<source src="../assets/video-bg-src.mp4" type="video/mp4">
</video>
</div>
<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-1 font-family-outfit fw-semi-bold mb-0 text-white">Award Winning Creative Agency</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Portfolio section -->
<div class="section-lg">
<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-4 fw-bold uppercase letter-spacing-2 stroke-text m-0 opacity-25">Latest Works</h2>
</div>
</div>
</div>
<!-- Portfolio filter -->
<div class="filter filter-style-3 filter-font-2 text-center mb-5">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-1 hover-style-3 border-radius">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h5 class="fw-medium">Project Title</h5>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h5 class="fw-medium">Project Title</h5>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h5 class="fw-medium">Project Title</h5>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h5 class="fw-medium">Project Title</h5>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h5 class="fw-medium">Project Title</h5>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h5 class="fw-medium">Project Title</h5>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Facts section -->
<div class="px-4 px-lg-5">
<div class="section-lg bg-gray-lighter">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light"><span class="counter">179</span>+</h1>
<h6 class="font-small fw-medium uppercase mt-2">Projects Done</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">27</h1>
<h6 class="font-small fw-medium uppercase mt-2">Employees</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light"><span class="counter">1000</span>+</h1>
<h6 class="font-small fw-medium uppercase mt-2">Happy Clients</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">214</h1>
<h6 class="font-small fw-medium uppercase mt-2">Hours of Meeting</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end section-lg -->
</div>
<!-- end Facts section -->
<!-- Team section -->
<div class="section-lg">
<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-4 fw-bold uppercase letter-spacing-2 stroke-text m-0 opacity-25">Our Team</h2>
</div>
</div>
</div>
<div class="row team-wrapper g-3 gy-4 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="">
<!-- 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Robert Vincent</h5>
<span>Founder</span>
</div>
</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="">
<!-- 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span>Co-Founder</span>
</div>
</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="">
<!-- 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Rodney Scott</h5>
<span>Lead Developer</span>
</div>
</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="">
<!-- 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Michelle White</h5>
<span>Lead Designer</span>
</div>
</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="">
<!-- 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Maria Parrish</h5>
<span>Marketer</span>
</div>
</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="">
<!-- 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Thomas Lueck</h5>
<span>Developer</span>
</div>
</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="">
<!-- 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Andrea Romo</h5>
<span>Designer</span>
</div>
</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="">
<!-- 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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brian Flores</h5>
<span>Photographer</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- section -->
<div class="px-4 px-lg-5">
<div class="section-xl position-relative bg-dark-01">
<div class="bg-video">
<video playsinline autoplay muted loop>
<source src="../assets/video-bg-src.mp4" type="video/mp4">
</video>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-8 col-xl-7">
<h1 class="display-2 font-family-outfit fw-semi-bold">We Are Always Ready</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 class="col-12 col-lg-4 col-xl-5 text-lg-end">
<a class="button button-xl button-rounded button-reveal-right-outline-white" href="#"><i class="bi bi-arrow-right"></i><span>Get In Touch</span></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end section -->
<!-- Services section -->
<div class="section-lg">
<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="display-4 fw-bold uppercase letter-spacing-2 stroke-text m-0 opacity-25">What We Do</h2>
</div>
</div>
</div>
<div class="row g-4 icon-5xl">
<!-- Service box 1 -->
<div class="col-12 col-md-4">
<div class="mb-2">
<i class="bi bi-camera text-dark"></i>
</div>
<h5 class="fw-normal">Photoshoot</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-md-4">
<div class="mb-2">
<i class="bi bi-globe text-dark"></i>
</div>
<h5 class="fw-normal">Social Marketing</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-md-4">
<div class="mb-2">
<i class="bi bi-star text-dark"></i>
</div>
<h5 class="fw-normal">Branding</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="px-4 px-lg-5">
<div class="section bg-gray-lighter">
<div class="container">
<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-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><!-- end container -->
</div>
</div>
<!-- end Clients section -->
<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>
<!-- 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,454 @@
<!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 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 header-lg transparent-light">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<ul class="list-unstyled">
<li>
<h1 class="fw-light"><a class="text-link-2" href="#">Home</a></h1>
</li>
<li>
<h1 class="fw-light"><a class="text-link-2" href="#">About</a></h1>
</li>
<li>
<h1 class="fw-light"><a class="text-link-2" href="#">Portfolio</a></h1>
</li>
<li>
<h1 class="fw-light"><a class="text-link-2" href="#">FAQ</a></h1>
</li>
<li>
<h1 class="fw-light"><a class="text-link-2" href="#">Contact</a></h1>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-2xl bg-black">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1 text-center">
<h1 class="display-3 fw-lighter">Minimalism is not a lack of something, it's simply the perfect amount of something.</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-5">
<div class="img-mask-blob-4">
<img src="../assets/images/col-2-square.jpg" alt="">
</div>
</div>
<div class="col-12 col-lg-7">
<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>
<div class="mb-4">
<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="row g-4">
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Social Marketing</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Product Development</h6>
<div class="animated-progress">
<div data-progress="88"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="90"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Content Creating</h6>
<div class="animated-progress">
<div data-progress="96"></div>
</div>
</div>
</div>
</div><!-- end row -->
<div class="d-flex align-items-center mt-5" data-cue="slideInRight">
<ul class="avatar-group">
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
</ul>
<div class="d-inline-block ps-3">
<p>We've over 4,000 clients <br class="d-md-block">around the world</p>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Services section -->
<div class="container-fluid p-0">
<div class="row g-0 icon-5xl text-center">
<div class="col-12 col-md-4">
<div class="hoverbox-4 center">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<i class="bi bi-star text-white mb-4"></i>
<h5 class="fw-light">Social Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="hover-content">
<a class="button button-lg button-rounded button-outline-white" href="#">Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="hoverbox-4 center">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<i class="bi bi-camera text-white mb-4"></i>
<h5 class="fw-light">Photoshoot</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="hover-content">
<a class="button button-lg button-rounded button-outline-white" href="#">Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="hoverbox-4 center">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<i class="bi bi-palette text-white mb-4"></i>
<h5 class="fw-light">Graphic Design</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<div class="hover-content">
<a class="button button-lg button-rounded button-outline-white" href="#">Learn More</a>
</div>
</div>
</div>
</div><!-- end row -->
</div>
<!-- end Services section -->
<!-- Portfolio section -->
<div class="section-lg">
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2" data-cue="fadeIn">
<h2 class="display-5 fw-light">Our Works</h2>
</div>
</div><!-- end row -->
</div><!-- end container -->
<!-- Swiper -->
<div class="swiper hero-portfolio-slider mt-5">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="hero-portfolio-box">
<div class="hero-portfolio-img">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="hero-portfolio-caption">
<h3 class="fw-normal"><a href="#">Project Title</a></h3>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="hero-portfolio-box">
<div class="hero-portfolio-img">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="hero-portfolio-caption">
<h3 class="fw-normal"><a href="#">Project Title</a></h3>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="swiper-slide">
<div class="hero-portfolio-box">
<div class="hero-portfolio-img">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="hero-portfolio-caption">
<h3 class="fw-normal"><a href="#">Project Title</a></h3>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- end Swiper -->
</div>
<!-- end Portfolio section -->
<!-- Facts section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="row g-4">
<!-- Counter box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-lighter"><span class="counter">179</span>+</h1>
<h6 class="font-small fw-normal uppercase mt-3">Projects Done</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Counter box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-lighter counter">27</h1>
<h6 class="font-small fw-normal uppercase mt-3">Employees</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Counter box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-lighter"><span class="counter">1000</span>+</h1>
<h6 class="font-small fw-normal uppercase mt-3">Happy Clients</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Counter box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-lighter counter">214</h1>
<h6 class="font-small fw-normal uppercase mt-3">Hours of Meeting</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts section -->
<!-- Team section -->
<div class="section-lg">
<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" data-cue="fadeIn">
<h2 class="display-5 fw-light">Meet Our Team</h2>
</div>
</div>
</div>
<div class="row g-4 team-wrapper">
<!-- Team box 1 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.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>
<h5 class="fw-normal m-0">Dan Demarco</h5>
<span>Founder</span>
</div>
<!-- Team box 2 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.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>
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span>Manager</span>
</div>
<!-- Team box 3 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.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>
<h5 class="fw-normal m-0">Anna Mullen</h5>
<span>Senior Designer</span>
</div>
<!-- end Team box 3 -->
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Clients section -->
<div class="section bg-gray-lighter">
<div class="container">
<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-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><!-- 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,573 @@
<!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>

View File

@@ -0,0 +1,294 @@
<!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 - Designer</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 header-xl">
<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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<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-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Gallery section -->
<div class="container">
<div class="row gallery-wrapper g-4 g-lg-5">
<!-- Gallery image box 1 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 2 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 3 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 3">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 4 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 4">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 5 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 5">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 6 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 6">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 7 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 7">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 8 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 8">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 9 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 9">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 10 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 7">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 11 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 8">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 12 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg" data-gallery-title="Gallery Image 9">
<img src="../assets/images/col-4-square.jpg" alt="">
</a>
</div>
</div>
</div><!-- end row/gallery-wrapper -->
</div><!-- end container -->
<!-- end Gallery section -->
<!-- Contact section -->
<div class="section">
<div class="container">
<div class="row gy-5">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
<h1 class="fw-bold"><span class="text-gradient-5">Get In Touch</span></h1>
</div>
<!-- Contact Form -->
<div class="col-12 col-lg-8 offset-lg-2">
<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-radius button-gradient-5" 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 row -->
<!-- Contact Info -->
<div class="row g-4 g-lg-5 text-lg-center mt-5 icon-4xl">
<div class="col-6 col-sm-6 col-lg-3">
<i class="bi bi-telephone text-gradient-5"></i>
<h5 class="fw-medium mt-2 mb-0">Phone</h5>
<p>+976 444 444 44</p>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<i class="bi bi-envelope text-gradient-5"></i>
<h5 class="fw-medium mt-2 mb-0">Email</h5>
<p>contact@example.com</p>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<i class="bi bi-whatsapp text-gradient-5"></i>
<h5 class="fw-medium mt-2 mb-0">Whatsapp</h5>
<p>+976 444 444 44</p>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<i class="bi bi-geo-alt text-gradient-5"></i>
<h5 class="fw-medium mt-2 mb-0">Address</h5>
<p>Ulaanbaatar, Khan-Uul, 11000</p>
</div>
</div><!-- end row -->
<!-- end Contact Info -->
</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-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>
<li><a class="button-circle button-circle-sm button-circle-white-2" 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-5" 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,316 @@
<!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 - Developer</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 class="preloader-blue" data-preloader="1">
<!-- Custom Cursor -->
<div id="cursor"></div>
<!-- end Custom Cursor -->
<!-- Header -->
<div class="header header-lg transparent-light">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<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-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- About section -->
<div class="section-xl bg-black">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-lg-4">
<img class="img-mask-avatar-3xl" src="../assets/images/col-4-square.jpg" alt="">
</div>
<div class="col-12 col-lg-8">
<h1>
<span class="typer text-white" id="typer1" data-words="Hello! I'm Leo, I do, Web Development, Mobile Applications" data-delay="60" data-deleteDelay="800"></span><span class="cursor" data-owner="typer1"></span>
</h1>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.</p>
<div class="row mt-4 mt-lg-5">
<div class="col-6 col-md-3">
<h1 class="fw-medium mb-0"><span class="counter">80</span>+</h1>
<span>Projects Done</span>
</div>
<div class="col-6 col-md-3">
<h1 class="fw-medium mb-0"><span class="counter">24</span></h1>
<span>Award Wins</span>
</div>
<div class="col-6 col-md-3">
<h1 class="fw-medium mb-0"><span class="counter">100</span>+</h1>
<span>Happy Clients</span>
</div>
<div class="col-6 col-md-3">
<h1 class="fw-medium mb-0"><span class="counter">27</span></h1>
<span>Partners</span>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Languages -->
<div class="section-xl bg-black pt-0">
<div class="container">
<div class="bg-dark-lighter p-4 p-lg-5 border-radius-1">
<div class="row g-4 g-lg-5">
<div class="col-12 col-lg-4">
<h6 class="uppercase fw-medium letter-spacing-1">Langauges</h6>
</div>
<div class="col-6 col-lg-4">
<ul class="list-unstyled">
<li>C/C#/C++</li>
<li>Java</li>
<li>Python</li>
<li>Swift</li>
<li>TypeScript</li>
<li>Lisp</li>
</ul>
</div>
<div class="col-6 col-lg-4">
<ul class="list-unstyled">
<li>JavaScript</li>
<li>PHP</li>
<li>HTML5 & CSS3</li>
<li>SQL</li>
<li>Ruby</li>
<li>Scala</li>
</ul>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
</div>
<!-- end Languages -->
<!-- Services section -->
<div class="section-xl bg-black pt-0">
<div class="container icon-5xl">
<div class="row g-4 g-lg-5">
<div class="col-12 col-lg-6">
<i class="bi bi-robot text-white"></i>
<h5 class="fw-medium mt-2">Machine Learning Solutions</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div class="col-12 col-lg-6">
<i class="bi bi-hdd-rack text-white"></i>
<h5 class="fw-medium mt-2">Big Data Analysis</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div class="col-12 col-lg-6">
<i class="bi bi-fingerprint text-white"></i>
<h5 class="fw-medium mt-2">Pattern Recognition</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<div class="col-12 col-lg-6">
<i class="bi bi-braces-asterisk text-white"></i>
<h5 class="fw-medium mt-2">Software Development</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-xl bg-black pt-0">
<div class="container">
<div class="bg-dark-lighter p-4 p-lg-5 border-radius-1">
<div class="row g-4 g-lg-5">
<div class="col-12 col-lg-4">
<h6 class="uppercase fw-medium letter-spacing-1">I worked with</h6>
</div>
<div class="col-6 col-lg-4">
<ul class="list-unstyled">
<li><a class="text-link-2" href="#">Envato</a></li>
<li><a class="text-link-2" href="#">Flatheme</a></li>
<li><a class="text-link-2" href="#">Google</a></li>
<li><a class="text-link-2" href="#">Wordpress</a></li>
<li><a class="text-link-2" href="#">Themefusion</a></li>
</ul>
</div>
<div class="col-6 col-lg-4">
<ul class="list-unstyled">
<li><a class="text-link-2" href="#">Alphabet</a></li>
<li><a class="text-link-2" href="#">Oracle</a></li>
<li><a class="text-link-2" href="#">Softbank</a></li>
<li><a class="text-link-2" href="#">Adobe</a></li>
<li><a class="text-link-2" href="#">Netflix</a></li>
</ul>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Contact section -->
<div class="section-lg bg-black pt-0">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-5">
<h1 class="display-4 d-none d-xl-block">Get in Touch</h1><!-- for Desktop -->
<h1 class="d-xl-none">Get in Touch</h1><!-- for Mobile/Tablet -->
<!-- Social Links -->
<ul class="list-inline-sm mb-5">
<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>
<li>
<a class="button-circle button-circle-sm button-circle-white-2" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
</ul>
<!-- Contact Info -->
<div class="mb-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1 mb-0">Phone:</h6>
<p>+(976) 444 440 999</p>
</div>
<div class="mb-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1 mb-0">Email:</h6>
<p>contact@flatheme.net</p>
</div>
<div class="mb-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1 mb-0">Address:</h6>
<p>Ulaanbaatar, Khan-Uul, 11000</p>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="contact-form text-lg-end">
<form class="form-style-2" 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-radius button-white-2" 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 section -->
<!-- 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,606 @@
<!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 - Event</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 center header-color-dark transparent-light sticky">
<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="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#speakers">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sponsors">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#prices">Buy Tickets</a>
</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-2xl 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="display-4 fw-bold">Mono Conference 2022</h1>
<h1 class="display-5 countdown mt-3" data-countdown="2025/12/31"></h1>
<a class="button button-lg button-radius button-theme mt-4" href="#prices">Buy Tickets</a>
</div><!-- end container -->
</div>
</div>
<!-- About section -->
<div id="about" class="section pb-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">
<h2 class="fw-normal">About The Event</h2>
</div>
</div>
</div>
<div class="row g-5">
<div class="col-12 col-md-8 col-lg-9">
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div>
<h6 class="font-small fw-normal uppercase m-0">Where:</h6>
<span>121 King St, Melbourne VIC 3000</span>
</div>
<div class="mt-3">
<h6 class="font-small fw-normal uppercase m-0">When:</h6>
<span>July 27 to 28, 2022</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Schedule section -->
<div id="schedule" class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-lg-6">
<div class="card border-0 box-shadow">
<div class="card-header bg-color-theme border-0 p-4 d-flex justify-content-between align-items-center">
<div>
<h5 class="fw-normal m-0"><i class="bi bi-calendar me-2"></i>Day 1</h5>
</div>
<div>July 27, 2022</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">09:00 - 09:30</h6>
<p>Opening Cerenomy</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">09:30 - 10:00</h6>
<p>Brenda, Founder @ Agency</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">10:00 - 10:30</h6>
<p>Melissa, CEO @ Company</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">10:30 - 11:00</h6>
<p>Coffee Break</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">11:00 - 11:40</h6>
<p>Robert, Senior Marketer @ Company</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">11:40 - 14:00</h6>
<p>Networking Sessions</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">14:00</h6>
<p>Closing Cerenomy</p>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card border-0 box-shadow">
<div class="card-header bg-color-theme border-0 p-4 d-flex justify-content-between align-items-center">
<div>
<h5 class="fw-normal m-0"><i class="bi bi-calendar me-2"></i>Day 2</h5>
</div>
<div>July 28, 2022</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">11:00 - 11:30</h6>
<p>Registration</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">11:30 - 12:30</h6>
<p>Mono Team @ FlaTheme</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">12:30 - 13:00</h6>
<p>Michelle, Senior Designer @ Agency</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">13:00 - 14:00</h6>
<p>Lunch Break</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">14:00 - 16:00</h6>
<p>Networking Sessions</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">16:00</h6>
<p>Closing Cerenomy</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">19:00</h6>
<p>After Party @ Corporate Hotel</p>
</li>
</ul>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Schedule section -->
<!-- Gallery section -->
<div id="gallery" class="section bg-dark-lighter">
<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">
<h2>Mono Conference 2018</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 class="row gallery-wrapper hover-style-2 g-3 mt-5">
<!-- Gallery box 1 -->
<div class="col-12 col-md-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 2 -->
<div class="col-12 col-md-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 3 -->
<div class="col-12 col-md-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 3">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 4 -->
<div class="col-12 col-md-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 4">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Gallery section -->
<!-- Team section -->
<div id="speakers" 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>Invited Speakers</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 team-wrapper">
<!-- 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>
<div class="mb-2">
<h6 class="fw-normal m-0">Robert Vincent</h6>
<span>Entrepreneur</span>
</div>
</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>
<div class="mb-2">
<h6 class="fw-normal m-0">Brenda Johnson</h6>
<span>Entrepreneur</span>
</div>
</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>
<div class="mb-2">
<h6 class="fw-normal m-0">Rodney Scott</h6>
<span>Entrepreneur</span>
</div>
</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>
<div class="mb-2">
<h6 class="fw-normal m-0">Michelle White</h6>
<span>Entrepreneur</span>
</div>
</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>
<div class="mb-2">
<h6 class="fw-normal m-0">Alice Trumbo</h6>
<span>Marketer @ Corporate</span>
</div>
</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>
<div class="mb-2">
<h6 class="fw-normal m-0">Thomas Willis</h6>
<span>CEO @ Company</span>
</div>
</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>
<div class="mb-2">
<h6 class="fw-normal m-0">Mary Enderson</h6>
<span>UI/UX Designer @ Agency</span>
</div>
</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>
<div class="mb-2">
<h6 class="fw-normal m-0">Ernest Hermen</h6>
<span>Photographer</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Sponsors section -->
<div id="sponsors" class="section bg-gray-lighter">
<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="fw-normal">Event Sponsors</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="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-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><!-- end container -->
</div>
<!-- end Sponsors section -->
<!-- Parallax section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-8 col-lg-6 text-center text-md-start">
<h3 class="fw-light m-0">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</h3>
</div>
<div class="col-12 col-md-4 col-lg-6 text-center text-md-end">
<a class="button-circle button-circle-xl button-circle-white-2 button-hover-scale lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="fas fa-play"></i></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Ticket Prices section -->
<div id="buytickets" class="section bg-gray-lighter">
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2>Buy Tickets</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Integer tincidunt.</p>
</div>
</div>
<div class="row g-4 mt-5 text-center">
<!-- Price box 1 -->
<div class="col-12 col-md-4">
<div class="bg-white box-shadow hover-float border-radius px-4 py-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">1 Day Pass</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$39.99</h1>
</div>
<ul class="list-unstyled mt-4">
<li>Access to Conference Hall</li>
<li>Access to Networking Event</li>
<li>Workshops</li>
<li>Engage Sessions</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-4">
<div class="bg-white box-shadow hover-float border-radius px-4 py-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Full Pass</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$69.99</h1>
</div>
<ul class="list-unstyled mt-4">
<li>Access to Conference Hall</li>
<li>Access to Networking Event</li>
<li>Workshops</li>
<li>Engage Sessions</li>
</ul>
<a class="button button-md button-theme 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 px-4 py-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Exclusive Pass</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$99.99</h1>
</div>
<ul class="list-unstyled mt-4">
<li>Access to Conference Hall</li>
<li>Access to Networking Event</li>
<li>Workshops</li>
<li>Engage Sessions</li>
</ul>
<a class="button button-md button-theme button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Ticket Prices section -->
<!-- Google Maps -->
<div class="container-fluid p-0">
<div id="map1" class="gmap gmap-xl" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div>
<!-- end Google Maps -->
<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-theme" 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,504 @@
<!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 - Freelancer</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 class="theme-font-nunito" data-preloader="1">
<!-- Page Scroll Progress -->
<div class="page-progress-container">
<div id="pageProgress" class="page-progress-bar page-progress-gradient-1"></div>
</div>
<!-- end Page Scroll Progress -->
<!-- Header -->
<div class="header center transparent-dark 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 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="section-xl position-relative text-center">
<div class="container">
<img class="img-mask-avatar-3xl" src="../assets/images/col-4-square.jpg" alt="" data-rjs="2">
<h1 class="display-4 fw-medium mt-4 mb-0">
<h1 class="display-3 fw-bold fancy-text">Hello, I'm Ms.Green</h1>
</h1>
</div><!-- end container -->
<div class="position-bottom text-center">
<a class="button-text-1" href="#about">scroll down</a>
</div>
</div><!-- section-xl -->
<!-- end Hero section -->
<!-- About section -->
<div id="about" class="section-lg bg-dark-lighter">
<div class="container">
<div class="row g-5">
<div class="col-12 col-lg-5">
<h6 class="font-small uppercase letter-spacing-1 mb-4">Little About me</h6>
<h1>I integrate strategy, creativity & experience to solve problems</h1>
<a class="button-text-3 mt-3 mt-lg-4" 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 -->
<!-- Portfolio section -->
<div class="section-lg">
<div class="container">
<div class="portfolio-masonry column-2 spacing-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 -->
<div class="portfolio-title">
<div>
<h4>Project Title</h4>
<span>Creative</span>
</div>
</div>
</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 -->
<div class="portfolio-title">
<div>
<h4>Project Title</h4>
<span>Branding</span>
</div>
</div>
</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 -->
<div class="portfolio-title">
<div>
<h4>Project Title</h4>
<span>Creative</span>
</div>
</div>
</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 -->
<div class="portfolio-title">
<div>
<h4>Project Title</h4>
<span>Branding</span>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry -->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Services section -->
<div class="section-lg pt-0">
<div class="container text-center">
<div class="row g-4 icon-5xl">
<!-- Services box 1 -->
<div class="col-12 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow hover-float">
<i class="bi bi-camera text-gradient-1"></i>
<h4 class="fw-medium mt-2">Photoshoot</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor</p>
</div>
</div>
<!-- Services box 2 -->
<div class="col-12 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow hover-float">
<i class="bi bi-globe text-gradient-1"></i>
<h4 class="fw-medium mt-2">Social Marketing</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor</p>
</div>
</div>
<!-- Services box 3 -->
<div class="col-12 col-lg-4">
<div class="border border-radius p-4 p-lg-5 hover-shadow hover-float">
<i class="bi bi-pen text-gradient-1"></i>
<h4 class="fw-medium mt-2">Copywriting</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor</p>
</div>
</div>
<!-- end Services box 4 -->
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Resume section -->
<div class="section-lg bg-dark-lighter">
<div class="container">
<!-- Resume box 1 -->
<div>
<h4 class="fw-medium mt-2">Creative Director @ FlaTheme</h4>
<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="d-inline-block bg-white-01 border-radius px-3 py-2 mt-4">
<span class="d-inline-block font-small fw-semi-bold uppercase letter-spacing-1 text-white">2020 - Present</span>
</div>
</div>
<!-- Resume box 2 -->
<div class="mt-5">
<h4 class="fw-medium mt-2">Photographer @ FlaTheme</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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="d-inline-block bg-white-01 border-radius px-3 py-2 mt-4">
<span class="d-inline-block font-small fw-semi-bold uppercase letter-spacing-1 text-white">2018 - 2020</span>
</div>
</div>
<!-- Resume box 3 -->
<div class="mt-5">
<h4 class="fw-medium mt-2">Brand Manager @ FlaTheme</h4>
<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. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
<div class="d-inline-block bg-white-01 border-radius px-3 py-2 mt-4">
<span class="d-inline-block font-small fw-semi-bold uppercase letter-spacing-1 text-white">2018 - 2020</span>
</div>
</div>
<!-- end Resume box 3 -->
</div><!-- end container -->
</div>
<!-- end Resume section -->
<!-- Clients section -->
<div class="section-lg">
<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-4">My Awesome Clients</h6>
<h1 class="fw-bold">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
<a class="button-text-3 mt-3 mt-lg-4" href="#contact">Become a Client</a>
</div>
<div class="col-12 col-lg-7">
<ul class="clients-grid column-3">
<li>
<a href="#">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Contact section -->
<div id="contact" class="section-sm pt-0">
<div class="container">
<div class="row gy-5">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
<h1 class="fw-bold">Get In Touch</h1>
</div>
<!-- Contact Form -->
<div class="col-12 col-lg-8 offset-lg-2">
<div class="contact-form">
<form method="post" id="contactform" class="form-style-4">
<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-radius button-gradient-1" 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 row -->
<!-- Contact Info -->
<div class="row g-4 g-lg-5 text-lg-center mt-5 icon-3xl">
<div class="col-6 col-sm-6 col-lg-3">
<i class="bi bi-telephone text-dark"></i>
<h5 class="fw-medium mt-2 mb-0">Phone</h5>
<p>+976 444 444 44</p>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<i class="bi bi-envelope text-dark"></i>
<h5 class="fw-medium mt-2 mb-0">Email</h5>
<p>contact@example.com</p>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<i class="bi bi-whatsapp text-dark"></i>
<h5 class="fw-medium mt-2 mb-0">Whatsapp</h5>
<p>+976 444 444 44</p>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<i class="bi bi-geo-alt text-dark"></i>
<h5 class="fw-medium mt-2 mb-0">Address</h5>
<p>Ulaanbaatar, Khan-Uul, 11000</p>
</div>
</div><!-- end row -->
<!-- end Contact Info -->
</div><!-- end container -->
</div>
<!-- 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 -->
<!-- end Contact 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-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>

View File

@@ -0,0 +1,701 @@
<!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 - Human Resources</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 center header-color-dark 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="owl-carousel owl-nav-overlay owl-dots-overlay" data-owl-nav="true" data-owl-dots="true" data-owl-items="1" data-owl-autoplay="true">
<!-- Slider Item 1 -->
<div class="bg-image" data-bg-src="../assets/images/background.jpg">
<div class="section-xl bg-color-theme-05">
<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 fw-medium line-height-140">Leading Talent Acquisition Specialist</h1>
<a class="button button-xl button-radius button-outline-white mt-3 mt-lg-4" href="#">Learn More</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- Slider Item 2 -->
<div class="bg-image" data-bg-src="../assets/images/background.jpg">
<div class="section-xl bg-color-theme-05">
<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 fw-medium line-height-140">Leading Talent Acquisition Specialist</h1>
<a class="button button-xl button-radius button-outline-white mt-3 mt-lg-4" href="#">Learn More</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
</div><!-- end owl-carousel -->
<!-- end Hero section -->
<!-- Services section -->
<div class="section">
<div class="container">
<div class="row icon-5xl g-4 text-center">
<!-- Icon text box 1 -->
<div class="col-12 col-md-4">
<i class="fas fa-users text-color-theme"></i>
<h5 class="fw-normal mt-3">Recruiting</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="fas fa-users-cog text-color-theme"></i>
<h5 class="fw-normal mt-3">HR Consulting</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="fas fa-people-arrows text-color-theme"></i>
<h5 class="fw-normal mt-3">Outsourcing</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 -->
<!-- About section -->
<div class="section pt-0">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
<img class="box-shadow border-radius" src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<h3 class="fw-light mb-3">We believe that teamwork divides the tasks and multiplies the success</h3>
<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>
<a class="button button-md button-radius button-theme mt-4" href="#">More About Us</a>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Testimonial section -->
<div class="section pt-0">
<div class="container">
<div class="owl-carousel" data-owl-items="1" data-owl-dots="false" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<img class="mb-3 mb-lg-4" src="../assets/images/col-4-square.jpg" alt="">
<p class="mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. 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-family-poppins font-small uppercase">COO - Mono</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<img class="mb-3 mb-lg-4" src="../assets/images/col-4-square.jpg" alt="">
<p class="mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. 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-family-poppins font-small uppercase">CMO - Mono</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<img class="mb-3 mb-lg-4" src="../assets/images/col-4-square.jpg" alt="">
<p class="mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. 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-family-poppins font-small uppercase">CFO - Mono</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial section -->
<!-- Facts/Counter section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-05">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="display-4 fw-light"><span class="counter">100</span>+</h1>
<p>Counter</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="display-4 fw-light"><span class="counter">100</span>+</h1>
<p>Counter</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="display-4 fw-light"><span class="counter">100</span>+</h1>
<p>Counter</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="display-4 fw-light"><span class="counter">100</span>+</h1>
<p>Counter</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts/Counter section -->
<!-- Clients section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
<h2 class="fw-normal">Companies Recruiting with Mono</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus in hac</p>
</div>
</div><!-- end row -->
</div>
<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><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Careers section -->
<div class="section bg-gray-lighter">
<div class="container">
<div class="mb-5">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
<h2 class="fw-normal text-color-theme">Recent Job Listings</h2>
</div>
</div><!-- end row -->
</div>
<div class="masonry column-3 spacing-2">
<!-- 1 -->
<div class="masonry-item">
<div class="bg-white border-radius box-shadow p-4">
<h5 class="fw-normal m-0">Web Developer</h5>
<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 massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="text-end mt-2 mt-lg-3">
<a class="button-text-1" href="#">Apply Now</a>
</div>
</div>
</div>
<!-- 2 -->
<div class="masonry-item">
<div class="bg-white border-radius box-shadow p-4">
<h5 class="fw-normal m-0">Project Manager</h5>
<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.</p>
<div class="text-end mt-2 mt-lg-3">
<a class="button-text-1" href="#">Apply Now</a>
</div>
</div>
</div>
<!-- 3 -->
<div class="masonry-item">
<div class="bg-white border-radius box-shadow p-4">
<h5 class="fw-normal m-0">Graphic Designer</h5>
<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 massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="text-end mt-2 mt-lg-3">
<a class="button-text-1" href="#">Apply Now</a>
</div>
</div>
</div>
<!-- 4 -->
<div class="masonry-item">
<div class="bg-white border-radius box-shadow p-4">
<h5 class="fw-normal m-0">Creative Director</h5>
<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 massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="text-end mt-2 mt-lg-3">
<a class="button-text-1" href="#">Apply Now</a>
</div>
</div>
</div>
<!-- 5 -->
<div class="masonry-item">
<div class="bg-white border-radius box-shadow p-4">
<h5 class="fw-normal m-0">Marketing Specialist</h5>
<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.</p>
<div class="text-end mt-2 mt-lg-3">
<a class="button-text-1" href="#">Apply Now</a>
</div>
</div>
</div>
<!-- 6 -->
<div class="masonry-item">
<div class="bg-white border-radius box-shadow p-4">
<h5 class="fw-normal m-0">Photographer</h5>
<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.</p>
<div class="text-end mt-2 mt-lg-3">
<a class="button-text-1" href="#">Apply Now</a>
</div>
</div>
</div>
</div><!-- end row -->
<div class="mt-5 text-center">
<a class="button button-md button-radius button-theme mt-4" href="#">View All Listings</a>
</div>
</div><!-- end container -->
</div>
<!-- end Careers section -->
<!-- Team section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3 text-center">
<h2 class="fw-normal">Meet Our Team</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis blandit turpis cursus</p>
</div>
</div><!-- end row -->
<div class="row g-3 gy-4 team-wrapper border-radius mt-5">
<!-- 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-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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span class="font-family-poppins font-small uppercase">Recruiter</span>
</div>
</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-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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span class="font-family-poppins font-small uppercase">Recruiter</span>
</div>
</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-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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span class="font-family-poppins font-small uppercase">Recruiter</span>
</div>
</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-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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span class="font-family-poppins font-small uppercase">Recruiter</span>
</div>
</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-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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span class="font-family-poppins font-small uppercase">Recruiter</span>
</div>
</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-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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span class="font-family-poppins font-small uppercase">Recruiter</span>
</div>
</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-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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span class="font-family-poppins font-small uppercase">Recruiter</span>
</div>
</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-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>
<div class="mb-2">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span class="font-family-poppins font-small uppercase">Recruiter</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-color-theme-05">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-8 col-xl-7">
<h1 class="fw-light">Feel free to ask any questions</h1>
<p class="font-large">Etiam sit amet orci eget eros faucibus tincidunt.</p>
</div>
<div class="col-12 col-lg-4 col-xl-5 text-lg-end">
<a class="button button-xl button-radius button-reveal-right-outline-white" href="#"><i class="bi bi-arrow-right"></i><span>Get In Touch</span></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax 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-theme" 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,322 @@
<!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 - Interior Design Studio</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-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05 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">
<h1 class="display-4">Interior Design</h1>
<p class="font-large fw-light">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</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Portfolio section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row align-items-end g-3">
<div class="col-12 col-lg-8 col-xl-7">
<h3 class="fw-light m-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</h3>
</div>
<div class="col-12 col-lg-4 col-xl-5 text-lg-end">
<a class="button-text-1" href="#">View All Works</a>
</div>
</div><!-- end row -->
</div>
<div class="portfolio-masonry column-2 spacing-3 hover-style-1"><!-- column-(1/2/3/4/5/6) -->
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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>
<h4 class="fw-light">Project Title</h4>
<p class="font-family-poppins font-small uppercase">Category</p>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<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>
<h4 class="fw-light">Project Title</h4>
<p class="font-family-poppins font-small uppercase">Category</p>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<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>
<h4 class="fw-light">Project Title</h4>
<p class="font-family-poppins font-small uppercase">Category</p>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<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>
<h4 class="fw-light">Project Title</h4>
<p class="font-family-poppins font-small uppercase">Category</p>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Services section -->
<div class="section pt-0">
<div class="container">
<div class="row icon-5xl g-4">
<!-- 1 -->
<div class="col-12 col-md-4">
<div class="mb-3 text-dark">
<i class="bi bi-star"></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>
<!-- 2 -->
<div class="col-12 col-md-4">
<div class="mb-3 text-dark">
<i class="bi bi-star"></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>
<!-- 3 -->
<div class="col-12 col-md-4">
<div class="mb-3 text-dark">
<i class="bi bi-star"></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 -->
<!-- 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" data-owl-nav="true" data-owl-dots="false" data-owl-items="1">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<img class="mb-4" src="../assets/images/img-avatar-sm.jpg" alt="">
<p class="font-large fw-light mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Johnny Smith</h5>
<span class="font-family-poppins font-small uppercase">Customer</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<img class="mb-4" src="../assets/images/img-avatar-sm.jpg" alt="">
<p class="font-large fw-light mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Johnny Smith</h5>
<span class="font-family-poppins font-small uppercase">Customer</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<img class="mb-4" src="../assets/images/img-avatar-sm.jpg" alt="">
<p class="font-large fw-light mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h5 class="fw-normal m-0 line-height-140">Johnny Smith</h5>
<span class="font-family-poppins font-small uppercase">Customer</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
</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,536 @@
<!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 - IT Services</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 theme-font-nunito" 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 -->
<!-- Hero section -->
<div class="section-xl bg-gradient-6 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">
<h6 class="d-inline-block bg-dark-03 border-radius px-3 py-2 line-height-100 font-small uppercase letter-spacing-1 mb-3">IT Services & Solutions</h6>
<h1 class="fw-light">Quality is not only our standard. It's also an attitude instilled in our company</h1>
<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple lightbox-media-link mt-3" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="fas fa-play"></i></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Services section -->
<div class="n-margin-6">
<div class="container">
<div class="row icon-5xl g-4">
<div class="col-12 col-lg-4">
<div class="bg-white-09 backdrop-filter-blur border-radius box-shadow hover-float p-4 p-lg-5 mt-lg-4">
<i class="bi bi-chat-dots text-color-theme mb-2"></i>
<h4>IT Consulting</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<a class="button-text-2 button-text-theme mt-3" href="#">Learn more</a>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="bg-white-09 backdrop-filter-blur border-radius box-shadow hover-float p-4 p-lg-5">
<i class="bi bi-code-slash text-color-theme mb-2"></i>
<h4>Software Development</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<a class="button-text-2 button-text-theme mt-3" href="#">Learn more</a>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="bg-white-09 backdrop-filter-blur border-radius box-shadow hover-float p-4 p-lg-5 mt-lg-4">
<i class="bi bi-upc-scan text-color-theme mb-2"></i>
<h4>AI Implementations</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<a class="button-text-2 button-text-theme mt-3" href="#">Learn more</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services setion -->
<!-- Clients section -->
<div class="section">
<div class="container">
<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><!-- end container -->
</div>
<!-- end Clients section -->
<!-- About section -->
<div class="section pt-0">
<div class="container text-center text-lg-start">
<div class="row align-items-center g-4 g-lg-5">
<div class="col-12 col-lg-6">
<img src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<h6 class="d-inline-block bg-gray border-radius px-3 py-2 line-height-100 font-small uppercase letter-spacing-1 mb-3"><span class="text-gradient-6">About us</span></h6>
<h2>We help businesses to become inescapable in a digital world</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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<a class="button button-lg button-rounded button-font-2 button-theme mt-4" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Process section -->
<div class="section-lg pt-0">
<div class="container">
<div class="row g-4 g-lg-5">
<!-- Process box 1 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-white box-shadow mb-3">
<h3 class="text-gradient-6">1</h3>
</div>
<h5>First Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt</p>
</div>
<!-- Process box 2 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-white box-shadow mb-3">
<h3 class="text-gradient-6">2</h3>
</div>
<h5>Second Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt</p>
</div>
<!-- Process box 3 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-white box-shadow mb-3">
<h3 class="text-gradient-6">3</h3>
</div>
<h5>Third Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt</p>
</div>
<!-- Process box 4 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-white box-shadow mb-3">
<h3 class="text-gradient-6">4</h3>
</div>
<h5>Fourth Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Process section -->
<!-- Pale boxes section -->
<div class="section-lg pt-0">
<div class="container">
<div class="row g-4 icon-5xl">
<div class="col-12 col-lg-6">
<div class="bg-light-blue border-radius p-4 p-lg-5">
<i class="bi bi-person text-blue"></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-light-turquoise border-radius p-4 p-lg-5 mt-lg-4">
<i class="bi bi-envelope text-turquoise"></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><!-- end container -->
</div>
<!-- end Pale boxes section -->
<!-- Prices section -->
<div class="section bg-gray-lighter">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-5">
<h6 class="d-inline-block bg-dark box-shadow border-radius px-3 py-2 line-height-100 font-small uppercase letter-spacing-1 mb-3 text-white">Pricing Plans</h6>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit sod de</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore</p>
</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 uppercase letter-spacing-1"><span class="text-blue">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-font-2 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 mt-lg-4">
<h6 class="font-small uppercase letter-spacing-1"><span class="text-blue">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-font-2 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-lg">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-12 col-lg-5 order-lg-2">
<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 -->
<!-- Testimonial section -->
<div class="section-lg pt-0">
<div class="container">
<div class="owl-carousel" data-owl-items="1" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-medium line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-medium line-height-140 m-0">Andrew Palmer</h5>
<span class="font-small fw-normal">Developer - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-medium line-height-140 m-0">Anna Mullen</h5>
<span class="font-small fw-normal">Designer - Mono</span>
<p class="mt-3">"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 g-lg-5">
<div class="col-12 col-md-6 col-lg-3">
<h1 class="display-5 mb-2">Mono</h1>
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 col-lg-3">
<!-- Contact Info -->
<ul class="list-unstyled">
<li>+(976) 444 444 11</li>
<li>contact@flatheme.net</li>
<li>Ulaanbaatar, Khan-Uul, 11000</li>
</ul>
<!-- Social Links -->
<ul class="list-inline-sm mt-4">
<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>
<li>
<a class="button-circle button-circle-sm button-circle-white-2" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash animate-links">
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash animate-links">
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Footer -->
<!-- Scroll to top button -->
<div class="scrolltotop icon-lg">
<a class="button-circle button-circle-md button-circle-theme" 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,656 @@
<!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 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 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="bg-gradient-6">
<div class="bg-dark-01">
<div class="container">
<div class="section-lg pb-0">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h6 class="uppercase fw-medium mb-4">
<span class="typer text-white" id="typer1" data-words="Hello There, Introducing Mono!" data-delay="60" data-deleteDelay="1000"></span><span class="cursor" data-owner="typer1"></span>
</h6>
<h1 class="display-5 font-family-outfit fw-normal line-height-130">We help innovators to successfully bring their business in life</h1>
<a class="button button-lg button-radius button-white mt-4" href="#">Let's Talk</a>
</div>
</div><!-- end row -->
</div>
<div class="section pb-4">
<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">
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section-sm">
<div class="container">
<div class="row align-items-center g-4 g-lg-5">
<div class="col-12 col-lg-5">
<div class="img-mask-blob-3">
<img src="../assets/images/col-2-square.jpg" alt="">
</div>
</div>
<div class="col-12 col-lg-7">
<h1 class="fw-normal">We Are Mono</h1>
<ul class="list-inline-sm mt-2 mb-3">
<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>
<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>
<!-- Counters -->
<div class="row g-4 mt-2">
<!-- 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 -->
<!-- Services section -->
<div class="border-top border-bottom">
<div class="container">
<div class="row icon-5xl g-0" data-cues="fadeIn">
<!-- Icon text box 1 -->
<div class="col-12 col-md-4">
<div class="p-4 p-lg-5 hover-shadow">
<i class="bi bi-megaphone 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>
</div>
<!-- Icon text box 2 -->
<div class="col-12 col-md-4">
<div class="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. Aenean massa.</p>
</div>
</div>
<!-- Icon text box 3 -->
<div class="col-12 col-md-4">
<div class="p-4 p-lg-5 hover-shadow">
<i class="bi bi-camera text-dark"></i>
<h5 class="fw-normal mt-2">Production</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Portfolio 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" data-cues="fadeIn">
<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">Portfolio</span>
</div>
<h2 class="display-6 font-family-outfit fw-normal">Our Latest Works</h2>
</div>
</div>
</div>
<!-- Portfolio filter -->
<div class="filter filter-style-3 text-center mb-5">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-2 hover-style-1">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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 category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.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 category-3">
<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 category-1">
<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 category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.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 category-1">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.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><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Testimonial section -->
<div class="section bg-dark-lighter">
<div class="container">
<div class="mb-5 text-center">
<h6 class="font-small fw-medium uppercase">What People Say?</h6>
</div>
<div class="owl-carousel" data-owl-nav="true" data-owl-margin="30" data-owl-xs="1" data-owl-sm="1" data-owl-md="1" data-owl-lg="2" data-owl-xl="2">
<!-- Testimonial Slider Item 1 -->
<div class="border border-radius p-5">
<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-130">Emiley Haley</h5>
<span class="font-small">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 Slider Item 2 -->
<div class="border border-radius p-5">
<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-130">Andrew Palmer</h5>
<span class="font-small">Developer - 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 Slider Item 3 -->
<div class="border border-radius p-5">
<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-130">Anna Mullen</h5>
<span class="font-small">Designer - 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 Slider Item 4 -->
<div class="border border-radius p-5">
<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-130">John Smith</h5>
<span class="font-small">Marketer - 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 row -->
</div>
<!-- end Testimonial section -->
<!-- Parallax section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-03">
<div class="container text-center">
<a class="button-circle button-circle-xl button-circle-white-2 icon-xl button-hover-scale button-circle-ripple lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<i class="bi bi-play"></i>
</a>
</div><!-- end container -->
</div>
</div>
<!-- end Parallax 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" data-cues="fadeIn">
<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">Team Members</span>
</div>
<h2 class="display-6 font-family-outfit fw-normal">Meet Our Creative Team</h2>
</div>
</div>
</div>
<div class="row g-3 gy-4 team-wrapper team-box-hover-2" 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-4-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-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Robert Vincent</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-4-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-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span>Marketer</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-4-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-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Rodney Scott</h5>
<span>Developer</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-4-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-pinterest" href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<h5 class="fw-normal m-0">Michelle White</h5>
<span>Designer</span>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Blog Posts section -->
<div class="section pt-0">
<div class="container" data-cues="fadeIn">
<!-- Blog post box 1 -->
<div class="blog-card-wrapper bg-image" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-normal text-color-theme m-0">04</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-normal mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 2 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-normal text-color-theme m-0">03</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-normal mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 3 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-normal text-color-theme m-0">02</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-normal mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Blog Posts section -->
<!-- Footer -->
<div class="section bg-dark">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-6 col-lg-3">
<h1 class="display-5 mb-2">Mono</h1>
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 col-lg-3">
<!-- Contact Info -->
<ul class="list-unstyled">
<li>+(976) 444 444 11</li>
<li>contact@flatheme.net</li>
<li>Ulaanbaatar, Khan-Uul, 11000</li>
</ul>
<!-- Social Links -->
<ul class="list-inline-sm mt-4">
<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>
<li>
<a class="button-circle button-circle-sm button-circle-white-2" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash animate-links">
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Pricing Plans</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
<li>
<a href="#">FAQ</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash animate-links">
<li>
<a href="#">Our Team</a>
</li>
<li>
<a href="#">Our Clients</a>
</li>
<li>
<a href="#">Photo Gallery</a>
</li>
<li>
<a href="#">Process</a>
</li>
<li>
<a href="#">GDPR Compliance</a>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end 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,657 @@
<!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 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 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-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-08 section-divider-curve-bottom">
<div class="container">
<div class="row mt-5 mb-5">
<div class="col-12 col-md-10 offset-md-1">
<h1 class="display-3 font-family-outfit fw-semi-bold m-0">We're a digital design &amp;<br>branding agency</h1>
<div class="d-flex align-items-center mt-4">
<ul class="avatar-group">
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
</ul>
<div class="d-inline-block ps-3">
<p>Trusted by 4,000+ people <br class="d-md-block">around the world</p>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Process section -->
<div class="container">
<div class="bg-dark-09 backdrop-filter-blur p-4 p-lg-5 border-radius-1 box-shadow n-margin-5">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-4">
<h2 class="display-5 fw-bold stroke-text opacity-75">01.</h2>
<h5 class="fw-normal">Designing</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">
<h2 class="display-5 fw-bold stroke-text opacity-75">02.</h2>
<h5 class="fw-normal">Developing</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">
<h2 class="display-5 fw-bold stroke-text opacity-75">03.</h2>
<h5 class="fw-normal">Launching</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 -->
<!-- end Process section -->
<!-- Portfolio section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="row g-1 gx-xl-4 align-items-center" data-cues="fadeIn">
<div class="col-12 col-xl-6 col-xxl-5">
<h2 class="display-4 font-family-outfit fw-medium">We Develop Digital Products</h2>
</div>
<div class="col-12 col-xl-6 col-xxl-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</p>
<a class="button button-md button-reveal-right-outline-dark button-rounded mt-3" href="#"><i class="bi bi-arrow-right"></i><span>View all works</span></a>
</div>
</div><!-- end row -->
</div>
</div>
</div>
<div class="row portfolio-grid g-4 border-radius" data-cues="fadeIn">
<!-- Portfolio box 1 -->
<div class="col-12 col-md-6 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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="col-12 col-md-6 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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="col-12 col-md-6 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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="col-12 col-md-6 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>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end row/portfolio-grid -->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Services section -->
<div class="border-top border-bottom">
<div class="container">
<div class="row icon-5xl g-0" data-cues="fadeIn">
<div class="col-12 col-lg-4">
<div class="d-flex p-4 py-lg-5 px-xl-5 hover-shadow">
<div class="d-inline-block me-4">
<i class="bi bi-brush text-dark"></i>
</div>
<div class="d-inline-block">
<h5 class="fw-normal">Graphic Design</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="d-flex p-4 py-lg-5 px-xl-5 hover-shadow">
<div class="d-inline-block me-4">
<i class="bi bi-camera text-dark"></i>
</div>
<div class="d-inline-block">
<h5 class="fw-normal">Photography</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="d-flex p-4 py-lg-5 px-xl-5 hover-shadow">
<div class="d-inline-block me-4">
<i class="bi bi-star text-dark"></i>
</div>
<div class="d-inline-block">
<h5 class="fw-normal">Social Marketing</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</p>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Team section -->
<div class="section border-top">
<div class="container">
<div class="mb-5">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="row g-1 gx-xl-4 align-items-center" data-cues="fadeIn">
<div class="col-12 col-xl-6 col-xxl-5">
<h2 class="display-4 font-family-outfit fw-medium">Meet Our Team Members</h2>
</div>
<div class="col-12 col-xl-6 col-xxl-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</p>
<a class="button button-md button-reveal-right-outline-dark button-rounded mt-3" href="#"><i class="bi bi-arrow-right"></i><span>More About us</span></a>
</div>
</div><!-- end row -->
</div>
</div>
<div class="row team-wrapper border-radius g-3 gy-4" 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-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>
<h5 class="fw-normal m-0">Johnny Doe</h5>
<span>Co-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-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>
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span>Co-Founder</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-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>
<h5 class="fw-normal m-0">Dan Breeze</h5>
<span>Co-Founder</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-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>
<h5 class="fw-normal m-0">Michelle White</h5>
<span>Co-Founder</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-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>
<h5 class="fw-normal m-0">Johnny Doe</h5>
<span>Co-Founder</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-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>
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span>Co-Founder</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-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>
<h5 class="fw-normal m-0">Dan Breeze</h5>
<span>Co-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-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>
<h5 class="fw-normal m-0">Michelle White</h5>
<span>Co-Founder</span>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-08">
<div class="container text-center" data-cues="fadeIn">
<h1 class="fw-light">Do you like what you see?</h1>
<a class="button button-xl button-rounded button-reveal-right-outline-white mt-3" href="#"><i class="bi bi-cart3"></i><span>Buy now</span></a>
</div><!-- end container -->
</div>
</div>
<!-- Blog section -->
<div class="section">
<div class="container">
<div class="mb-5">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="row g-1 gx-xl-4 align-items-center" data-cues="fadeIn">
<div class="col-12 col-xl-6 col-xxl-5">
<h2 class="display-4 font-family-outfit fw-medium">Our Latest Blog Posts</h2>
</div>
<div class="col-12 col-xl-6 col-xxl-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</p>
<a class="button button-md button-reveal-right-outline-dark button-rounded mt-3" href="#"><i class="bi bi-arrow-right"></i><span>View all posts</span></a>
</div>
</div><!-- end row -->
</div>
</div>
</div>
<div class="owl-carousel" data-owl-nav="false" data-owl-margin="24" data-owl-xs="1" data-owl-sm="1" data-owl-md="1" data-owl-lg="2" data-owl-xl="2" data-owl-autoPlay="true">
<!-- Blog Slider Item 1 -->
<div>
<div class="hoverbox-6 border-radius">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-family-poppins font-small fw-normal uppercase m-0 text-white">Category</span>
</div>
</a>
</div>
<div class="p-3">
<h5 class="fw-normal m-0"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<span>Apr 29, 2019</span>
</div>
</div>
<!-- Blog Slider Item 2 -->
<div>
<div class="hoverbox-6 border-radius">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-family-poppins font-small fw-normal uppercase m-0 text-white">Category</span>
</div>
</a>
</div>
<div class="p-3">
<h5 class="fw-normal m-0"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<span>Apr 28, 2019</span>
</div>
</div>
<!-- Blog Slider Item 3 -->
<div>
<div class="hoverbox-6 border-radius">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-family-poppins font-small fw-normal uppercase m-0 text-white">Category</span>
</div>
</a>
</div>
<div class="p-3">
<h5 class="fw-normal m-0"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<span>Apr 27, 2019</span>
</div>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Blog section -->
<!-- Clients section -->
<div class="section bg-gray-lighter">
<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" data-cues="fadeIn">
<h2>Our Amazing Clients</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>
</div>
</div>
</div>
<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-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><!-- end container -->
</div>
<!-- end Clients 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,631 @@
<!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 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-dark">
<!-- Header -->
<div class="header right header-color-dark 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-fullscreen bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-07">
<div class="container">
<div class="position-middle">
<div class="row">
<div class="col-12 col-md-10 col-lg-8">
<h1 class="display-1 font-family-outfit fw-lighter">Every new idea looks crazy at first</h1>
</div>
</div><!-- end row -->
</div>
<!-- smoothscroll button -->
<div class="position-bottom">
<a class="button-circle button-circle-xl button-circle-outline-white icon-lg" href="#about">
<i class="bi bi-arrow-down"></i>
</a>
</div>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section" id="about">
<div class="container">
<div class="row align-items-center g-4 g-lg-5">
<div class="col-12 col-lg-5">
<div class="img-mask-blob-4">
<img src="../assets/images/col-2-square.jpg" alt="">
</div>
</div>
<div class="col-12 col-lg-7">
<h2 class="display-6 font-family-outfit fw-normal">We're a team of Professional people who loves what they do</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.</p>
<div class="row g-1 g-md-4 mt-3 mt-md-0">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<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>Advanced Features</li>
<li><i class="bi bi-check-circle-fill text-turquoise me-2"></i>Super Versatile</li>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li><i class="bi bi-check-circle-fill text-turquoise me-2"></i>Top Rated for 5 Years</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>Fast & Friendly Support</li>
</ul>
</div>
</div><!-- end row(inner) -->
<a class="button button-lg button-radius button-reveal-right-dark mt-4 mt-md-5" href="#"><span>More About Us</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- end row -->
<!-- Services -->
<div class="mt-5">
<div class="row g-4 g-lg-5 icon-5xl" data-cues="fadeIn">
<!-- Icon text box 1 -->
<div class="col-12 col-md-4">
<i class="bi bi-star text-turquoise"></i>
<h4 class="font-family-outfit fw-medium mt-2">Branding</h4>
<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-megaphone text-turquoise"></i>
<h4 class="font-family-outfit fw-medium mt-2">Marketing</h4>
<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-turquoise"></i>
<h4 class="font-family-outfit fw-medium mt-2">Production</h4>
<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>
<!-- end About section -->
<!-- Blog Posts section -->
<div class="section pt-0">
<div class="container" data-cues="fadeIn">
<!-- Blog post box 1 -->
<div class="blog-card-wrapper bg-image" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">04</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 2 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">03</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
<!-- Blog post box 3 -->
<div class="blog-card-wrapper bg-image mt-4" data-bg-src="../assets/images/col-1.jpg">
<div class="blog-card">
<div class="blog-card-date">
<h1 class="display-4 fw-medium text-color-theme m-0">02</h1>
<h6 class="font-small uppercase letter-spacing-1">Feb</h6>
</div>
<h4 class="fw-medium mt-2"><a class="text-link-1" href="#">Blog Post Title</a></h4>
<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>
<a class="button-text-3 d-inline-block mt-4" href="#">Read more</a>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Blog Posts section -->
<!-- Parallax section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="row align-items-center" data-cues="fadeIn">
<div class="col-12 col-lg-8 col-xl-7">
<h2 class="display-5 font-family-outfit fw-light">Feel free to ask any questions</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 class="col-12 col-lg-4 col-xl-5 text-lg-end">
<a class="button button-xl button-radius button-reveal-right-outline-white" href="#"><i class="bi bi-arrow-right"></i><span>Get In Touch</span></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Portfolio section -->
<div class="section-lg">
<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" data-cue="fadeIn">
<h2 class="display-6 font-family-outfit fw-normal">Our Latest Works</h2>
</div>
</div>
</div>
<!-- Portfolio filter -->
<div class="filter filter-style-3 text-center mb-5">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-2 hover-style-1">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-square.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-square.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-2-square.jpg" alt="">
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h3 class="font-family-outfit fw-normal">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Clients section -->
<div class="section-sm bg-gray-lighter">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-lg-5 col-xxl-4">
<div class="d-flex align-items-center">
<ul class="avatar-group">
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
</ul>
<div class="d-inline-block ps-3">
<p>We've over 4,000 clients <br class="d-md-block">around the world</p>
</div>
</div>
</div>
<div class="col-12 col-lg-7 col-xxl-8">
<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="3" data-owl-xl="3">
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Team 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" data-cues="fadeIn">
<h2 class="display-6 font-family-outfit fw-normal">Meet Our Creative 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 team-wrapper" 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-square.jpg" alt="">
<!-- 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>
<div class="mb-2">
<h5 class="font-family-outfit fw-medium m-0">Robert Vincent</h5>
<span>Founder</span>
</div>
</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-square.jpg" alt="">
<!-- 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>
<div class="mb-2">
<h5 class="font-family-outfit fw-medium m-0">Brenda Johnson</h5>
<span>Co-Founder</span>
</div>
</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-square.jpg" alt="">
<!-- 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>
<div class="mb-2">
<h5 class="font-family-outfit fw-medium m-0">Rodney Scott</h5>
<span>Lead Developer</span>
</div>
</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-square.jpg" alt="">
<!-- 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>
<div class="mb-2">
<h5 class="font-family-outfit fw-medium m-0">Michelle White</h5>
<span>Lead Designer</span>
</div>
</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-square.jpg" alt="">
<!-- 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>
<div class="mb-2">
<h5 class="font-family-outfit fw-medium m-0">Maria Parrish</h5>
<span>Marketer</span>
</div>
</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-square.jpg" alt="">
<!-- 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>
<div class="mb-2">
<h5 class="font-family-outfit fw-medium m-0">Thomas Lueck</h5>
<span>Developer</span>
</div>
</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-square.jpg" alt="">
<!-- 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>
<div class="mb-2">
<h5 class="font-family-outfit fw-medium m-0">Andrea Romo</h5>
<span>Designer</span>
</div>
</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-square.jpg" alt="">
<!-- 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>
<div class="mb-2">
<h5 class="font-family-outfit fw-medium m-0">Brian Flores</h5>
<span>Photographer</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team 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,568 @@
<!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 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-dark">
<!-- Header -->
<div class="header transparent-light">
<div class="container">
<!-- Logo -->
<div class="header-logo">
<h3 class="font-family-outfit uppercase letter-spacing-1"><a href="#">mono</a></h3>
</div>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-top">
<ul class="list-unstyled uppercase">
<li>
<h2 class="letter-spacing-1 font-family-outfit"><a class="text-link-2" href="#">Home</a></h2>
</li>
<li>
<h2 class="letter-spacing-1 font-family-outfit"><a class="text-link-2" href="#">About</a></h2>
</li>
<li>
<h2 class="letter-spacing-1 font-family-outfit"><a class="text-link-2" href="#">Portfolio</a></h2>
</li>
<li>
<h2 class="letter-spacing-1 font-family-outfit"><a class="text-link-2" href="#">Blog</a></h2>
</li>
<li>
<h2 class="letter-spacing-1 font-family-outfit"><a class="text-link-2" href="#">Shop</a></h2>
</li>
</ul>
</div>
<div class="position-bottom">
<ul class="list-inline-sm">
<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>
<li><a class="button-circle button-circle-sm button-circle-white-2" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
<p class="mt-3">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-fullscreen bg-black">
<div class="container text-end">
<div class="position-middle">
<div class="border-end border-bottom border-white d-inline-block p-5">
<h1 class="display-1 font-family-outfit fw-normal uppercase letter-spacing-3 line-height-140 m-0">We Bring<br> <span class="fw-semi-bold stroke-text">Imagination</span><br>To Life</h1>
</div>
</div>
<!-- smoothscroll button -->
<div class="position-bottom">
<a class="icon-xl" href="#about">
<i class="bi bi-arrow-down"></i>
</a>
</div>
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- About section -->
<div id="about" class="section-lg">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-4">
<div class="mb-5">
<h2 class="display-5 font-family-outfit fw-semi-bold uppercase m-0 stroke-text opacity-50">About Us</h2>
</div>
</div>
<div class="col-12 col-md-8">
<div class="mb-4">
<h2 class="fw-light">We believe that teamwork divides the tasks and multiplies the success</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>
<!-- Progress bars -->
<div class="row g-4">
<!-- Progress bar box 1 -->
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Production</h6>
<div class="animated-progress">
<div data-progress="96"></div>
</div>
</div>
</div>
<!-- Progress bar box 2 -->
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Branding</h6>
<div class="animated-progress">
<div data-progress="88"></div>
</div>
</div>
</div>
<!-- Progress bar box 3 -->
<div class="col-12 col-md-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 box 4 -->
<div class="col-12 col-md-6">
<div class="progress-box">
<h6 class="fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
</div>
</div><!-- end row(inner) -->
<!-- end Progress bars -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Facts section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="row g-4">
<!-- Counter box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light"><span class="counter">119</span>+</h1>
<h6 class="font-small fw-normal uppercase mt-2">Projects Done</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Counter box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">79</h1>
<h6 class="font-small fw-normal uppercase mt-2">Employees</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Counter box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light"><span class="counter">1000</span>+</h1>
<h6 class="font-small fw-normal uppercase mt-2">Happy Clients</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Counter box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">214</h1>
<h6 class="font-small fw-normal uppercase mt-2">Hours of Meeting</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts section -->
<!-- Portfolio section -->
<div class="section-lg">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-4">
<div class="mb-5">
<h2 class="display-5 font-family-outfit fw-semi-bold uppercase m-0 stroke-text opacity-50">Our Works</h2>
</div>
</div>
<div class="col-12 col-md-8">
<div class="portfolio-masonry column-2 spacing-1 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>
<h4 class="fw-normal">Project Title</h4>
<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>
<h4 class="fw-normal">Project Title</h4>
<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>
<h4 class="fw-normal">Project Title</h4>
<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.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- end Portfolio box 4 -->
</div><!-- end row/portfolio-masonry -->
<!-- View More Button -->
<div class="text-end mt-4">
<a class="button-text-2" href="#">View More Works</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Services section -->
<div class="section-lg bg-dark-lighter">
<div class="container">
<div class="row g-4 g-lg-5 icon-5xl">
<!-- Icon text box 1 -->
<div class="col-12 col-md-4">
<div class="mb-3">
<i class="bi bi-camera text-white"></i>
</div>
<h4 class="fw-normal">Production</h4>
<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">
<div class="mb-3">
<i class="bi bi-globe text-white"></i>
</div>
<h4 class="fw-normal">Social Marketing</h4>
<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">
<div class="mb-3">
<i class="bi bi-star text-white"></i>
</div>
<h4 class="fw-normal">Branding</h4>
<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 -->
<!-- Team section -->
<div class="section-lg">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-4">
<div class="mb-5">
<h2 class="display-5 font-family-outfit fw-semi-bold uppercase m-0 stroke-text opacity-50">Our Team</h2>
</div>
</div>
<div class="col-12 col-md-8">
<div class="row g-2 team-wrapper">
<!-- 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 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>
<div class="mb-3">
<h5 class="fw-normal m-0">Robert Vincent</h5>
<span>Founder</span>
</div>
</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 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>
<div class="mb-3">
<h5 class="fw-normal m-0">Brenda Johnson</h5>
<span>Co-Founder</span>
</div>
</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 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>
<div class="mb-3">
<h5 class="fw-normal m-0">Rodney Scott</h5>
<span>Developer</span>
</div>
</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=""><!-- 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>
<div class="mb-3">
<h5 class="fw-normal m-0">Michelle White</h5>
<span>Designer</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=""><!-- 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>
<div class="mb-3">
<h5 class="fw-normal m-0">Maria Parrish</h5>
<span>Photographer</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=""><!-- 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>
<div class="mb-3">
<h5 class="fw-normal m-0">Thomas Lueck</h5>
<span>Developer</span>
</div>
</div>
</div><!-- end row -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Clients section -->
<div class="section bg-gray-lighter">
<div class="container">
<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><!-- 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">
<div class="row align-items-center">
<div class="col-12 col-lg-8 col-xl-7">
<h1 class="display-4 font-family-outfit fw-normal uppercase letter-spacing-1">We Are Always Ready</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 class="col-12 col-lg-4 col-xl-5 text-lg-end">
<a class="button button-xl button-radius button-reveal-right-outline-white" href="#"><span>Get In Touch</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax 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,547 @@
<!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>

View File

@@ -0,0 +1,419 @@
<!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 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 page-progress-gradient-1"></div>
</div>
<!-- end Page Scroll Progress -->
<!-- Header -->
<div class="header transparent-light header-color-dark center 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-dark-02 position-relative section-divider-curve-bottom">
<!-- Background Video -->
<div class="bg-video">
<video playsinline autoplay muted loop>
<source src="../assets/video-bg-src.mp4" type="video/mp4">
</video>
</div>
<div class="container text-center">
<div class="row">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h6 class="d-inline-block bg-dark-05 backdrop-filter-blur border-radius px-3 py-2 line-height-140 font-small uppercase letter-spacing-1 fw-medium mb-3">Welcome to Mono!</h6>
<h1 class="display-4 font-family-outfit fw-medium">Creative thinking inspires ideas, Ideas inspire changes</h1>
<a class="button-circle button-circle-lg button-circle-white-2 button-hover-scale icon-xl mt-3 button-circle-ripple lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<i class="bi bi-play-fill"></i>
</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Services section -->
<div class="container text-center n-margin-5">
<div class="row g-4 icon-5xl">
<!-- Services box 1 -->
<div class="col-12 col-lg-4">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<i class="bi bi-camera text-gradient-1"></i>
<h4 class="font-family-outfit fw-medium mt-2">Photoshoot</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis</p>
</div>
</div>
<!-- Services box 2 -->
<div class="col-12 col-lg-4">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<i class="bi bi-globe text-gradient-1"></i>
<h4 class="font-family-outfit fw-medium mt-2">Social Marketing</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis</p>
</div>
</div>
<!-- Services box 3 -->
<div class="col-12 col-lg-4">
<div class="bg-white box-shadow border-radius p-4 p-lg-5">
<i class="bi bi-pen text-gradient-1"></i>
<h4 class="font-family-outfit fw-medium mt-2">Copywriting</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
<!-- end Services section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center" data-cues="fadeIn">
<div class="col-12 col-lg-6">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do</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>
<a class="button button-md button-font-2 button-rounded button-gradient-5 mt-3 mt-lg-4" href="#">Button</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About 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 -->
<!-- Portfolio Slider 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 fw-medium mb-3"><span class="text-gradient-1">Our Latest Works</span></h6>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit sod de</h2>
</div>
</div><!-- end row -->
</div><!-- end container -->
<!-- Swiper -->
<div class="swiper hero-portfolio-slider mt-5">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="hero-portfolio-box">
<div class="hero-portfolio-img">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="hero-portfolio-caption">
<h3><a href="#">Project Title</a></h3>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="hero-portfolio-box">
<div class="hero-portfolio-img">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="hero-portfolio-caption">
<h3><a href="#">Project Title</a></h3>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="swiper-slide">
<div class="hero-portfolio-box">
<div class="hero-portfolio-img">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="hero-portfolio-caption">
<h3><a href="#">Project Title</a></h3>
</div>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- end Swiper -->
</div>
<!-- end Portfolio Slider section -->
<!-- Prices section -->
<div class="section bg-gray-lightest">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-12 col-lg-5" data-cues="fadeIn">
<h6 class="d-inline-block bg-white box-shadow border-radius px-3 py-2 line-height-140 font-small uppercase letter-spacing-1 fw-medium mb-3"><span class="text-gradient-1">Pricing Plans</span></h6>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit sod de</h2>
</div>
<div class="col-12 col-lg-7 text-center">
<div class="row g-4" data-cues="fadeIn">
<!-- 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">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-font-2 button-gradient-5 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">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-font-2 button-gradient-5 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Prices section -->
<!-- Process section -->
<div class="section bg-gray-lightest pt-0">
<div class="container">
<div class="row g-4 g-lg-5" data-cues="fadeIn">
<!-- Process box 1 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-white box-shadow mb-3">
<h3 class="fw-medium text-gradient-1">1</h3>
</div>
<h5 class="mb-1">First Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore</p>
</div>
<!-- Process box 2 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-white box-shadow mb-3">
<h3 class="fw-medium text-gradient-1">2</h3>
</div>
<h5 class="mb-1">Second Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore</p>
</div>
<!-- Process box 3 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-white box-shadow mb-3">
<h3 class="fw-medium text-gradient-1">3</h3>
</div>
<h5 class="mb-1">Third Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore</p>
</div>
<!-- Process box 4 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-white box-shadow mb-3">
<h3 class="fw-medium text-gradient-1">4</h3>
</div>
<h5 class="mb-1">Fourth Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Process 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,410 @@
<!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 - Mobile App</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="preloader-blue theme-font-nunito" 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 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">
<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-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="section-fullscreen bg-gradient-6">
<div class="container">
<div class="position-middle">
<div class="row align-items-center">
<div class="col-12 col-lg-6 text-center text-lg-start">
<h1 class="display-4 fw-medium mb-3">Showcase your Application with Mono</h1>
<p class="font-large">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p>
<ul class="list-inline-sm mt-4 mt-lg-5">
<li>
<a class="button button-md button-rounded button-white button-shadow button-hover-float" href="#"><i class="bi bi-apple"></i>App Store</a>
</li>
<li>
<a class="button button-md button-rounded button-white button-shadow button-hover-float" href="#"><i class="bi bi-android"></i>Play Store</a>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end middle -->
<div class="position-absolute bottom-0 end-0 d-none d-xl-block">
<img class="w-75" src="../assets/images/col-2-square.jpg" alt="">
</div>
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section-lg">
<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="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">Introducing Mono!</span></h6>
<h2>Vivamus elementum semper nisi. Aenean vulputate eleifend</h2>
</div>
</div><!-- end row -->
<div class="row g-4 mt-4 mt-lg-5 icon-5xl text-center">
<!-- Feature box 1 -->
<div class="col-12 col-lg-4">
<div class="bg-color-turquoise-02 p-4 p-lg-5 border-radius-1 hover-float hover-shadow mt-lg-4">
<div class="text-dark mb-2">
<i class="bi bi-star"></i>
</div>
<h4 class="text-dark">Ultra Performance</h4>
<p class="text-dark-06">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis</p>
</div>
</div>
<!-- Feature box 2 -->
<div class="col-12 col-lg-4">
<div class="bg-color-blue-02 p-4 p-lg-5 border-radius-1 hover-float hover-shadow">
<div class="text-dark mb-2">
<i class="bi bi-columns-gap"></i>
</div>
<h4 class="text-dark">Pixel Perfect Design</h4>
<p class="text-dark-06">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis</p>
</div>
</div>
<!-- Feature box 3 -->
<div class="col-12 col-lg-4">
<div class="bg-color-purple-02 p-4 p-lg-5 border-radius-1 hover-float hover-shadow mt-lg-4">
<div class="text-dark mb-2">
<i class="bi bi-arrow-repeat"></i>
</div>
<h4 class="text-dark">Lifetime Free Updates</h4>
<p class="text-dark-06">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Play Video section -->
<div class="section-lg pt-0">
<div class="container text-center">
<a class="button-circle button-circle-xl button-circle-gradient-6 button-circle-ripple lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="fas fa-play"></i></a>
</div><!-- end container -->
</div>
<!-- end Play Video section -->
<!-- Features section -->
<div class="section-lg pt-0">
<div class="container">
<div class="row align-items-center g-4 g-lg-5">
<div class="col-12 col-lg-5">
<div class="row g-3">
<div class="col-6">
<div class="mb-3 box-shadow border-radius">
<img src="../assets/images/col-4-square.jpg" alt="">
</div>
<div class="box-shadow border-radius">
<img src="../assets/images/col-4.jpg" alt="">
</div>
</div>
<div class="col-6">
<div class="mb-3 mt-4 box-shadow border-radius">
<img src="../assets/images/col-4.jpg" alt="">
</div>
<div class="box-shadow border-radius">
<img src="../assets/images/col-4.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-7">
<div class="row g-4">
<div class="col-12 col-sm-6 col-md-12">
<div>
<h4>Feature Title</h4>
<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>
</div>
</div>
<div class="col-12 col-sm-6 col-md-12">
<div>
<h4>Feature Title</h4>
<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>
</div>
</div>
<div class="col-12 col-sm-6 col-md-12">
<div>
<h4>Feature Title</h4>
<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>
</div>
</div>
<div class="col-12 col-sm-6 col-md-12">
<div>
<h4>Feature Title</h4>
<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>
</div>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Features section -->
<!-- Clients section -->
<div class="section pt-0">
<div class="container">
<div class="text-center mb-4">
<h6 class="d-inline-block bg-gray border-radius px-3 py-2 line-height-140 font-small uppercase letter-spacing-1"><span class="text-gradient-6">Our Amazing Clients</span></h6>
</div>
<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 -->
<!-- Pricing Plans -->
<div class="bg-gray bg-fade-white-bottom">
<div class="section pt-0">
<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>Pricing Plans</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(1) -->
<div class="row g-4 mt-4 mt-lg-5 text-center">
<!-- Price box 1 -->
<div class="col-12 col-lg-4">
<div class="bg-white box-shadow border-radius p-4 mt-lg-4">
<h6 class="font-small uppercase letter-spacing-1"><span class="text-gradient-6">Basic</span></h6>
<div class="mt-3">
<h1 class="mb-0 line-height-100 fw-medium">$59.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>24/7 Support</li>
<li>Free Updates</li>
<li>Consulting</li>
<li>Market Insights</li>
</ul>
<a class="button button-md button-rounded button-gradient-6 mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 2 -->
<div class="col-12 col-lg-4">
<div class="bg-white box-shadow border-radius p-4">
<h6 class="font-small uppercase letter-spacing-1"><span class="text-gradient-6">Advanced</span></h6>
<div class="mt-3">
<h1 class="mb-0 line-height-100 fw-medium">$79.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>24/7 Support</li>
<li>Free Updates</li>
<li>Consulting</li>
<li>Market Insights</li>
</ul>
<a class="button button-md button-rounded button-gradient-6 mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 3 -->
<div class="col-12 col-lg-4">
<div class="bg-white box-shadow border-radius p-4 mt-lg-4">
<h6 class="font-small uppercase letter-spacing-1"><span class="text-gradient-6">Premium</span></h6>
<div class="mt-3">
<h1 class="mb-0 line-height-100 fw-medium">$99.99</h1>
<span>monthly</span>
</div>
<ul class="list-unstyled mt-4">
<li>24/7 Support</li>
<li>Free Updates</li>
<li>Consulting</li>
<li>Market Insights</li>
</ul>
<a class="button button-md button-rounded button-gradient-6 mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row(inner) -->
</div><!-- end container -->
</div>
</div>
<!-- end Pricing Plans -->
<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-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>

View File

@@ -0,0 +1,629 @@
<!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 - One Page 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 header-color-dark transparent-light sticky">
<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="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonial">Testimonial</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</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 id="home" class="section-fullscreen bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<div class="position-middle">
<h1 class="display-4 fw-thin">Classic One Page Template</h1>
</div>
<!-- smoothscroll button -->
<div class="position-bottom">
<a class="button-circle button-circle-lg button-circle-white-2 icon-lg" href="#about">
<i class="bi bi-arrow-down"></i>
</a>
</div>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div id="about" class="section">
<div class="container">
<div class="mb-5 text-center">
<h2 class="fw-normal display-6">We're All Professionals</h2>
</div>
<div class="row g-4 g-lg-5">
<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">
<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 -->
<!-- Image Slider -->
<div class="section pt-0">
<div class="container">
<div class="owl-carousel owl-dots-overlay owl-nav-overlap" data-owl-items="1" data-owl-nav="true">
<!-- Slider Image 1 -->
<div>
<img src="../assets/images/col-1.jpg" alt="">
</div>
<!-- Slider Image 2 -->
<div>
<img src="../assets/images/col-1.jpg" alt="">
</div>
<!-- Slider Image 3 -->
<div>
<img src="../assets/images/col-1.jpg" alt="">
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Image Slider -->
<!-- Facts section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<div class="row g-4">
<!-- Counter box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-thin display-5 counter">100</h1>
<h5 class="fw-light">Fact One</h5>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- Counter box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-thin display-5 counter">100</h1>
<h5 class="fw-light">Fact Two</h5>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- Counter box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-thin display-5 counter">100</h1>
<h5 class="fw-light">Fact Three</h5>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<!-- Counter box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-thin display-5 counter">100</h1>
<h5 class="fw-light">Fact Four</h5>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts section -->
<!-- Portfolio section -->
<div id="portfolio" class="section">
<div class="container">
<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5 text-center">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="row portfolio-grid g-2 hover-style-1">
<!-- Portfolio box 1 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-1">
<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>
<h4 class="fw-medium">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-2">
<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>
<h4 class="fw-medium">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-3">
<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>
<h4 class="fw-medium">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-1">
<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>
<h4 class="fw-medium">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-2">
<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>
<h4 class="fw-medium">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-3">
<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>
<h4 class="fw-medium">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end row/portfolio-grid-->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Testimonial section -->
<div id="testimonial" class="section border-top">
<div class="container">
<div class="owl-carousel" data-owl-items="1" data-owl-nav="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">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">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">Johnny Doe</h5>
<span>CEO - Company</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial section -->
<!-- Play video section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-6">
<h1 class="fw-thin display-5 line-height-150 m-0">Youtube &amp; vimeo lightbox video player</h1>
</div>
<div class="col-12 col-md-6 text-md-end">
<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple mt-3 icon-xl lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="bi bi-play"></i></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Play video section -->
<!-- Services section -->
<div id="services" 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 We Do</h2>
</div>
</div>
</div>
<div class="row icon-5xl g-4">
<!-- 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 -->
<!-- Blog section -->
<div id="blog" class="section border-top">
<div class="container">
<div class="mb-5">
<div class="row align-items-end">
<div class="col-12 col-sm-6">
<h2 class="fw-normal display-6">Latest Posts</h2>
</div>
<div class="col-12 col-sm-6 text-sm-end">
<a class="button-text-1" href="#">Read All Posts</a>
</div>
</div>
</div>
<div class="owl-carousel" data-owl-nav="false" 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-autoPlay="true">
<!-- Blog Slider Item 1 -->
<div>
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top bg-dark">
<span class="font-family-poppins font-small fw-normal uppercase m-0 text-white">Travel</span>
</div>
</a>
</div>
<div class="p-3">
<h4 class="fw-normal mb-1"><a href="#">Blog Post Title</a></h4>
<span>Apr 29, 2019</span>
</div>
</div>
<!-- Blog Slider Item 2 -->
<div>
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top bg-dark">
<span class="font-family-poppins font-small fw-normal uppercase m-0 text-white">Tips &amp; Tricks</span>
</div>
</a>
</div>
<div class="p-3">
<h4 class="fw-normal mb-1"><a href="#">Blog Post Title</a></h4>
<span>Apr 28, 2019</span>
</div>
</div>
<!-- Blog Slider Item 3 -->
<div>
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top bg-dark">
<span class="font-family-poppins font-small fw-normal uppercase m-0 text-white">Lifestyle</span>
</div>
</a>
</div>
<div class="p-3">
<h4 class="fw-normal mb-1"><a href="#">Blog Post Title</a></h4>
<span>Apr 27, 2019</span>
</div>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Blog section -->
<!-- Clients section -->
<div class="section bg-dark-lightest">
<div class="container">
<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-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><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Contact section -->
<div id="contact" 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="fw-normal display-6">Get In Touch</h2>
</div>
</div>
</div>
<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 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><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Contact section -->
<!-- Google Maps -->
<div class="section pt-0">
<div class="container">
<div id="map1" class="gmap gmap-md" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div><!-- end container -->
</div>
<!-- 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>
<!-- 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,520 @@
<!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 - One Page 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 transparent-light sticky">
<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="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#facts">Facts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</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 id="home" class="section-fullscreen bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<div class="position-middle">
<h1 class="display-3 fw-bold">
<span class="typer text-white" id="typer1" data-words="Less is more, own less. do more" data-delay="60" data-deleteDelay="1200"></span><span class="cursor" data-owner="typer1"></span>
</h1>
</div>
<!-- smoothscroll button -->
<div class="position-bottom">
<a class="icon-2xl" href="#about">
<i class="bi bi-arrow-down"></i>
</a>
</div>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div id="about" class="section bg-gray-lighter">
<div class="container">
<div class="row g-5">
<div class="col-12 col-lg-6">
<h2 class="fw-light mb-3">We believe that teamwork divides the tasks and multiplies the success</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>
</div>
<div class="col-12 col-lg-6">
<!-- 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>
<!-- Progress bar box 4 -->
<div class="progress-box mt-4">
<h6 class="fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="90"></div>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Portfolio section -->
<div id="portfolio" 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">
<h6 class="font-small fw-medium uppercase">Portfolio</h6>
<h2 class="fw-semi-bold display-6">Our Latest Works</h2>
</div>
</div>
</div>
<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5 text-center">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-2 spacing-3">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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>
<h3 class="fw-light">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<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>
<h3 class="fw-light">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<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>
<h3 class="fw-light">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<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>
<h3 class="fw-light">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item category-2">
<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>
<h3 class="fw-light">Project Title</h3>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Facts section -->
<div id="facts" class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="fw-light counter">324</h1>
<h6 class="font-small fw-normal uppercase mt-3">Hours of Meeting</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="fw-light counter">81</h1>
<h6 class="font-small fw-normal uppercase mt-3">Projects Done</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="fw-light counter">98</h1>
<h6 class="font-small fw-normal uppercase mt-3">Slices of Pizza</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="fw-light counter">500</h1>
<h6 class="font-small fw-normal uppercase mt-3">Satisfied Clients</h6>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts section -->
<!-- Clients section -->
<div class="n-margin-5">
<div class="container">
<div class="bg-dark-lighter p-4 p-lg-5 border-radius-1">
<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-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 -->
</div>
<!-- end Clients section -->
<!-- Services section -->
<div id="services" 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">
<h6 class="font-small fw-medium uppercase">Services</h6>
<h2 class="fw-semi-bold display-6">What We Do</h2>
</div>
</div>
</div>
<div class="row text-center icon-5xl">
<!-- Icon text box 1 -->
<div class="col-12 col-md-4">
<i class="bi bi-star text-dark"></i>
<h4 class="fw-normal mt-2">Social Marketing</h4>
<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-brush text-dark"></i>
<h4 class="fw-normal mt-2">Graphic Design</h4>
<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>
<h4 class="fw-normal mt-2">Photoshoot</h4>
<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 -->
<!-- Blog section -->
<div id="blog" class="section bg-gray-lighter">
<div class="container">
<div class="mb-5">
<div class="row align-items-end">
<div class="col-12 col-sm-6">
<h6 class="font-small fw-medium uppercase">Newsfeed</h6>
<h2 class="fw-semi-bold display-6 mb-0">Latest Blog Posts</h2>
</div>
<div class="col-12 col-sm-6 text-sm-end">
<a class="button-text-3" href="#">Read All Posts</a>
</div>
</div>
</div>
<div class="owl-carousel" data-owl-nav="false" data-owl-dots="false" 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-autoPlay="true">
<!-- Blog Slider Item 1 -->
<div>
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top bg-dark">
<span class="font-family-poppins font-small fw-normal uppercase m-0 text-white">Travel</span>
</div>
</a>
</div>
<div class="p-3">
<h4 class="fw-normal mb-1"><a href="#">Blog Post Title</a></h4>
<span>Apr 29, 2019</span>
</div>
</div>
<!-- Blog Slider Item 2 -->
<div>
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top bg-dark">
<span class="font-family-poppins font-small fw-normal uppercase m-0 text-white">Tips &amp; Tricks</span>
</div>
</a>
</div>
<div class="p-3">
<h4 class="fw-normal mb-1"><a href="#">Blog Post Title</a></h4>
<span>Apr 28, 2019</span>
</div>
</div>
<!-- Blog Slider Item 3 -->
<div>
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top bg-dark">
<span class="font-family-poppins font-small fw-normal uppercase m-0 text-white">Lifestyle</span>
</div>
</a>
</div>
<div class="p-3">
<h4 class="fw-normal mb-1"><a href="#">Blog Post Title</a></h4>
<span>Apr 27, 2019</span>
</div>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Blog section -->
<!-- Contact section -->
<div id="contact" 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">
<h6 class="font-small fw-normal uppercase">Contact</h6>
<h2>Get In Touch</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>
</div>
</div>
</div>
<div class="row icon-3xl text-center">
<!-- Icon text 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>
<!-- Icon text box 2 -->
<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>skype.username</p>
</div>
<!-- Icon text box 3 -->
<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>
<!-- Icon text 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 section -->
<!-- Google Maps -->
<div class="section p-0">
<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 -->
</div>
<!-- end Google Maps -->
<footer>
<div class="section-sm 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="#">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,527 @@
<!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 - One Page Personal</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-dark">
<!-- Header -->
<div class="header center header-color-dark transparent-light sticky">
<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="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</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 id="home" class="section-fullscreen bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<div class="position-middle">
<img class="img-mask-avatar-3xl mb-4 box-shadow" src="../assets/images/img-mask-avatar-3xl.jpg" alt="">
<h1 class="m-0">Amanda Layton</h1>
<ul class="list-inline-dash">
<li>Web Developer</li>
<li>Photographer</li>
</ul>
</div>
<!-- smoothscroll button -->
<div class="position-bottom">
<a class="icon-xl" href="#about">
<i class="bi bi-arrow-down"></i>
</a>
</div>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div id="about" 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="fw-normal">About Me</h2>
</div>
</div>
</div>
<div class="row g-4 g-lg-5">
<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">
<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 -->
<!-- Facts/Counter -->
<div class="row g-4 mt-5 text-center">
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light counter">132</h2>
<span>Photoshoots</span>
</div>
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light counter">72</h2>
<span>Hours of Meeting</span>
</div>
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light counter">120</h2>
<span>Hours of Cycling</span>
</div>
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light counter">89</h2>
<span>Projects Done</span>
</div>
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light counter">979</h2>
<span>Happy Clients</span>
</div>
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light counter">92</h2>
<span>Meetups</span>
</div>
</div><!-- end row(2) -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Portfolio section -->
<div id="portfolio" class="section bg-gray-lighter">
<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="fw-normal">Portfolio</h2>
</div>
</div>
</div>
<!-- Portfolio filter -->
<div class="filter filter-style-3 text-center mb-5">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-1">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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 category-2">
<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 category-3">
<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 category-1">
<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 category-2">
<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 category-3">
<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><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Resume section -->
<div id="resume" 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="fw-normal">Resume</h2>
</div>
</div>
</div>
<div class="timeline-wrapper">
<!-- Timeline box 1 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">2017 - Present</h6>
</div>
<div class="timeline-content">
<h6 class="fw-medium">Author @ Envato</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<!-- Timeline box 2 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">2016 - 2017</h6>
</div>
<div class="timeline-content">
<h6 class="fw-medium">Back-End Developer @ CodeCanyon</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<!-- Timeline box 3 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">2014 - 2016</h6>
</div>
<div class="timeline-content">
<h6 class="fw-medium">Web Designer @ ThemeForest</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<!-- Timeline box 4 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">2013 - 2014</h6>
</div>
<div class="timeline-content">
<h6 class="fw-medium">Photographer @ PhotoDune</h6>
<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 Resume section -->
<!-- Clients section -->
<div class="section bg-dark">
<div class="container">
<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><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Services section -->
<div id="services" class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-04">
<div class="container">
<div class="row text-center icon-5xl">
<!-- Services box 1 -->
<div class="col-12 col-lg-4">
<div class="bg-black border-radius p-5 hover-shadow hover-float">
<i class="bi bi-camera text-white mb-4"></i>
<h5 class="fw-normal">Photoshoot</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Services box 2 -->
<div class="col-12 col-lg-4">
<div class="bg-black border-radius p-5 hover-shadow hover-float">
<i class="bi bi-globe text-white mb-4"></i>
<h5 class="fw-normal">Web Development</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
<!-- Services box 3 -->
<div class="col-12 col-lg-4">
<div class="bg-black border-radius p-5 hover-shadow hover-float">
<i class="bi bi-star text-white mb-4"></i>
<h5 class="fw-normal">Social Marketing</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>
<!-- end Services section -->
<!-- Contact section -->
<div id="contact" 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="fw-normal">Get In Touch</h2>
</div>
</div>
</div>
<div class="row g-4">
<!-- Contact Info -->
<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>
<!-- Contact Form -->
<div class="col-12 col-md-8 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-radius 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><!-- end row -->
<!-- Google Maps -->
<div class="mt-5">
<div id="map1" class="gmap gmap-md" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div>
</div><!-- end container -->
</div>
<!-- end Contact 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="#">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,272 @@
<!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 - Photographer 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 -->
<!-- Hero section -->
<div class="owl-carousel owl-nav-overlay owl-dots-overlay" data-owl-nav="true" data-owl-items="1">
<!-- Slider Item 1 -->
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<div class="position-middle">
<h1>Gallery Image Title</h1>
<a class="button button-xl button-outline-white mt-3" href="#">View Gallery</a>
</div>
</div>
</div>
</div>
<!-- Slider Item 2 -->
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<div class="position-middle">
<h1>Gallery Image Title</h1>
<a class="button button-xl button-outline-white mt-3" href="#">View Gallery</a>
</div>
</div>
</div>
</div>
<!-- Slider Item 3 -->
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<div class="position-middle">
<h1>Gallery Image Title</h1>
<a class="button button-xl button-outline-white mt-3" href="#">View Gallery</a>
</div>
</div>
</div>
</div>
</div><!-- end owl-carousel -->
<!-- end Hero section -->
<!-- Gallery section -->
<div class="section">
<div class="container">
<div class="row g-3">
<!-- 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
<div class="content center bg-white-09">
<span class="font-family-poppins font-small fw-normal uppercase text-dark-09">Abstract</span>
</div>
</a>
</div>
</div>
<!-- 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
<div class="content center bg-white-09">
<span class="font-family-poppins font-small fw-normal uppercase text-dark-09">Fashion</span>
</div>
</a>
</div>
</div>
<!-- 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
<div class="content center bg-white-09">
<span class="font-family-poppins font-small fw-normal uppercase text-dark-09">Nature</span>
</div>
</a>
</div>
</div>
<!-- 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
<div class="content center bg-white-09">
<span class="font-family-poppins font-small fw-normal uppercase text-dark-09">Portrait</span>
</div>
</a>
</div>
</div>
<!-- 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
<div class="content center bg-white-09">
<span class="font-family-poppins font-small fw-normal uppercase text-dark-09">Painting</span>
</div>
</a>
</div>
</div>
<!-- 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
<div class="content center bg-white-09">
<span class="font-family-poppins font-small fw-normal uppercase text-dark-09">Travel</span>
</div>
</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Gallery section -->
<!-- About section -->
<div class="section pt-0">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-4">
<h4 class="fw-light">Subheading</h4>
<h3>Bold Heading</h3>
</div>
<div class="col-12 col-md-4">
<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-md-4">
<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.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<footer>
<div class="section bg-dark">
<div class="container text-center">
<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-instagram" href="#"><i class="bi bi-instagram"></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-dribbble" href="#"><i class="bi bi-dribbble"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-social-linkedin" href="#"><i class="bi bi-linkedin"></i></a></li>
</ul>
</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,205 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Mono - Photographer 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-dark">
<!-- Header -->
<div class="header header-lg transparent-light">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-fullscreen bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<div class="position-middle">
<h1 class="display-4 fw-thin">Creative Photographer</h1>
</div>
<!-- smoothscroll button -->
<div class="position-bottom">
<a class="icon-xl" href="#about">
<i class="bi bi-arrow-down"></i>
</a>
</div>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div id="about" class="section-lg">
<div class="container">
<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">
<img class="img-mask-avatar-lg mb-4" src="../assets/images/img-avatar-lg.jpg">
<h5>Johnny Doe</h5>
<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>
<a class="button button-lg button-backdrop-dark mt-4" href="#">More About Me</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Gallery section -->
<div class="container-fluid px-3 px-lg-4">
<div class="row g-3 g-lg-4">
<!-- 1 -->
<div class="col-12 col-md-6">
<div class="hoverbox-6 border-radius">
<a href="#">
<img src="../assets/images/background.jpg" alt="">
<div class="content center">
<h6 class="font-small fw-normal uppercase m-0">Art, Painting</h6>
</div>
</a>
</div>
</div>
<!-- 2 -->
<div class="col-12 col-md-6">
<div class="hoverbox-6 border-radius">
<a href="#">
<img src="../assets/images/background.jpg" alt="">
<div class="content center">
<h6 class="font-small fw-normal uppercase m-0">Fashion</h6>
</div>
</a>
</div>
</div>
<!-- 3 -->
<div class="col-12 col-md-6">
<div class="hoverbox-6 border-radius">
<a href="#">
<img src="../assets/images/background.jpg" alt="">
<div class="content center">
<h6 class="font-small fw-normal uppercase m-0">Nature</h6>
</div>
</a>
</div>
</div>
<!-- 4 -->
<div class="col-12 col-md-6">
<div class="hoverbox-6 border-radius">
<a href="#">
<img src="../assets/images/background.jpg" alt="">
<div class="content center">
<h6 class="font-small fw-normal uppercase m-0">City at Night</h6>
</div>
</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container-fluid -->
<!-- end Gallery section -->
<div class="section-sm text-center">
<div class="container-fluid">
<a class="button-text-1" href="#">View All Works</a>
</div><!-- end container-fluid -->
</div>
<footer>
<div class="section 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-instagram" href="#"><i class="bi bi-instagram"></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-dribbble" href="#"><i class="bi bi-dribbble"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-social-linkedin" href="#"><i class="bi bi-linkedin"></i></a></li>
</ul>
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</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,239 @@
<!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 - Photographer 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 header-xl 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">
<a class="button button-sm button-rounded button-gradient-1 align-middle" href="#">Button</a>
</div>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<!-- Gallery section -->
<div class="container">
<div class="row gallery-wrapper g-4 border-radius">
<!-- Gallery image box 1 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 2 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 3 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 3">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 4 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 4">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 5 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 5">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 6 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 6">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 7 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 7">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 8 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 8">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 9 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 9">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 10 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 7">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 11 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 8">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 12 -->
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg" data-gallery-title="Gallery Image 9">
<img src="../assets/images/col-4.jpg" alt="">
</a>
</div>
</div>
</div><!-- end row/gallery-wrapper -->
</div><!-- end container -->
<!-- end Gallery section -->
<footer>
<div class="section-sm">
<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,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 - Photographer 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 header-lg transparent-dark">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<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-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<div class="section-xl">
<div class="container">
<h2 class="fw-light">
<span class="typer" id="typer1" data-words="Hello There!, I'm an experienced Photographer" data-delay="60" data-deleteDelay="1000"></span><span class="cursor" data-owner="typer1"></span>
</h2>
<h1>I'm Alexander Warren</h1>
</div><!-- end container -->
</div>
<!-- Gallery section -->
<div class="container-fluid p-4">
<div class="row gallery-wrapper g-4">
<!-- Gallery image box 1 -->
<div class="col-12 col-sm-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 2 -->
<div class="col-12 col-sm-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 3 -->
<div class="col-12 col-sm-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 3">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 4 -->
<div class="col-12 col-sm-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 4">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 5 -->
<div class="col-12 col-sm-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 5">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 6 -->
<div class="col-12 col-sm-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 6">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 7 -->
<div class="col-12 col-sm-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 7">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 8 -->
<div class="col-12 col-sm-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 8">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery image box 9 -->
<div class="col-12 col-sm-6 col-lg-4 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 9">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
</div><!-- end row/gallery-wrapper -->
</div><!-- end container-fluid -->
<!-- end Gallery 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="#">Clients</a></li>
<li><a href="#">Contact</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-instagram" href="#"><i class="bi bi-instagram"></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-dribbble" href="#"><i class="bi bi-dribbble"></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,200 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Mono - Photographer 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 header-lg transparent-dark">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-xl">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 offset-md-1 text-center">
<h1 class="display-2">Mono Photography</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Gallery Images section -->
<div class="section-lg pt-0">
<div class="container">
<div class="masonry column-3 gallery-wrapper">
<!-- Gallery item 1 -->
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg">
<img src="../assets/images/col-2-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery item 2 -->
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery item 3 -->
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-tall.jpg">
<img src="../assets/images/col-2-tall.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery item 4 -->
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-tall.jpg">
<img src="../assets/images/col-2-tall.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery item 5 -->
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2-square.jpg">
<img src="../assets/images/col-2-square.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery item 6 -->
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-2.jpg">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Gallery Images 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,333 @@
<!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 - Portfolio 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-03 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">
<h1 class="fw-light">Portfolio Clean</h1>
<p class="text-white-08">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>
<!-- Portfolio filter -->
<div class="container text-center">
<div class="bg-white p-3 px-4 py-lg-4 px-lg-5 border-radius-1 box-shadow n-margin-2 d-inline-block">
<div class="d-inline-block filter filter-style-3 text-center">
<ul>
<li data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
</div>
</div>
<!-- end Portfolio filter -->
<!-- Portfolio section -->
<div class="section">
<div class="container">
<div class="row portfolio-grid g-2 border-radius">
<!-- Portfolio box 1 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-1">
<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 2 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-2">
<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="col-12 col-md-6 col-lg-4 portfolio-item category-3">
<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 4 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-1">
<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 5 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item category-2">
<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="col-12 col-md-6 col-lg-4 portfolio-item category-3">
<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 row/portfolio-grid -->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- About -->
<div class="section pt-0">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-4">
<h4 class="fw-light">Subheading</h4>
<h3>Bold Heading</h3>
</div>
<div class="col-12 col-md-4">
<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-md-4">
<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><!-- end container -->
</div>
<!-- end About -->
<!-- Testimonial -->
<div class="section border-top">
<div class="container">
<div class="owl-carousel" data-owl-items="1" data-owl-dots="false" data-owl-nav="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="m-0 fw-normal">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="m-0 fw-normal">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="m-0 fw-normal">Johnny Doe</h5>
<span>CEO - Company</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial -->
<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="#">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">
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</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,223 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Mono - Portfolio 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 header-lg transparent-dark">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black">
<div class="fm-wrapper text-center">
<div class="position-top">
<h3>mono</h3>
</div>
<div class="position-middle">
<ul class="list-inline-lg">
<li>
<h2><a class="text-link-3" href="#">Home</a></h2>
</li>
<li>
<h2><a class="text-link-3" href="#">About</a></h2>
</li>
<li>
<h2><a class="text-link-3" href="#">Portfolio</a></h2>
</li>
<li>
<h2><a class="text-link-3" href="#">Blog</a></h2>
</li>
<li>
<h2><a class="text-link-3" href="#">Shop</a></h2>
</li>
</ul>
</div>
<div class="position-bottom">
<ul class="list-inline-sm icon-sm">
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-pinterest"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
<p class="mt-3">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<div class="section-xl">
<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-3 fw-bold mb-3">
<span class="typer" id="typer1" data-words="Hi There!,I'm Leo" data-delay="60" data-deleteDelay="1200"></span><span class="cursor" data-owner="typer1"></span>
</h1>
<h3 class="fw-light m-0 text-dark-06">Designers, photographers and all creatives this template is built for you.</h3>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- Portfolio section -->
<div class="container-fluid px-3">
<!-- Portfolio filter -->
<!-- <div class="filter filter-style-2 mb-5 text-center">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div> -->
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-2 hover-style-1 border-radius">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1-square.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h5>Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h5>Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1-square.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h5>Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1-square.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h5>Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h5>Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h5>Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry-->
</div><!-- end container-fluid -->
<!-- end Portfolio section -->
<footer>
<div class="section">
<div class="container text-center">
<ul class="list-inline fw-normal mb-2">
<li><a class="text-link-3" href="#">Facebook</a></li>
<li><a class="text-link-3" href="#">Twitter</a></li>
<li><a class="text-link-3" href="#">Behance</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,297 @@
<!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 - Portfolio 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 border-bottom">
<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 dropdown-color-dark">
<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">
<a class="button button-sm button-rounded button-gradient-5 align-middle" href="#">Button</a>
</div>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<div class="section-lg">
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-11 col-md-10 col-lg-9 col-xl-8">
<h1 class="display-5 fw-normal"><span class="text-gradient-5">we keep it simple.</span></h1>
<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. Nulla consequat massa quis enim.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- Scroll to top button -->
<div class="scrolltotop icon-lg">
<a class="button-circle button-circle-md button-circle-gradient-5" href="#"><i class="bi bi-arrow-up-short"></i></a>
</div>
<!-- end Scroll to top button -->
<!-- Portfolio section -->
<div class="section-lg pt-0">
<div class="container">
<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-2 hover-style-3 border-radius"><!-- column-(1/2/3/4/5/6) -->
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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">
<h5 class="fw-medium">Project Title</h5>
</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-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<!-- Portfolio Hover Title -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h5 class="fw-medium">Project Title</h5>
</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-3">
<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">
<h5 class="fw-medium">Project Title</h5>
</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-1">
<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">
<h5 class="fw-medium">Project Title</h5>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
<!-- end Portfolio Hover Title -->
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<!-- Portfolio Hover Title -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h5 class="fw-medium">Project Title</h5>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
<!-- end Portfolio Hover Title -->
</div>
</div>
<!-- Portfolio box 6 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<!-- Portfolio Hover Title -->
<div class="portfolio-title">
<div class="portfolio-title-item">
<h5 class="fw-medium">Project Title</h5>
</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 Portfolio 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">
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</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,243 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Mono - Portfolio 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 border-bottom">
<div class="container">
<!-- Logo -->
<div class="header-logo">
<h3 class="font-family-outfit 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<ul class="list-unstyled">
<li>
<h1 class="display-5 font-family-outfit fw-medium"><a class="text-link-6" href="#">Home</a></h1>
</li>
<li>
<h1 class="display-5 font-family-outfit fw-medium"><a class="text-link-6" href="#">About</a></h1>
</li>
<li>
<h1 class="display-5 font-family-outfit fw-medium"><a class="text-link-6" href="#">Portfolio</a></h1>
</li>
<li>
<h1 class="display-5 font-family-outfit fw-medium"><a class="text-link-6" href="#">Blog</a></h1>
</li>
<li>
<h1 class="display-5 font-family-outfit fw-medium"><a class="text-link-6" href="#">Shop</a></h1>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<div class="section-lg">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="row g-4">
<div class="col-12 col-xl-6">
<h1 class="display-1 font-family-outfit fw-medium mb-0">We Design Products &amp; Brands</h1>
</div>
<div class="col-12 col-xl-6">
<h4 class="fw-light text-dark-05 line-height-150 mb-0">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. Duis aute irure dolor in reprehenderit in voluptate</h4>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- Portfolio section -->
<div class="section-lg pt-0">
<div class="container">
<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5 text-center">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-2 spacing-3 hover-style-3 border-radius">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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="font-family-outfit 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-2">
<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="font-family-outfit 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-3">
<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="font-family-outfit 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-1">
<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="font-family-outfit fw-medium">Project Title</h4>
</div>
<div class="portfolio-title-item">
<span>Category</span>
</div>
</div>
<!-- end Portfolio Hover Title -->
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item category-2">
<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="font-family-outfit 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 Portfolio 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="#">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-md button-circle-white-2" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="button-circle button-circle-md button-circle-white-2" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="button-circle button-circle-md button-circle-white-2" href="#"><i class="bi bi-pinterest"></i></a></li>
<li><a class="button-circle button-circle-md button-circle-white-2" 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 - Portfolio 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 transparent-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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black">
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-2" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<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-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- About section -->
<div class="section-xl">
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-10 offset-sm-1 col-md-8 offset-md-2 text-center">
<h1 class="fw-light">Hello, I'm Jennifer Combs</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<img class="img-mask-avatar-xl mt-4" src="../assets/images/img-mask-avatar-2xl.jpg" alt="" data-rjs="2">
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Portfolio section -->
<div class="container-fluid p-0">
<div class="row portfolio-masonry g-0">
<!-- Portfolio box 1 -->
<div class="col-12 col-md-6 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/background.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="p-3">
<h4 class="fw-normal mb-2">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="col-12 col-md-6 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/background.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="p-3">
<h4 class="fw-normal mb-2">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="col-12 col-md-6 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/background.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="p-3">
<h4 class="fw-normal mb-2">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="col-12 col-md-6 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/background.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="p-3">
<h4 class="fw-normal mb-2">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="col-12 col-md-6 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/background.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="p-3">
<h4 class="fw-normal mb-2">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="col-12 col-md-6 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/background.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div class="p-3">
<h4 class="fw-normal mb-2">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end row/portfolio-masonry -->
</div><!-- end container-fluid -->
<!-- end Portfolio 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,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 - Portfolio 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 header-lg transparent-dark">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Services</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Clients</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>+987 654 321 01</li>
<li>contact@example.com</li>
<li>121 King St, Melbourne VIC 3000</li>
</ul>
<ul class="list-inline-sm mt-3">
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- About section -->
<div class="section-xl bg-image bg-fade-white-top" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-07 backdrop-filter-blur">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-lg-10 offset-lg-1 col-xl-8 offset-xl-2">
<h1 class="display-1 fw-semi-bold stroke-text">Hello, I'm Leo</h1>
<p class="font-large mt-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<a class="button button-xl button-rounded button-dark mt-4" href="#contact">Get In Touch</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-white-* -->
</div>
<!-- end About section -->
<!-- Portfolio section -->
<div class="container">
<div class="portfolio-masonry column-2 spacing-4 border-radius">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1-square.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1-square.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1-square.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
<!-- end Portfolio section -->
<!-- Contact section -->
<div id="contact" class="section-lg">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1">
<div class="row icon-4xl text-md-center">
<!-- Icon text box 1 -->
<div class="col-12 col-md-4">
<i class="bi bi-envelope text-dark mb-3"></i>
<h6 class="fw-normal m-0">Email:</h6>
<p>contact@email.com</p>
</div>
<!-- Icon text box 2 -->
<div class="col-12 col-md-4">
<i class="bi bi-telephone text-dark mb-3"></i>
<h6 class="fw-normal m-0">Phone:</h6>
<p>+(987) 654 321 01</p>
</div>
<!-- Icon text box 3 -->
<div class="col-12 col-md-4">
<i class="bi bi-skype text-dark mb-3"></i>
<h6 class="fw-normal m-0">Skype:</h6>
<p>contact.skype</p>
</div>
</div><!-- end row -->
<div class="contact-form mt-5 text-md-end">
<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-radius 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 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,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 - Product Landing</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 class="theme-font-nunito" data-preloader="1">
<!-- Header -->
<div class="header 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-top">
<ul class="list-unstyled uppercase">
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">Home</a></h2>
</li>
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">About</a></h2>
</li>
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">Portfolio</a></h2>
</li>
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">Blog</a></h2>
</li>
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">Shop</a></h2>
</li>
</ul>
</div>
<div class="position-bottom">
<ul class="list-inline-sm">
<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>
<li><a class="button-circle button-circle-sm button-circle-white-2" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
<p class="mt-3">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-01 section-divider-wavesOpacity-bottom">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-8">
<div class="mt-5 mb-5">
<h1 class="display-2 fw-bold text-white">Wireless Headphone</h1>
<ul class="list-inline-dash">
<li class="text-white-09 fw-normal">Modern Design</li><li class="text-white-09 fw-normal">5 Color Options</li><li class="text-white-09 fw-normal">Free Shipping</li>
</ul>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
<img src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<h1 class="fw-normal">Simplicity is the key</h1>
<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>
<a class="button button-lg button-radius button-gradient-2 mt-4" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Features section -->
<div class="section pt-0">
<div class="container">
<div class="row g-4 icon-5xl text-center">
<div class="col-12 col-lg-4">
<div class="border p-4 border-radius hover-float hover-shadow">
<i class="bi bi-volume-mute text-dark-09 mt-3"></i>
<h4 class="fw-medium mt-2">Noise Cancelling</h4>
<p class="mb-3">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 p-4 border-radius hover-float hover-shadow">
<i class="bi bi-headphones text-dark-09 mt-3"></i>
<h4 class="fw-medium mt-2">Wireless</h4>
<p class="mb-3">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 p-4 border-radius hover-float hover-shadow">
<i class="bi bi-clock text-dark-09 mt-3"></i>
<h4 class="fw-medium mt-2">Long Battery Life</h4>
<p class="mb-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Features section -->
<!-- Slider 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">
<h2 class="fw-normal display-6">Color Options</h2>
</div>
</div>
</div>
<div class="owl-carousel" data-owl-nav="true" data-owl-margin="30" data-owl-xs="1" data-owl-sm="1" data-owl-md="1" data-owl-lg="2" data-owl-xl="2">
<div>
<img src="../assets/images/col-2.jpg" alt="">
</div>
<div>
<img src="../assets/images/col-2.jpg" alt="">
</div>
<div>
<img src="../assets/images/col-2.jpg" alt="">
</div>
<div>
<img src="../assets/images/col-2.jpg" alt="">
</div>
<div>
<img src="../assets/images/col-2.jpg" alt="">
</div>
</div>
</div><!-- end container -->
</div>
<!-- end Slider section -->
<!-- Parallax section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-01">
<div class="container text-center">
<a class="button-circle button-circle-xl button-circle-gradient-2 button-circle-ripple lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<i class="fas fa-play"></i>
</a>
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Prices section -->
<div class="section bg-gray-lightest">
<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="fw-normal display-6">Incredible Prices</h2>
</div>
</div>
</div>
<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 px-4 py-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Regular</h6>
<div class="mt-3 mt-lg-4">
<h1 class="display-5 line-height-100 fw-normal mb-0">$54</h1>
</div>
<ul class="list-unstyled mt-3">
<li>5 Color Options</li>
<li>Titanium</li>
<li>Noise Cancelling</li>
<li>3M Wireless</li>
</ul>
<a class="button button-md button-rounded button-gradient-2 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 px-4 py-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Premium</h6>
<div class="mt-3 mt-lg-4">
<h1 class="display-5 line-height-100 fw-normal mb-0">$74</h1>
</div>
<ul class="list-unstyled mt-3">
<li>5 Color Options</li>
<li>Titanium</li>
<li>Noise Cancelling</li>
<li>3M Wireless</li>
</ul>
<a class="button button-md button-rounded button-gradient-2 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 px-4 py-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Custom</h6>
<div class="mt-3 mt-lg-4">
<h1 class="display-5 line-height-100 fw-normal mb-0">$94</h1>
</div>
<ul class="list-unstyled mt-3">
<li>5 Color Options</li>
<li>Titanium</li>
<li>Noise Cancelling</li>
<li>3M Wireless</li>
</ul>
<a class="button button-md button-rounded button-gradient-2 mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Prices section -->
<footer>
<div class="section-sm 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="#">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-instagram" href="#"><i class="bi bi-instagram"></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-dribbble" href="#"><i class="bi bi-dribbble"></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,480 @@
<!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 - Restaurant</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-dark">
<!-- Header -->
<div class="header center header-color-black transparent-light sticky">
<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="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu">Our Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reservation">Reservation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</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 id="home" class="section-fullscreen bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<div class="position-middle">
<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 font-family-playfair fw-normal m-0">Mono Restaurant & Lounge</h1>
</div>
</div><!-- end row -->
</div>
<!-- smoothscroll button -->
<div class="position-bottom">
<a class="icon-xl" href="#about">
<i class="bi bi-arrow-down"></i>
</a>
</div>
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div id="about" class="section">
<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">
<p class="font-family-poppins font-small uppercase text-dark-04">Since 1998</p>
<h1 class="font-family-playfair fw-normal display-5">Our Story</h1>
<p class="fw-light">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><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Gallery section -->
<div class="section pt-0">
<div class="container">
<div class="masonry column-2 spacing-2 gallery-wrapper">
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
<img src="../assets/images/col-1-square.jpg" alt="">
</a>
</div>
</div>
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
<img src="../assets/images/col-1-square.jpg" alt="">
</a>
</div>
</div>
<div class="masonry-item gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
</div>
</div><!-- end masonry -->
</div><!-- end container -->
</div>
<!-- end Gallery section -->
<!-- Testimonial section -->
<div class="section pt-0">
<div class="container">
<div class="owl-carousel icon-3xl" data-owl-items="1" data-owl-dots="false" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<i class="bi bi-chat-square-quote text-dark mb-4"></i>
<p class="fw-light mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="font-family-playfair fw-normal line-height-120">Emiley Haley</h4>
<span class="font-family-poppins font-small fw-normal uppercase text-dark-04">Cook</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<i class="bi bi-chat-square-quote text-dark mb-4"></i>
<p class="fw-light mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="font-family-playfair fw-normal line-height-120">Emiley Haley</h4>
<span class="font-family-poppins font-small fw-normal uppercase text-dark-04">Cook</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<i class="bi bi-chat-square-quote text-dark mb-4"></i>
<p class="fw-light mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="font-family-playfair fw-normal line-height-120">Emiley Haley</h4>
<span class="font-family-poppins font-small fw-normal uppercase text-dark-04">Cook</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Testimonial section -->
<!-- Menu section -->
<div id="menu" class="section bg-dark">
<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="font-family-playfair fw-normal display-5">Our Menu</h1>
</div>
</div><!-- end row -->
<!-- Tab Contents -->
<div class="tab-content mt-5">
<!-- Main Courses -->
<div class="tab-pane fade show active" id="main-courses">
<div class="row g-5">
<div class="col-12 col-lg-6">
<!-- Menu Item -->
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Slow Roasted Whole Turkey</h5>
<p class="fw-light">24-hour herb brined turkey, slowly roasted with citrus, rosemary and thyme</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$59</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Carved Half Turkey</h5>
<p class="fw-light">24-hour herb brined turkey, slowly roasted with citrus, rosemary and thyme pre carved for your convenience</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$34</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Roasted Boneless Prime Rib of Beef</h5>
<p class="fw-light">Rubbed with course salt and cracked black pepper served with red wine sauce</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$43</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Roast Beef</h5>
<p class="fw-light">Slow roasted beef roast served with horseradish cream sauce</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$29</h3>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<!-- Menu Item -->
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Slow Roasted Whole Turkey</h5>
<p class="fw-light">24-hour herb brined turkey, slowly roasted with citrus, rosemary and thyme</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$59</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Carved Half Turkey</h5>
<p class="fw-light">24-hour herb brined turkey, slowly roasted with citrus, rosemary and thyme pre carved for your convenience</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$34</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Roasted Boneless Prime Rib of Beef</h5>
<p class="fw-light">Rubbed with course salt and cracked black pepper served with red wine sauce</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$43</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Roast Beef</h5>
<p class="fw-light">Slow roasted beef roast served with horseradish cream sauce</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$29</h3>
</div>
</div>
</div>
</div><!-- end row -->
</div>
<!-- Desserts -->
<div class="tab-pane fade" id="desserts">
<div class="row g-5">
<div class="col-12 col-lg-6">
<!-- Menu Item -->
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Chocolate Pumpkin Mousse Pie</h5>
<p class="fw-light">Delightful layers of pumpkin, cheesecake and chocolate</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$24</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Lemon Cake</h5>
<p class="fw-light">Moist lemon layer cake with lemon cream cheese buttercream</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$21</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Chocolate Cheesecake</h5>
<p class="fw-light">Dark chocolate, cream cheese and caramel</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$23</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Fried Ice Cream</h5>
<p class="fw-light">Vanilla ice cream coated with crushed cinnamon toast crunch cereal</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$19</h3>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<!-- Menu Item -->
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Chocolate Pumpkin Mousse Pie</h5>
<p class="fw-light">Delightful layers of pumpkin, cheesecake and chocolate</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$24</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Lemon Cake</h5>
<p class="fw-light">Moist lemon layer cake with lemon cream cheese buttercream</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$21</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Chocolate Cheesecake</h5>
<p class="fw-light">Dark chocolate, cream cheese and caramel</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$23</h3>
</div>
</div>
<!-- Menu Item -->
<hr class="mt-3 mb-3">
<div class="d-md-flex justify-content-between">
<div class="d-md-inline-block me-md-3">
<h5 class="font-family-playfair fw-normal m-0">Fried Ice Cream</h5>
<p class="fw-light">Vanilla ice cream coated with crushed cinnamon toast crunch cereal</p>
</div>
<div class="d-md-inline-block text-md-end">
<h3 class="font-family-playfair fw-normal">$19</h3>
</div>
</div>
</div>
</div><!-- end row -->
</div>
</div>
<!-- Nav for Tab Contents -->
<ul class="nav nav-custom justify-content-center font-family-poppins font-small uppercase mt-5">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#main-courses">Main Courses</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#desserts">Desserts</button>
</li>
</ul>
</div><!-- end container -->
</div>
<!-- end Menu section -->
<!-- Parallax section -->
<div id="reservation" 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-lighter display-5 m-0">Reservations: +61 3 8376 6284</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Contact section -->
<div id="contact" class="section">
<div class="container text-start text-lg-center icon-4xl">
<div class="row g-4">
<div class="col-6 col-md-6 col-lg-3">
<div class="mb-2 text-dark">
<i class="bi bi-geo-alt"></i>
</div>
<h6 class="font-small fw-normal uppercase m-0">Address:</h6>
<p class="fw-light">121 King St, Melbourne VIC 3000</p>
</div>
<div class="col-6 col-md-6 col-lg-3">
<div class="mb-2 text-dark">
<i class="bi bi-clock"></i>
</div>
<h6 class="font-small fw-normal uppercase m-0">Open:</h6>
<p class="fw-light">1:00 pm - 10:00 pm</p>
</div>
<div class="col-6 col-md-6 col-lg-3">
<div class="mb-2 text-dark">
<i class="bi bi-telephone"></i>
</div>
<h6 class="font-small fw-normal uppercase m-0">Phone:</h6>
<p class="fw-light">+61 3 8376 6284</p>
</div>
<div class="col-6 col-md-6 col-lg-3">
<div class="mb-2 text-dark">
<i class="bi bi-envelope"></i>
</div>
<h6 class="font-small fw-normal uppercase m-0">Email:</h6>
<p class="fw-light">contact@example.com</p>
</div>
</div><!-- end row -->
<div class="mt-5">
<div id="map1" class="gmap gmap-lg" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div>
</div><!-- end container -->
</div>
<!-- end Contact section -->
<footer>
<div class="section-sm bg-black">
<div class="container fw-light">
<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">
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</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,430 @@
<!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 - Resume 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 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<ul class="list-unstyled">
<li>
<h1><a class="text-link-6" href="#">Home</a></h1>
</li>
<li>
<h1><a class="text-link-6" href="#">About</a></h1>
</li>
<li>
<h1><a class="text-link-6" href="#">Portfolio</a></h1>
</li>
<li>
<h1><a class="text-link-6" href="#">Blog</a></h1>
</li>
<li>
<h1><a class="text-link-6" href="#">Shop</a></h1>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-08 section-divider-wavesOpacity-bottom">
<div class="container text-center">
<img class="img-mask-avatar-lg mb-3" src="../assets/images/img-avatar-lg.jpg" alt="">
<h2 class="fw-light m-0">I'm Robert Harley</h2>
<p>Photographer / Designer</p>
</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-md-3">
<h6 class="fw-medium uppercase letter-spacing-1">About Me</h6>
</div>
<div class="col-12 col-md-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. 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">
<!-- Progress bar box 1 -->
<div class="progress-box">
<h6 class="fw-medium">Photographer</h6>
<div class="animated-progress">
<div data-progress="98"></div>
</div>
</div>
<!-- Progress bar box 2 -->
<div class="progress-box mt-4">
<h6 class="fw-medium">Graphic Design</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="94"></div>
</div>
</div>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Portfolio section -->
<div class="section p-0">
<div class="container">
<div class="portfolio-masonry column-3 spacing-1">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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-light">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h5 class="fw-light">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<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-light">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<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-light">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="portfolio-item category-2">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h5 class="fw-light">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="portfolio-item category-3">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-3.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h5 class="fw-light">Project Title</h5>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Services section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-3">
<h6 class="fw-medium uppercase letter-spacing-1">What I Do</h6>
</div>
<div class="col-12 col-md-9">
<div class="row icon-4xl">
<div class="col-12 col-lg-4">
<i class="bi bi-brush text-dark"></i>
<h5 class="fw-normal mt-2">Graphic Design</h5>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-12 col-lg-4">
<i class="bi bi-camera text-dark"></i>
<h5 class="fw-normal mt-2">Photography</h5>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="col-12 col-lg-4">
<i class="bi bi-star text-dark"></i>
<h5 class="fw-normal mt-2">Social Marketing</h5>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Facts section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-08">
<div class="container text-center">
<div class="row g-4">
<!-- Facts box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light"><span class="counter">100</span>+</h1>
<h6 class="font-small fw-normal uppercase">Fact One</h6>
</div>
<!-- Facts box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">100</h1>
<h6 class="font-small fw-normal uppercase">Fact Two</h6>
</div>
<!-- Facts box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light"><span class="counter">100</span>+</h1>
<h6 class="font-small fw-normal uppercase">Fact Three</h6>
</div>
<!-- Facts box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light counter">100</h1>
<h6 class="font-small fw-normal uppercase">Fact Four</h6>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts section -->
<!-- Education section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-3">
<h6 class="fw-medium uppercase letter-spacing-1">Education</h6>
</div>
<div class="col-12 col-md-9">
<div class="row g-4">
<!-- Employment column -->
<div class="col-12 col-lg-6">
<!-- Resume box 1 -->
<div class="mb-4">
<h6 class="fw-medium">Web Developer @ ThemeForest</h6>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<span class="fst-italic font-small text-dark-06">Jun 2017 - Present</span>
</div>
<!-- Resume box 2 -->
<div>
<h6 class="fw-medium">Photographer @ Photodune</h6>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<span class="fst-italic font-small text-dark-06">Aug 2016 - May 2017</span>
</div>
</div>
<!-- Education column -->
<div class="col-12 col-lg-6">
<!-- Resume box 1 -->
<div class="mb-4">
<h6 class="fw-medium">Master Degree @ Universtiy</h6>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<span class="fst-italic font-small text-dark-06">Aug 2016 - May 2017</span>
</div>
<!-- Resume box 2 -->
<div>
<h6 class="fw-medium">Bachelor Degree @ Universtiy</h6>
<p class="mb-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<span class="fst-italic font-small text-dark-06">Aug 2013 - May 2016</span>
</div>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Education section -->
<!-- Contact section -->
<div class="section border-top">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-3">
<h6 class="fw-medium uppercase letter-spacing-1">Get In Touch</h6>
</div>
<div class="col-12 col-md-9">
<!-- Contact Info -->
<div class="row icon-4xl">
<div class="col-12 col-lg-4">
<div class="mb-3">
<i class="bi bi-telephone text-dark"></i>
</div>
<h6 class="fw-medium">Phone:</h6>
<span>+(987) 654 321 01</span>
</div>
<div class="col-12 col-lg-4">
<div class="mb-3">
<i class="bi bi-envelope text-dark"></i>
</div>
<h6 class="fw-medium">Email:</h6>
<span>email@example.com</span>
</div>
<div class="col-12 col-lg-4">
<div class="mb-3">
<i class="bi bi-geo-alt text-dark"></i>
</div>
<h6 class="fw-medium">Address:</h6>
<span>121 King St, Melbourne VIC 3000</span>
</div>
</div>
<!-- Contact Form -->
<div class="mt-5 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-gray" 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 bg-dark">
<div class="container">
<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 -->
</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,382 @@
<!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 - Resume 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-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 header-lg transparent-dark">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<ul class="list-unstyled">
<li>
<h1><a class="text-link-6" href="#">Home</a></h1>
</li>
<li>
<h1><a class="text-link-6" href="#">About</a></h1>
</li>
<li>
<h1><a class="text-link-6" href="#">Portfolio</a></h1>
</li>
<li>
<h1><a class="text-link-6" href="#">Blog</a></h1>
</li>
<li>
<h1><a class="text-link-6" href="#">Shop</a></h1>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-lg bg-image bg-fade-white-top" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-07 backdrop-filter-blur">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-4">
<img class="box-shadow" src="../assets/images/col-2-tall.jpg" alt="">
</div>
<div class="col-12 col-lg-8">
<h1 class="fw-normal m-0">Brenda Gillen</h1>
<ul class="list-inline-dash font-family-poppins font-small fw-normal letter-spacing-1 uppercase mb-3">
<li>Entrepreneur</li>
<li>Photographer</li>
</ul>
<ul class="list-inline mb-3">
<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>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<!-- Skills -->
<div class="row g-4 mt-4">
<!-- Progress bar box 1 -->
<div class="col-12 col-lg-6">
<div class="progress-box progress-theme">
<h6 class="fw-medium">Social Marketing</h6>
<div class="animated-progress">
<div data-progress="94"></div>
</div>
</div>
</div>
<!-- Progress bar box 2 -->
<div class="col-12 col-lg-6">
<div class="progress-box progress-theme">
<h6 class="fw-medium">Sales Training</h6>
<div class="animated-progress">
<div data-progress="88"></div>
</div>
</div>
</div>
<!-- Progress bar box 3 -->
<div class="col-12 col-lg-6">
<div class="progress-box progress-theme">
<h6 class="fw-medium">Copywriting</h6>
<div class="animated-progress">
<div data-progress="92"></div>
</div>
</div>
</div>
<!-- Progress bar box 4 -->
<div class="col-12 col-lg-6">
<div class="progress-box progress-theme">
<h6 class="fw-medium">Consulting</h6>
<div class="animated-progress">
<div data-progress="90"></div>
</div>
</div>
</div>
</div><!-- end inner row -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Services section -->
<div class="section-lg pt-0">
<div class="container">
<div class="mb-5">
<h2 class="fw-normal">What I Do</h2>
</div>
<div class="row icon-5xl g-4">
<!-- Icon text box 1 -->
<div class="col-12 col-md-4">
<i class="bi bi-star text-color-theme"></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-color-theme"></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-color-theme"></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 -->
<!-- Portfolio section -->
<div class="section-lg pt-0">
<div class="container">
<div class="mb-5">
<h2 class="fw-normal">My Works</h2>
</div>
<!-- Portfolio filter -->
<div class="filter filter-style-4 mb-5">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-2">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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 category-2">
<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 category-3">
<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 category-1">
<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 category-2">
<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 category-3">
<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><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Contact Info section -->
<div class="section-lg pt-0">
<div class="container">
<div class="mb-5">
<h2 class="fw-normal">Get In Touch</h2>
</div>
<div class="row icon-4xl">
<!-- Icon text box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-envelope text-color-theme mb-3"></i>
<h6 class="fw-normal m-0">Email:</h6>
<p>contact@email.com</p>
</div>
<!-- Icon text box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-telephone text-color-theme mb-3"></i>
<h6 class="fw-normal m-0">Phone:</h6>
<p>+(987) 654 321 01</p>
</div>
<!-- Icon text box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-skype text-color-theme mb-3"></i>
<h6 class="fw-normal m-0">Skype:</h6>
<p>contact.skype</p>
</div>
<!-- Icon text box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-pin-map text-color-theme mb-3"></i>
<h6 class="fw-normal m-0">Address:</h6>
<p>121 King St, Melbourne VIC 3000</p>
</div>
</div><!-- end row -->
<!-- Contact Form -->
<div class="contact-form mt-5">
<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-radius button-theme" 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 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">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Testimonial</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">
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</footer>
<!-- Scroll to top button -->
<div class="scrolltotop icon-lg">
<a class="button-circle button-circle-md button-circle-theme" 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,420 @@
<!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 - Resume 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 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-outline-white" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-6">
<div class="box-backdrop">
<img src="../assets/images/col-2-square.jpg" alt="">
</div>
</div>
<div class="col-12 col-lg-6">
<h1 class="fw-normal line-height-120">John Paul</h1>
<h6 class="font-small fw-normal uppercase mb-3">Digital Entrepreneur</h6>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Etiam ultricies nisi vel augue.</p>
<!-- Progress bars -->
<div class="mt-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>
<!-- end Progress bars -->
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Timeline Section -->
<div class="section pt-0">
<div class="container">
<div class="timeline-wrapper">
<!-- Timeline box 1 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">August 10, 2018</h6>
</div>
<div class="timeline-content">
<h6>Heading</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<!-- Timeline box 2 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">August 10, 2018</h6>
</div>
<div class="timeline-content">
<h6>Heading</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<!-- Timeline box 3 -->
<div class="timeline">
<div class="timeline-date">
<h6 class="font-small fw-normal uppercase">August 10, 2018</h6>
</div>
<div class="timeline-content">
<h6>Heading</h6>
<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 -->
<!-- Portfolio section -->
<div class="section border-top">
<div class="container">
<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5 text-center">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-3 spacing-2">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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 category-2">
<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 category-3">
<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 category-1">
<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 category-2">
<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 category-3">
<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><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Services 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">
<h2 class="fw-normal">What I Do</h2>
</div>
</div>
</div>
<div class="row g-4 g-lg-5 text-center icon-5xl">
<!-- 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">Photoshoot</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 -->
<!-- Contact Info section -->
<div class="section border-top">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1">
<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">Get In Touch</h2>
</div>
</div>
</div>
<div class="row text-center icon-4xl">
<!-- 1 -->
<div class="col-12 col-sm-4">
<i class="bi bi-envelope text-dark mb-3"></i>
<h6 class="fw-normal m-0">Email:</h6>
<p>contact@example.com</p>
</div>
<!-- 2 -->
<div class="col-12 col-sm-4">
<i class="bi bi-telephone text-dark mb-3"></i>
<h6 class="fw-normal m-0">Phone:</h6>
<p>+(987) 654 321 01</p>
</div>
<!-- 3 -->
<div class="col-12 col-sm-4">
<i class="bi bi-skype text-dark mb-3"></i>
<h6 class="fw-normal m-0">Skype:</h6>
<p>contact.skype</p>
</div>
</div><!-- end row(inner) -->
<!-- Contact Form -->
<div class="contact-form mt-5 text-end">
<form class="form-style-2" method="post" id="contactform">
<div class="row g-4">
<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><!-- end contact-form -->
</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">
<ul class="list-inline-dash">
<li><a href="#">FAQ</a></li>
<li><a href="#">Testimonial</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,397 @@
<!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 - SaaS 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 class="theme-font-nunito" 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-2xl bg-gradient-1 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">
<h1 class="display-4 mb-4">Software Landing</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>
<ul class="list-inline mt-4">
<li><a class="button button-lg button-rounded button-white-2" href="#">Free Trial</a></li>
<li><a class="button button-lg button-rounded button-outline-white" href="#plans">See Plans</a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- Features section -->
<div class="container text-center icon-5xl">
<div class="bg-white p-4 p-lg-5 border-radius-1 box-shadow n-margin-5">
<div class="row g-5">
<!-- Feature box 1 -->
<div class="col-12 col-lg-4">
<div class="text-gradient-1 mb-2">
<i class="bi bi-brush"></i>
</div>
<h5 class="fw-normal">Modern Design</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Feature box 2 -->
<div class="col-12 col-lg-4">
<div class="text-gradient-1 mb-2">
<i class="bi bi-lightning"></i>
</div>
<h5 class="fw-normal">Ultra Performance</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Feature box 3 -->
<div class="col-12 col-lg-4">
<div class="text-gradient-1 mb-2">
<i class="bi bi-layers"></i>
</div>
<h5 class="fw-normal">Highly Organized</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 -->
<!-- end Features section -->
<!-- About section -->
<div class="section border-top">
<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">
<h6 class="font-small fw-medium uppercase text-dark-03">Introducing Mono</h6>
<h2 class="fw-normal">Multi-Purpose Template</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>
</div>
</div><!-- end row -->
</div>
<div class="row align-items-center g-5">
<div class="col-12 col-lg-7 order-lg-2">
<img class="border-radius box-shadow" src="../assets/images/col-1.jpg" alt="" data-rjs="2">
</div>
<div class="col-12 col-lg-5 order-lg-1">
<h4 class="fw-normal">Advanced Features</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. 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-gradient-1 me-2"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing</li>
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing</li>
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing</li>
</ul>
</div>
</div>
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Features 2 section -->
<div class="section pt-0">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-6">
<div class="row g-3 text-center">
<!-- Feature box 1 -->
<div class="col-6">
<div class="bg-light-blue border-radius p-4 py-5 hover-float">
<h6 class="font-small uppercase mb-1">Fully Responsive</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
</div>
</div>
<!-- Feature box 2 -->
<div class="col-6">
<div class="bg-light-purple border-radius p-4 py-5 hover-float">
<h6 class="font-small uppercase mb-1">GDPR Compliance</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
</div>
</div>
<!-- Feature box 3 -->
<div class="col-6">
<div class="bg-light-very-peri border-radius p-4 py-5 hover-float">
<h6 class="font-small uppercase mb-1">Bootstrap 5</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
</div>
</div>
<!-- Feature box 4 -->
<div class="col-6">
<div class="bg-light-blue border-radius p-4 py-5 hover-float">
<h6 class="font-small uppercase mb-1">Unique Demos</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
</div>
</div>
<!-- Feature box 5 -->
<div class="col-6">
<div class="bg-light-purple border-radius p-4 py-5 hover-float">
<h6 class="font-small uppercase mb-1">High Performance</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
</div>
</div>
<!-- Feature box 6 -->
<div class="col-6">
<div class="bg-light-very-peri border-radius p-4 py-5 hover-float">
<h6 class="font-small uppercase mb-1">Highly Organized</h6>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p>
</div>
</div>
</div><!-- end row(inner) -->
</div>
<div class="col-12 col-lg-6">
<!-- Feature box 1 -->
<div class="feature-box feature-box-lg">
<div class="feature-box-icon bg-gradient-1 text-white icon-lg">
<i class="bi bi-file-binary"></i>
</div>
<h5 class="fw-normal">Well Documented</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- Feature box 2 -->
<div class="feature-box feature-box-lg mt-4">
<div class="feature-box-icon bg-gradient-1 text-white icon-lg">
<i class="bi bi-boxes"></i>
</div>
<h5 class="fw-normal">Advanced Features</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- Feature box 3 -->
<div class="feature-box feature-box-lg mt-4">
<div class="feature-box-icon bg-gradient-1 text-white icon-lg">
<i class="bi bi-chat-text"></i>
</div>
<h5 class="fw-normal">Fast & Professional Support</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- Feature box 4 -->
<div class="feature-box feature-box-lg mt-4">
<div class="feature-box-icon bg-gradient-1 text-white icon-lg">
<i class="bi bi-arrow-repeat"></i>
</div>
<h5 class="fw-normal">Lifetime Free Updates</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 Features 2 section -->
<!-- Prices section -->
<div id="plans" class="section bg-gray-lighter">
<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">
<h6 class="font-small fw-medium uppercase text-dark-03">Pricing Plans</h6>
<h2 class="fw-normal">Choose Your Plan</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>
</div>
</div><!-- end row(1) -->
</div>
<div class="row g-4 mt-5 text-center">
<!-- Price box 1 -->
<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">Personal</h6>
<div class="mt-3">
<h1 class="display-6 line-height-100 fw-normal 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-1 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">Team</h6>
<div class="mt-3">
<h1 class="display-6 line-height-100 fw-normal 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-1 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">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Business</h6>
<div class="mt-3">
<h1 class="display-6 line-height-100 fw-normal 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-1 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Prices 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-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>

View File

@@ -0,0 +1,474 @@
<!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 - SaaS 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 class="theme-font-nunito" 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 transparent-light center 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-gradient-4 section-divider-wavesOpacity-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">
<h6 class="font-small uppercase letter-spacing-1 mb-3 mb-lg-4">
<span class="typer text-white" id="typer1" data-words="Introducing Mono!, The Ultimate, Multipurpose Template" data-delay="60" data-deleteDelay="800"></span><span class="cursor" data-owner="typer1"></span>
</h6>
<h1 class="display-4">Powerful <span class="text-highlight">Solutions</span> for Your Business</h1>
<ul class="list-inline mt-3 mt-lg-4">
<li><a class='button button-lg button-rounded button-font-2 button-white-2' href="#">Start Free Trial</a></li>
<li><a class='button button-lg button-rounded button-font-2 button-outline-white' href="#features">Learn More</a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Hero Image -->
<div class="container n-margin-5">
<div class="row">
<div class="col-12 col-md-10 offset-md-1">
<img src="../assets/images/col-1.jpg" alt="">
</div>
</div><!-- end row -->
</div>
<!-- end Hero Image -->
<!-- Features section -->
<div class="section" id="features">
<div class="container text-center">
<div class="row g-4 g-lg-5 icon-5xl">
<!-- Feature box 1 -->
<div class="col-12 col-lg-4">
<div class="mb-2">
<i class="bi bi-globe text-gradient-1"></i>
</div>
<h4 class="fw-medium">Feature Title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<!-- Feature box 2 -->
<div class="col-12 col-lg-4">
<div class="mb-2">
<i class="bi bi-globe text-gradient-1"></i>
</div>
<h4 class="fw-medium">Feature Title</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes</p>
</div>
<!-- Feature box 3 -->
<div class="col-12 col-lg-4">
<div class="mb-2">
<i class="bi bi-globe text-gradient-1"></i>
</div>
<h4 class="fw-medium">Feature Title</h4>
<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 Features section -->
<!-- Clients section -->
<div class="section pt-0">
<div class="container">
<div class="bg-gray-lighter p-4 p-lg-5 border-radius-1">
<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 -->
<!-- About 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-6 order-lg-2">
<img src="../assets/images/col-1.jpg" alt="">
</div>
<div class="col-12 col-lg-6 order-lg-1">
<h2 class="fw-medium">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do</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>
<div class="row g-1 g-lg-4 mt-1">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>List item</li>
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>List item</li>
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>List item</li>
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>List item</li>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>List item</li>
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>List item</li>
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>List item</li>
<li><i class="bi bi-check-circle-fill text-gradient-1 me-2"></i>List item</li>
</ul>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About 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="border 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/col-4-square.jpg" alt="">
<h5 class="fw-medium">Jonnhy Smith</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/col-4-square.jpg" alt="">
<h5 class="fw-medium">Jonnhy Smith</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/col-4-square.jpg" alt="">
<h5 class="fw-medium">Jonnhy Smith</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">
<div>
<h2 class="fw-medium display-6 text-gradient-1 mb-1 counter">100</h2>
<p>Fact Number One</p>
</div>
<div class="mt-4">
<h2 class="fw-medium display-6 text-gradient-1 mb-1 counter">100</h2>
<p>Fact Number Two</p>
</div>
<div class="mt-4">
<h2 class="fw-medium display-6 text-gradient-1 mb-1 counter">100</h2>
<p>Fact Number Three</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Testimonial/Facts section -->
<!-- Prices section -->
<div class="section bg-gray-lightest">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-12 col-lg-5">
<h6 class="d-inline-block bg-white box-shadow border-radius px-3 py-2 line-height-140 font-small uppercase letter-spacing-1 mb-3"><span class="text-gradient-1">Pricing Plans</span></h6>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit sod de</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore</p>
</div>
<div class="col-12 col-lg-7 text-center">
<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">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-font-2 button-gradient-1 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">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-font-2 button-gradient-1 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Prices section -->
<!-- section -->
<div class="section-lg bg-gradient-1">
<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="fw-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</h1>
<ul class="list-inline mt-3 mt-lg-4">
<li><a class='button button-lg button-rounded button-white button-shadow button-hover-float' href="#"><i class="bi bi-windows"></i>Windows</a></li>
<li><a class='button button-lg button-rounded button-white button-shadow button-hover-float' href="#"><i class="bi bi-apple"></i>Mac OS</a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end section -->
<!-- Footer -->
<div class="section bg-dark">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-md-6 col-lg-3">
<h1 class="display-5 mb-2">Mono</h1>
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 col-lg-3">
<!-- Contact Info -->
<ul class="list-unstyled">
<li>+(976) 444 444 11</li>
<li>contact@flatheme.net</li>
<li>Ulaanbaatar, Khan-Uul, 11000</li>
</ul>
<!-- Social Links -->
<ul class="list-inline-sm mt-4">
<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>
<li>
<a class="button-circle button-circle-sm button-circle-white-2" href="#">
<i class="bi bi-instagram"></i>
</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash">
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
</ul>
</div>
<div class="col-12 col-md-6 col-lg-3">
<ul class="list-dash">
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
<li>
<a href="#">List item</a>
</li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end 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,504 @@
<!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 - SEO Agency</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 class="theme-font-nunito" 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 center header-color-dark transparent-dark 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 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="section-xl pb-0">
<div class="container">
<div class="row align-items-center g-4 g-lg-5">
<div class="col-12 col-lg-6 order-lg-2 text-center text-lg-end">
<img src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-lg-6 order-lg-1 text-center text-lg-start">
<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-semi-bold display-4 line-height-110 mb-4">Get more leads, customers and sales</h1>
<div class="d-flex align-items-center mb-4 mb-lg-5">
<ul class="avatar-group">
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
</ul>
<div class="d-inline-block ps-3">
<p>We've over 4,000 clients <br class="d-md-block">around the world</p>
</div>
</div>
<a class="button button-lg button-rounded button-font-2 button-gradient-6 lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="bi bi-play-fill"></i>Play Video</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- Services section -->
<div class="section-lg">
<div class="container text-center icon-5xl">
<div class="row g-4">
<div class="col-12 col-lg-4">
<div class="bg-light-blue border-radius p-4 p-lg-5 hover-float mt-lg-4">
<div class="text-dark mb-2">
<i class="bi bi-diagram-3"></i>
</div>
<h5 class="text-dark">Custom Strategy</h5>
<p class="text-dark-06">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-light-turquoise border-radius p-4 p-lg-5 hover-float">
<div class="text-dark mb-2">
<i class="bi bi-pie-chart"></i>
</div>
<h5 class="text-dark">Competitor Analysis</h5>
<p class="text-dark-06">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-light-blue border-radius p-4 p-lg-5 hover-float mt-lg-4">
<div class="text-dark mb-2">
<i class="bi bi-gear"></i>
</div>
<h5 class="text-dark">Page Optimization</h5>
<p class="text-dark-06">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 -->
<!-- About section -->
<div class="section-lg pt-0">
<div class="container text-center text-lg-start">
<div class="row align-items-center g-4 g-lg-5" data-cues="fadeIn">
<div class="col-12 col-lg-6">
<img src="../assets/images/col-2.jpg" alt="">
</div>
<div class="col-12 col-lg-6">
<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">About us</span></h6>
<h2 class="display-6 fw-normal mb-3">We help businesses to become inescapable in a digital world</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,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<a class="button button-lg button-rounded button-font-2 button-gradient-6 mt-4" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Clients section -->
<div class="section pt-0">
<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 -->
<!-- Process 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-gradient-6">Process</span></h6>
<h2 class="display-6 fw-normal">Our Approach to SEO</h2>
</div>
</div><!-- end row -->
<div class="row g-4 g-lg-5 mt-4" data-cues="fadeIn">
<!-- Process box 1 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-color-turquoise-09 box-shadow mb-3">
<h3 class="text-white">1</h3>
</div>
<h5>First Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt</p>
</div>
<!-- Process box 2 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-color-turquoise-08 box-shadow mb-3">
<h3 class="text-white">2</h3>
</div>
<h5>Second Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt</p>
</div>
<!-- Process box 3 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-color-turquoise-07 box-shadow mb-3">
<h3 class="text-white">3</h3>
</div>
<h5>Third Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt</p>
</div>
<!-- Process box 4 -->
<div class="col-12 col-md-6 col-lg-3">
<div class="circle-box-lg bg-color-turquoise-06 box-shadow mb-3">
<h3 class="text-white">4</h3>
</div>
<h5>Fourth Step</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Process section -->
<!-- Testimonial section -->
<div class="container">
<div class="bg-gray-lightest border-radius-1 px-4 px-lg-5 py-5">
<div class="owl-carousel" data-owl-items="1" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-medium line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal">Manager - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-medium line-height-140 m-0">Andrew Palmer</h5>
<span class="font-small fw-normal">Developer - Mono</span>
<p class="mt-3">"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="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="fw-medium line-height-140 m-0">Anna Mullen</h5>
<span class="font-small fw-normal">Designer - Mono</span>
<p class="mt-3">"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>
</div>
<!-- end Testimonial section -->
<!-- Prices section -->
<div class="section pb-0">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-12 col-lg-5" data-cues="fadeIn">
<h6 class="d-inline-block bg-white box-shadow border-radius px-3 py-2 line-height-140 font-small uppercase letter-spacing-1 mb-3"><span class="text-gradient-6">Pricing Plans</span></h6>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit sod de</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore</p>
</div>
<div class="col-12 col-lg-7">
<div class="row g-4" data-cues="fadeIn">
<!-- Price box 1 -->
<div class="col-12 col-md-6">
<div class="bg-light-blue hover-float border-radius p-4 p-lg-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">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-font-2 button-gradient-6 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 2 -->
<div class="col-12 col-md-6">
<div class="bg-light-turquoise hover-float border-radius p-4 p-lg-5 mt-lg-4">
<h6 class="font-small fw-medium uppercase letter-spacing-1">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-font-2 button-gradient-6 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 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-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,569 @@
<!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 - Startup 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">
<!-- 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 center header-color-black sticky-autohide">
<div class="container">
<!-- Logo -->
<div class="header-logo">
<h3 class="font-family-outfit 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 bg-image bg-fade-white-top" data-bg-src="../assets/images/background.jpg">
<div class="bg-white-08">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
<div class="mb-4 d-inline-block bg-gray border-radius px-3 py-2">
<span class="font-family-poppins uppercase fw-medium line-height-100 text-gradient-6">Mono Startup</span>
</div>
<h1 class="font-family-outfit fw-normal display-5 line-height-140">It's not about ideas. It's about making ideas happen.</h1>
<a class="button-circle button-circle-xl button-circle-gradient-6 button-circle-ripple lightbox-media-link mt-4" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="fas fa-play"></i></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Hero section -->
<!-- Features section -->
<div class="container">
<div class="row g-3 icon-5xl text-center">
<div class="col-12 col-lg-4">
<div class="hoverbox-4 center border-radius mt-lg-4">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<i class="bi bi-globe text-white mb-3"></i>
<h5 class="fw-light m-0">World-Class Quality</h5>
</div>
<div class="hover-content">
<a class="button button-lg button-rounded button-white-2" href="#">Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="hoverbox-4 center border-radius">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<i class="bi bi-lightbulb text-white mb-3"></i>
<h5 class="fw-light m-0">Innovative Thinkers</h5>
</div>
<div class="hover-content">
<a class="button button-lg button-rounded button-white-2" href="#">Learn More</a>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="hoverbox-4 center border-radius mt-lg-4">
<img src="../assets/images/col-1-square.jpg" alt="">
<div class="content">
<i class="bi bi-palette text-white mb-3"></i>
<h5 class="fw-light m-0">Premium Design</h5>
</div>
<div class="hover-content">
<a class="button button-lg button-rounded button-white-2" href="#">Learn More</a>
</div>
</div>
</div>
</div><!-- end row -->
</div>
<!-- end Features section -->
<!-- About section -->
<div class="section">
<div class="container">
<div class="row g-5 align-items-center">
<div class="col-12 col-lg-5">
<div class="img-mask-blob-4">
<img src="../assets/images/col-2-square.jpg" alt="">
</div>
</div>
<div class="col-12 col-lg-7">
<h2 class="font-family-outfit fw-light display-6">We Are Mono</h2>
<ul class="list-inline-sm mt-3 mb-3">
<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>
<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>
<!-- Counters -->
<div class="row g-4 mt-2">
<!-- Counter 1 -->
<div class="col-4">
<h1 class="fw-light 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-light text-color-theme mb-0">+<span class="counter">80</span></h1>
<p>Happy Clients</p>
</div>
<!-- Counter 3 -->
<div class="col-4">
<h1 class="fw-light text-color-theme mb-0"><span class="counter">144</span></h1>
<p>Projects Done</p>
</div>
<!-- end Counter 3 -->
</div><!-- end row -->
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- 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">
<h2 class="font-family-outfit fw-light display-6">Meet Our Creative Team</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>
</div>
</div>
</div>
<div class="row g-3 gy-4 team-wrapper border-radius">
<!-- Team box 1 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.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>
<div class="mb-2">
<h5 class="fw-light m-0">Anna Mullen</h5>
<span>Founder</span>
</div>
</div>
<!-- Team box 2 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.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>
<div class="mb-2">
<h5 class="fw-normal m-0">Anna Mullen</h5>
<span>Lead Designer</span>
</div>
</div>
<!-- Team box 3 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.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>
<div class="mb-2">
<h5 class="fw-normal m-0">Anna Mullen</h5>
<span>Creative Director</span>
</div>
</div>
<!-- Team box 4 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.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>
<div class="mb-2">
<h5 class="fw-normal m-0">Anna Mullen</h5>
<span>Photographer</span>
</div>
</div>
<!-- Team box 5 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.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>
<div class="mb-2">
<h5 class="fw-normal m-0">Anna Mullen</h5>
<span>Marketing Specialist</span>
</div>
</div>
<!-- Team box 6 -->
<div class="col-12 col-md-4 team-box">
<div class="team-img">
<img src="../assets/images/col-2-tall.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>
<div class="mb-2">
<h5 class="fw-normal m-0">Anna Mullen</h5>
<span>Senior Designer</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Clients section -->
<div class="container">
<div class="bg-gray-lighter p-4 p-lg-5 border-radius">
<div class="row g-4 align-items-center">
<div class="col-12 col-lg-5 col-xxl-4">
<div class="d-flex align-items-center">
<ul class="avatar-group">
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
<li>
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</li>
</ul>
<div class="d-inline-block ps-3">
<p>We've over 4,000 clients <br class="d-md-block">around the world</p>
</div>
</div>
</div>
<div class="col-12 col-lg-7 col-xxl-8">
<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="3" data-owl-xl="3">
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
<div class="client-box">
<a href="#"><img src="../assets/images/col-5.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
<!-- end Clients section -->
<!-- Portfolio 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="font-family-outfit fw-light display-6">Our Works</h2>
</div>
</div>
</div>
<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5 text-center">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-2 spacing-2 hover-style-1 border-radius">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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>
<span class="mb-2">Category</span>
<h4 class="fw-light m-0">Project Title</h4>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<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>
<span class="mb-2">Category</span>
<h4 class="fw-light m-0">Project Title</h4>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<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>
<span class="mb-2">Category</span>
<h4 class="fw-light m-0">Project Title</h4>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<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>
<span class="mb-2">Category</span>
<h4 class="fw-light m-0">Project Title</h4>
</div>
</div>
</div>
</div>
<!-- end Portfolio box 4 -->
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Facts section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="row g-4">
<!-- Counter box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light display-5"><span class="counter">179</span>+</h1>
<h6 class="font-small fw-normal uppercase mt-3">Projects Done</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Counter box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light display-5 counter">27</h1>
<h6 class="font-small fw-normal uppercase mt-3">Team Members</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Counter box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light display-5"><span class="counter">1000</span>+</h1>
<h6 class="font-small fw-normal uppercase mt-3">Happy Clients</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Counter box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<h1 class="fw-light display-5 counter">214</h1>
<h6 class="font-small fw-normal uppercase mt-3">Hours of Meeting</h6>
<p>Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts 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-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>

View File

@@ -0,0 +1,530 @@
<!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 - Startup 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 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">
<a class="button button-sm button-rounded button-theme align-middle" href="#">Button</a>
</div>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<!-- Hero section -->
<div class="section-lg">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<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-lg 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-lg 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">
<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">
<!-- Services box 1 -->
<div class="col-12 col-lg-4">
<i class="bi bi-camera text-color-theme"></i>
<h4 class="fw-normal mt-2">Photoshoot</h4>
<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>
<h4 class="fw-normal mt-2">Social Marketing</h4>
<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>
<h4 class="fw-normal mt-2">Copywriting</h4>
<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 -->
<!-- Portfolio section -->
<div class="section-lg pt-0">
<div class="container-fluid px-4">
<div class="row portfolio-grid g-4 hover-style-1 border-radius">
<!-- Portfolio box 1 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="col-12 col-md-6 col-lg-4 portfolio-item">
<div class="portfolio-box">
<div class="portfolio-img">
<img src="../assets/images/col-1.jpg" alt=""><!-- Image source -->
</div>
<a href="#"></a><!-- Portfolio Single link -->
<div class="portfolio-title">
<div>
<h4 class="fw-normal">Project Title</h4>
<span>Category</span>
</div>
</div>
</div>
</div>
</div><!-- end row/portfolio-grid -->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Clients section -->
<div class="section-lg 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-lg 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="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 team-wrapper border-radius mt-4">
<!-- Team box 1 -->
<div class="col-12 col-sm-6 col-md-4 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>
<div class="mb-2">
<h5 class="fw-normal mb-0">Violet Walker</h5>
<span>Founder</span>
</div>
</div>
<!-- Team box 2 -->
<div class="col-12 col-sm-6 col-md-4 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>
<div class="mb-2">
<h5 class="fw-normal mb-0">Nicolas Hopkins</h5>
<span>Lead Designer</span>
</div>
</div>
<!-- Team box 3 -->
<div class="col-12 col-sm-6 col-md-4 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>
<div class="mb-2">
<h5 class="fw-normal mb-0">Jamie Mills</h5>
<span>Creative Director</span>
</div>
</div>
<!-- Team box 4 -->
<div class="col-12 col-sm-6 col-md-4 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>
<div class="mb-2">
<h5 class="fw-normal mb-0">Winston Frank</h5>
<span>Photographer</span>
</div>
</div>
<!-- Team box 5 -->
<div class="col-12 col-sm-6 col-md-4 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>
<div class="mb-2">
<h5 class="fw-normal mb-0">Ashley Williamsan</h5>
<span>Marketing Specialist</span>
</div>
</div>
<!-- Team box 6 -->
<div class="col-12 col-sm-6 col-md-4 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>
<div class="mb-2">
<h5 class="fw-normal mb-0">Betsy Fletcher</h5>
<span>Senior Designer</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Parallax section -->
<div class="bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="section-xl bg-dark-06">
<div class="container">
<div class="row g-4 g-lg-5 align-items-center">
<div class="col-12 col-md-7">
<h2 class="fw-medium display-6 uppercase line-height-140 mb-0">We offer reasonable prices for the amazing works we do</h2>
</div>
<div class="col-12 col-md-5 text-md-end">
<a class="button button-lg button-rounded button-font-2 button-white-2" href="#">Learn more</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax 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-theme" 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,397 @@
<!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 - Studio 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">
<link href="../assets/css/theme-colors/theme-color-spring-red.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-spring-red preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header">
<div class="container-fluid">
<!-- 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-middle">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="row g-4">
<div class="col-12 col-md-6">
<ul class="list-unstyled">
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Home</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">About</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Portfolio</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Blog</a></h6>
</li>
<li>
<h6 class="fw-normal uppercase letter-spacing-2"><a class="text-link-3" href="#">Shop</a></h6>
</li>
</ul>
</div>
<div class="col-12 col-md-6">
<h5 class="fw-normal">Contact Info:</h5>
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-4">
<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-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row(outer) -->
</div><!-- end container -->
</div><!-- end position-middle -->
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="px-4">
<div class="section-2xl bg-image parallax border-radius-1" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-04">
<div class="container text-center">
<h1 class="display-1 fw-lighter">Mono Photo Studio</h1>
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
</div>
<!-- end Hero section -->
<!-- About section -->
<div class="section">
<div class="container p-4 pt-0 pb-0">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="row g-4">
<div class="col-12 col-xl-6">
<h1 class="display-1 font-family-outfit fw-medium line-height-110 mb-0">Prestigious and well organised</h1>
</div>
<div class="col-12 col-xl-6">
<h4 class="fw-light text-dark-05 line-height-150 mb-0">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. Duis aute irure dolor in reprehenderit in voluptate</h4>
</div>
</div><!-- end row(inner) -->
</div>
</div><!-- end row -->
<div class="row g-4 mt-5 text-center">
<!-- 1 -->
<div class="col-12 col-md-4">
<img src="../assets/images/col-2.jpg" alt="">
<div class="mt-4">
<h5 class="fw-normal">Photography</h5>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
<a class="button button-md button-radius button-theme mt-3" href="#">Learn More</a>
</div>
</div>
<!-- 2 -->
<div class="col-12 col-md-4">
<img src="../assets/images/col-2.jpg" alt="">
<div class="mt-4">
<h5 class="fw-normal">Recording</h5>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
<a class="button button-md button-radius button-theme mt-3" href="#">Learn More</a>
</div>
</div>
<!-- 3 -->
<div class="col-12 col-md-4">
<img src="../assets/images/col-2.jpg" alt="">
<div class="mt-4">
<h5 class="fw-normal">Videography</h5>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
<a class="button button-md button-radius button-theme mt-3" href="#">Learn More</a>
</div>
</div>
</div><!-- end row(2) -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Testimonial section -->
<div class="px-4">
<div class="section-lg bg-dark border-radius-1">
<div class="container">
<div class="owl-carousel" data-owl-items="1" data-owl-nav="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="m-0 fw-normal">Johnny Doe</h5>
<span>CEO - Company</span>
<p class="mt-4">"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="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="m-0 fw-normal">Johnny Doe</h5>
<span>CEO - Company</span>
<p class="mt-4">"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="testimonial-box">
<img class="mb-3" src="../assets/images/img-avatar-sm.jpg" alt="">
<h5 class="m-0 fw-normal">Johnny Doe</h5>
<span>CEO - Company</span>
<p class="mt-4">"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>
</div>
<!-- end Testimonial section -->
<!-- Portfolio section -->
<div class="section">
<div class="container">
<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5 text-center">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-2 spacing-2 hover-style-1">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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>
<span class="mb-2">Category</span>
<h4 class="fw-light m-0">Project Title</h4>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<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>
<span class="mb-2">Category</span>
<h4 class="fw-light m-0">Project Title</h4>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<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>
<span class="mb-2">Category</span>
<h4 class="fw-light m-0">Project Title</h4>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<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>
<span class="mb-2">Category</span>
<h4 class="fw-light m-0">Project Title</h4>
</div>
</div>
</div>
</div>
<!-- end Portfolio box 4 -->
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Parallax section -->
<div class="px-4">
<div class="section-xl bg-image parallax border-radius-1" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-8 col-xl-7">
<h1 class="fw-light">We Are Always Ready</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 class="col-12 col-lg-4 col-xl-5 text-lg-end">
<a class="button button-xl button-radius button-reveal-right-outline-white" href="#"><i class="bi bi-arrow-right"></i><span>Get In Touch</span></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div><!-- end section-lg -->
</div>
<!-- end Parallax section -->
<!-- Contact Info -->
<div class="section">
<div class="container text-center">
<div class="row icon-4xl">
<!-- Icon text box 1 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-envelope text-color-theme mb-3"></i>
<h6 class="fw-normal m-0">Email</h6>
<p>contact@email.com</p>
</div>
<!-- Icon text box 2 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-telephone text-color-theme mb-3"></i>
<h6 class="fw-normal m-0">Phone</h6>
<p>+(987) 654 321 01</p>
</div>
<!-- Icon text box 3 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-skype text-color-theme mb-3"></i>
<h6 class="fw-normal m-0">Skype</h6>
<p>contact.skype</p>
</div>
<!-- Icon text box 4 -->
<div class="col-12 col-sm-6 col-md-3">
<i class="bi bi-pin-map text-color-theme mb-3"></i>
<h6 class="fw-normal m-0">Address</h6>
<p>121 King St, Melbourne VIC 3000</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Contact Info -->
<!-- Contact Form -->
<div class="section pt-0">
<div class="container">
<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-radius button-theme" 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 container -->
</div>
<!-- end Contact Form -->
<!-- Google Maps -->
<div class="px-4">
<div id="map1" class="gmap gmap-lg border-radius-1" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div>
<!-- end Google Maps -->
<footer>
<div class="section-sm">
<div class="container p-4 pt-0 pb-0">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3 mt-lg-4">
<li><a class="text-link-3" href="#">FAQ</a></li>
<li><a class="text-link-3" href="#">Careers</a></li>
<li><a class="text-link-3" 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-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,451 @@
<!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 - Studio 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-dark">
<!-- Header -->
<div class="header right header-color-black 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="owl-carousel owl-nav-overlay owl-dots-overlay" data-owl-nav="true" data-owl-items="1">
<!-- Slider Item 1 -->
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-04">
<div class="container text-center">
<div class="position-middle">
<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-4 fw-normal uppercase letter-spacing-2">Mono Studio 2</h1>
<p class="font-large fw-light text-white-07 mt-3">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
<a class="button button-xl button-rounded button-white-2 mt-4 mt-lg-5" href="#">View More</a>
</div>
</div><!-- end row -->
</div><!-- end position-middle -->
</div><!-- end container -->
</div>
</div>
<!-- Slider Item 2 -->
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-04">
<div class="container text-center">
<div class="position-middle">
<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-4 fw-normal uppercase letter-spacing-2">Mono Studio 2</h1>
<p class="font-large fw-light text-white-07 mt-3">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
<a class="button button-xl button-rounded button-white-2 mt-4 mt-lg-5" href="#">View More</a>
</div>
</div><!-- end row -->
</div><!-- end position-middle -->
</div><!-- end container -->
</div>
</div>
<!-- Slider Item 3 -->
<div class="section-fullscreen bg-image" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-04">
<div class="container text-center">
<div class="position-middle">
<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-4 fw-normal uppercase letter-spacing-2">Mono Studio 2</h1>
<p class="font-large fw-light text-white-07 mt-3">Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.</p>
<a class="button button-xl button-rounded button-white-2 mt-4 mt-lg-5" href="#">View More</a>
</div>
</div><!-- end row -->
</div><!-- end position-middle -->
</div><!-- end container -->
</div>
</div>
</div><!-- end owl-carousel -->
<!-- end Hero section -->
<!-- About section -->
<div class="section-lg bg-dark">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 text-center">
<h2 class="fw-light m-0">We truly believe that great things in business are never done by one person. They're done by a team of people.</h2>
</div>
</div><!-- end row(1) -->
<div class="row g-4 mt-5 text-center">
<!-- 1 -->
<div class="col-12 col-md-4">
<img src="../assets/images/col-2.jpg" alt="">
<div class="mt-4">
<h4 class="fw-normal">Photography</h4>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
<a class="button-text-1 mt-4" href="#">Learn More</a>
</div>
</div>
<!-- 2 -->
<div class="col-12 col-md-4">
<img src="../assets/images/col-2.jpg" alt="">
<div class="mt-4">
<h4 class="fw-normal">Recording</h4>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
<a class="button-text-1 mt-4" href="#">Learn More</a>
</div>
</div>
<!-- 3 -->
<div class="col-12 col-md-4">
<img src="../assets/images/col-2.jpg" alt="">
<div class="mt-4">
<h4 class="fw-normal">Videography</h4>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
<a class="button-text-1 mt-4" href="#">Learn More</a>
</div>
</div>
</div><!-- end row(2) -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Portfolio section -->
<div class="section-lg">
<div class="container">
<!-- Portfolio filter -->
<div class="filter filter-style-3 mb-5 text-center">
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".category-1">First</li>
<li data-filter=".category-2">Second</li>
<li data-filter=".category-3">Third</li>
</ul>
</div>
<!-- end Portfolio filter -->
<div class="portfolio-masonry column-2 spacing-2 hover-style-1">
<!-- Portfolio box 1 -->
<div class="portfolio-item category-1">
<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>
<span class="mb-2">Category</span>
<h3 class="fw-normal m-0">Project Title</h3>
</div>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="portfolio-item category-2">
<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>
<span class="mb-2">Category</span>
<h3 class="fw-normal m-0">Project Title</h3>
</div>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="portfolio-item category-3">
<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>
<span class="mb-2">Category</span>
<h3 class="fw-normal m-0">Project Title</h3>
</div>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="portfolio-item category-1">
<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>
<span class="mb-2">Category</span>
<h3 class="fw-normal m-0">Project Title</h3>
</div>
</div>
</div>
</div>
<!-- end Portfolio box 4 -->
</div><!-- end portfolio-masonry-->
</div><!-- end container -->
</div>
<!-- end Portfolio section -->
<!-- Parallax section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple icon-xl button-hover-scale lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8">
<i class="bi bi-play"></i>
</a>
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end Parallax section -->
<!-- Clients section -->
<div class="section-sm bg-dark">
<div class="container">
<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><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Contact section -->
<div class="section-lg">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-5 col-xl-4 icon-4xl">
<div>
<h6 class="fw-medium m-0">Email:</h6>
<p>contact@email.com</p>
</div>
<div class="mt-3">
<h6 class="fw-medium m-0">Phone:</h6>
<p>+(987) 654 321 01</p>
</div>
<div class="mt-3">
<h6 class="fw-medium m-0">Skype:</h6>
<p>contact.skype</p>
</div>
<div class="mt-3">
<h6 class="fw-medium m-0">Address:</h6>
<p>121 King St, Melbourne VIC 3000</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-7 col-xl-8 text-lg-end">
<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 section -->
<!-- Google Maps -->
<div id="map1" class="gmap gmap-lg" data-latitude="51.513569" data-longitude="-0.123443"></div>
<!-- end Google Maps -->
<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,489 @@
<!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 - Travel</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 transparent-light header-color-dark 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-04 section-divider-curve-bottom">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-7">
<h1 class="display-4 fw-bold">Travel Agency</h1>
<p class="text-white-08">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
<a class="button button-lg button-radius button-outline-white-2 mt-4" href="#">Learn More</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<!-- end Hero section -->
<!-- Features section -->
<div class="container">
<div class="bg-white p-4 p-lg-5 border-radius-1 box-shadow n-margin-5">
<div class="row g-4 icon-4xl">
<div class="col-12 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-3 text-color-theme">
<i class="fas fa-user-circle"></i>
</div>
<div class="d-inline-block">
<h5 class="fw-normal">Experienced Guides</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-3 text-color-theme">
<i class="fas fa-umbrella"></i>
</div>
<div class="d-inline-block">
<h5 class="fw-normal">Travel Insurance</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="d-flex">
<div class="d-inline-block me-3 text-color-theme">
<i class="fas fa-dollar-sign"></i>
</div>
<div class="d-inline-block">
<h5 class="fw-normal">Reasonable Price</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa.</p>
</div>
</div>
</div>
</div><!-- end row -->
</div>
</div><!-- end container -->
<!-- end Features section -->
<!-- Destination/Portfolio section -->
<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">
<h6 class="font-small fw-normal uppercase">Choose your</h6>
<h2>Travel Destination</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><!-- end row(1) -->
<div class="row portfolio-grid g-2 hover-style-2 mt-5">
<!-- Portfolio box 1 -->
<div class="col-12 col-md-6 col-xl-4 portfolio-item category-1">
<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>
<span class="font-small">Category</span>
<h5 class="fw-normal">Destination</h5>
</div>
<i class="bi bi-arrow-right"></i>
</div>
</div>
</div>
<!-- Portfolio box 2 -->
<div class="col-12 col-md-6 col-xl-4 portfolio-item category-2">
<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>
<span class="font-small">Category</span>
<h5 class="fw-normal">Destination</h5>
</div>
<i class="bi bi-arrow-right"></i>
</div>
</div>
</div>
<!-- Portfolio box 3 -->
<div class="col-12 col-md-6 col-xl-4 portfolio-item category-3">
<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>
<span class="font-small">Category</span>
<h5 class="fw-normal">Destination</h5>
</div>
<i class="bi bi-arrow-right"></i>
</div>
</div>
</div>
<!-- Portfolio box 4 -->
<div class="col-12 col-md-6 col-xl-4 portfolio-item category-1">
<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>
<span class="font-small">Category</span>
<h5 class="fw-normal">Destination</h5>
</div>
<i class="bi bi-arrow-right"></i>
</div>
</div>
</div>
<!-- Portfolio box 5 -->
<div class="col-12 col-md-6 col-xl-4 portfolio-item category-2">
<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>
<span class="font-small">Category</span>
<h5 class="fw-normal">Destination</h5>
</div>
<i class="bi bi-arrow-right"></i>
</div>
</div>
</div>
<!-- Portfolio box 6 -->
<div class="col-12 col-md-6 col-xl-4 portfolio-item category-3">
<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>
<span class="font-small">Category</span>
<h5 class="fw-normal">Destination</h5>
</div>
<i class="bi bi-arrow-right"></i>
</div>
</div>
</div>
</div><!-- end row(2)/portfolio-grid -->
</div><!-- end container -->
</div>
<!-- end Destination/Portfolio section -->
<!-- Facts section -->
<div class="section-xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container text-center">
<div class="row g-4">
<!-- Facts box 1 -->
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="display-4 fw-thin"><span class="counter">100</span>+</h1>
<h6 class="font-small fw-normal uppercase">Available Destinations</h6>
<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
</div>
<!-- Facts box 2 -->
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="display-4 fw-thin counter">72</h1>
<h6 class="font-small fw-normal uppercase">Tour Guides</h6>
<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
</div>
<!-- Facts box 3 -->
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="display-4 fw-thin counter">185</h1>
<h6 class="font-small fw-normal uppercase">Recommended Hotels</h6>
<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
</div>
<!-- Facts box 4 -->
<div class="col-12 col-sm-6 col-lg-3">
<h1 class="display-4 fw-thin counter">1000</h1>
<h6 class="font-small fw-normal uppercase">Happy Customers</h6>
<p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Facts section -->
<!-- Packages section -->
<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">
<h6 class="font-small fw-normal uppercase">Our Most</h6>
<h2>Popular Packages</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><!-- end row(1) -->
<div class="owl-carousel mt-5" data-owl-margin="10" data-owl-xs="1" data-owl-sm="2" data-owl-md="2" data-owl-lg="3" data-owl-xl="3">
<!-- Slide box 1 -->
<div class="border">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top border-radius">
<span class="fw-bold">$2000</span>
</div>
</a>
</div>
<div class="p-4">
<h5 class="fw-normal m-0">Paris</h5>
<p>5 days, 6 nights</p>
<a class="button button-sm button-radius button-theme mt-3" href="#">Book Now</a>
</div>
</div>
<!-- Slide box 2 -->
<div class="border">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top border-radius">
<span class="fw-bold">$4000</span>
</div>
</a>
</div>
<div class="p-4">
<h5 class="fw-normal m-0">Dubai</h5>
<p>8 days, 9 nights</p>
<a class="button button-sm button-radius button-theme mt-3" href="#">Book Now</a>
</div>
</div>
<!-- Slide box 3 -->
<div class="border">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top border-radius">
<span class="fw-bold">$1000</span>
</div>
</a>
</div>
<div class="p-4">
<h5 class="fw-normal m-0">Bali</h5>
<p>6 days, 7 nights</p>
<a class="button button-sm button-radius button-theme mt-3" href="#">Book Now</a>
</div>
</div>
<!-- Slide box 4 -->
<div class="border">
<div class="hoverbox-6">
<a href="#">
<img src="../assets/images/col-2.jpg" alt="">
<div class="content top border-radius">
<span class="fw-bold">$2500</span>
</div>
</a>
</div>
<div class="p-4">
<h5 class="fw-normal m-0">Egypt</h5>
<p>7 days, 8 nights</p>
<a class="button button-sm button-radius button-theme mt-3" href="#">Book Now</a>
</div>
</div>
<!-- end Slide box 4 -->
</div>
</div><!-- end container -->
</div>
<!-- end Packages 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">
<h2>Do you have any questions?</h2>
<a class="button button-xl button-rounded button-white-2 mt-4" href="#">Contact Us</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax 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-theme" 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,404 @@
<!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 - Web App Landing</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 header-color-dark 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>
<!-- Fullscreen Menu Toggle -->
<button class="fm-toggle">
<span class="lines"></span>
</button>
</div><!-- end container -->
</div>
<!-- Fullscreen Menu -->
<div class="fullscreen-menu bg-black"><!-- Add your background class here -->
<div class="fm-wrapper">
<div class="position-top">
<ul class="list-unstyled uppercase">
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">Home</a></h2>
</li>
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">About</a></h2>
</li>
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">Portfolio</a></h2>
</li>
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">Blog</a></h2>
</li>
<li>
<h2 class="letter-spacing-1"><a class="text-link-2" href="#">Shop</a></h2>
</li>
</ul>
</div>
<div class="position-bottom">
<ul class="list-inline-sm">
<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>
<li><a class="button-circle button-circle-sm button-circle-white-2" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
<p class="mt-3">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<!-- Close button -->
<button class="fm-close">
<span></span>
</button>
</div><!-- end fm-wrapper -->
</div><!-- end fullscreen-menu -->
<!-- Hero section -->
<div class="section-xl bg-gradient-3 section-divider-wavesOpacity-bottom">
<div class="container text-center">
<div class="row">
<div class="col-12">
<h1 class="display-4 fw-normal mb-3">Showcase your app with Mono</h1>
<a class="button button-lg button-rounded button-outline-white mt-4 me-3" href="#first"><i class="fab fa-apple"></i>App Store</a>
<a class="button button-lg button-rounded button-white-2 mt-4" href="#first"><i class="fab fa-android"></i>Play Store</a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Hero section -->
<!-- section -->
<div id="first" class="section-lg">
<div class="container text-center">
<div class="mb-5">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="fw-medium display-6">Creative Multipurpose Template</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>
</div>
</div>
</div>
<img src="../assets/images/col-1.jpg" alt="">
</div><!-- end container -->
</div>
<!-- end section -->
<!-- Parallax 1 section -->
<div class="section-xl bg-gradient-5 section-divider-wavesOpacity-top">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1">
<div class="row align-items-center">
<div class="col-12 col-lg-8 text-center text-lg-start">
<h1 class="fw-medium display-6">Lightbox Video Player</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 class="col-12 col-lg-4 text-center text-lg-end">
<a class="button-circle button-circle-xl button-circle-white-2 button-circle-ripple lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="fas fa-play"></i></a>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Parallax 1 section -->
<!-- App Screenshots section -->
<div class="section-lg">
<div class="container">
<div class="owl-carousel" data-owl-nav="true" data-owl-margin="20" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="4" data-owl-xl="4">
<!-- Slider Item 1 -->
<div>
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<!-- Slider Item 2 -->
<div>
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<!-- Slider Item 3 -->
<div>
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<!-- Slider Item 4 -->
<div>
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
<!-- Slider Item 5 -->
<div>
<img src="../assets/images/col-2-tall.jpg" alt="">
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end App Screenshots section -->
<!-- Parallax 2 section -->
<div class="section-xl bg-gradient-4">
<div class="container">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1">
<div class="row align-items-center">
<div class="col-12 col-lg-8 text-center text-lg-start">
<h1 class="fw-medium display-6">Made by Professionals</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 class="col-12 col-lg-4 text-center text-lg-end">
<a class="button button-xl button-radius button-outline-white-2" href="#">Buy Now</a>
</div>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Parallax 2 section -->
<!-- Features section -->
<div class="section-lg">
<div class="container">
<div class="row align-items-center g-4">
<div class="col-12 col-md-4 order-md-2 text-center">
<img src="../assets/images/phone.jpg" alt="">
</div>
<div class="col-12 col-md-4 order-md-1 text-md-end">
<!-- Icon text box 1 -->
<div class="mb-4 icon-4xl">
<i class="bi bi-globe text-dark"></i>
<h5 class="fw-medium mt-2">Heading</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="icon-4xl">
<i class="bi bi-globe text-dark"></i>
<h5 class="fw-medium mt-2">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
<div class="col-12 col-md-4 order-md-3">
<!-- Icon text box 3 -->
<div class="mb-4 icon-4xl">
<i class="bi bi-globe text-dark"></i>
<h5 class="fw-medium mt-2">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Icon text box 4 -->
<div class="icon-4xl">
<i class="bi bi-globe text-dark"></i>
<h5 class="fw-medium mt-2">Heading</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Features section -->
<!-- Testimonial section -->
<div class="section-xl bg-gradient-3">
<div class="container">
<div class="owl-carousel" data-owl-dots="false" 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 border-radius-1 p-4 p-lg-5">
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="d-inline-block">
<h5 class="fw-normal line-height-140 m-0">Emiley Haley</h5>
<span class="font-small fw-normal text-white-09">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. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
</div>
<!-- Testimonial box 2 -->
<div class="bg-dark-03 border-radius-1 p-4 p-lg-5">
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="d-inline-block">
<h5 class="fw-normal line-height-140 m-0">Robert Vincent</h5>
<span class="font-small fw-normal text-white-09">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="bg-dark-03 border-radius-1 p-4 p-lg-5">
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="d-inline-block">
<h5 class="fw-normal line-height-140 m-0">Andrew Palmer</h5>
<span class="font-small fw-normal text-white-09">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. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
</div>
<!-- Testimonial box 4 -->
<div class="bg-dark-03 border-radius-1 p-4 p-lg-5">
<div class="d-flex align-items-center justify-content-between mb-3">
<div class="d-inline-block">
<h5 class="fw-normal line-height-140 m-0">Rodney Scott</h5>
<span class="font-small fw-normal text-white-09">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 -->
<!-- Prices section -->
<div class="section bg-gray-lightest">
<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">
<h2 class="fw-medium display-6">Prices We Offer</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Integer tincidunt.</p>
</div>
</div>
<div class="row g-4 text-center mt-4">
<!-- Price box 1 -->
<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">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-5 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">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-5 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">
<h6 class="font-small fw-medium uppercase letter-spacing-1">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-5 button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Prices 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,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>

Some files were not shown because too many files have changed in this diff Show More