?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Author -->
<meta name="author" content="Themes Industry">
<!-- description -->
<meta name="description" content="MegaOne is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose studio and portfolio HTML5 template with 8 ready home page demos.">
<!-- keywords -->
<meta name="keywords" content="Creative, modern, clean, bootstrap responsive, html5, css3, portfolio, blog, studio, templates, multipurpose, one page, corporate, start-up, studio, branding, designer, freelancer, carousel, parallax, photography, studio, masonry, grid, faq">
<!-- Page Title -->
<title>Personal | MegaOne HTML5 Template</title>
<!-- Favicon -->
<link href="personal/img/favicon.ico" rel="icon">
<!-- Bundle -->
<link href="vendor/css/bundle.min.css" rel="stylesheet">
<!-- Plugin Css -->
<link href="vendor/css/LineIcons.min.css" rel="stylesheet">
<link href="vendor/css/revolution-settings.min.css" rel="stylesheet">
<link href="vendor/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="vendor/css/owl.carousel.min.css" rel="stylesheet">
<link href="vendor/css/swiper.min.css" rel="stylesheet">
<link href="vendor/css/cubeportfolio.min.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="personal/css/page-animation.css" rel="stylesheet">
<link href="personal/css/style.css" rel="stylesheet">
</head>
<body class="signle-layout">
<!-- Preloader -->
<div class="preloader">
<div class="centrize full-width">
<div class="vertical-center">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
</div>
<!-- Preloader End -->
<!-- Header -->
<header class="header-left">
<!--Logo-->
<a class="logo" href="index-personal.html">
<h1 class="logo-text"><img src="personal/img/logo.png" alt="logo"></h1>
</a>
<!--Hamburger-->
<a href="javascript:void(0)" class="sidemenu_btn" id="sidemenu_toggle">
<span></span>
<span></span>
<span></span>
</a>
<!-- Navigation & Social buttons -->
<div class="site-nav">
<!-- Main menu -->
<ul class="site-main-menu alt-font" id="nav">
<li><!-- href value = data-id without # of .pt-page. Data-goto is the number of section -->
<a class="pt-trigger" data-animation="58" data-goto="1" href="#home">
<i class="lni-home"></i>
<span>Home</span>
</a>
</li>
<li>
<a class="pt-trigger" data-animation="59" data-goto="2" href="#about">
<i class="lni-user"></i>
<span>About</span>
</a>
</li>
<li>
<a class="pt-trigger" data-animation="61" data-goto="3" href="#services">
<i class="lni-first-aid"></i>
<span>Services</span></a>
</li>
<li>
<a class="pt-trigger" data-animation="59" data-goto="4" href="#portfolio">
<i class="lni-gallery"></i>
<span>Portfolio</span>
</a>
</li>
<li>
<a class="pt-trigger" data-animation="58" data-goto="5" href="#clients">
<i class="lni-emoji-smile"></i>
<span>Client</span>
</a>
</li>
<li>
<a class="pt-trigger" data-animation="61" data-goto="6" href="#contact">
<i class="lni-licencse"></i>
<span>Contact</span>
</a>
</li>
</ul>
<!-- /Main menu -->
</div>
</header>
<!-- Header End -->
<!-- Site Main -->
<div class="main-left" id="main">
<!-- Page changer wrapper -->
<div class="pt-wrapper">
<!-- Subpages -->
<div class="subpages">
<!-- Home -->
<section id="home" class="pt-page pt-page-1" data-id="home">
<div class="container slider-container">
<div class="row align-items-lg-center">
<!-- Image Area -->
<div class="col-lg-7 order-lg-2">
<div class="slider-image">
<img src="personal/img/girl.png" alt="girl">
</div>
</div>
<!-- Text Area -->
<div class="col-lg-5 wow fadeInRight">
<!-- Box Area -->
<div class="heading-box">
<h2>Walker<span class="main-color">son</span> Hardin</h2>
<p>There are many variations of passages of Lorem Ipsum is at the available,
but the majority have <span class="main-color">suffered</span> alteration some form,
by injected humour randomised words at the available.</p>
<a href="javascript:void(0);" data-text="Read More" class="btn btn-link">Read More</a>
</div>
</div>
</div>
<!-- Shapes -->
<span class="shape-square"></span>
<span class="shape-triangle"></span>
<span class="shape-plus"></span>
<span class="shape-circle"></span>
</div>
</section>
<!-- About -->
<section id="about" class="pt-page pt-page-2" data-id="about">
<div class="container">
<div class="row align-items-lg-center dot-box">
<!-- Heading Area-->
<div class="col-lg-6 order-lg-2">
<div class="heading-area pl-lg-4 p-0">
<h6 class="sub-title main-color">Basic info about componay</h6>
<h2 class="title">Digital Creator & Strategists</h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
<br><br>
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden the middle.</p>
</div>
</div>
<!-- Features Box-->
<div class="col-lg-6">
<div class="row d-flex align-items-lg-center">
<div class="col-md-6 order-lg-2 p-0">
<!-- Feature Item -->
<div class="feature-item">
<i class="lni-bitbucket f-icon"></i>
<h5 class="title">Development</h5>
<p>Simply dummy text of the print and typesetting industry lorem Ipsum has been standard.</p>
<a href="javascript:void(0);" class="lni-arrow-right r-icon"></a>
</div>
<!-- Feature Item -->
<div class="feature-item">
<i class="lni-cart-full f-icon"></i>
<h5 class="title">App Design</h5>
<p>Simply dummy text of the print and typesetting industry lorem Ipsum has been standard.</p>
<a href="javascript:void(0);" class="lni-arrow-right r-icon"></a>
</div>
</div>
<div class="col-md-6 p-0">
<!-- Feature Item -->
<div class="feature-item">
<i class="lni-graduation f-icon"></i>
<h5 class="title">UI / UX Design</h5>
<p>Simply dummy text of the print and typesetting industry lorem Ipsum has been standard.</p>
<a href="javascript:void(0);" class="lni-arrow-right r-icon"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section id="services" class="pt-page pt-page-3" data-id="services">
<div class="container">
<div class="row align-items-lg-center">
<!-- Features Box-->
<div class="col-lg-5 pr-lg-5">
<div class="heading-area">
<h6 class="sub-title main-color">45+ Year Of Experience</h6>
<h2 class="title">Our Services & Skills</h2>
</div>
<!-- Progress Bar -->
<ul class="services-skill text-left">
<!--Progress Item-->
<li class="progress-item">
<h6>Development<span class="float-right"><b class="count">80</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h6>Development<span class="float-right"><b class="count">80</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h6>Web Design<span class="float-right"><b class="count">75</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h6>UI / UX Design<span class="float-right"><b class="count">75</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
</ul>
<!--Counters Area-->
<div class="counter-area">
<!-- Counter Item-->
<div class="counters">
<i class="lni-apartment c-icon"></i>
<!-- Content -->
<div class="content">
<h4 class="m-0"><span class="count">35</span>M</h4>
<p>Customer</p>
</div>
</div>
<!-- Counter Item-->
<div class="counters">
<i class="lni-calculator c-icon"></i>
<!-- Content -->
<div class="content">
<h4 class="m-0"><span class="count">70</span>K</h4>
<p>Projects</p>
</div>
</div>
</div>
</div>
<!-- Heading Area-->
<div class="col-lg-7">
<div class="services-about">
<img class="service-image" src="personal/img/service-image.jpg" alt="image">
<div class="content">
<p>Any desktop publishing packages and web page is a editors now use Lorem Ipsum as their default model text, and a search for their infancy.
<br><br>
any desktop publishing packages and web page editors now use.</p>
<h5 class="mb-1">Harry Watson</h5>
<span>CEO, Abacus Studio</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<section id="portfolio" class="pt-page pt-page-4" data-id="portfolio">
<div class="container">
<div class="row align-items-lg-center">
<!-- Portfolio Box-->
<div class="col-lg-12">
<!--Portfolio Items-->
<div id="js-grid-mosaic-flat" class="cbp cbp-l-grid-mosaic-flat">
<!-- Item -->
<div class="cbp-item">
<a href="personal/img/port-1.jpg" class="cbp-caption cbp-lightbox">
<div class="cbp-caption-defaultWrap">
<img src="personal/img/port-1.jpg" alt="port-1">
</div>
<div class="cbp-caption-activeWrap">
<i class="lni-arrow-right p-icon"></i>
<div class="port-content">
<p class="mb-1 main-color">Elegent | Images</p>
<h5>Latest Work</h5>
</div>
</div>
</a>
</div>
<!-- Item -->
<div class="cbp-item">
<a href="personal/img/port-2.jpg" class="cbp-caption cbp-lightbox">
<div class="cbp-caption-defaultWrap">
<img src="personal/img/port-2.jpg" alt="port-1">
</div>
<div class="cbp-caption-activeWrap">
<i class="lni-arrow-right p-icon"></i>
<div class="port-content">
<p class="mb-1 main-color">Elegent | Images</p>
<h5>Latest Work</h5>
</div>
</div>
</a>
</div>
<!-- Item -->
<div class="cbp-item">
<a href="personal/img/port-3.jpg" class="cbp-caption cbp-lightbox">
<div class="cbp-caption-defaultWrap">
<img src="personal/img/port-3.jpg" alt="port-1">
</div>
<div class="cbp-caption-activeWrap">
<i class="lni-arrow-right p-icon"></i>
<div class="port-content">
<p class="mb-1 main-color">Elegent | Images</p>
<h5>Latest Work</h5>
</div>
</div>
</a>
</div>
<!-- Item -->
<div class="cbp-item">
<a href="personal/img/port-4.jpg" class="cbp-caption cbp-lightbox">
<div class="cbp-caption-defaultWrap">
<img src="personal/img/port-4.jpg" alt="port-1">
</div>
<div class="cbp-caption-activeWrap">
<i class="lni-arrow-right p-icon"></i>
<div class="port-content">
<p class="mb-1 main-color">Elegent | Images</p>
<h5>Latest Work</h5>
</div>
</div>
</a>
</div>
<!-- Item -->
<div class="cbp-item">
<a href="personal/img/port-5.jpg" class="cbp-caption cbp-lightbox">
<div class="cbp-caption-defaultWrap">
<img src="personal/img/port-5.jpg" alt="port-1">
</div>
<div class="cbp-caption-activeWrap">
<i class="lni-arrow-right p-icon"></i>
<div class="port-content">
<p class="mb-1 main-color">Elegent | Images</p>
<h5>Latest Work</h5>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Clients -->
<section id="clients" class="pt-page pt-page-5" data-id="clients">
<div class="container">
<div class="row d-flex align-content-lg-center min-height-100vh">
<!-- Features Box-->
<div class="col-lg-4 pr-lg-5 p-0">
<div class="heading-area">
<h6 class="sub-title main-color">What Client Says About us</h6>
<h2 class="title">Our Clients & Reviews</h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available, but the majority.</p>
</div>
<div id="client-nav"></div>
</div>
<!-- Client Area-->
<div class="col-lg-8">
<div id="owl-client" class="owl-carousel owl-theme">
<!--Items-->
<div class="client-box">
<i class="lni-quotation q-icon"></i>
<p>There are many variations of passages of Lorem Ipsum availa ble, but the majority There are many variations of passages of Lorem Ipsum availa ble.</p>
<div class="client-img">
<img src="personal/img/avatar-1.png" alt="client">
</div>
<h5 class="client-name mb-0">Harley Klien</h5>
<span class="client-designation">CEO, Abacus Inc</span>
</div>
<!--Items-->
<div class="client-box">
<i class="lni-quotation q-icon"></i>
<p>There are many variations of passages of Lorem Ipsum availa ble, but the majority There are many variations of passages of Lorem Ipsum availa ble.</p>
<div class="client-img">
<img src="personal/img/avatar-2.png" alt="client">
</div>
<h5 class="client-name mb-0">David Jhon</h5>
<span class="client-designation">Marketing Lead</span>
</div>
<!--Items-->
<div class="client-box">
<i class="lni-quotation q-icon"></i>
<p>There are many variations of passages of Lorem Ipsum availa ble, but the majority There are many variations of passages of Lorem Ipsum availa ble.</p>
<div class="client-img">
<img src="personal/img/avatar-3.png" alt="client">
</div>
<h5 class="client-name mb-0">Jhon Walkin</h5>
<span class="client-designation">General Manager</span>
</div>
</div>
</div>
<!--Partner Slider-->
<div class="owl-carousel partners-slider">
<div class="logo-item"> <img alt="client-logo" src="personal/img/client-1.png"></div>
<div class="logo-item"> <img alt="client-logo" src="personal/img/client-2.png"></div>
<div class="logo-item"> <img alt="client-logo" src="personal/img/client-3.png"></div>
<div class="logo-item"> <img alt="client-logo" src="personal/img/client-4.png"></div>
</div>
</div>
</div>
</section>
<!-- Contacts -->
<section id="contact" class="pt-page pt-page-6" data-id="contact">
<div class="container">
<div class="row align-items-lg-center">
<!--Form area-->
<div class="col-lg-6 pr-lg-5">
<div class="heading-area">
<h6 class="sub-title main-color">Have any Question ?</h6>
<h2 class="title">Let's Get In Touch</h2>
</div>
<!--Contact Form-->
<form class="contact-form" id="contact-form-data">
<div class="row">
<div class="col-sm-12" id="result"></div>
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="text" placeholder="Name" required="" id="your_name" name="userName">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input class="form-control" type="email" placeholder="Email" required="" id="your_email" name="userEmail">
</div>
</div>
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Subject" required="" id="your_subject" name="userSubject">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message" id="message" name="userMessage"></textarea>
</div>
<!--Button-->
<a href="javascript:void(0);" id="submit_btn" class="btn btn-large btn-rounded btn-green d-block mt-4 contact_btn"><i class="fa fa-spinner fa-spin mr-2 d-none" aria-hidden="true"></i>Send Message</a>
</form>
<!-- Address -->
<ul class="address-item">
<!--item-->
<li class="w-100 mb-4">
<i class="lni-apartment main-color"></i>
<div class="content">
<h6 class="main-color m-0">Address</h6>
<p>Come visit us: 123 New Street, Our City , Australia.</p>
</div>
</li>
<!--item-->
<li class="pr-2">
<i class="lni-comment-reply main-color"></i>
<div class="content">
<h6 class="main-color m-0">Email:</h6>
<p><a href="mailto:email@website.co">email@website.com</a></p>
</div>
</li>
<!--item-->
<li>
<i class="lni-phone-handset main-color"></i>
<div class="content">
<h6 class="main-color m-0">Address</h6>
<p><a href="tel:002343474383">002 343474383</a></p>
</div>
</li>
</ul>
</div>
<!--map area-->
<div class="col-lg-6">
<div class="map-half bg-map" id="map"></div>
</div>
</div>
</div>
</section>
</div>
<!-- End of Home Subpage -->
</div>
</div>
<!-- Site Main End -->
<!-- JavaScript -->
<script src="vendor/js/bundle.min.js"></script>
<!-- Plugin Js -->
<script src="vendor/js/jquery.appear.js"></script>
<script src="vendor/js/jquery.fancybox.min.js"></script>
<script src="vendor/js/owl.carousel.min.js"></script>
<script src="vendor/js/TweenMax.min.js"></script>
<script src="vendor/js/jquery.cubeportfolio.min.js"></script>
<!-- REVOLUTION JS FILES -->
<script src="vendor/js/jquery.themepunch.tools.min.js"></script>
<script src="vendor/js/jquery.themepunch.revolution.min.js"></script>
<!-- SLIDER REVOLUTION EXTENSIONS -->
<script src="vendor/js/extensions/revolution.extension.actions.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.carousel.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.kenburn.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.layeranimation.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.migration.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.navigation.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.parallax.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.slideanims.min.js"></script>
<script src="vendor/js/extensions/revolution.extension.video.min.js"></script>
<!-- google map -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJRG4KqGVNvAPY4UcVDLcLNXMXk2ktNfY"></script>
<script src="personal/js/map.js"></script>
<!-- custom script -->
<script src="personal/js/page-transition.js"></script>
<script src="vendor/js/contact_us.js"></script>
<script src="personal/js/script.js"></script>
</body>
</html>