?
á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 ready home page demos.">
<!-- Page Title -->
<title>Pricing | MegaOne HTML5 Template</title>
<!-- Favicon -->
<link href="vendor/img/favicon.ico" rel="icon">
<!-- Bundle -->
<link rel="stylesheet" href="vendor/css/bundle.min.css">
<link href="vendor/css/LineIcons.min.css" rel="stylesheet">
<link href="vendor/css/line-awesome.min.css" rel="stylesheet">
<link href="vendor/css/megamenu.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="vendor/css/elements.css" rel="stylesheet">
</head>
<!-- Js Files -->
<script src="vendor/js/bundle.min.js"></script>
<script src="vendor/js/jquery.appear.js"></script>
<body>
<!-- Start Element Heading -->
<section id="elements" class="ui-element bg-light-gray">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<div class="main-title-opacity-text"> <h1 class="d-flex justify-content-center">Elements </h1> </div>
<h1 class="color-purple heading-tooltip-number position-relative d-inline-block">Elements</h1>
<h2 class="color-black"> Pricing UI Blocks </h2>
<p class="color-black font-weight-500 text-uppercase">Power up your pages with these elements. Each element comes with a variety of options for your choice.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Element Heading -->
<!-- Start Header -->
<header class="megamenu mega-elements pt-5">
<nav class="navbar navbar-top-default navbar-expand-lg static-nav transparent-bg fixed-menu">
<div class="container container-width">
<div id="menu" class="collapse navbar-collapse d-none d-lg-block mod-menu">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"> <a href="elements-info.html" target="_blank" class="nav-link link">Info Blocks</a></li>
<li class="nav-item"> <a href="elements-team.html" target="_blank" class="nav-link link">Team Blocks</a></li>
<li class="nav-item"> <a href="index-elements-portfolio.html" target="_blank" class="nav-link link">Portfolio Blocks</a></li>
<li class="nav-item"> <a href="elements-pricing.html" target="_blank" class="nav-link link active">Pricing Blocks</a></li>
<li class="nav-item mega-menu active"> <a href="javascript:void(0)" class="nav-link dropdown-arrow">Others <i class="fas fa-angle-down"></i></a>
<ul class="hide-cursor bg-white text-left">
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-counter.html">Counter Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-quote.html">Quote Blocks</a> </li>
</ul>
</li>
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-footer.html">Footer Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-button.html">Button Blocks</a> </li>
</ul>
</li>
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-testimonials.html">Testimonial Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-typography.html">Typography Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-blog.html">Blog Blocks</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- side menu open button -->
<a class="menu_bars d-inline-block d-lg-none menu-bars-setting" id="sidemenu_toggle">
<div class="menu-lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</nav>
<!-- Side Menu -->
<div class="side-menu d-none">
<div class="inner-wrapper nav-icon">
<span class="btn-close link" id="btn_sideNavClose"></span>
<nav class="side-nav w-100">
<div class="position-relative">
<!-- Main Menu -->
<div class="navbar-nav side-main-menu">
<a class="nav-link" href="elements-info.html">Info Blocks</a>
<a class="nav-link" href="elements-team.html">Team Blocks</a>
<a class="nav-link" href="elements-quote.html">Portfolio Blocks</a>
<a class="nav-link" href="elements-quote.html">Pricing Blocks</a>
<a class="nav-link active sidenav-arrow multi-item1" href="javascript:void(0)">Others <i class="fas fa-angle-right"></i></a>
</div>
<!-- Home Section Sub Menu -->
<div class="navbar-nav sub-multi-item1">
<a class="nav-link sidenav-arrow item1" href="javascript:void(0)">Demos 1 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link sidenav-arrow item2" href="javascript:void(0)">Demos 2 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link sidenav-arrow item3" href="javascript:void(0)">Demos 3 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
</div>
<!-- Home Section Inner Menu -->
<div class="navbar-nav inner-multi-item1 item1">
<a class="nav-link" target="_blank" href="elements-blog.html">Testimonial Blocks</a>
<a class="nav-link" target="_blank" href="elements-counter.html">Typography Blocks</a>
<a class="nav-link" target="_blank" href="elements-button.html">Blog Blocks</a>
<a class="nav-link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
<div class="navbar-nav inner-multi-item1 item2">
<a class="nav-link" target="_blank" href="elements-testimonials.html">Footer Blocks</a>
<a class="nav-link" target="_blank" href="elements-footer.html">Button Blocks</a>
<a class="nav-link link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
<div class="navbar-nav inner-multi-item1 item3">
<a class="nav-link" target="_blank" href="index-elements-portfolio.html">Counter Blocks</a>
<a class="nav-link" target="_blank" href="elements-typography.html">Quote Blocks</a>
<a class="nav-link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
</div>
</nav>
<div class="side-footer text-white w-100">
<ul class="social-icons-simple">
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-facebook color-white"></i> </a> </li>
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-instagram color-white"></i> </a> </li>
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-twitter color-white"></i> </a> </li>
</ul>
<p class="text-white">© 2021 MegaOne. Made With Love by Themesindustry</p>
</div>
</div>
</div>
<a id="close_side_menu" href="javascript:void(0);"></a>
<!-- Side Menu -->
</header>
<!-- End Header -->
<!-- Start ui-block-01 -->
<section class="bg-light-gray ui-block-01 pricing">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<h5> Lorem ipsum dolor sit amet </h5>
<h2 class="mb-0">Flexible<span class="color-pink"> Pricing</span> Packages </h2>
</div>
</div>
</div>
<div class="row mt-66px mt-xs-4rem">
<div class="col-lg-4 col-md-6 col-sm-12 text-center mb-xs-5 wow fadeInUp">
<div class="pricing-item hvr-bg-blue">
<div class="price-box clearfix">
<div class="price_title">
<h4 class="text-capitalize">Basic</h4>
</div>
</div>
<div class="price">
<h2 class="position-relative"><span class="dollar">$</span>19<span class="month">/ month</span></h2>
</div>
<div class="price-description">
<p>Full Access</p>
<p>Unlimited Bandwidth</p>
<p>Email Accounts</p>
<p>8 Free Forks Every Months</p>
</div>
<div class="text-center">
<a href="javascript:void(0)" class="btn-setting color-black btn-hvr-up btn-blue btn-hvr-white">learn more</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 text-center mb-xs-5 wow fadeInUp">
<div class="pricing-item price-transform hvr-bg-yellow">
<div class="quarter-triangle"></div>
<div class="triangle-inner-content">
<i class="fa fa-star"></i>
<span> SPECIAL </span>
</div>
<div class="price-box2 clearfix">
<div class="price_title">
<h4 class="text-capitalize m-0">Standard</h4>
<p class="price-sub-heading text-capitalize">the most popular</p>
</div>
</div>
<div class="price">
<h2 class="position-relative"><span class="dollar">$</span>29<span class="month">/ month</span></h2>
</div>
<div class="price-description">
<p> Full Access</p>
<p>Unlimited Bandwidth</p>
<p>Email Accounts</p>
<p>8 Free Forks Every Months</p>
</div>
<div class="text-center">
<a href="javascript:void(0)" class="btn-setting color-black btn-hvr-up btn-yellow btn-hvr-white">learn more</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 text-center wow fadeInUp">
<div class="pricing-item hvr-bg-pink">
<div class="price-box clearfix">
<div class="price_title">
<h4 class="text-capitalize">Advance</h4>
</div>
</div>
<div class="price">
<h2 class="position-relative"><span class="dollar">$</span>49<span class="month">/ month</span></h2>
</div>
<div class="price-description">
<p> Full Access</p>
<p>Unlimited Bandwidth</p>
<p>Email Accounts</p>
<p>8 Free Forks Every Months</p>
</div>
<div class="text-center">
<a href="javascript:void(0)" class="btn-setting color-black btn-hvr-up btn-pink btn-hvr-white">learn more</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-01 -->
<hr>
<!-- Start ui-block-02 -->
<section class="bg-light-gray pricing ui-block-02">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<h5> Effective and economical packages </h5>
<h2> choose <b>best price</b> plan</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales lobortis vehicula. Aliquam sodales turpis a neque sagittis.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 text-center pr-lg-0 md-mb-5 wow fadeInLeft">
<div class="price-item price-transform basic-plan">
<div class="price-box clearfix">
<div class="price-package">
<h3 class="mb-2rem">basic</h3>
</div>
<div class="price-icon">
<i class="fa fa-lightbulb"></i>
</div>
</div>
<div class="price">
<h2 class="position-relative"><span class="dollar">$</span><span class="color-green">75</span><span class="month"> /month</span></h2>
<p class="price-sub-heading">A budget package for starter</p>
</div>
<div class="price-features bg-green">
<h4 class="mb-0 text-capitalize">basic features</h4>
</div>
<div class="price-description">
<p class="bg-light-gray2">Creative free Web with ads</p>
<p class="bg-light-gray">Connect Domain</p>
</div>
<div class="text-center">
<a href="javascript:void(0)" class="btn-setting btn-green btn-hvr-transparent-grey color-black">learn more</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 text-center px-lg-0 md-mb-5 wow fadeInUp">
<div class="price-item standard-plan">
<div class="price-box clearfix">
<div class="price-icon mb-2rem">
<i class="fa fa-laptop"></i>
</div>
<div class="price-package">
<h3 class="mb-0">standard</h3>
</div>
</div>
<div class="price">
<h2 class="position-relative"><span class="dollar">$</span><span class="color-black">99</span><span class="month"> /month</span></h2>
<p class="price-sub-heading">A super package for starter</p>
</div>
<div class="price-features bg-blue">
<h4 class="mb-0 text-capitalize">standard features</h4>
</div>
<div class="price-description">
<p class="bg-light-gray2">Creative free Web with ads</p>
<p class="bg-light-gray">Connect Domain</p>
<p class="bg-light-gray2">Ideal For Small Scale Websites</p>
<p class="bg-light-gray">Business & Ecommerce</p>
</div>
<div class="text-center">
<a href="javascript:void(0)" class="btn-setting btn-blue btn-hvr-transparent-grey color-black">learn more</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 text-center pl-lg-0 wow fadeInRight">
<div class="price-item price-transform">
<div class="price-box clearfix">
<div class="price-package">
<h3 class="mb-2rem">advance</h3>
</div>
<div class="price-icon">
<i class="fa fa-briefcase"></i>
</div>
</div>
<div class="price">
<h2 class="position-relative"><span class="dollar">$</span><span class="color-green">249</span><span class="month"> /month</span></h2>
<p class="price-sub-heading">A perfect package for starter</p>
</div>
<div class="price-features bg-green">
<h4 class="mb-0 text-capitalize">advance features</h4>
</div>
<div class="price-description">
<p class="bg-light-gray2">Creative free Web with ads</p>
<p class="bg-light-gray">Connect Domain</p>
<p class="bg-light-gray2">Ideal For Small Scale Websites</p>
</div>
<div class="text-center">
<a href="javascript:void(0)" class="btn-setting btn-green btn-hvr-transparent-grey color-black">learn more</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-02 -->
<hr>
<!-- Start ui-block-03 -->
<section class="pricing ui-block-03">
<div class="container">
<!-- Heading Area -->
<div class="row text-center padding-bottom">
<div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2 wow zoomIn heading-area" data-wow-duration="1s" data-wow-delay=".1s">
<p class="sub-heading text-center">Most flexible one page</p>
<h3 class="heading text-center">Our Pricing Plans</h3>
<p class="text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit augue diam, accumsan. Lorem ipsum dolor sit amet, consectetur adipiscing elit augue diam, accumsan.</p>
</div>
</div>
<div class="row">
<!-- Price-1 -->
<div class="col-12 col-lg-4 wow slideInLeft" data-wow-duration="1s" data-wow-delay=".3s">
<div class="price-item text-center bg-purple">
<div class="price_header">
<span class="price_header_text underline">Startup</span>
<p class="price_header_content">Click edit button to change this text. Lorem dolor sit amet, consectetur adipiscing elit.</p>
</div>
<p class="actual_price"><sup class="dollar">$</sup>29<span class="small_font">/Month</span></p>
<ul class="price-list">
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0);" class="scroll btn btn-medium btn-rounded btn-trans btn-margin">Learn More</a>
</div>
</div>
<!-- Price-2 -->
<div class="col-12 col-lg-4 wow slideInUp" data-wow-duration="1s" data-wow-delay=".6s">
<div class="price-item text-center bg-green price-margin">
<div class="price_header">
<span class="price_header_text underline">Standard</span>
<p class="price_header_content">Click edit button to change this text. Lorem dolor sit amet, consectetur adipiscing elit.</p>
</div>
<p class="actual_price"><sup class="dollar">$</sup>69<span class="small_font">/Month</span></p>
<ul class="price-list">
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0);" class="scroll btn btn-medium btn-rounded btn-trans btn-margin">Learn More</a>
</div>
</div>
<!-- Price-3 -->
<div class="col-12 col-lg-4 wow slideInRight" data-wow-duration="1s" data-wow-delay=".3s">
<div class="price-item text-center bg-blue">
<div class="price_header">
<span class="price_header_text underline">Expert Plan</span>
<p class="price_header_content">Click edit button to change this text. Lorem dolor sit amet, consectetur adipiscing elit.</p>
</div>
<p class="actual_price"><sup class="dollar">$</sup>99<span class="small_font">/Month</span></p>
<ul class="price-list">
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0);" class="scroll btn btn-medium btn-rounded btn-trans btn-margin">Learn More</a>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-03 -->
<hr>
<!-- Start ui-block-04 -->
<section class="pricing-sec ui-block-04">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 offset-md-1 pricing-heading-area text-center">
<h4 class="heading">Web Design Packages</h4>
<p class="text">Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy. Lorem Ipsum has been the industry’s standard dummy.</p>
</div>
</div>
<div class="row pricing-cards">
<!-- Price-1 -->
<div class="col-12 col-md-6 col-lg-3 pricing-card">
<div class="pricing-box wow fadeInUp">
<div class="pricing-box-header position-relative">
<div class="pricing-header-overlay"></div>
<div class="header-content">
<h4 class="pricing-price color-green">4.99</h4>
<i class="lni lni-dollar dollar"></i>
<p class="sub-text">Monthly Billing</p>
</div>
</div>
<div class="pricing-box-detail position-relative">
<div class="pricing-detail-overlay"></div>
<ul>
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>4 Free Forks Every Months</li>
</ul>
</div>
</div>
</div>
<!-- Price-2 -->
<div class="col-12 col-md-6 col-lg-3 pricing-card">
<div class="pricing-box wow fadeInUp" data-wow-delay=".3s">
<div class="pricing-box-header position-relative">
<div class="pricing-header-overlay"></div>
<div class="header-content">
<h4 class="pricing-price color-yellow">11.95</h4>
<i class="lni lni-dollar dollar"></i>
<p class="sub-text">Quarterly Billing</p>
</div>
</div>
<div class="pricing-box-detail position-relative">
<div class="pricing-detail-overlay"></div>
<ul>
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>4 Free Forks Every Months</li>
</ul>
</div>
</div>
</div>
<!-- Price-3 -->
<div class="col-12 col-md-6 col-lg-3 pricing-card">
<div class="pricing-box wow fadeInUp" data-wow-delay=".5s">
<div class="pricing-box-header position-relative">
<div class="pricing-header-overlay"></div>
<div class="header-content">
<h4 class="pricing-price color-blue">25.99</h4>
<i class="lni lni-dollar dollar"></i>
<p class="sub-text">Biannual Billing</p>
</div>
</div>
<div class="pricing-box-detail position-relative">
<div class="pricing-detail-overlay"></div>
<ul>
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>4 Free Forks Every Months</li>
</ul>
</div>
</div>
</div>
<!-- Price-4 -->
<div class="col-12 col-md-6 col-lg-3 pricing-card active">
<div class="pricing-box wow fadeInUp" data-wow-delay=".7s">
<div class="pricing-box-header position-relative">
<div class="pricing-header-overlay"></div>
<div class="header-content">
<h4 class="pricing-price color-green">45.95</h4>
<i class="lni lni-dollar dollar"></i>
<p class="sub-text">Yearly Billing</p>
</div>
</div>
<div class="pricing-box-detail position-relative">
<div class="pricing-detail-overlay"></div>
<ul>
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>4 Free Forks Every Months</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-04.pricing-sec .pricing-cards .pricing-card').on('mouseover',function () {
$('.ui-block-04.pricing-sec .pricing-card:nth-child(4)').removeClass('active');
});
$('.ui-block-04.pricing-sec .pricing-cards .pricing-card').on('mouseleave',function () {
$('.ui-block-04.pricing-sec .pricing-card:nth-child(4)').addClass('active');
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-04 -->
<hr>
<!-- Start ui-block-05 -->
<section class="pricing-sec ui-block-05">
<div class="container">
<div class="row">
<div class="pricing-details col-10 offset-1 col-lg-8 offset-lg-2 text-center">
<p class="sub-heading"><span></span>Most flexible one page</p>
<h4 class="heading">Very Affordable Pricing for all Courses.</h4>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere nisi est, sed ullamcorper nibh volutpat at. In rutrum, metus ut posuere gravida, tellus lacus faucibus lectus, sed cursus eros ligula non odio. Suspendisse volutpat sagittis sapien. Curabitur quis malesuada ipsum.</p>
</div>
</div>
<div class="row price-cards pb-5 pb-md-0">
<div class="pricing-card col-12 col-lg-4 text-center">
<h4 class="pricing-card-heading">Startup</h4>
<p class="pricing-card-text">Click edit button to change this text. Lorem
dolor sit amet, consectetur adipiscing elit.</p>
<h3 class="pricing-amount"><i class="lni-dollar"></i>19<span>/ Month</span></h3>
<ul class="pricing-features">
<li>Full Access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0);" class="btn green-trans-btn rounded-pill">Learn More
<span></span><span></span><span></span><span></span>
</a>
</div>
<div class="pricing-card active col-12 col-lg-4 text-center wow fadeInUp" data-wow-duration="2s" data-wow-delay=".1s">
<h4 class="pricing-card-heading">Standard</h4>
<p class="pricing-card-text">Click edit button to change this text. Lorem
dolor sit amet, consectetur adipiscing elit.</p>
<h3 class="pricing-amount"><i class="lni-dollar"></i>56<span>/ Month</span></h3>
<ul class="pricing-features">
<li>Full Access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0);" class="btn green-trans-btn rounded-pill">Learn More
<span></span><span></span><span></span><span></span>
</a>
</div>
<div class="pricing-card col-12 col-lg-4 text-center">
<h4 class="pricing-card-heading">Premium</h4>
<p class="pricing-card-text">Click edit button to change this text. Lorem
dolor sit amet, consectetur adipiscing elit.</p>
<h3 class="pricing-amount"><i class="lni-dollar"></i>89<span>/ Month</span></h3>
<ul class="pricing-features">
<li>Full Access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0);" class="btn green-trans-btn rounded-pill">Learn More
<span></span><span></span><span></span><span></span>
</a>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-05.pricing-sec .pricing-card').on('mouseover',function () {
$('.ui-block-05.pricing-sec .pricing-card:nth-child(2)').removeClass('active');
});
$('.ui-block-05.pricing-sec .pricing-card').on('mouseleave',function () {
$('.ui-block-05.pricing-sec .pricing-card:nth-child(2)').addClass('active');
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-05 -->
<hr>
<!-- Start ui-block-06 -->
<section class="pricing ui-block-06">
<div class="container">
<div class="row wow fadeInUp" data-wow-delay="100ms">
<div class="col-12 text-center">
<p class="text-pink font-weight-200 font-20">Ready for an Investment</p>
<h1 class="main-font font-weight-600 text-white">Choose a Finance Plan</h1>
<p class="margin-top font-16 alt-font font-weight-normal text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in velit dolor. Vivamus gravida, <span class="d-block"> neque nec interdum cursus, erat ligula.</span></p>
</div>
</div>
<div class="row padding-top">
<!-- Plan-1 -->
<div class="col-lg-4 col-md-12 col-sm-12 price-pink wow fadeInLeft" data-wow-delay="300ms">
<div class="pricing-item">
<h3 class="pb-3 main-font font-24 text-white">Basic</h3>
<div class="pricing-price d-flex"><sup class="price-dollar text-white">$</sup> <span class="pricing-currency text-white">29
<span class="d-block alt-font font-weight-200 font-10 text-center text-green">Month</span></span>
<p class="pricing-para text-grey ml-3">It has survived not only five centuries, but also the leap into electronic</p>
</div>
<ul class="pricing-list mb-0">
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor sit amet.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor sit.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor sit amet.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum.</li>
</ul>
<a href="javascript:void(0)" class="btn btn-medium rounded-pill w-100 portfolio-btn-pink">Choose Plan</a>
</div>
</div>
<!-- Plan-2 -->
<div class="col-lg-4 col-md-12 col-sm-12 price-pink wow fadeInUp" data-wow-delay="500ms">
<div class="pricing-item active selected">
<h3 class="pb-3 main-font font-24 text-white">Popular</h3>
<div class="pricing-price d-flex"><sup class="price-dollar text-white">$</sup> <span class="pricing-currency text-white">69
<span class="d-block alt-font font-weight-200 font-10 text-center">Month</span></span>
<p class="pricing-para text-grey ml-3">It has survived not only five centuries, but also the leap into electronic</p>
</div>
<ul class="pricing-list mb-0">
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor sit amet.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor sit.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor sit amet.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum.</li>
</ul>
<a href="javascript:void(0)" class="btn btn-medium rounded-pill w-100 portfolio-btn-pink">Choose Plan</a>
</div>
</div>
<!-- Plan-3 -->
<div class="col-lg-4 col-md-12 col-sm-12 price-pink wow fadeInRight" data-wow-delay="300ms">
<div class="pricing-item">
<h3 class="pb-3 main-font font-24 text-white">Advance</h3>
<div class="pricing-price d-flex"><sup class="price-dollar text-white">$</sup> <span class="pricing-currency text-white">99
<span class="d-block alt-font font-weight-200 font-10 text-center">Month</span></span>
<p class="pricing-para text-grey ml-3">It has survived not only five centuries, but also the leap into electronic</p>
</div>
<ul class="pricing-list mb-0">
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor sit amet.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor sit.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum dolor sit amet.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Lorem ipsum.</li>
</ul>
<a href="javascript:void(0)" class="btn btn-medium rounded-pill w-100 portfolio-btn-pink">Choose Plan</a>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-06.pricing .pricing-item').on('mouseenter' , function(){
$('.ui-block-06.pricing .pricing-item').removeClass('active');
$(this).addClass('active');
}).on('mouseleave' , function(){
$('.ui-block-06.pricing .pricing-item').removeClass('active');
$('.ui-block-06.pricing .pricing-item.selected').addClass('active');
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-06 -->
<hr>
<!-- Start ui-block-07 -->
<section class="pricing-sec bg-gray ui-block-07">
<div class="container">
<div class="row">
<div class="pricing-details col-10 offset-1 col-lg-8 offset-lg-2 text-center wow zoomIn" data-wow-duration="1s" data-wow-delay=".1s">
<p class="sub-heading text-red"><span></span>Most flexible one page</p>
<h4 class="heading">Agency Packages</h4>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere nisi est, sed ullamcorper nibh volutpat at. In rutrum, metus ut posuere gravida, tellus lacus faucibus lectus, sed cursus eros ligula non odio. Suspendisse volutpat sagittis sapien. Curabitur quis malesuada ipsum.</p>
</div>
</div>
<div class="row price-cards mt-5">
<!-- Price-1 -->
<div class="pricing-card col-12 col-lg-4 text-center wow fadeInLeft" data-wow-duration="2s" data-wow-delay=".1s">
<h4 class="pricing-card-heading">Startup</h4>
<p class="pricing-card-text">Click edit button to change this text. Lorem
dolor sit amet, consectetur adipiscing elit.</p>
<h3 class="pricing-amount"><i class="lni-dollar"></i>19<span>/ Month</span></h3>
<ul class="pricing-features">
<li>Full Access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0)" class="btn btn-medium btn-rounded btn-black">Learn More</a>
</div>
<!-- Price-2 -->
<div class="pricing-card active col-12 col-lg-4 text-center wow fadeInUp" data-wow-duration="2s" data-wow-delay=".1s">
<h4 class="pricing-card-heading">Standard</h4>
<p class="pricing-card-text">Click edit button to change this text. Lorem
dolor sit amet, consectetur adipiscing elit.</p>
<h3 class="pricing-amount"><i class="lni-dollar"></i>56<span>/ Month</span></h3>
<ul class="pricing-features">
<li>Full Access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0)" class="btn btn-medium btn-rounded btn-black">Learn More</a>
</div>
<!-- Price-3 -->
<div class="pricing-card col-12 col-lg-4 text-center wow fadeInRight" data-wow-duration="2s" data-wow-delay=".1s">
<h4 class="pricing-card-heading">Premium</h4>
<p class="pricing-card-text">Click edit button to change this text. Lorem
dolor sit amet, consectetur adipiscing elit.</p>
<h3 class="pricing-amount"><i class="lni-dollar"></i>89<span>/ Month</span></h3>
<ul class="pricing-features">
<li>Full Access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0)" class="btn btn-medium btn-rounded btn-black">Learn More</a>
</div>
</div>
</div>
</section>
<!-- End ui-block-07 -->
<hr>
<!-- Start ui-block-08 -->
<section class="single-items center-block parallax pricing-sec ui-block-08" style="background: url(vendor/img/elements-img/pricing-img/ui-block-08-pricing.jpg)">
<div class="container">
<div class="row">
<div class="col-12 center-col col-lg-6 offset-lg-6">
<div class="row no-gutters">
<div class="col-12 center-col">
<div class="area-heading text-center wow fadeInRight">
<h3 class="area-title text-capitalize alt-font text-white mb-5 font-weight-100">
Event <strong>Pricing</strong>
</h3>
</div>
</div>
<div class="col-12 col-md-6 pricing-card text-center">
<div class="price-card">
<div class="price-head">
<h4 class="pricing-heading">Standard</h4>
</div>
<div class="pricing-body">
<p class="pricing-detail">Lorem dolor sit amet, consectetur adipiscing elit.</p>
<h6 class="price-text">$36<span>/Per Event</span></h6>
<ul class="pricing-features">
<li>Party Decoration</li>
<li>Design Cake</li>
<li>Home Delivery</li>
<li>Ballon Decoration</li>
</ul>
</div>
<footer>
<a class="btn btn-transparent-white btn-rounded pricing-btn" href="javascript:void(0)">Choose</a>
</footer>
</div>
</div>
<div class="col-12 col-md-6 pricing-card text-center">
<div class="price-card">
<div class="price-head">
<h4 class="pricing-heading">Premium</h4>
</div>
<div class="pricing-body">
<p class="pricing-detail">Lorem dolor sit amet, consectetur adipiscing elit.</p>
<h6 class="price-text">$56<span>/ Per Event</span></h6>
<ul class="pricing-features">
<li>Decoration</li>
<li>Wedding Cakes</li>
<li>Waiter Service</li>
<li>Flower Decoration</li>
</ul>
</div>
<footer>
<a class="btn btn-transparent-white btn-rounded pricing-btn" href="javascript:void(0)">Choose</a>
</footer>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="vendor/js/parallaxie.min.js"></script>
<script>
if ($(window).width() > 992) {
$(".ui-block-08.pricing-sec.parallax").parallaxie({
speed: 0.55,
offset: 0,
});
}
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-08 -->
<hr>
<!-- Start ui-block-09 -->
<section class="pricing-sec ui-block-09">
<div class="container">
<div class="row">
<div class="col-12 pricing-heading-area text-center">
<span class="sub-heading">Lorem ipsum is simply dummy text </span>
<h4 class="heading">CHOOSE YOUR <span class="color">PLAN</span></h4>
<p class="text">Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy. Lorem Ipsum has been the industry’s standard dummy.</p>
</div>
</div>
<div class="row pricing-cards">
<div class="col-12 col-md-6 col-lg-3 pricing-card">
<div class="pricing-box wow fadeInUp">
<div class="pricing-box-header position-relative">
<div class="pricing-header-overlay"></div>
<div class="header-content">
<h4 class="pricing-price">4.99</h4>
<i class="lni lni-dollar dollar"></i>
<p class="sub-text">Monthly Billing</p>
</div>
</div>
<div class="pricing-box-detail position-relative">
<div class="pricing-detail-overlay"></div>
<ul>
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>4 Free Forks Every Months</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 pricing-card active">
<div class="pricing-box wow fadeInUp" data-wow-delay=".3s">
<div class="pricing-box-header position-relative">
<div class="pricing-header-overlay"></div>
<div class="header-content">
<h4 class="pricing-price">11.95</h4>
<i class="lni lni-dollar dollar"></i>
<p class="sub-text">Quarterly Billing</p>
</div>
</div>
<div class="pricing-box-detail position-relative">
<div class="pricing-detail-overlay"></div>
<ul>
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>4 Free Forks Every Months</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 pricing-card">
<div class="pricing-box wow fadeInUp" data-wow-delay=".5s">
<div class="pricing-box-header position-relative">
<div class="pricing-header-overlay"></div>
<div class="header-content">
<h4 class="pricing-price">25.99</h4>
<i class="lni lni-dollar dollar"></i>
<p class="sub-text">Biannual Billing</p>
</div>
</div>
<div class="pricing-box-detail position-relative">
<div class="pricing-detail-overlay"></div>
<ul>
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>4 Free Forks Every Months</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3 pricing-card">
<div class="pricing-box wow fadeInUp" data-wow-delay=".7s">
<div class="pricing-box-header position-relative">
<div class="pricing-header-overlay"></div>
<div class="header-content">
<h4 class="pricing-price">45.95</h4>
<i class="lni lni-dollar dollar"></i>
<p class="sub-text">Yearly Billing</p>
</div>
</div>
<div class="pricing-box-detail position-relative">
<div class="pricing-detail-overlay"></div>
<ul>
<li>Full access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>4 Free Forks Every Months</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-09.pricing-sec .pricing-cards .pricing-card').on('mouseover',function () {
$('.ui-block-09.pricing-sec .pricing-card:nth-child(2)').removeClass('active');
});
$('.ui-block-09.pricing-sec .pricing-cards .pricing-card').on('mouseleave',function () {
$('.ui-block-09.pricing-sec .pricing-card:nth-child(2)').addClass('active');
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-09 -->
<hr>
<!-- Start ui-block-10 -->
<section class="prices ui-block-10">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<!--Heading-->
<div class="heading-area mx-570 pb-5">
<h6 class="sub-title main-color">Check Our Plans & Pricing </h6>
<h2 class="title m-0">OUR PRICES</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="price-list ml-0">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">MEN’S HAIRCUT</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$85</p>
</div>
</div>
<div class="price-list ml-0">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">BEARD LINEUP</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$35</p>
</div>
</div>
<div class="price-list ml-0">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">TAPER HAIRCUT</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$80</p>
</div>
</div>
<div class="price-list ml-0">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">CUSTOM HAIRCUT</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$70</p>
</div>
</div>
<div class="price-list ml-0">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">HEAD LINEUP</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$120</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="price-list">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">CLEAN SHAVE</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$30</p>
</div>
</div>
<div class="price-list">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">MEN’S FACIAL</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$60</p>
</div>
</div>
<div class="price-list">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">HAIR CURLING</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$25</p>
</div>
</div>
<div class="price-list">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">HIGHLIGHT COLOR</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$70</p>
</div>
</div>
<div class="price-list">
<div class="rates d-flex justify-content-between">
<div class="info">
<h6 class="main-heading text-grey font-weight-bold">MEN’S BLEACH</h6>
<h6 class="sub-heading text-grey">Lorem ipsum dolor sit amet, consectetur elit.</h6>
</div>
<p class="rate text-brown">$50</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-10 -->
<hr>
<!-- Start ui-block-11 -->
<section class="price text-center ui-block-11">
<div class="container">
<div class="row mb-3">
<div class="col-sm-12">
<!--Heading-->
<div class="title mb-5">
<h5 class="mb-2">Select the best available packages</h5>
<h2>Simple, Affordable Pricing </h2>
</div>
</div>
</div>
<div class="row wow fadeInUp">
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<div class="price-item">
<h2 class="font-weight-bold alt-font mb-1">$39 <span class="period">/ month</span></h2>
<h5 class="mb-3 alt-font font-weight-bold main-color">Starter Package</h5>
<p class="description">Simple informatino website suiteable for any startup or personal brand</p>
<ul class="p-0 price-list blue list-unstyled">
<li><i class="fas fa-check"></i>Unlmited Pages HTML Website</li>
<li><i class="fas fa-check"></i>Drag & Drop Page builder</li>
<li><i class="fas fa-check"></i>Optimized Content & Images</li>
<li><i class="fas fa-check"></i>Free Domain & Hosting</li>
<li><i class="fas fa-check"></i>Free Images Library</li>
</ul>
<a href="javascript:void(0)" class="btn btn-large btn-blue d-block mt-3">Get The Package Now</a>
</div>
</div>
<div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
<div class="price-item">
<h2 class="font-weight-bold alt-font mb-1">$79 <span class="period">/ month</span></h2>
<h5 class="mb-3 alt-font font-weight-bold alt-color">Professional Package</h5>
<p class="description">Simple informatino website suiteable for any startup or personal brand</p>
<ul class="p-0 price-list green list-unstyled">
<li><i class="fas fa-check"></i>Unlmited Pages HTML Website</li>
<li><i class="fas fa-check"></i>Drag & Drop Page builder</li>
<li><i class="fas fa-check"></i>Optimized Content & Images</li>
<li><i class="fas fa-check"></i>Free Domain & Hosting</li>
<li><i class="fas fa-check"></i>Free Images Library</li>
</ul>
<a href="javascript:void(0)" class="btn btn-large btn-green d-block mt-3">Get The Package Now</a>
</div>
</div>
<div class="col-lg-4 col-md-12 mb-0">
<div class="price-item">
<h2 class="font-weight-bold alt-font mb-1">$199 <span class="period">/ month</span></h2>
<h5 class="mb-3 alt-font font-weight-bold main-color">Ecommerce Package</h5>
<p class="description">Simple informatino website suiteable for any startup or personal brand</p>
<ul class="p-0 price-list blue list-unstyled">
<li><i class="fas fa-check"></i>Unlmited Pages HTML Website</li>
<li><i class="fas fa-check"></i>Drag & Drop Page builder</li>
<li><i class="fas fa-check"></i>Optimized Content & Images</li>
<li><i class="fas fa-check"></i>Free Domain & Hosting</li>
<li><i class="fas fa-check"></i>Free Images Library</li>
</ul>
<a href="javascript:void(0)" class="btn btn-large btn-blue d-block mt-3">Get The Package Now</a>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-12 -->
<hr>
<!-- Start ui-block-12 -->
<section class="pricing-sec ui-block-12">
<div class="container">
<div class="row pricing-heading-sec">
<div class="col-12 text-center">
<span class="sub-heading">Pricing Plans</span>
<h4 class="large-heading">Get Your Ticket Now</h4>
<span class="fly-line"></span>
</div>
</div>
<div class="row pricing-cards">
<div class="col-12 col-lg-4 p-card wow fadeInUp">
<div class="pricing-card wow fadeInLeft zig-zag-top zig-zag-bottom">
<h4 class="pricing-heading">Early Bird</h4>
<div class="row no-gutters price-info">
<div class="col-12 col-md-4 price-tag">
<span class="p-icon"><i class="las la-dollar-sign"></i></span>
<span class="p-price">20</span>
<span class="p-since">Month</span>
</div>
<div class="col-12 col-md-8 price-text">
<p class="small-text">
It has survived not only five centuries, but also the leap into electronic.
</p>
</div>
</div>
<ul class="feature-list">
<li><i class="fas fa-check mr-3"></i>Front Seats</li>
<li><i class="fas fa-check mr-3"></i>Free Entrance</li>
<li><i class="fas fa-check mr-3"></i>Free Checkout</li>
<li><i class="fas fa-check mr-3"></i>1x Speech Listening</li>
</ul>
<button class="btn red-btn rounded-pill w-100" data-toggle="modal" data-target="#exampleModal">BUY TICKET</button>
</div>
</div>
<div class="col-12 col-lg-4 p-card wow fadeInUp">
<div class="pricing-card active wow fadeInUp zig-zag-top zig-zag-bottom">
<h4 class="pricing-heading">Regular</h4>
<div class="row no-gutters price-info">
<div class="col-12 col-md-4 price-tag">
<span class="p-icon"><i class="las la-dollar-sign"></i></span>
<span class="p-price">35</span>
<span class="p-since">Month</span>
</div>
<div class="col-12 col-md-8 price-text">
<p class="small-text">
It has survived not only five centuries, but also the leap into electronic.
</p>
</div>
</div>
<ul class="feature-list">
<li><i class="fas fa-check mr-3"></i>Front Seats</li>
<li><i class="fas fa-check mr-3"></i>Free Entrance</li>
<li><i class="fas fa-check mr-3"></i>Free Snacks</li>
<li><i class="fas fa-check mr-3"></i>Free Checkout</li>
<li><i class="fas fa-check mr-3"></i>5x Speech Listening</li>
</ul>
<button class="btn red-btn rounded-pill w-100" data-toggle="modal" data-target="#exampleModal">BUY TICKET</button>
</div>
</div>
<div class="col-12 col-lg-4 p-card wow fadeInUp">
<div class="pricing-card wow fadeInRight zig-zag-top zig-zag-bottom">
<h4 class="pricing-heading">VIP</h4>
<div class="row no-gutters price-info">
<div class="col-12 col-md-4 price-tag">
<span class="p-icon"><i class="las la-dollar-sign"></i></span>
<span class="p-price">58</span>
<span class="p-since">Month</span>
</div>
<div class="col-12 col-md-8 price-text">
<p class="small-text">
It has survived not only five centuries, but also the leap into electronic.
</p>
</div>
</div>
<ul class="feature-list">
<li><i class="fas fa-check mr-3"></i>Front Seats</li>
<li><i class="fas fa-check mr-3"></i>Free Entrance</li>
<li><i class="fas fa-check mr-3"></i>Free Snacks</li>
<li><i class="fas fa-check mr-3"></i>8x Speech Listening</li>
</ul>
<button class="btn red-btn rounded-pill w-100" data-toggle="modal" data-target="#exampleModal">BUY TICKET</button>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-12.pricing-sec .pricing-cards .pricing-card').on('mouseover', function () {
$('.ui-block-12.pricing-sec .p-card:nth-child(2) .pricing-card').removeClass('active');
});
$('.ui-block-12.pricing-sec .pricing-cards .pricing-card').on('mouseleave', function () {
$('.ui-block-12.pricing-sec .p-card:nth-child(2) .pricing-card').addClass('active');
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-12 -->
<hr>
<!-- Start ui-block-13 -->
<section class="price-sec ui-block-13">
<div class="container">
<!--Heading-->
<div class="row">
<div class="col-lg-12 text-center">
<h4 class="">Most Economical Pricing</h4>
<h2>Our Best Pricing</h2>
<p class="about-max pt-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi enim, vulputate at justo tristique, tempor sagittis dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet ligula consequat urna posuere convallis.</p>
</div>
</div>
<!--Team-->
<div class="row">
<!--price item-->
<div class="col-md-4">
<div class="price-item text-left">
<h3 class="alt-font d-inline-block font-weight-600 mb-4 blue text-capitalize">Platinum</h3>
<div class="price-tag d-flex align-items-center">
<div class="price alt-font text-dark-gray">
<h3 class="currency text-capitalize m-0"><span class="sign">$</span>39</h3>
<span class="month text-capitalize">YEAR</span>
</div>
<p class="price-text no-margin">It has survived not only five centu but also the leap electronic.</p>
</div>
<ul class="packages">
<li><i class="fa fa-check" aria-hidden="true"></i>Full access</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>Unlimited Bandwidth</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>Powerful Admin Panel</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>Email Accounts</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0);" class="btn btn-rounded btn-large btn-transparent w-100 text-capitalize">Get Started Now</a>
</div>
</div>
<!--price item-->
<div class="col-md-4">
<div class="price-item text-left">
<h3 class="alt-font d-inline-block font-weight-600 mb-4 blue text-capitalize">Silver</h3>
<div class="price-tag d-flex align-items-center">
<div class="price alt-font text-dark-gray">
<h3 class="currency text-capitalize m-0"><span class="sign">$</span>49</h3>
<span class="month text-capitalize">YEAR</span>
</div>
<p class="price-text no-margin">It has survived not only five centu but also the leap electronic.</p>
</div>
<ul class="packages">
<li><i class="fa fa-check" aria-hidden="true"></i>Full access</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>Unlimited Bandwidth</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>Powerful Admin Panel</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>Email Accounts</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0);" class="btn btn-rounded btn-large btn-blue w-100 text-capitalize">Get Started Now</a>
</div>
</div>
<!--price item-->
<div class="col-md-4">
<div class="price-item text-left">
<h3 class="alt-font d-inline-block font-weight-600 mb-4 blue text-capitalize">Golden</h3>
<div class="price-tag d-flex align-items-center">
<div class="price alt-font text-dark-gray">
<h3 class="currency text-capitalize m-0"><span class="sign">$</span>99</h3>
<span class="month text-capitalize">YEAR</span>
</div>
<p class="price-text no-margin">It has survived not only five centu but also the leap electronic.</p>
</div>
<ul class="packages">
<li><i class="fa fa-check" aria-hidden="true"></i>Full access</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>Unlimited Bandwidth</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>Powerful Admin Panel</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>Email Accounts</li>
<li><i class="fa fa-check text-capitalize" aria-hidden="true"></i>8 Free Forks Every Months</li>
</ul>
<a href="javascript:void(0);" class="btn btn-rounded btn-large btn-transparent w-100 text-capitalize">Get Started Now</a>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-13 -->
<hr>
<!-- Start ui-block-14 -->
<section class="pricing ui-block-14">
<div class="container">
<div class="row wow fadeInUp" data-wow-delay="100ms">
<div class="col-12 text-center">
<p class="text-blue font-20">Ready for an Investment</p>
<h1 class="main-font font-weight-600 text-black">Choose a Finance Plan</h1>
<p class="margin-top font-16 alt-font font-weight-normal text-grey">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in velit dolor. Vivamus gravida, <span class="d-block"> neque nec interdum cursus, erat ligula.</span></p>
</div>
</div>
<div class="row padding-top">
<!-- Plan-1 -->
<div class="col-lg-4 col-md-12 col-sm-12 price-green wow fadeInLeft" data-wow-delay="300ms">
<div class="pricing-item">
<h3 class="pb-3 main-font font-24 text-blue">Basic</h3>
<div class="pricing-price d-flex"><sup class="price-dollar text-green">$</sup> <span class="pricing-currency text-green">29
<span class="d-block alt-font font-12 text-center text-green">Month</span></span>
<p class="pricing-para text-grey ml-3">It has survived not only five centuries, but also the leap into electronic</p>
</div>
<ul class="pricing-list mb-0">
<li><i class="fa fa-check" aria-hidden="true"></i> Full Access.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Free Hosting.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Unlimited Bandwidth.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Social media integration.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> 40MB of storage space.</li>
</ul>
<a href="javascript:void(0)" class="btn btn-large green-long-btn rounded-pill w-100 btn-hvr-up portfolio-btn-green">Choose Plan</a>
</div>
</div>
<!-- Plan-2 -->
<div class="col-lg-4 col-md-12 col-sm-12 price-blue wow fadeInUp" data-wow-delay="500ms">
<div class="pricing-item">
<h3 class="pb-3 main-font font-24 text-green">Popular</h3>
<div class="pricing-price d-flex"><sup class="price-dollar text-blue">$</sup> <span class="pricing-currency text-blue">69
<span class="d-block alt-font font-12 text-center">Month</span></span>
<p class="pricing-para text-grey ml-3">It has survived not only five centuries, but also the leap into electronic</p>
</div>
<ul class="pricing-list mb-0">
<li><i class="fa fa-check" aria-hidden="true"></i> Full Access.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Free Hosting.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Unlimited Bandwidth.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Social media integration.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> 40MB of storage space.</li>
</ul>
<a href="javascript:void(0)" class="btn btn-large blue-long-btn rounded-pill w-100 btn-hvr-up portfolio-btn-blue">Choose Plan</a>
</div>
</div>
<!-- Plan-3 -->
<div class="col-lg-4 col-md-12 col-sm-12 price-green wow fadeInRight" data-wow-delay="300ms">
<div class="pricing-item">
<h3 class="pb-3 main-font font-24 text-blue">Advance</h3>
<div class="pricing-price d-flex"><sup class="price-dollar text-green">$</sup> <span class="pricing-currency text-green">99
<span class="d-block alt-font font-12 text-center">Month</span></span>
<p class="pricing-para text-grey ml-3">It has survived not only five centuries, but also the leap into electronic</p>
</div>
<ul class="pricing-list mb-0">
<li><i class="fa fa-check" aria-hidden="true"></i> Full Access.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Unlimited Bandwidth.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Professional Websites.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> Social media integration.</li>
<li><i class="fa fa-check" aria-hidden="true"></i> 40MB of storage space.</li>
</ul>
<a href="javascript:void(0)" class="btn btn-large green-long-btn rounded-pill w-100 btn-hvr-up portfolio-btn-green">Choose Plan</a>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-14 -->
<!-- Start ui-block-15 -->
<section class="pricing-sec bg-black ui-block-15">
<div class="container">
<div class="row">
<div class="pricing-details col-10 offset-1 col-lg-8 offset-lg-2 text-center">
<p class="pricing-sub-heading"><span></span>Most flexible one page</p>
<h4 class="pricing-heading">Very Flexible Pricing for your project.</h4>
<p class="pricing-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut posuere nisi est, sed ullamcorper nibh volutpat at. In rutrum, metus ut posuere gravida, tellus lacus faucibus lectus, sed cursus eros ligula non odio. Suspendisse volutpat sagittis sapien. Curabitur quis malesuada ipsum.</p>
</div>
</div>
<div class="row price-cards pb-5 pb-md-0">
<div class="pricing-card col-12 col-lg-4 text-center">
<h4 class="pricing-card-heading">Startup</h4>
<p class="pricing-card-text">Click edit button to change this text. Lorem
dolor sit amet, consectetur adipiscing elit.</p>
<h3 class="pricing-amount"><i class="lni-dollar"></i>19<span>/ Month</span></h3>
<ul class="pricing-features">
<li>Full Access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="#." class="btn pricing-btn rounded-pill">Learn More</a>
</div>
<div class="pricing-card active col-12 col-lg-4 text-center wow fadeInUp" data-wow-duration="2s" data-wow-delay=".1s">
<h4 class="pricing-card-heading">Standard</h4>
<p class="pricing-card-text">Click edit button to change this text. Lorem
dolor sit amet, consectetur adipiscing elit.</p>
<h3 class="pricing-amount"><i class="lni-dollar"></i>56<span>/ Month</span></h3>
<ul class="pricing-features">
<li>Full Access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="#." class="btn pricing-btn rounded-pill">Learn More</a>
</div>
<div class="pricing-card col-12 col-lg-4 text-center">
<h4 class="pricing-card-heading">Premium</h4>
<p class="pricing-card-text">Click edit button to change this text. Lorem
dolor sit amet, consectetur adipiscing elit.</p>
<h3 class="pricing-amount"><i class="lni-dollar"></i>89<span>/ Month</span></h3>
<ul class="pricing-features">
<li>Full Access</li>
<li>Unlimited Bandwidth</li>
<li>Email Accounts</li>
<li>8 Free Forks Every Months</li>
</ul>
<a href="#." class="btn pricing-btn rounded-pill">Learn More</a>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-15.pricing-sec .pricing-card').on('mouseover',function () {
$('.ui-block-15.pricing-sec .pricing-card:nth-child(2)').removeClass('active');
});
$('.ui-block-15.pricing-sec .pricing-card').on('mouseleave',function () {
$('.ui-block-15.pricing-sec .pricing-card:nth-child(2)').addClass('active');
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-15 -->
<script src="vendor/js/megamenu.js"></script>
<script>
$ = jQuery.noConflict();
jQuery(window).on("load", function () {
"use strict";
$('.side-menu').removeClass('d-none');
});
jQuery(function ($) {
"use strict";
var $window = $(window);
var windowsize = $(window).width();
$(".scroll").on("click", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - 40}, 1100);
});
if ($("#sidemenu_toggle").length) {
$("#sidemenu_toggle").on("click", function () {
$(".pushwrap").toggleClass("active");
$(".side-menu").addClass("side-menu-active"), $("#close_side_menu").fadeIn(700)
}), $("#close_side_menu").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $(this).fadeOut(200), $(".pushwrap").removeClass("active")
}), $(".side-nav .navbar-nav .nav-link").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active")
}), $("#btn_sideNavClose").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active")
})
}
});
</script>
</body>
</html>