250 lines
11 KiB
HTML
250 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<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>PrimeNG Omega</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="../layout/css/layout-light.css"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="primeng.min.css"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="primeflex.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.png" width="113">
|
||
|
|
|
||
|
|
<a id="menu-button" href="#">
|
||
|
|
<img src="../layout/images/landing/landing-menu-icon.svg">
|
||
|
|
</a>
|
||
|
|
<ul id="menu">
|
||
|
|
<li><a href="#">Home</a></li>
|
||
|
|
<li><a href="#introduction">Introduction</a></li>
|
||
|
|
<li><a href="#features">Features</a></li>
|
||
|
|
<li><a href="#mobile">Mobile</a></li>
|
||
|
|
<li><a href="#pricing">Pricing</a></li>
|
||
|
|
<li><a href="#video">Video</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="introduction">
|
||
|
|
<div class="introduction-content">
|
||
|
|
<span class="title">PrimeNG Omega</span>
|
||
|
|
<span class="subtitle">Clean, Elegant and Functional</span>
|
||
|
|
<img src="../layout/images/landing/section1_logo.png">
|
||
|
|
<a class="p-button" type="button" role="button" aria-disabled="false">
|
||
|
|
<span class="p-button-text">Sign Up</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="features">
|
||
|
|
<div class="features-content">
|
||
|
|
<span class="feature-title">Omega Features</span>
|
||
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||
|
|
doloremque.</p>
|
||
|
|
|
||
|
|
<div class="p-grid">
|
||
|
|
<div class="p-col-12 p-md-4">
|
||
|
|
<img src="../layout/images/landing/section2_1.png" class="feature-icon">
|
||
|
|
<span class="feature-text">
|
||
|
|
<span>Responsive</span>
|
||
|
|
<p>Kogi Cosby sweater ethical squid irony disrupt, organic tote bag gluten-free.</p>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="p-col-12 p-md-4">
|
||
|
|
<img src="../layout/images/landing/section2_2.png" class="feature-icon">
|
||
|
|
<span class="feature-text">
|
||
|
|
<span>Clean</span>
|
||
|
|
<p>Bushwick meh Blue Bottle pork belly mustache skateboard 3 wolf moon.</p>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="p-col-12 p-md-4">
|
||
|
|
<img src="../layout/images/landing/section2_3.png" class="feature-icon">
|
||
|
|
<span class="feature-text">
|
||
|
|
<span>Grid</span>
|
||
|
|
<p>Banjo tote bag bicycle rights, High Life sartorial cray craft beer whatever.</p>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="p-col-12 p-md-4">
|
||
|
|
<img src="../layout/images/landing/section2_4.png" class="feature-icon">
|
||
|
|
<span class="feature-text">
|
||
|
|
<span>Modern</span>
|
||
|
|
<p>Retro occupy organic, stumptown shabby chic pour-over roof party DIY.</p>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="p-col-12 p-md-4">
|
||
|
|
<img src="../layout/images/landing/section2_5.png" class="feature-icon">
|
||
|
|
<span class="feature-text">
|
||
|
|
<span>Documented</span>
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam enim numquam.</p>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="p-col-12 p-md-4">
|
||
|
|
<img src="../layout/images/landing/section2_6.png" class="feature-icon">
|
||
|
|
<span class="feature-text">
|
||
|
|
<span>Support</span>
|
||
|
|
<p>Retro occupy organic, stumptown shabby chic pour-over roof party DIY.</p>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="mobile">
|
||
|
|
<div class="mobile-content">
|
||
|
|
<span class="title">Try Our Mobile App!</span>
|
||
|
|
<span class="subtitle">Available at App Store and Google Play.</span>
|
||
|
|
<img src="../layout/images/landing/section3_mobile.png">
|
||
|
|
<a class="p-button" type="button" role="button" aria-disabled="false">
|
||
|
|
<span class="p-button-text">Learn More</span>
|
||
|
|
</a>
|
||
|
|
</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-6">
|
||
|
|
<img src="../layout/images/logo.png">
|
||
|
|
<p>Omega Premium Layout</p>
|
||
|
|
</div>
|
||
|
|
<div class="p-col-6">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#mobile">Mobile</a></li>
|
||
|
|
<li><a href="#pricing">Pricing</a></li>
|
||
|
|
<li><a href="#video">Video</a></li>
|
||
|
|
</ul>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#">Home</a></li>
|
||
|
|
<li><a href="#introduction">Introduction</a></li>
|
||
|
|
<li><a href="#features">Features</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer-bottom">
|
||
|
|
All Rights Reserved
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
OmegaLanding = {
|
||
|
|
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(OmegaLanding.hasClass(menu, 'overlay-menu'))
|
||
|
|
OmegaLanding.hideMenu();
|
||
|
|
else
|
||
|
|
OmegaLanding.showMenu();
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
|
||
|
|
var menuLinks = document.querySelectorAll('#menu a');
|
||
|
|
for (i = 0; i < menuLinks.length; i++) {
|
||
|
|
menuLinks[i].addEventListener('click', function(e) {
|
||
|
|
OmegaLanding.hideMenu();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|