add template
This commit is contained in:
Cetin Cakiroglu
@@ -0,0 +1,249 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user