<!DOCTYPE html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>PrimeVue Apollo - Landing</title>
<link rel="stylesheet" type="text/css" href="../theme/theme-blue-light.css">
<link rel="stylesheet" type="text/css" href="../layout/css/layout-blue-light.css">
<link rel="stylesheet" type="text/css" href="./primeflex.css">
<link rel="stylesheet" type="text/css" href="./primevue.min.css">
</head>
<body class="landing-body">
<div class="landing-wrapper">
<div class="landing-header">
<div class="landing-header-content clearfix">
<img src="../layout/images/logo-white.png" alt="apollo-layout" />
<a id="menu-button" href="#">
<img src="../layout/images/landing/icon-menu.svg" alt="Menu"/>
</a>
<ul id="menu">
<li><a href="#"><i class="menu-icon"></i>Home</a></li>
<li><a href="#introduction"><i class="menu-icon"></i>Introduction</a></li>
<li><a href="#landing-feature"><i class="menu-icon"></i>Features</a></li>
<li><a href="#mobile"><i class="menu-icon"></i>Mobile</a></li>
<li><a href="#testimonials"><i class="menu-icon"></i>Testimonials</a></li>
<li><a href="#pricing"><i class="menu-icon"></i>Pricing</a></li>
<li><a href="#video"><i class="menu-icon"></i>Video</a></li>
</ul>
</div>
</div>
<div id="introduction">
<div class="introduction-content">
<p class="title">PrimeVue Presents Apollo</p>
<p class="subtitle">Modern and elegant responsive application template with a premium look for PrimeVue components.</p>
<button type="button" class="p-button p-component p-button-text-only p-button-info">
<span class="p-button-text">Learn More</span>
</button>
</div>
</div>
<div id="landing-feature">
<div class="landing-container">
<div class="p-grid">
<div class="p-col-12 p-md-6 p-lg-3 centerText">
<img src="../layout/images/landing/creative.svg" alt="creative"/>
<h2>Creative</h2>
<p>
Vitae potenti ante praesent <br/>
a dui eget nibh eu quam <br/>
accumsan porttitor tincidunt
</p>
</div>
<div class="p-col-12 p-md-6 p-lg-3 centerText">
<img src="../layout/images/landing/responsive.svg" alt="creative"/>
<h2>Responsive</h2>
<p>
Vitae potenti ante praesent <br/>
a dui eget nibh eu quam <br/>
accumsan porttitor tincidunt
</p>
</div>
<div class="p-col-12 p-md-6 p-lg-3 centerText">
<img src="../layout/images/landing/browser.svg" alt="creative"/>
<h2>Cross Browser</h2>
<p>
Vitae potenti ante praesent <br/>
a dui eget nibh eu quam <br/>
accumsan porttitor tincidunt
</p>
</div>
<div class="p-col-12 p-md-6 p-lg-3 centerText">
<img src="../layout/images/landing/organize.svg" alt="creative"/>
<h2>Well Organized</h2>
<p>
Vitae potenti ante praesent <br/>
a dui eget nibh eu quam <br/>
accumsan porttitor tincidunt
</p>
</div>
</div>
</div>
</div>
<div id="mobile">
<div class="mobile-content">
<img src="../layout/images/landing/landing_rocket.png" alt="apollo-layout" />
<span class="title">Try Our Mobile App!</span>
<span class="subtitle">Available at App Store and Google Play.</span>
<button type="button" class="p-button p-component p-button-text-only p-button-success" pButton>
<span class="p-button-text">Learn More</span>
</button>
</div>
</div>
<div id="testimonials">
<div class="p-grid">
<div class="p-col-12">
<div class="testimonials-container">
<h1 class="testimonials-title">Testimonials</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque.</p>
<div class="testimonials-content">
<p id="testimonials-text">
Beautiful design, straight - forward code, and a very flexible template.
Now I can easily build my own product landing page. Thanks
</p>
<img src="../layout/images/landing/landing_avatar.png" alt="apollo-layout" />
<p>Grace Montgomery</p>
</div>
</div>
</div>
</div>
</div>
<div id="pricing">
<div class="pricing-content">
<span class="pricing-title">Pricing</span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam.</p>
<div class="p-grid">
<div class="p-col-12 p-md-4">
<div class="pricing-basic pricing-box">
<span class="pricing-name">Basic</span>
<div class="pricing-fee">1$</div>
<p>50GB Disk Space</p>
<p>500GB Monthly Bandwith</p>
<p>20 Email Accounts</p>
<p>5 Subdomain</p>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="pricing-standard pricing-box">
<span class="pricing-name">Standard</span>
<div class="pricing-fee">5$</div>
<p>200GB Disk Space</p>
<p>1TB Monthly Bandwith</p>
<p>50 Email Accounts</p>
<p>10 Subdomain</p>
</div>
</div>
<div class="p-col-12 p-md-4">
<div class="pricing-professional pricing-box">
<span class="pricing-name">Professional</span>
<div class="pricing-fee">10$</div>
<p>2TB Disk Space</p>
<p>10TB Monthly Bandwith</p>
<p>Unlimited Email Accounts</p>
<p>50 Subdomain</p>
</div>
</div>
</div>
</div>
</div>
<div id="video">
<div class="video-content">
<span class="video-title">Video</span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque.</p>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/B_lYGUtCd0g" frameborder="0" width="560"></iframe>
</div>
</div>
</div>
<div class="landing-footer">
<div class="landing-footer-content">
<div class="footer-top">
<div class="p-grid">
<div class="p-col-12">
<img src="../layout/images/landing/landing_logo_footer.png" alt="apollo-layout" class="footer-logo"/>
<p>Apollo Premium Application Template</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
ApolloLanding = {
addClass: function(element, className) {
if (element.classList)
element.classList.add(className);
else
element.className += ' ' + className;
},
removeClass: function(element, className) {
if (element.classList)
element.classList.remove(className);
else
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
},
hasClass: function(element, className) {
if (element.classList)
return element.classList.contains(className);
else
return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
},
hideMenu: function() {
this.removeClass(document.getElementById('menu'), 'overlay-menu');
},
showMenu: function() {
this.addClass(document.getElementById('menu'), 'overlay-menu');
}
};
document.getElementById('menu-button').addEventListener('click', function(e) {
var menu = document.getElementById('menu');
if(ApolloLanding.hasClass(menu, 'overlay-menu'))
ApolloLanding.hideMenu();
else
ApolloLanding.showMenu();
e.preventDefault();
});
var menuLinks = document.querySelectorAll('#menu a');
for (i = 0; i < menuLinks.length; i++) {
menuLinks[i].addEventListener('click', function(e) {
ApolloLanding.hideMenu();
});
}
</script>
</body>
</html>