-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex_buy_paypal.html
1068 lines (1062 loc) · 58.1 KB
/
index_buy_paypal.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
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<!--
Page : Home Page
Version : 1.0
Author : Surjith S M
URI : http://themeforest.net/user/surjithctly
Copyright © All rights Reserved
Surjith S M / @surjithctly
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--========== Page Ttile ==========-->
<title>ProLand - Product Landing Page Template</title>
<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
<!-- CSS Plugin Files -->
<link href="css/lib/bootstrap.min.css" rel="stylesheet">
<link href="css/plugins/font-awesome.min.css" rel="stylesheet">
<link href="css/plugins/lineicons.css" rel="stylesheet">
<link href="vendors/magnific-popup/magnific-popup.css" rel="stylesheet">
<link href="vendors/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet">
<link href="vendors/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet">
<link href="vendors/owl-carousel/assets/owl.carousel.css" rel="stylesheet">
<link href="css/plugins/animate.css" rel="stylesheet">
<!-- Preloader -->
<link href="css/plugins/preloader.css" rel="stylesheet">
<!--========== Main Styles==========-->
<link href="css/style.css" rel="stylesheet">
<!-- Theme CSS (For Available Color Options, See Documentation ) -->
<link href="css/themes/blue-orange.css" rel="stylesheet">
<!--========== HTML5 shim and Respond.js (Required) ==========-->
<!--[if lt IE 9]>
<script src="js/lib/html5shiv.min.js"></script>
<script src="js/lib/respond.min.js"></script>
<![endif]-->
</head>
<body class="home" data-scroll-animation="true">
<!--==========Preloader==========-->
<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div class="object" id="object_four"></div>
<div class="object" id="object_three"></div>
<div class="object" id="object_two"></div>
<div class="object" id="object_one"></div>
</div>
</div>
</div>
<!--==========Header==========-->
<header class="row" id="header">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--========== Brand and toggle get grouped for better mobile display ==========-->
<div class="navbar-header">
<a class="navbar-brand" href="#header"><img src="images/logo.png" alt=""></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--========== Collect the nav links, forms, and other content for toggling ==========-->
<div class="collapse navbar-collapse" id="main-navbar">
<a href="#product-choose" class=" btn btn-warning pull-right hidden-sm hidden-xs">BUY IT NOW</a>
<ul class="nav navbar-nav navbar-right">
<li><a href="#product">Product</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#reviews">Reviews</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="index.html">Pre-order (Email)</a></li>
<li><a href="index_email.html">Email Signup (Mailchimp)</a></li>
<li><a href="index_buy_paypal.html">Buy Now (PayPal)</a></li>
<li><a href="index_kickstarter.html">Kickstarter Campaign</a></li>
<li><a href="index_indegogo.html">Indegogo Campaign</a></li>
<li><a href="index_boxed.html">Boxed Version</a></li>
<li><a href="index_rtl.html">RTL Version</a></li>
<li><a href="index_video.html">Video Background</a></li>
<li class="divider"></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-single.html">Blog Single</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="shortcodes.html">Shortcodes</a></li>
</ul>
</li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
<!--========== /.navbar-collapse ==========-->
</div>
<!--========== /.container-fluid ==========-->
</nav>
<div class="top-banner row m0 text-center fadeInOnLoad">
<div class="container">
<h2>The future of tech is here</h2>
<p>Holisticly incentivize revolutionary collaboration and idea sharing before cost effective users. Actual focused services before highly efficient human capital. </p>
<a href="#product-choose" class="btn btn-primary btn-lg">BUY WITH PAYPAL</a>
<div class="row apple-watch">
<img src="images/apple-watch.png" alt="" class="watch_img">
</div>
</div>
</div>
</header>
<!--==========The Product==========-->
<section class="row the-product" id="product">
<div class="container">
<div class="row section-header wow fadeInUp">
<h2>the product</h2>
<p>Introduce the product here. A small description about what it is and how it helps the user. You can also add some photos below.</p>
</div>
<div class="row apple-watch-note-feature text-center">
<img src="images/apple-watch-2.png" alt="">
<!--==========Feature Noted top right==========-->
<div class="feature-note right top wow fadeInRight">
<div class="indicator">
<div class="plus-icon">
<span class="plus">+</span>
</div>
</div>
<div class="feature-name">
metalic strap
</div>
</div>
<!--==========Feature Noted top left==========-->
<div class="feature-note left top wow fadeInLeft">
<div class="indicator">
<div class="plus-icon">
<span class="plus">+</span>
</div>
</div>
<div class="feature-name">
Gps tracker
</div>
</div>
<!--==========Feature Noted bottom right==========-->
<div class="feature-note right bottom wow fadeInUp">
<div class="indicator">
<div class="plus-icon">
<span class="plus">+</span>
</div>
</div>
<div class="feature-name">
Bluetooth 4.2
</div>
</div>
<!--==========Feature Noted bottom left==========-->
<div class="feature-note left bottom wow fadeInLeft">
<div class="indicator">
<div class="plus-icon">
<span class="plus">+</span>
</div>
</div>
<div class="feature-name">
water resistant
</div>
</div>
</div>
</div>
</section>
<!--==========How its Works==========-->
<section class="row how-it-works">
<div class="container">
<div class="row section-header v2 wow fadeInUp">
<h2>how it works</h2>
<p>Everybody loves tech gadgets, But our’s is different. Here is how it works. Its should be simple. Add how easy is to install your product</p>
</div>
<div class="row work-processes">
<!--==========Work Process==========-->
<div class="col-sm-4 work-process wow fadeIn">
<div class="row m0 process-icon">
<img src="images/desktop.png" alt="">
</div>
<h3>Connect Device</h3>
<p>Lorem ipsum dolor sit amet, consectetur de elit, sed do tempor incididunt ut labore eta rehenderit in voluptate velit.</p>
</div>
<!--==========Work Process==========-->
<div class="col-sm-4 work-process wow fadeIn" data-wow-delay="0.5s">
<div class="row m0 process-icon">
<img src="images/toggles.png" alt="">
</div>
<h3>Configure it</h3>
<p>Lorem ipsum dolor sit amet, consectetur de elit, sed do tempor incididunt ut labore eta rehenderit in voluptate velit.</p>
</div>
<!--==========Work Process==========-->
<div class="col-sm-4 work-process wow fadeIn" data-wow-delay="1s">
<div class="row m0 process-icon">
<img src="images/trophy.png" alt="">
</div>
<h3>Yay! Done.</h3>
<p>Lorem ipsum dolor sit amet, consectetur de elit, sed do tempor incididunt ut labore eta rehenderit in voluptate velit.</p>
</div>
</div>
</div>
</section>
<!--==========The Benefits==========-->
<section class="row the-benefits" id="features">
<div class="container">
<div class="row section-header wow fadeInUp">
<h2>The Benefits</h2>
<p>List out your product’s benefit here. A small description about what it is and how it helps the user. You can also add some icons.</p>
</div>
<div class="row benefit-notes">
<!--==========Single Benefit==========-->
<div class="col-sm-6 col-md-4 benefit wow fadeInUp">
<div class="media">
<div class="media-left">
<span><i class="li_location"></i></span>
</div>
<div class="media-body">
<h4>GPS Tracking</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
</div>
<!--==========Single Benefit==========-->
<div class="col-sm-6 col-md-4 benefit wow fadeInUp" data-wow-delay="0.3s">
<div class="media">
<div class="media-left">
<span><i class="li_heart"></i></span>
</div>
<div class="media-body">
<h4>Heartbeat Analysis</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
</div>
<!--==========Single Benefit==========-->
<div class="col-sm-6 col-md-4 benefit wow fadeInUp" data-wow-delay="0.6s">
<div class="media">
<div class="media-left">
<span><i class="li_lock"></i></span>
</div>
<div class="media-body">
<h4>Security first</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
</div>
<!--==========Single Benefit==========-->
<div class="col-sm-6 col-md-4 benefit wow fadeInUp" data-wow-delay="0.9s">
<div class="media">
<div class="media-left">
<span><i class="li_bulb"></i></span>
</div>
<div class="media-body">
<h4>Innovative idea</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
</div>
<!--==========Single Benefit==========-->
<div class="col-sm-6 col-md-4 benefit wow fadeInUp" data-wow-delay="1.2s">
<div class="media">
<div class="media-left">
<span><i class="li_banknote"></i></span>
</div>
<div class="media-body">
<h4>Save your bills</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
</div>
<!--==========Single Benefit==========-->
<div class="col-sm-6 col-md-4 benefit wow fadeInUp" data-wow-delay="1.5s">
<div class="media">
<div class="media-left">
<span><i class="li_lab"></i></span>
</div>
<div class="media-body">
<h4>Proven technology</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==========Left Right Content==========-->
<section class="row left-right-contents">
<div class="container">
<div class="row ">
<div class="col-sm-12 col-md-4 col-md-push-4 text-center wow fadeIn">
<img src="images/apple-watch-3.png" alt="">
</div>
<div class="col-md-4 col-sm-6 col-md-pull-4 left-content">
<div class="media wow fadeInUp">
<div class="media-left">
<span><i class="li_key"></i></span>
</div>
<div class="media-body">
<h4>Fast and secure</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
<div class="media wow fadeInUp" data-wow-delay="0.3s">
<div class="media-left">
<span><i class="li_megaphone"></i></span>
</div>
<div class="media-body">
<h4>Voice Assistant</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
<div class="media wow fadeInUp" data-wow-delay="0.6s">
<div class="media-left">
<span><i class="li_diamond"></i></span>
</div>
<div class="media-body">
<h4>Apps you love</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 right-content">
<div class="media wow fadeInUp">
<div class="media-left">
<span><i class="li_like"></i></span>
</div>
<div class="media-body">
<h4>Stay in touch</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
<div class="media wow fadeInUp" data-wow-delay="0.3s">
<div class="media-left">
<span><i class="li_user"></i></span>
</div>
<div class="media-body">
<h4>Designed for you</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
<div class="media wow fadeInUp" data-wow-delay="0.6s">
<div class="media-left">
<span><i class="li_clock"></i></span>
</div>
<div class="media-body">
<h4>Precise timepiece</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore </p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==========Our Collection==========-->
<section class="row our-collection">
<div class="container">
<div class="row section-header wow fadeInUp">
<h2>Our Collection</h2>
<p>You are unique. You have unique style and you need a unique watch for you. Choose from our collection of watches.</p>
</div>
<div class="row collections">
<!--==========Collection Items==========-->
<div class="col-sm-6 col-md-3 item wow fadeIn">
<div class="row m0 featured-img">
<img src="images/collection-1.jpg" alt="">
</div>
<h4 class="title">Watch Limited Edition</h4>
<h5 class="category">Stainless steel case</h5>
<h4 class="price">$399</h4>
<a href="#product-choose" class="btn">CHOOSE</a>
</div>
<!--==========Collection Items==========-->
<div class="col-sm-6 col-md-3 item wow fadeIn" data-wow-delay="0.5s">
<div class="row m0 featured-img">
<img src="images/collection-2.jpg" alt="">
</div>
<h4 class="title">Watch Bracelet</h4>
<h5 class="category">White strap & Stainless steel</h5>
<h4 class="price">$299</h4>
<a href="#product-choose" class="btn">CHOOSE</a>
</div>
<!--==========Collection Items==========-->
<div class="col-sm-6 col-md-3 item wow fadeIn" data-wow-delay="1s">
<div class="row m0 featured-img">
<img src="images/collection-3.jpg" alt="">
</div>
<h4 class="title">Watch Original</h4>
<h5 class="category">The FirstWatch ever released</h5>
<h4 class="price">$249</h4>
<a href="#product-choose" class="btn">CHOOSE</a>
</div>
<!--==========Collection Items==========-->
<div class="col-sm-6 col-md-3 item wow fadeIn" data-wow-delay="1.5s">
<div class="row m0 featured-img">
<img src="images/collection-4.jpg" alt="">
</div>
<h4 class="title">Watch Soprts Edition</h4>
<h5 class="category">Water proof and Fitness tracking</h5>
<h4 class="price">$399</h4>
<a href="#product-choose" class="btn">CHOOSE</a>
</div>
</div>
</div>
</section>
<!--==========The Watch==========-->
<section class="row the-watch">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1 text-center the-watch-img wow zoomIn">
<img src="images/the-watch.png" alt="" class="img-responsive">
</div>
<div class="col-md-6 the-watch-features">
<div class="row section-header v3 wow fadeIn">
<h2>The Watch</h2>
<p>With an image in the side of this conetent, you can use this section to write about some cool thing about your product or its features.</p>
</div>
<ul class="nav">
<li class="wow fadeIn" data-wow-delay="0.2s">Compatible with all devices</li>
<li class="wow fadeIn" data-wow-delay="0.4s">Android and iOS Support</li>
<li class="wow fadeIn" data-wow-delay="0.6s">Activity & Health Tracker</li>
<li class="wow fadeIn" data-wow-delay="0.8s">Read & reply to messages</li>
</ul>
</div>
</div>
</div>
</section>
<!--==========Split Columns==========-->
<section class="row split-columns">
<div class="row m0 split-column wow fadeIn">
<div class="col-sm-6 image text-right">
<img src="images/split-1.jpg" alt="">
</div>
<div class="col-sm-6 texts">
<div class="texts-inner row m0">
<h2>Every Apps you wanted</h2>
<p>You won’t just send and receive messages, calls, and mail more easily and efficiently. You’ll express yourself in unique, fun, and more personal ways. Communicating with Watch is discreet, sophisticated, and nuanced. a whole new way to connect with others.</p>
</div>
</div>
</div>
<div class="row m0 split-column wow fadeIn">
<div class="col-sm-6 col-sm-push-6 image">
<img src="images/split-2.jpg" alt="">
</div>
<div class="col-sm-6 col-sm-pull-6 texts">
<div class="texts-inner row m0">
<h2>Health and Fitness</h2>
<p>Fitness isn’t just about running, biking, or hitting the gym. It’s also about being active throughout the day. Watch measures all the ways you move, such as walking the dog, taking the stairs, or playing with your kids. It even keeps track of when you stand up.</p>
</div>
</div>
</div>
</section>
<!--==========Reviews==========-->
<section class="row reviews" id="reviews">
<div class="container">
<div class="row section-header wow fadeInUp">
<h2>Reviews</h2>
<p>Don’t take our word,. See what our experts says about the watch. We have got over 1000s of positive reviews.</p>
</div>
<div class="row">
<!--==========Review==========-->
<div class="review col-sm-4 wow fadeIn">
<img src="images/quote.png" alt="" class="review-sign">
<p>The Watch is the nicest smartwatch available, but it's more status symbol than wearable revolutionary. Most of the Watch's features are great.</p>
<img src="images/reviewer1.png" alt="" class="reviewer">
</div>
<!--==========Review==========-->
<div class="review col-sm-4 wow fadeIn" data-wow-delay="0.3s">
<img src="images/quote.png" alt="" class="review-sign">
<p>Watch is the most ambitious, well constructed smartwatch ever seen, but first-gen shortfalls make it feel more like a fashionable toy than a necessary tool.</p>
<img src="images/reviewer2.png" alt="" class="reviewer">
</div>
<!--==========Review==========-->
<div class="review col-sm-4 wow fadeIn" data-wow-delay="0.6s">
<img src="images/quote.png" alt="" class="review-sign">
<p>Watch is the best smartwatch we’ve used, and the first that feels friendly and has character. Watch OS 2.0 adds needed app and Siri abilities.</p>
<img src="images/reviewer3.png" alt="" class="reviewer">
</div>
</div>
</div>
</section>
<!--==========Featured On==========-->
<section class="row featured-on">
<div class="container">
<div class="row">
<h3>As featured on</h3>
<ul class="nav nav-justified">
<li class="wow fadeInUp" data-wow-delay="0.2s"><img src="images/featured1.png" alt=""></li>
<li class="wow fadeInUp" data-wow-delay="0.4s"><img src="images/featured2.png" alt=""></li>
<li class="wow fadeInUp" data-wow-delay="0.6s"><img src="images/featured3.png" alt=""></li>
<li class="wow fadeInUp" data-wow-delay="0.8s"><img src="images/featured4.png" alt=""></li>
<li class="wow fadeInUp" data-wow-delay="1s"><img src="images/featured5.png" alt=""></li>
<li class="wow fadeInUp" data-wow-delay="1.2s"><img src="images/featured6.png" alt=""></li>
</ul>
</div>
</div>
</section>
<!--==========FAQS==========-->
<section class="row faqs">
<div class="container">
<div class="row section-header wow fadeInUp">
<h2>faq</h2>
<p>Got questions? We’ve got answers. If you have some other questions, feel free to send us an email to <a href="#">[email protected]</a></p>
</div>
<div class="row">
<!--==========Faq==========-->
<div class="col-sm-6 faq wow fadeInUp">
<h4>What is Watch? How it works?</h4>
<p>Watch took center stage at this year's Product Show with a preview of watch OS 2. The next generation of Watch software is packed with features that just might turn the device from a nice-to-have into a must-have. If you already own an Apple Watch, you'll have to live with the old software until fall. You’ll love it at the first use.</p>
</div>
<!--==========Faq==========-->
<div class="col-sm-6 faq wow fadeInUp">
<h4>How the watch is made?</h4>
<p>Watch has an anodized aluminum case (which is lighter than stainless steel) in silver or space gray, and the face is Ion-X glass, which also designed to be hard and rugged (as well as a little bit lighter) than the sapphire. It’s definitely the lightest of the three Apple Watch editions, making it an ideal exercise companion. </p>
</div>
<!--==========Faq==========-->
<div class="col-sm-6 faq wow fadeInUp" data-wow-delay="0.3s">
<h4>Can I swap out the watch band?</h4>
<p>Absolutely. Watch comes with six bands that are easy to mix and match any band with any watch. You can swap them out as your heart desires without the aid of any tools—as long as the band and watch are the same size. (The Leather Loop band, for example, only fits 42mm watches, not the smaller 38mm size.) </p>
</div>
<!--==========Faq==========-->
<div class="col-sm-6 faq wow fadeInUp" data-wow-delay="0.3s">
<h4>So it’s a watch and a fitness tracker?</h4>
<p>The accelerometer lets the watch count your steps, and it extrapolate distance on its own, or rely on the GPS in the paired Phone to trace your exact route. That step data comes in handy for two of the apps included on the watch: Activity and Workout. Both of the watch’s fitness apps sync data back to the Health and Fitness apps on your Phone.</p>
</div>
</div>
</div>
</section>
<!--==========Tech Specs==========-->
<section class="row tech-specs">
<div class="container">
<div class="row section-header wow fadeInUp">
<h2>tech specs</h2>
<p>Need more info? Please have a look at the tech specs of the watch. We’ve used Latest technology & quality materials</p>
</div>
<!--==========Tech Specs Row==========-->
<div class="row tech-specs-row">
<div class="col-sm-6 col-md-4 tech-spec wow fadeIn" data-wow-delay="0s">
<h4>Compatibility</h4>
<ul class="nav">
<li>iPhone iOS 7 & up</li>
<li>Android 4.3 & uptexts</li>
<li>Bluetooth 4.0</li>
<li>Notification for calls / texts</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 tech-spec wow fadeIn" data-wow-delay="0.3s">
<h4>App</h4>
<ul class="nav">
<li>Set daily goals</li>
<li>Analyze history</li>
<li>Sync to phone & cloud</li>
<li>Connect to Apple health kit</li>
<li>Connect to Google fit</li>
<li>Watch firmware upgrade</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 tech-spec wow fadeIn" data-wow-delay="0.6s">
<h4>Vibration silent alarms</h4>
<ul class="nav">
<li>Phone notifications</li>
<li>Daily goal reached</li>
<li>Daily wake-up alarm</li>
<li>Location assistance</li>
<li>Accessiblity features</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 tech-spec wow fadeIn" data-wow-delay="0.9s">
<h4>Watch</h4>
<ul class="nav">
<li>12.6mm thickness</li>
<li>3.16L stainless steel case</li>
<li>40mm diameter</li>
<li>5 ATM water resistant</li>
<li>Sapphire glass crystal</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 tech-spec wow fadeIn" data-wow-delay="1.2s">
<h4>Straps</h4>
<ul class="nav">
<li>Italian leather with natural lining</li>
<li>Comfort sport fabric</li>
<li>Quick-release pins</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 tech-spec wow fadeIn" data-wow-delay="1.5s">
<h4>Activity tracking</h4>
<ul class="nav">
<li>Step counting</li>
<li>Distance</li>
<li>Calories burned</li>
<li>Swimming (strokes)</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 tech-spec wow fadeIn" data-wow-delay="1.8s">
<h4>Timekeeping</h4>
<ul class="nav">
<li>Swiss ETA movement</li>
<li>Accurate, reliable</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 tech-spec wow fadeIn" data-wow-delay="2.1s">
<h4>Battery power</h4>
<ul class="nav">
<li>Standard CR2025 6+ months</li>
<li>Standard 364 for timekeeping 5+ years</li>
<li>Solar Power available as aupgrade</li>
</ul>
</div>
<div class="col-sm-6 col-md-4 tech-spec wow fadeIn" data-wow-delay="2.4s">
<h4>Sensors</h4>
<ul class="nav">
<li>MEMS 3-axis accelerometer</li>
<li>Highly accurate</li>
<li>Low power consumption</li>
</ul>
</div>
</div>
<!--==========Tech Specs Row==========-->
<div class="row tech-specs-row">
</div>
<!--==========Tech Specs Row==========-->
<div class="row tech-specs-row">
</div>
</div>
</section>
<!--==========Team==========-->
<section class="row team">
<div class="container">
<div class="row section-header wow fadeInUp">
<h2>meet the team</h2>
<p>We are a small group of inverntors, hackers and designers from the differrent parts of the world on a mission.</p>
</div>
<div class="row team_members">
<!--==========Member==========-->
<div class="col-md-3 col-sm-6 member wow fadeInUp">
<div class="row m0 inner">
<div class="row m0 image">
<img src="images/team-1.jpg" alt="">
</div>
<div class="texts row m0">
<h4>Gary Elliott</h4>
<h5>Co-Founder and CEO</h5>
</div>
</div>
</div>
<!--==========Member==========-->
<div class="col-md-3 col-sm-6 member wow fadeInUp" data-wow-delay="0.3s">
<div class="row m0 inner">
<div class="row m0 image">
<img src="images/team-2.jpg" alt="">
</div>
<div class="texts row m0">
<h4>Jeffrey Allen</h4>
<h5>Co-Founder and CTO</h5>
</div>
</div>
</div>
<!--==========Member==========-->
<div class="col-md-3 col-sm-6 member wow fadeInUp" data-wow-delay="0.6s">
<div class="row m0 inner">
<div class="row m0 image">
<img src="images/team-3.jpg" alt="">
</div>
<div class="texts row m0">
<h4>Sara Mendez</h4>
<h5>Lead Developer, Hacker</h5>
</div>
</div>
</div>
<!--==========Member==========-->
<div class="col-md-3 col-sm-6 member wow fadeInUp" data-wow-delay="0.9s">
<div class="row m0 inner">
<div class="row m0 image">
<img src="images/team-4.jpg" alt="">
</div>
<div class="texts row m0">
<h4>Albert Castro</h4>
<h5>3D Designer & Prototyper</h5>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==========Timeline==========-->
<section class="row timeline">
<div class="container">
<div class="row section-header wow fadeInUp">
<h2>timeline</h2>
<p>Here’s a roadmap of our product to highlight the milestones from the initial phase to delivery and future updates.</p>
</div>
<div class="row timeline-row">
<div class="row m0 timeline-post">
<div class="bar-content">
<div class="inner">now</div>
</div>
</div>
<div class="row m0 timeline-post has-content wow fadeInUp">
<div class="col-sm-6 half-side date">
23 jan 2014
</div>
<div class="col-sm-6 half-side content">
<div class="inner">
<h4 class="title">Mass Production</h4>
</div>
</div>
</div>
<div class="row m0 timeline-post has-content odd wow fadeInUp">
<div class="col-sm-6 half-side date">
23 jan 2014
</div>
<div class="col-sm-6 half-side content">
<div class="inner">
<h4 class="title">Testing Pre-Production Samples</h4>
</div>
</div>
</div>
<div class="row m0 timeline-post has-content wow fadeInUp">
<div class="col-sm-6 half-side date">
23 jan 2014
</div>
<div class="col-sm-6 half-side content">
<div class="inner">
<h4 class="title">Croudfunding Campaign</h4>
<p>And an optional description. You may add little description of your milestone if you want.</p>
</div>
</div>
</div>
<div class="row m0 timeline-post has-content odd wow fadeInUp">
<div class="col-sm-6 half-side date">
23 jan 2014
</div>
<div class="col-sm-6 half-side content">
<div class="inner">
<h4 class="title">Preview at CES</h4>
</div>
</div>
</div>
<div class="row m0 timeline-post wow fadeInUp">
<div class="bar-content">
<div class="inner">2015</div>
</div>
</div>
<div class="row m0 timeline-post has-content wow fadeInUp">
<div class="col-sm-6 half-side date">
23 jan 2014
</div>
<div class="col-sm-6 half-side content">
<div class="inner">
<h4 class="title">3D Prototype & Testing</h4>
</div>
</div>
</div>
<div class="row m0 timeline-post has-content odd wow fadeInUp">
<div class="col-sm-6 half-side date">
23 jan 2014
</div>
<div class="col-sm-6 half-side content">
<div class="inner">
<h4 class="title">Research and Development</h4>
</div>
</div>
</div>
<div class="row m0 timeline-post">
<div class="bar-content">
<div class="inner">idea</div>
</div>
</div>
</div>
</div>
</section>
<!--==========Mobile App==========-->
<section class="row mobile-app">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-push-6 wow fadeIn">
<h2>Mobile App for watch</h2>
<p>The smartwatch connects to your iPhone and other iOS devices using Bluetooth, alerting you to incoming calls, emails, messages and alerts. Customize your with over 1,000 watchapps found within the smartwatch app.</p>
<div class="row m0 downloads-btns">
<a href="#" class="dload-link"><img src="images/app-store.png" alt=""></a>
<a href="#" class="dload-link"><img src="images/google-play.png" alt=""></a>
</div>
</div>
<div class="col-sm-6 col-sm-pull-6 wow fadeInUp">
<img src="images/app-screen.png" alt="" class="mobile-img">
</div>
</div>
</div>
</section>
<!--==========Newsletter==========-->
<section class="row newsletter">
<div class="container">
<div class="row section-header wow fadeInUp">
<h2>newsletter</h2>
<p>Subscribe to our product newsletter to get notified when we launch the product or when we completed a milestone</p>
</div>
<form action="php/subscribe.php" id="subscribeform" class="row newsletter-form" method="post">
<div class="input-group">
<input type="email" class="form-control" name="email" placeholder="Enter Your Email Address">
<span class="input-group-addon">
<button type="submit" id="js-subscribe-btn"><img src="images/right-angle-white.png" alt=""></button>
</span>
</div>
<div id="js-subscribe-result" class="text-center" data-success-msg="Almost finished. Please check your email and verify." data-error-msg="Oops. Something went wrong.">
<p>
<img src="images/protect.png" alt="">No Spam. We Promise. Unsubscribe anytime.
</p>
</div>
</form>
</div>
</section>
<!--==========Contact==========-->
<section class="row contact" id="contact">
<!-- ================== GOOGLE MAP (Change data-lat & data-lon values) ====================== -->
<!-- TIP : More Customization / Color option available in /js/plugins/google-map.js -->
<div id="mapBox" class="row m0" data-lat="37.3818288" data-lon="-122.0636325" data-zoom="15"></div>
<!-- Flippable Contact Box -->
<div class="flip-box-container row m0">
<div class="flip-box row m0 wow fadeIn">
<!-- Contact Address (front Side) -->
<div class="row contact-box flip-box-part">
<h2>get in touch</h2>
<ul class="nav">
<li><i class="fa fa-map-marker"></i>523 Sylvan Ave, 5th Floor
<br>Mountain View, CA 94041USA</li>
<li><i class="fa fa-phone"></i>+1 (234) 56789
<br>+1 987 654 3210</li>
</ul>
<button class="flip-contact-box btn btn-block">contact us</button>
</div>
<!-- Contact Form (back Side) -->
<div class="row contact-form flip-box-part">
<a href="javascript:void(0);" class="js-close-flip">×</a>
<!-- Contact Form Starts here -->
<form action="php/contact.php" id="phpcontactform" method="POST">
<div class="row">
<div class="form-group col-sm-6">
<input type="text" name="name" class="form-control" placeholder="Name" required>
</div>
<div class="form-group col-sm-6">
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
</div>
</div>
<div class="form-group">
<input type="text" name="subject" class="form-control" placeholder="Subject" required>
</div>
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Message" required></textarea>
</div>
<button type="submit" id="js-contact-btn" class="btn btn-block">Send Message</button>
<div id="js-contact-result" data-success-msg="Form submitted successfully." data-error-msg="Oops. Something went wrong."></div>
</form>
<!-- // End Contact form -->
</div>
<!-- // End back Side -->
</div>
</div>
<!-- // End Contact Box -->
</section>
<!--==========Footer==========-->
<footer class="row">
<div class="container">
<div class="row m0 social-links">
<ul class="nav">
<li class="wow fadeInUp"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="wow fadeInUp" data-wow-delay="0.1s"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="wow fadeInUp" data-wow-delay="0.2s"><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li class="wow fadeInUp" data-wow-delay="0.3s"><a href="#"><i class="fa fa-youtube"></i></a></li>
<li class="wow fadeInUp" data-wow-delay="0.4s"><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="wow fadeInUp" data-wow-delay="0.5s"><a href="#"><i class="fa fa-pinterest"></i></a></li>
</ul>
</div>
<div class="row m0 menu-rights">
<ul class="nav footer-menu">
<li><a href="about.html">About</a></li>
<li><a href="terms-of-use.html">Terms of Use</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
<li><a href="#">Mobile App</a></li>
<li><a href="presskit.zip">PressKit</a></li>
</ul>
<p>Copyright © 2016. Proland.
<br class="small-divide"> All rights reserved</p>
</div>
</div>
</footer>
<!-- ============================================================
PRODUCT POPUP
============================================================ -->
<div class="row product-box mfp-hide" id="product-choose">
<button class="mfp-close custom_close" title="Close (Esc)" type="button">×</button>
<div class="product-img-gallery">
<div id="product-imgs" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#product-imgs" data-slide-to="0" class="active"></li>
<li data-target="#product-imgs" data-slide-to="1"></li>
<li data-target="#product-imgs" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/the-watch-1.png" alt="watch-1">
</div>
<div class="item">
<img src="images/the-watch-2.png" alt="watch-2">
</div>
<div class="item">
<img src="images/the-watch-3.png" alt="watch-3">
</div>
</div>
</div>
</div>
<div class="product-desc">
<!-- Testing Paypal? Change Paypal URL to https://www.sandbox.paypal.com/cgi-bin/webscr If you are testing -->
<form action="https://www.paypal.com/cgi-bin/webscr" method="POST" target="_top" class="choose-form row m0" id="paypal-regn">
<div id="js-product-info" class="product-info">
<h4 class="name">Smart Watch</h4>
<h2 class="edition">Sports Edition</h2>
<h5 class="model">MODEL AS1500</h5>
<h2 class="price"><del>$349</del>$299 <span class="label label-default">early bird offer</span></h2>
<div class="row m0 description">
<p>8mm Silver Aluminum Case with Blue Sport Band. Its perfect fit for tracking fitness. 100% waterproof. Buy this limted edition sports edition.</p>
</div>
<div class="choose-options row m0" id="js-choose-color">
<div class="option">
<h4 class="form-label">Choose a color</h4>
<div class="row m0 colors">
<input type="radio" name="os0" value="Blue" id="color-1" checked>
<label for="color-1"></label>
<input type="radio" name="os0" value="Violet" id="color-2">
<label for="color-2"></label>
<input type="radio" name="os0" value="Magenta" id="color-3">
<label for="color-3"></label>
<input type="radio" name="os0" value="Yellow" id="color-4">
<label for="color-4"></label>
<input type="radio" name="os0" value="Green" id="color-5">
<label for="color-5"></label>
</div>
</div>
<div class="option">
<h4 class="form-label">Qty</h4>
<input type="text" value="1" name="quantity" class="quanity">
</div>
<div class="option">
<h4 class="form-label">Size</h4>
<select class="selectpicker" name="os1">
<option value="M" selected>M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
</div>
</div>
<div class="submit-area row m0">
<a href="javascript:void(0);" class="btn btn-rounded btn-block" id="next-personal">Checkout</a>
</div>
</div>
<!-- // End Product Info -->
<div class="personal-info" id="js-personal-info">
<div class="form-group text-center"><a href="javascript:void(0);" class="btn" id="prev-product-info">Go Back</a></div>
<div class="row">
<div class="form-group col-sm-6">
<input type="text" name="first_name" class="form-control" placeholder="First Name" required>
</div>
<div class="form-group col-sm-6">
<input type="text" name="last_name" class="form-control" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
</div>
<div class="form-group">
<input type="text" name="address1" class="form-control" placeholder="Address Line 1" required>
</div>
<div class="form-group">
<input type="text" name="address2" class="form-control" placeholder="Address Line 2" required>
</div>
<div class="row">
<div class="form-group col-sm-6">
<input type="text" name="state" class="form-control" placeholder="State" required>
</div>
<div class="form-group col-sm-6">
<input type="text" name="zip" class="form-control" placeholder="Zip Code" required>
</div>
</div>
<div class="form-group">
<select class="form-control" name="Country" required>
<option selected value="">Choose a country</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Australia">Australia</option>
<option value="India">India</option>
</select>
</div>
<!--
Paypal Hidden Fields
====================================== -->
<!-- Customization Guide : http://bit.ly/papyal_dev_html_guide/ -->