442 lines
17 KiB
HTML
442 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<meta name="keywords" content="">
|
|
<title>Mono - Business 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>© 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> |