-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
298 lines (236 loc) · 12.2 KB
/
index.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
294
295
296
297
298
<!DOCTYPE html>
<meta name=”ROBOTS” content=”NOINDEX” />
<html lang="en">
<head>
<meta charset="UTF-8">
<title>marketPixel App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Landing page of the supermarket app" />
<meta name="keywords" content="landing page, uspermarket, hipsters, digital nomads" />
<meta name="author" content="A1CY0N" />
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="page-wrap">
<!-- ==========================================================================================================
HERO
========================================================================================================== -->
<div id="fh5co-hero-wrapper">
<nav class="container navbar navbar-expand-lg main-navbar-nav navbar-light">
<a class="navbar-brand" href="">marketPixel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-items-center ml-auto mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="$('#fh5co-features').goTo();return false;">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="$('#fh5co-reviews').goTo();return false;">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="$('#fh5co-download').goTo();return false;">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="doc.marketpixel.ml">Documentation</a>
</li>
</ul>
</div>
</nav>
<div class="container fh5co-hero-inner">
<h1 class="animated fadeIn wow" data-wow-delay="0.4s">The perfect app for shopping abroad</h1>
<p class="animated fadeIn wow" data-wow-delay="0.67s">Are you required to change countries regularly ? Do you have a specific diet ? You have trouble shopping abroad ? Look no further, we have the perfect app for you. </p>
<button class="btn btn-md download-btn-first wow fadeInLeft animated" data-wow-delay="0.85s" onclick="$('#fh5co-download').goTo();return false;">Download</button>
<button class="btn btn-md features-btn-first animated fadeInLeft wow" data-wow-delay="0.95s" onclick="$('#fh5co-features').goTo();return false;">Features</button>
<img class="fh5co-hero-smartphone animated fadeInRight wow" data-wow-delay="1s" src="img/phone-image.png" alt="Smartphone">
</div>
</div> <!-- first section wrapper -->
<!-- ==========================================================================================================
ADVANTAGES
========================================================================================================== -->
<div class="fh5co-advantages-outer">
<div class="container">
<h1 class="second-title"><span class="span-perfect">Perfect</span> <span class="span-features">Features</span></h1>
<small>Only necessary</small>
<div class="row fh5co-advantages-grid-columns wow animated fadeIn" data-wow-delay="0.36s">
<div class="col-sm-4">
<img class="grid-image" src="img/icon-1.png" alt="Icon-1">
<h1 class="grid-title">Usability</h1>
<p class="grid-desc">Just look for your favorite product.</p>
</div>
<div class="col-sm-4">
<img class="grid-image" src="img/icon-2.png" alt="Icon-2">
<h1 class="grid-title">Scanner</h1>
<p class="grid-desc">Scan an unknown product to see its ingredients.</p>
</div>
<div class="col-sm-4">
<img class="grid-image" src="img/icon-3.png" alt="Icon-3">
<h1 class="grid-title">Complete</h1>
<p class="grid-desc">Our app lists more than 10000 products.</p>
</div>
</div>
</div>
</div>
<!-- ==========================================================================================================
SLIDER
========================================================================================================== -->
<div class="fh5co-slider-outer wow fadeIn" data-wow-delay="0.36s">
<h1>AN OVERVIEW</h1>
<small>More than download the app</small>
<div class="container fh5co-slider-inner">
<div class="owl-carousel owl-theme">
<div class="item"><img src="img/0.png" alt=""></div>
<div class="item"><img src="img/1.png" alt=""></div>
<div class="item"><img src="img/3.png" alt=""></div>
<div class="item"><img src="img/4.png" alt=""></div>
<div class="item"><img src="img/5.png" alt=""></div>
<div class="item"><img src="img/6.png" alt=""></div>
<div class="item"><img src="img/7.png" alt=""></div>
</div>
</div>
</div>
<!-- ==========================================================================================================
FEATURES
========================================================================================================== -->
<div class="curved-bg-div wow animated fadeIn" data-wow-delay="0.15s"></div>
<div id="fh5co-features" class="fh5co-features-outer">
<div class="container">
<div class="row fh5co-features-grid-columns">
<div class="col-sm-6 in-order-1 wow animated fadeInLeft" data-wow-delay="0.22s">
<div class="col-sm-image-container">
<img class="img-float-left" src="img/smartphone-1.png" alt="smartphone-1">
<span class="span-new">NEW</span>
<span class="span-free">PREF</span>
</div>
</div>
<div class="col-sm-6 in-order-2 sm-6-content wow animated fadeInRight" data-wow-delay="0.22s">
<h1>New Features</h1>
<p>Now you can define your settings and save them in your account! </p>
<span class="circle circle-first"><i class="fab fa-instagram"></i></span>
<span class="circle circle-middle"><i class="fab fa-facebook"></i></span>
<span class="circle circle-last"><i class="fab fa-twitter"></i></span>
</div>
<div class="col-sm-6 in-order-3 sm-6-content wow animated fadeInLeft" data-wow-delay="0.22s">
<h1>Wonderful scanning</h1>
<p>Scan your products and in real time you will have access to the ingredients of your favorite products! </p>
<span class="circle circle-first"><i class="fas fa-star"></i></span>
<span class="circle circle-middle"><i class="far fa-star"></i></span>
<span class="circle circle-last"><i class="far fa-thumbs-up"></i></span>
</div>
<div class="col-sm-6 in-order-4 wow animated fadeInRight" data-wow-delay="0.22s">
<img class="img-float-right" src="img/phone-image-scan.png" alt="smartphone-2">
</div>
<div class="col-sm-6 in-order-5 wow animated fadeInLeft" data-wow-delay="0.22s">
<div class="col-sm-image-container">
<img class="img-float-left" src="img/phone-image-back.png" alt="smartphone-3">
<span class="span-data">DATA</span>
<span class="span-percent">100%</span>
</div>
</div>
<div class="col-sm-6 in-order-6 sm-6-content wow animated fadeInRight" data-wow-delay="0.22s">
<h1>HUGE DATABASE</h1>
<p>We have built a custom back-end in C# to best suit your needs. The OpenFoodFacts API is also used! </p>
<span class="circle circle-first">95%</span>
<span class="circle circle-middle"><i class="fas fa-forward"></i></span>
<span class="circle circle-last"><i class="fab fa-github"></i></span>
</div>
</div> <!-- row -->
</div>
</div>
<!-- ==========================================================================================================
REVIEWS
========================================================================================================== -->
<div id="fh5co-reviews" class="fh5co-reviews-outer">
<h1>What people are saying</h1>
<small>Reviews</small>
<div class="container fh5co-reviews-inner">
<div class="row justify-content-center">
<div class="col-sm-5 wow fadeIn animated" data-wow-delay="0.25s">
<img class="float-left" src="img/quotes-1.jpg" alt="Quote 1">
<p class="testimonial-desc">For allergies it's works well</p>
<small class="testimonial-author">Maarja Hallik</small>
<img class="float-right" src="img/quotes-2.jpg" alt="Quote 2">
</div>
<div class="col-sm-5 testimonial-2 wow fadeIn animated" data-wow-delay="0.67s">
<img class="float-left" src="img/quotes-1.jpg" alt="Quote 1">
<p class="testimonial-desc">Vivement qu'elle arrive sur iphone</p>
<small class="testimonial-author">Jean Bon</small>
<img class="float-right" src="img/quotes-2.jpg" alt="Quote 2">
</div>
</div>
</div>
</div>
<!-- ==========================================================================================================
BOTTOM
========================================================================================================== -->
<div id="fh5co-download" class="fh5co-bottom-outer">
<div class="overlay">
<div class="container fh5co-bottom-inner">
<div class="row">
<div class="col-sm-6">
<h1>How to download the app?</h1>
<p>Go to your favorite application store and look for superkool. Try out SuperKool app and carry out your shopping abroad in all serenity. Let’s get started.</p>
<a class="wow fadeIn animated" data-wow-delay="0.25s" href="#"><img class="app-store-btn" src="img/app-store-icon.png" alt="App Store Icon"></a>
<a class="wow fadeIn animated" data-wow-delay="0.67s" href="#"><img class="google-play-btn" src="img/google-play-icon.png" alt="Google Play Icon"></a>
</div>
</div>
</div>
</div>
</div>
<!-- ==========================================================================================================
SECTION 7 - SUB FOOTER
========================================================================================================== -->
<footer class="footer-outer">
<div class="container footer-inner">
<div class="footer-three-grid wow fadeIn animated" data-wow-delay="0.66s">
<div class="column-1-3">
<h1>MarketPixel</h1>
</div>
<div class="column-2-3">
<nav class="footer-nav">
<ul>
<a href="#" onclick="$('#fh5co-hero-wrapper').goTo();return false;"><li>Home</li></a>
<a href="#" onclick="$('#fh5co-features').goTo();return false;"><li>Features</li></a>
<a href="#" onclick="$('#fh5co-reviews').goTo();return false;"><li>Reviews</li></a>
<a href="#" onclick="$('#fh5co-download').goTo();return false;"><li class="active">Download</li></a>
<a href="doc.markerpixel.ml"><li class="active">Documentation</li></a>
</ul>
</nav>
</div>
</div>
<span class="border-bottom-footer"></span>
<p class="copyright">© 2019 App. All rights reserved. Design by <a href="https://gitlab.com/A1CY0N" target="_blank">A1CY0N</a>.</p>
</div>
</footer>
</div> <!-- main page wrapper -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>