247 lines
11 KiB
HTML
247 lines
11 KiB
HTML
|
<!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>
|