This repository has been archived by the owner on Jun 30, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathapp-landing-page.html
executable file
·293 lines (265 loc) · 11.5 KB
/
app-landing-page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Responsive Landing Page For iPhone / Android App </title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/ie.css" />
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin+Condensed:600' rel='stylesheet' type='text/css'>
<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div id="top" data-magellan-expedition="fixed">
<div class="row">
<div class="large-12 columns">
<nav class="top-bar">
<ul class="title-area">
<li class="name logo">
<a href="#"><img src="img/logo.png" alt=""></a>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right" id="menu">
<li data-magellan-arrival="features"><a href="#features">Features</a></li>
<li data-magellan-arrival="product"><a href="#product">Product</a></li>
<li data-magellan-arrival="pricing"><a href="#pricing-table">Pricing</a></li>
<li data-magellan-arrival="contact"><a href="#contact">Contact Us</a></li>
</ul>
</section>
</nav>
</div>
</div>
</div>
<header id="header" >
<div class="row">
<div class="large-6 columns">
<div id="teaser-slider-2">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/slides/iphoneshots-1.jpg" alt="Petrichor - slider">
</li>
<li>
<img src="img/slides/iphoneshots-2.jpg" alt="Petrichor - slider">
</li>
<li>
<img src="img/slides/iphoneshots.jpg" alt="Petrichor - slider">
</li>
</ul>
</div>
</div>
</div>
<div class="large-6 columns">
<h1>Super Landing Page</h1>
<span class="subheading">Powerful, Stylish and Modern Responsive Landing Page Template.</span>
<a class="download-btn" href="#" target="_blank"></a>
</div>
</div>
</header>
<div id="features" class="section features" data-magellan-destination="features">
<div class="row hi-icon-wrap hi-icon-effect-3 hi-icon-effect-3b">
<div class="large-4 columns feature">
<span class="icon icon-browser hi-icon"></span>
<h3>Fully Responsive Template</h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum.
</p>
</div>
<div class="large-4 columns feature">
<span class="icon icon-tools hi-icon"></span>
<h3>Easily to Customize & Update</h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum.
</p>
</div>
<div class="large-4 columns feature">
<span class="icon icon-trophy hi-icon"></span>
<h3>Perfect Landing Page for Apps</h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum.
</p>
</div>
</div>
</div>
<div id="product" class="section product gray" data-magellan-destination="product">
<div class="row">
<div class="large-12 columns">
<h2>Simple & easy to use landing page template</h2>
<span class="subheading">Introducing the landing page template that lets you present your app in a graceful way.</span>
<div class="row">
<div class="small-4 columns hints iphone">
<div class="hint hint-left hint-top">
<h3>Modern design</h3>
<p>Minimalistic and simple design with maximal emphasis. You will be glad to download this template.
</p>
<span class="arrow"></span>
</div>
<div class="hint hint-left hint-bottom">
<h3>Bold and Clean</h3>
<p>It is a scientific fact that human can fully focus on just one thing at a time.
</p>
<span class="arrow"></span>
</div>
</div>
<div class="small-4 columns hints iphone">
<img src="img/Iphone_Mockup.png" alt="">
</div>
<div class="small-4 columns hints iphone">
<div class="hint hint-right hint-top">
<h3>Amazing Design</h3>
<p>Because your app deserves an amazing landing page too.</p>
<span class="arrow"></span>
</div>
<div class="hint hint-right hint-bottom">
<h3>Easy to Customize</h3>
<p>Try with different backgrounds, colors and font sizes. It's your baby now!</p>
<span class="arrow"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="screenshot" class="section screenshot">
<div class="row">
<div class="large-12 columns">
<h2>Boom. Instant Preview.</h2>
<span class="subheading">Allow users to enjoy an instant preview on all devices. Let them view your app's screenshots with this premium-like landing page template.
</span>
<ul class="clearing-thumbs small-block-grid-3" data-clearing>
<li><a href="img/screenshot-1b.png"><img src="img/screenshot-1.png"></a></li>
<li><a href="img/screenshot-2b.png"><img src="img/screenshot-2.png"></a></li>
<li><a href="img/screenshot-3b.png"><img src="img/screenshot-3.png"></a></li>
<li><a href="img/screenshot-2b.png"><img src="img/screenshot-2.png"></a></li>
<li><a href="img/screenshot-1b.png"><img src="img/screenshot-1.png"></a></li>
<li><a href="img/screenshot-3b.png"><img src="img/screenshot-3.png"></a></li>
<li><a href="img/screenshot-3b.png"><img src="img/screenshot-3.png"></a></li>
<li><a href="img/screenshot-2b.png"><img src="img/screenshot-2.png"></a></li>
<li><a href="img/screenshot-1b.png"><img src="img/screenshot-1.png"></a></li>
</ul>
</div>
</div>
</div>
<div id="pricing-table" class="section pricing gray" data-magellan-destination="pricing">
<div class="row">
<div class="large-12 quotes columns">
<ul id="quotes1" data-orbit>
<li class="quote" data-orbit-slide="headline-1">
<blockquote>AppLanding page looks great, I missed something like this.</blockquote>
<span class="author">John Donga</span>
</li>
<li class="quote" data-orbit-slide="headline-2">
<blockquote>I was going to buy a premium template, but now I am using AppLanding template.</blockquote>
<span class="author">John Dongi</span>
</li>
<li class="quote" data-orbit-slide="headline-3">
<blockquote>Awesome. Tweaked it a bit and got myself an ideal ladning page.</blockquote>
<span class="author">John Donga</span>
</li>
</ul>
</div>
</div>
<div class="row price-table">
<div class="large-4 columns">
<ul class="pricing-table">
<li class="title">Plan Plus</li>
<li class="description">With basic features</li>
<li class="price">$9.99</li>
<a class="price-table-toggle">+ Show features</a>
<ul class="price-table-features">
<li class="bullet-item">Responsive Layout</li>
<li class="bullet-item">Retina Support</li>
<li class="bullet-item">And a lot more</li>
</ul>
<li class="cta-button"><a class="button secondary radius" href="#">Buy Now</a></li>
</ul>
</div>
<div class="large-4 columns">
<ul class="pricing-table featured">
<li class="title">Plan Business</li>
<li class="description">With advanced features</li>
<li class="price">$19.99</li>
<a class="price-table-toggle">+ Show features</a>
<ul class="price-table-features">
<li class="bullet-item">Responsive Layout</li>
<li class="bullet-item">Retina Support</li>
<li class="bullet-item">And a lot more</li>
</ul>
<li class="cta-button"><a class="button radius" href="#">Buy Now</a></li>
</ul>
</div>
<div class="large-4 columns">
<ul class="pricing-table">
<li class="title">Plan Premium</li>
<li class="description">With awesome features</li>
<li class="price">$29.99</li>
<a class="price-table-toggle">+ Show features</a>
<ul class="price-table-features">
<li class="bullet-item">Responsive Layout</li>
<li class="bullet-item">Retina Support</li>
<li class="bullet-item">And a lot more</li>
</ul>
<li class="cta-button"><a class="button secondary radius" href="#">Buy Now</a></li>
</ul>
</div>
</div>
</div>
<div id="contact" class="section contact gray" data-magellan-destination="contact">
<div class="row">
<div class="large-12 columns">
<h2>Ready to Get Started?</h2>
<span class="subheading">If you're interested, I'd love to hear from you. Drop me a line anytime!
</span>
<form method="post" action="#" id="contactform">
<div>
<label for="name">Enter your name</label>
<input type="text" class="input-field" id="name" name="name" value="">
</div>
<div>
<label for="email">Enter your e-mail</label>
<input type="text" class="input-field" id="email" name="email" value="">
</div>
<div>
<label>Type Your Message</label>
<textarea id="message" name="message"></textarea>
</div>
<a id="button-send" href="#" title="Send Email" class="button" style="width:100%;">Send E-Mail</a>
<div id="success">Your message has been successfully!</div>
<div id="error">Unable to send your message, please try later.</div>
</form>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="large-6 columns">
<ul class="inline-list">
<li class="copyright">2013 © AppLanding Template</a></li>
</ul>
</div>
<div class="large-6 columns">
<ul class="inline-list social-media right">
<li><a href="http://www.facebook.com/EGrappler" class="icon icon-facebook"></a></li>
<li><a href="htp://twitter.com/egrappler" class="icon icon-twitter"></a></li>
<li><a href="https://plus.google.com/102572598506883739879/posts" class="icon icon-googleplus"></a></li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<script src="js/jquery.localscroll-1.2.7.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.3.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/flexslider.css"> <!-- Flex slider -->
<script src="js/jquery.flexslider.js" type="text/javascript"></script><!-- Flex slider -->
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>