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

536 lines
22 KiB
HTML

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