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/freelancer.html
2025-08-18 16:50:55 +02:00

504 lines
20 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 - 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>