Add Mono theme
This commit is contained in:
kbe
430
docs/Mono v10.0.1 HTML5/Mono v10.0.1/1. Home Pages/resume-1.html
Normal file
430
docs/Mono v10.0.1 HTML5/Mono v10.0.1/1. Home Pages/resume-1.html
Normal 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>© 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>
|
||||
Reference in New Issue
Block a user