287 lines
12 KiB
HTML
287 lines
12 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 - 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">© 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> |