?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content ="width=device-width, initial-social=1">
<!-- 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 ready home page demos.">
<!-- Page Title -->
<title>Cycling | MegaOne HTML5 Template</title>
<!-- Bundle -->
<link href="vendor/css/bundle.min.css" rel="stylesheet">
<!-- Plugin Css -->
<link href="vendor/css/LineIcons.min.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/css/owl.carousel.min.css">
<link href="vendor/css/jquery.fancybox.min.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/css/wow.css">
<link rel="stylesheet" href="vendor/css/cubeportfolio.min.css">
<link rel="stylesheet" href="vendor/css/LineIcons.min.css">
<!-- Style Sheet -->
<link href="cycling/css/style.css" rel="stylesheet">
<link href="cycling/css/custom.css" rel="stylesheet">
<link href="cycling/css/line-awesome.min.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target="#megaone" data-offset="90">
<!-- Start Loader -->
<div class="preloader">
<div class="center">
<div class="loader loader-32">
<div class='loader-container'>
<!-- First Ball -->
<div class='ball-wrapper'>
<div class='ball-holder'>
<div class='ball'></div>
</div>
<div class='shadow'></div>
</div>
<!-- Second Ball -->
<div class='ball-wrapper'>
<div class='ball-holder'>
<div class='ball'></div>
</div>
<div class='shadow'></div>
</div>
<!-- Third Ball -->
<div class='ball-wrapper'>
<div class='ball-holder'>
<div class='ball'></div>
</div>
<div class='shadow'></div>
</div>
</div>
</div>
</div>
</div>
<!-- End Loader -->
<!-- Header start -->
<header id="home">
<!--Navigation-->
<nav class="navbar navbar-top-default navbar-expand-lg navbar-simple nav-line">
<div class="container">
<a href="#home" title="Logo" class="logo scroll">
<!--Logo Default-->
<img src="cycling/images/logoo.png" alt="logo" class=" m-0 logo-img">
<img src="cycling/images/logo.png" alt="logo" class=" m-0 logo-dark">
</a>
<!--Nav Links-->
<div class="collapse navbar-collapse" id="megaone">
<div class="navbar-nav ml-auto">
<a class="nav-link scroll line" href="#home">Home</a>
<a class="nav-link scroll line" href="#about">About Us</a>
<a class="nav-link scroll line" href="#portfolio-section">Gallery</a>
<a class="nav-link scroll line" href="#review">Reviews</a>
<a href="#contact" class="btn btn-medium btn-rounded btn-orange nav-button">Get In Touch</a>
</div>
</div>
</div>
<a href="javascript:void(0)" class="sidemenu_btn" id="sidemenu_toggle">
<span></span>
<span></span>
<span></span>
</a>
<!--Side Menu Button-->
</nav>
<!--Side Nav-->
<div class="side-menu hidden">
<div class="inner-wrapper">
<span class="btn-close" id="btn_sideNavClose"><i></i><i></i></span>
<nav class="side-nav w-100">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link scroll" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#portfolio-section">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#review">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#contact">Get In Touch</a>
</li>
</ul>
</nav>
<div class="side-footer w-100">
<ul class="social-icons-simple">
<li><a class="facebook-text-hvr" href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="twitter-text-hvr" href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
<li><a class="linkedin-text-hvr" href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
<li><a class="instagram-text-hvr" href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
</ul>
<p class="">© 2021 MegaOne. Made With Love by <span class="d-inline d-lg-block"> ThemesIndustry</span></p>
</div>
</div>
</div>
<a id="close_side_menu" href="javascript:void(0);"></a>
</header>
<!-- Header end -->
<!-- banner start -->
<section class="banner-see bg-banner" id="banner">
<div class="container">
<div class="row height">
<div class="col-lg-6 d-flex align-items-center">
<div class="banner-div">
<h3 class="banner-text">
Proin gravida nibh vel velit.
</h3>
<h1 class="banner-heading">
Cycling Lovers
</h1>
<p class="banner-des">
This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
</p>
<a data-fancybox="media" href="https://www.youtube.com/watch?v=vVXnYdHwDqM" class="scroll button"><i class="las la-play"></i>Play Video</a>
</div>
</div>
</div>
</div>
</section>
<!-- banner end -->
<!-- about start -->
<section class="about bg-blue" id="about">
<div class="container">
<!--Heading-->
<div class="row">
<div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<div class="heading-area d-inline-block">
<h6 class="sub-title alt-font text-sec">Information about us</h6>
<h2 class="title main-font text-main my-4">Cycling Benefits</h2>
</div>
</div>
</div>
<!-- App Detail -->
<div class="row align-items-center">
<!-- Services 1,2,3 -->
<div class="col-lg-4 mb-5 mb-lg-0 wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s">
<!-- Item -->
<div class="row app-feature">
<div class="col-12 col-lg-2 p-lg-0">
<i class="las la-thumbs-up"></i>
</div>
<div class="col-12 col-lg-10 p-lg-0">
<h4 class="mb-3">Stay Healthy</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim viverra ultrices.</p>
</div>
</div>
<!-- Item -->
<div class="row app-feature">
<div class="col-12 col-lg-2 p-lg-0">
<i class="las la-trophy"></i>
</div>
<div class="col-12 col-lg-10 p-lg-0">
<h4 class="mb-3">Builds Muscle</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim viverra ultrices.</p>
</div>
</div>
</div>
<!-- App Slier -->
<div class="col-lg-4 mb-5 mb-lg-0 wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">
<!-- App Image -->
<div class="app-image">
<img src="cycling/images/about-img.png" alt="image">
</div>
</div>
<!-- Services 4,5,6 -->
<div class="col-lg-4 wow fadeInRight" data-wow-duration="1s" data-wow-delay=".5s">
<!-- Item -->
<div class="row app-feature">
<div class="col-12 col-lg-2 p-lg-0">
<i class="las la-user-tie"></i>
</div>
<div class="col-12 col-lg-10 p-lg-0">
<h4 class="mb-3">Strengthen Immune System</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim viverra ultrices.</p>
</div>
</div>
<!-- Item -->
<div class="row app-feature">
<div class="col-12 col-lg-2 p-lg-0">
<i class="lni lni-heart"></i>
</div>
<div class="col-12 col-lg-10 p-lg-0">
<h4 class="mb-3">Cuts Heart Diseases</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim viverra ultrices.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- about end -->
<!-- about-feature start -->
<section class="about-feature bg-orange">
<div class="container">
<div class="row">
<div class=" col-sm-12 col-md-12 col-lg-6 img-sec wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s">
<div class="about_img margin_aboutimg">
<img src="cycling/images/about-img-2.png" alt="about">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6">
<div class="about-heading">
<p class="colored_heading wow fadeInUp" data-wow-delay="400ms" data-wow-duration="0.5s" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">Information about us</p>
<h1 class="heading margin_heading wow fadeInUp" data-wow-delay="600ms" data-wow-duration="0.8s" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">Cycling is My Passion</h1>
<p class="info wow fadeInUp" data-wow-delay="800ms" data-wow-duration="1.3s" style="visibility: visible; animation-delay: 400ms; animation-name: fadeInUp;">Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus. Nam porttitor justo sed mi finibus, vel tristique risus faucibus.
<span class="mt-3">Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend.</span></p>
<a href="cycling/standalone.html" class="btn btn-medium btn-rounded btn-blue margin_button wow fadeInUp" data-wow-delay="900ms" data-wow-duration="1s" style="visibility: visible; animation-delay: 600ms; animation-name: fadeInUp;">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!-- about-feature ends -->
<!-- Portfolio start -->
<section class="portfolio-sec company-portfolio-section" id="portfolio-section">
<div class="container">
<div class="section-heading">
<div class="row">
<div class="col-lg-6 wow fadeInUp text-center text-lg-left" data-wow-delay="300ms">
<h1 class="heading">Awesome<span class="d-block">
Cycling Photos </span></h1>
</div>
<!-- Filters -->
<div class="col-md-12 pt-4 pt-md-5">
<div id="js-filters-mosaic" class="cbp-l-filters-button wow fadeInUp text-center text-lg-left" data-wow-delay="350ms">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All Projects</div>
<div data-filter=".web" class="cbp-filter-item">Cycle Race</div>
<div data-filter=".logo" class="cbp-filter-item">Kids Cycling</div>
<div data-filter=".mobile" class="cbp-filter-item">Others</div>
</div>
<div id="js-grid-mosaic" class="cbp cbp-l-grid-mosaic">
<!-- Image-1 -->
<div class="cbp-item web logo">
<a href="cycling/images/portfolio-1.png" class="cbp-caption cbp-lightbox" data-title="Women Cycling<br>by Best Women Cycling">
<div class="cbp-caption-defaultWrap">
<img src="cycling/images/portfolio-1.png" alt="img">
</div>
<div class="cbp-caption-activeWrap portfolio-hover-effect d-flex align-items-end">
<div class="portfolio-inner-content">
<span></span>
<span></span>
</div>
<div class="hover-text">
<h4 class="p-hover-title">Women Cycling</h4>
<p class="p-hover-des">Best Women Cycling</p>
</div>
</div>
</a>
</div>
<!-- Image-2 -->
<div class="cbp-item print mobile web">
<a href="cycling/images/portfolio-3.png" class="cbp-caption cbp-lightbox" data-title="Men Cycling<br>by Best Men Cycling">
<div class="cbp-caption-defaultWrap">
<img src="cycling/images/portfolio-3.png" alt="img">
</div>
<div class="cbp-caption-activeWrap portfolio-hover-effect d-flex align-items-end">
<div class="portfolio-inner-content">
<span></span>
<span></span>
</div>
<div class="hover-text">
<h4 class="p-hover-title">Men Cycling</h4>
<p class="p-hover-des">Best Men Cycling</p>
</div>
</div>
</a>
</div>
<!-- Image-3 -->
<div class="cbp-item print logo development web mobile">
<a href="cycling/images/portfolio-2.png" class="cbp-caption cbp-lightbox" data-title="Kids Cycling<br>by Best Kids Cycling">
<div class="cbp-caption-defaultWrap">
<img src="cycling/images/portfolio-2.png" alt="img">
</div>
<div class="cbp-caption-activeWrap portfolio-hover-effect d-flex align-items-end">
<div class="portfolio-inner-content">
<span></span>
<span></span>
</div>
<div class="hover-text">
<h4 class="p-hover-title">Kids Cycling</h4>
<p class="p-hover-des">Best Kids Cycling</p>
</div>
</div>
</a>
</div>
<!-- Image-4 -->
<div class="cbp-item logo development">
<a href="cycling/images/portfolio-4.png" class="cbp-caption cbp-lightbox" data-title="Modern Cycling<br>by Best Modern Cycling">
<div class="cbp-caption-defaultWrap">
<img src="cycling/images/portfolio-4.png" alt="img">
</div>
<div class="cbp-caption-activeWrap portfolio-hover-effect d-flex align-items-end">
<div class="portfolio-inner-content">
<span></span>
<span></span>
</div>
<div class="hover-text">
<h4 class="p-hover-title">Modern Cycling</h4>
<p class="p-hover-des">Best Modern Cycling</p>
</div>
</div>
</a>
</div>
</div>
<!-- Button -->
<div id="js-loadMore-lightbox-gallery" class="cbp-l-loadMore-button text-data wow fadeInUp" data-wow-delay="650ms">
<div class="row portfolio-foot-detail text-data-inner">
<div class="col-7 col-lg-4 offset-lg-6 text-left pl-4">
<span class="p-text">We've Many More Then</span>
<h4 class="p-num">530</h4>
<span class="p-text">Cycling Images in Our Collection</span>
</div>
<div class="col-5 col-lg-2 d-flex justify-content-end align-items-center"><a href="cycling/standalone.html" class="btn orange-and-blue-btn rounded-pill">VIEW ALL</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio end -->
<!-- Reviews start -->
<section class="reviews-sec bg-blue p-0" id="review">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12 p-0">
<div class="hover-effect">
<img alt="blog" src="cycling/images/reviews-img.png" class="about-img">
</div>
</div>
<div class="col-md-12 col-lg-6 p-lg-0 wow fadeInRight order-1 order-md-2" data-wow-duration="1s" data-wow-delay=".5s">
<div class="review-heading">
<h2>
Happy Cyclists
</h2>
</div>
<div class="testimonial-carousel">
<div class="testimonial-box owl-carousel owl-theme">
<!-- Item-1 -->
<div class="item text-center animate-fade split-container-setting style-three text-center">
<div class="icon-holder"><i class="fas fa-quote-right"></i></div>
<p class="text wow fadeInLeft" data-wow-delay=".7s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae egestas mi, vel dapibus diam. Mauris malesuada, nisl non rutrum commodo, sem magna laoreet tellus.</p>
<div class="img-holder"><img src="cycling/images/review-1.png" alt="Image"></div>
<h4 class="user-name">Allen Miller</h4>
</div>
<!-- Item-2 -->
<div class="item text-center animate-fade split-container-setting style-three text-center">
<div class="icon-holder"><i class="fas fa-quote-right"></i></div>
<p class="text wow fadeInLeft" data-wow-delay=".7s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae egestas mi, vel dapibus diam. Mauris malesuada, nisl non rutrum commodo, sem magna laoreet tellus.</p>
<div class="img-holder"><img src="cycling/images/review-2.png" alt="Image"></div>
<h4 class="user-name">Mandy Rose</h4>
</div>
<!-- Item-3 -->
<div class="item text-center animate-fade split-container-setting style-three text-center">
<div class="icon-holder"><i class="fas fa-quote-right"></i></div>
<p class="text wow fadeInLeft" data-wow-delay=".7s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae egestas mi, vel dapibus diam. Mauris malesuada, nisl non rutrum commodo, sem magna laoreet tellus.</p>
<div class="img-holder"><img src="cycling/images/review-3.jpg" alt="Image"></div>
<h4 class="user-name">Sara Williams </h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Reviews end -->
<!-- Contact start -->
<section class="contact-section" id="contact">
<div class="container">
<div class="row no-gutters">
<div class="col-lg-12 col-md-12 col-sm-12 text-center wow fadeInDown" data-wow-delay="300ms">
<h5 class="subheading ">Lorem ipsum dolor sit amet</h5>
<h2 class="contact-heading">Let's Get In Touch</h2>
</div>
</div>
<form id="contact-form-data" class="contact-form wow fadeInUp" data-wow-delay="400ms" >
<div class="row">
<div class="col-12" id="result"></div>
<div class="col-lg-5 col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" type="text" id="quote_name" placeholder="Your Name" required="" name="userName">
</div>
<div class="form-group">
<input class="form-control" type="email" id="quote_email" placeholder="Email" required="" name="userEmail">
</div>
<div class="form-group">
<input class="form-control" type="text" id="quote_contact" name="userPhone" placeholder="Contact No." required="" >
</div>
</div>
<div class="col-lg-1 col-md-0 col-sm-0"></div>
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="form-group">
<textarea class="form-control" id="userMessage" name="userMessage" placeholder="Enquiry Details"></textarea></div>
</div>
<a class="btn btn-rounded btn-large orange-btn btn-hvr-black contact_btn w-100" href="javascript:void(0);">Submit Information</a>
</div>
</form>
</div>
</section>
<!-- Contact end -->
<!--Footer Start-->
<footer class="footer-sec bg-blue text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-social">
<ul class="list-unstyled">
<li><a class="wow fadeInUp" href="javascript:void(0);"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li><a class="wow fadeInDown" href="javascript:void(0);"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a class="wow fadeInUp" href="javascript:void(0);"><i class="fab fa-google-plus-g" aria-hidden="true"></i></a></li>
<li><a class="wow fadeInDown" href="javascript:void(0);"><i class="fab fa-linkedin-in" aria-hidden="true"></i></a></li>
<li><a class="wow fadeInUp" href="javascript:void(0);"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a class="wow fadeInDown" href="javascript:void(0);"><i class="far fa-envelope" aria-hidden="true"></i></a></li>
</ul>
</div>
<p class="company-about fadeIn">© 2021 MegaOne. Made With Love By <a href="javascript:void(0);" class="text-white">Themesindustry</a></p>
</div>
</div>
</div>
</footer>
<!--Footer End-->
<!-- Start Scroll Top -->
<div class="go-top"><i class="las la-arrow-up"></i><i class="las la-arrow-up"></i></div>
<!-- End Scroll Top -->
<!-- JavaScript -->
<script src="vendor/js/bundle.min.js"></script>
<!-- Plugin Js -->
<script src="vendor/js/wow.min.js"></script>
<script src="vendor/js/owl.carousel.min.js"></script>
<script src="vendor/js/jquery.cubeportfolio.min.js"></script>
<script src="vendor/js/jquery.fancybox.min.js"></script>
<!-- custom script -->
<script src="vendor/js/contact_us.js"></script>
<script src="cycling/js/script.js"></script>
</body>
</html>