-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
687 lines (681 loc) · 25.4 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
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
---
layout: default
slides:
- bg: images/@stock/fullscreen-slide-1.jpg
title: we are a tough team
tagline: we deliver great things that you definitely love ...
buttons:
- text: view portfolio
class: small
url: http://themeforest.net/user/honryou/portfolio?ref=honryou
- text: purchase now
class: small boxed
url: http://themeforest.net/user/honryou/portfolio?ref=honryou
- bg: http://themes.blahlab.com/squarebox/wp-content/uploads/2014/12/out-short.jpg
title: creative & powerful
tagline: It it very happy thing to make great website
buttons:
- text: purchase now
class: small
url: http://themeforest.net/user/honryou/portfolio?ref=honryou
- text: view features
class: small boxed
url: http://themeforest.net/user/honryou/portfolio?ref=honryou
videos:
- type: webm
url: http://themes.blahlab.com/squarebox/wp-content/uploads/2014/11/out-short.webm
- type: mp4
url: http://themes.blahlab.com/squarebox/wp-content/uploads/2014/11/out-short.mp4
- bg: ../images/@stock/fullscreen-slide-3.jpg
title: Always have a dream
tagline: It is very quick to build a website with this theme
buttons:
- text: Purchase now
class: small
url: http://themeforest.net/user/honryou/portfolio?ref=honryou
- text: View features
class: boxed small
url: http://themeforest.net/user/honryou/portfolio?ref=honryou
works:
- image: ../images/@stock/one-page-work-1.jpg
title: Beautiful Girl
link_to: portfolio-item.html
class: graphic-design
desc: Design & Development
- image: ../images/@stock/one-page-work-2.jpg
title: Look at me
link_to: portfolio-item.html
class: web-design print
desc: Design & Development
- image: ../images/@stock/one-page-work-3.jpg
title: Am I cute
link_to: portfolio-item.html
class: brand
desc: Design & Development
- image: ../images/@stock/one-page-work-4.jpg
title: Umbrella
link_to: portfolio-item.html
class: development
desc: Design & Development
- image: ../images/@stock/one-page-work-5.jpg
title: Canned Bros
link_to: portfolio-item.html
class: print brand
desc: Design & Development
- image: ../images/@stock/one-page-work-6.jpg
title: Hale
link_to: portfolio-item.html
class: web-design
desc: Design & Development
- image: ../images/@stock/one-page-work-7.jpg
title: A beautiful day
link_to: portfolio-item.html
class: web-design
desc: Design & Development
- image: ../images/@stock/one-page-work-8.jpg
title: Flower Book
link_to: portfolio-item.html
class: graphic-design
desc: Design & Development
testimonials:
- quote: Reprehenderit eos et non et ut eum reprehenderit quis sequi quia vel repellendus id. Velit quit blanditiis dolor quam error eos dolores sequi eaque rerum est. Velit quit blanditiis dolor quam error eos dolores sequi eaque rerum est.
author: "- David White, Designer at Huglab"
- quote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing.
author: "- David White, Designer at Huglab"
- quote: Reprehenderit eos et non et ut eum reprehenderit quis sequi quia vel repellendus id. Velit quit blanditiis dolor quam error eos dolores sequi eaque rerum est.
author: "- David White, Designer at Huglab"
members:
- avatar: images/@stock/member-1.jpg
name: Mark Wayne
position: Founder
socials:
- link: http://twitter.com
icon: twitter
- link: http://facebook.com
icon: facebook
desc:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetue.
- avatar: images/@stock/member-2.jpg
name: Kate Holms
position: Creative Director
socials:
- link: http://twitter.com
icon: twitter
- link: http://facebook.com
icon: facebook
- link: http://dribbble.com
icon: dribbble
desc:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetue.
- avatar: images/@stock/member-3.jpg
name: Tome Hason
position: Designer
socials:
- link: http://twitter.com
icon: twitter
- link: http://facebook.com
icon: facebook
- link: http://tumblr.com
icon: tumblr
desc:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetue.
- avatar: images/@stock/member-4.jpg
name: Lily Whrem
position: Developer
socials:
- link: http://twitter.com
icon: twitter
- link: http://facebook.com
icon: facebook
desc:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetue.
clients:
- ../images/@stock/client-1.png
- ../images/@stock/client-2.png
- ../images/@stock/client-3.png
- ../images/@stock/client-4.png
- ../images/@stock/client-5.png
- ../images/@stock/client-6.png
price_boxes:
- type: free
desc: Perfect for freelancers
cost: 0
lines:
- 15 Users
- 10 Projects
- 30GB of Storage
- 5 Workspaces
- Private Forums
- Enhanced Security
- type: basic
desc: Perfect for small teams
cost: 20
lines:
- 15 Users
- 10 Projects
- 30GB of Storage
- 5 Workspaces
- Private Forums
- Enhanced Security
- type: plus
desc: Popular and hot selling
cost: 45
lines:
- 15 Users
- 10 Projects
- 30GB of Storage
- 5 Workspaces
- Private Forums
- Enhanced Security
class: featured
- type: Premium
desc: Perfect for big companies
cost: 99
lines:
- 15 Users
- 10 Projects
- 30GB of Storage
- 5 Workspaces
- Private Forums
- Enhanced Security
socials:
- title: Facebook
text: Connect us with facebook
icon_class: fa fa-facebook
link_to: http://facebook.com
- title: Facebook
text: Connect us with facebook
icon_class: fa fa-facebook
link_to: http://facebook.com
- title: Facebook
text: Connect us with facebook
icon_class: fa fa-facebook
link_to: http://facebook.com
- title: Facebook
text: Connect us with facebook
icon_class: fa fa-facebook
link_to: http://facebook.com
---
<div class='mod modFullscreenSlider'>
<div class='fullscreen_slideshow' data-autostop='off'>
<a class='sequence-prev' href='javascript:void(0);'>
<span></span>
</a>
<a class='sequence-next' href='javascript:void(0);'>
<span></span>
</a>
<ul class='sequence-pagination'>
{% for slide in page.slides %}
{% if forloop.first %}
{% assign class = 'current' %}
{% else %}
{% assign class = '' %}
{% endif %}
<li class="{{class}}"></li>
{% endfor %}
</ul>
<ul class="sequence-canvas">
{% for slide in page.slides %}
{% if forloop.first %}
{% assign style = 'static' %}
{% else %}
{% assign style = '' %}
{% endif %}
<li class='frame centered-text {{style}}'>
<h1>{{slide.title}}</h1>
<p>{{slide.tagline}}</p>
<div class='two spacing'></div>
<div class='buttons-wrapper'>
{% for button in slide.buttons %}
<a class='button {{button.class}}' href='{{button.url}}'>{{button.text}}</a>
{% endfor %}
</div>
{% if slide.videos %}
<div class='video_image_touch' style='background-image: url({{slide.bg}});'></div>
<div class='video_wrap'>
<div class='overlay' style='background: #000000;opacity: 0.6;'></div>
<video autoplay=' ' class='bg_video' loop=' ' muted=' ' preload='auto'>
{% for video in slide.videos %}
<source src='{{video.url}}' type='video/{{video.type}}'>
{% endfor %}
</video>
</div>
{% else %}
<div class='bg' style='background-image: url({{slide.bg}});'></div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
<a id='about'></a>
<div class='full'>
<div class='row'>
<div class='large-10 columns large-centered'>
<div class='spacing'></div>
{% include section-header.html class="alt" title="Our story" %}
<div class='spacing'></div>
<p class='centered-text' style='font-size: 1.6rem'>
This is the introduction of your team, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
</p>
<div class='two spacing'></div>
<p class='centered-text'>
<img alt="" src="../images/@stock/circle-logo.png" />
</p>
</div>
</div>
</div>
<div class='three spacing'></div>
<div class='full parallax' style='background-image: url(../images/@stock/milestone-bg-2.jpg); color: #fff;'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html title="the achievements" class="alt" title_style="color: #fff;" %}
<div class='two spacing'></div>
</div>
</div>
<div class='row'>
<div class='medium-3 large-3 columns'>
{% include milestone.html title="Projects Completed" from="0" to="69" icon_class="fa fa-folder-open" %}
</div>
<div class='medium-3 large-3 columns'>
{% include milestone.html title="Cups of coffee offered" from="0" to="726" icon_class="fa fa-coffee" %}
</div>
<div class='medium-3 large-3 columns'>
{% include milestone.html title="Happy clients" from="0" to="59" icon_class="fa fa-thumbs-up" %}
</div>
<div class='medium-3 large-3 columns'>
{% include milestone.html title="Articles Published" from="0" to="21" icon_class="fa fa-file-text" %}
</div>
</div>
<div class='two spacing'></div>
</div>
<a id='services'></a>
<div class='full' style='background: #f5f5f5'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html title="Our services" class="alt" %}
<div class='two spacing'></div>
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
<div class='mod modBoxedTextSlider'>
<div class='boxes'>
{% include box.html class="fa fa-trophy" title="Design" text="Placeat vel itaque perspiciatis sed repellat qui nihil recusandae doloremque aperiam necessitatibus aspernatur. illum ad adipisci saepe dolores cumque fugit nihil minus. temporibus corporis eos dolore reprehenderit ipsa at neque ab ut porro perferendis." %}
{% include box.html class="fa fa-compass" title="Art direction" text="Placeat vel itaque perspiciatis sed repellat qui nihil recusandae doloremque aperiam necessitatibus aspernatur. illum ad adipisci saepe dolores cumque fugit nihil minus. temporibus corporis eos dolore reprehenderit ipsa at neque ab ut porro perferendis." %}
{% include box.html class="fa fa-star-half-empty" title="Branding" text="Placeat vel itaque perspiciatis sed repellat qui nihil recusandae doloremque aperiam necessitatibus aspernatur. illum ad adipisci saepe dolores cumque fugit nihil minus. temporibus corporis eos dolore reprehenderit ipsa at neque ab ut porro perferendis." %}
{% include box.html class="fa fa-image" title="Photography" text="Placeat vel itaque perspiciatis sed repellat qui nihil recusandae doloremque aperiam necessitatibus aspernatur. illum ad adipisci saepe dolores cumque fugit nihil minus. temporibus corporis eos dolore reprehenderit ipsa at neque ab ut porro perferendis." %}
{% include box.html class="fa fa-dot-circle-o" title="Marketing" text="Placeat vel itaque perspiciatis sed repellat qui nihil recusandae doloremque aperiam necessitatibus aspernatur. illum ad adipisci saepe dolores cumque fugit nihil minus. temporibus corporis eos dolore reprehenderit ipsa at neque ab ut porro perferendis." %}
</div>
</div>
</div>
</div>
<div class='four spacing'></div>
</div>
<div class='full parallax' style='background-image: url(../images/@stock/milestone-bg.jpg); color: #fff;'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html class="alt" title_style="color: #fff;" title="What we are good at" %}
<div class='spacing'></div>
<p style='color: #ccc;'>
Dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing.
</p>
<div class='two spacing'></div>
</div>
</div>
<div class='row'>
<div class='large-5 columns'>
<div class='mod modBarGraph'>
<ul class='bars'>
<li>
{% include bar-graph.html style="color: #fff;" title="Web Design" percents="84" %}
</li>
<li>
{% include bar-graph.html style="color: #fff;" title="Web Development" percents="99" %}
</li>
</ul>
</div>
</div>
<div class='large-6 columns'>
<div class='mod modBarGraph'>
<ul class='bars'>
<li>
{% include bar-graph.html style="color: #fff;" title="Branding" percents="90" %}
</li>
<li>
{% include bar-graph.html style="color: #fff;" title="Marketing" percents="66" %}
</li>
</ul>
</div>
</div>
</div>
<div class='four spacing'></div>
</div>
<a id='work'></a>
<div class='full'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html title="our works" class="alt" %}
<div class='spacing'></div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing.
</p>
<div class='two spacing'></div>
<div class='mod modGallery'>
<div class='gallery-nav'>
<ul>
<li class='current'>
<a data-cat='all' href='#'>All</a>
</li>
<li>
<a data-cat='graphic-design' href='#'>Graphic Design</a>
</li>
<li>
<a data-cat='web-design' href='#'>Web Design</a>
</li>
<li>
<a data-cat='brand' href='#'>Brand</a>
</li>
<li>
<a data-cat='development' href='#'>Development</a>
</li>
<li>
<a data-cat='print' href='#'>Print</a>
</li>
</ul>
</div>
<ul class='gallery large-block-grid-4 medium-block-grid-3 seperated small-block-grid-2'>
{% for work in page.works %}
<li class='{{work.class}}'>
<a href='{{work.link_to}}'>
<img width="600" height="500" alt="" src="{{work.image}}" />
<div class='overlay' style='background: rgba(143, 221, 115, 0.8);'>
<div class='thumb-info'>
<h3>{{work.title}}</h3>
<p>{{work.desc}}</p>
</div>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class='three spacing'></div>
<div class='row'>
<div class='large-12 columns'>
<p class='centered-text'>
<a class='button' href='#'>View more works</a>
</p>
</div>
</div>
<div class='four spacing'></div>
</div>
<div class='full parallax' style='background-image: url(../images/@stock/testimonials-bg.jpg); color: #fff;'>
<div class='row'>
<div class='large-12 columns'>
<p class='centered-text'>
<i class='fa fa-quote-left' style='color: #F9CE06; font-size: 36px;'></i>
</p>
<div class='spacing'></div>
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html title="What our clients say" title_style="color: #fff;" class="alt" %}
<div class='spacing'></div>
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
<div class='mod modTestimonials'>
<div class='row'>
<div class='small-12 columns'>
<div class='items centered-text'>
{% for testimonial in page.testimonials %}
<div class='item'>
<p class='quote'>{{testimonial.quote}}</p>
<p class='author'>{{testimonial.author}}</p>
<div class='two spacing'></div>
</div>
{% endfor %}
</div>
</div>
<div class='spacing'></div>
</div>
</div>
</div>
</div>
</div>
<div class='full no-padding' style='background: #F9CE06; color: #fff'>
<div class='two spacing'></div>
<div class='mod modCallToAction'>
<div class='row'>
<div class='medium-9 large-9 columns'>
<p>Like what you see here? Checkout this theme and start to build your site immediately.</p>
</div>
<div class='medium-3 large-3 columns'>
<a class='boxed button' href='http://themeforest.net/user/honryou/portfolio?ref=honryou'>Learn more</a>
</div>
</div>
</div>
<div class='spacing'></div>
</div>
<a id='team'></a>
<div class='full'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html class="alt" title="Team members" %}
<div class='two spacing'></div>
</div>
</div>
<div class='row'>
{% for member in page.members %}
<div class='small-6 medium-3 large-3 columns'>
<div class='mod modTeamMember style-2'>
<div class='member'>
<img class="avatar" width="250" height="250" alt="" src="{{member.avatar}}" />
<div class='overlay'>
<ul class='socials'>
{% for social in member.socials %}
<li>
<a href='{{social.url}}'>
<i class='fa fa-{{social.icon}}'></i>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<h3>{{member.name}}</h3>
<p class='position'>{{member.position}}</p>
<p>{{member.desc}}</p>
<div class='two spacing'></div>
</div>
</div>
{% endfor %}
</div>
<div class='three spacing'></div>
</div>
<div class='full parallax' style='background-image: url(../images/@stock/customers-bg.jpg); color: #fff;'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html class="alt" title_style="color: #fff;" title="Our customers" %}
<div class='spacing'></div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing.
</p>
<div class='spacing'></div>
</div>
</div>
<div class='row'>
<div class='large-12 columns'>
<div class='mod modClients' data-slides_to_show='4'>
<div class='clients'>
{% for client in page.clients %}
<div><img width="272" height="180" alt="" src="{{client}}" /></div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class='two spacing'></div>
</div>
<a id='pricing'></a>
<div class='full'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html class="alt" title="Pricing table" %}
<div class='spacing'></div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat consectetuer sit amet magna adipiscing.
</p>
<div class='spacing'></div>
</div>
</div>
<div class='spacing'></div>
<div class='row'>
{% for box in page.price_boxes %}
<div class='medium-6 large-3 columns'>
<div class='mod modPriceBox {{box.class}}'>
<div class='info'>
<p class='level'>{{box.type}}</p>
<p class='desc'>{{box.desc}}</p>
<p class='price'>
<span class='dollar'>$</span>
<span class='number'>{{box.cost}}</span>
</p>
</div>
<div class='features'>
<ul>
{% for line in box.lines %}
<li class="{% cycle '', 'even' %}">{{line}}</li>
{% endfor %}
</ul>
</div>
<p class='start'>
<a class='button small' href='http://themeforest.net/user/honryou/portfolio?ref=honryou'>Start Trial</a>
</p>
</div>
</div>
{% endfor %}
</div>
<div class='four spacing'></div>
</div>
<div class='full parallax' style='background-image: url(../images/@stock/blog-posts-bg.jpg);'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html title="Our recent posts" class="alt" title_style="color: #fff;" %}
<div class='two spacing'></div>
</div>
</div>
<div class='row'>
{% for post in site.posts %}
{% if forloop.index > 3 %}
{% break %}
{% endif %}
<div class='large-4 medium-4 columns'>
<div class='mod modBlogPost'>
<a href="{{post.url}}"><img alt="" src="{{site.url}}/{{post.image}}" /></a>
<div class='content'>
<p class='date'>{{post.date | date: "%B %d, %Y" }}</p>
<h4><a href="#">{{post.title}}</a></h4>
<p>{{post.excerpt}}</p>
<div class='tags'>
{% for tag in post.tags %}
<a href="#">{{tag | capitalize}}</a>
{% unless forloop.last %},{% endunless %}
{% endfor %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class='two spacing'></div>
<div class='row'>
<div class='large-12 columns'>
<p class='centered-text'>
<a class='button boxed' href='{{site.url}}/blog.html'>See more posts</a>
</p>
</div>
</div>
<div class='two spacing'></div>
</div>
<a id='contact'></a>
<div class='full'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html title="Contact us" class="alt" %}
<div class='two spacing'></div>
</div>
</div>
<div class='row'>
<div class='medium-8 columns'>
<div class='form'>
<div class='row'>
<form id='contact_form' method='POST'>
<div class='large-12 columns'>
<p id='thanks' style='display: none;'>
Thanks for contacting us, we'll be in touch soon!
</p>
</div>
<div class='medium-12 columns'>
<input class='required' name='name' placeholder='NAME' type='text'>
<input class='required email' name='email' placeholder='EMAIL' type='text'>
<input class='required' name='subject' placeholder='SUBJECT' type='text'>
<textarea class='required' name='message' placeholder='MESSAGE'></textarea>
<input class='button white' type='submit'>
</div>
</form>
</div>
</div>
<div class='two spacing'></div>
</div>
<div class='medium-4 columns'>
<div class='contact-details'>
<h4>Our location:</h4>
<p>41 Dean Street, London, UK</p>
<h4>Our Phone:</h4>
<p>+86 (03) 9810 4612</p>
<h4>Fax:</h4>
<p>+6102 236338 5456</p>
<h4>Our Email:</h4>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
<div class='two spacing'></div>
<div class='full parallax' style='background-image: url(../images/@stock/big-socials-bg.jpg); color: #fff;'>
<div class='row'>
<div class='large-12 columns'>
{% include section-header.html class="alt" title="Find us elsewhere" title_style="color: #fff;" %}
<div class='two spacing'></div>
</div>
{% for social in page.socials %}
<div class='medium-3 columns'>
<div class='big-social'>
<a href='{{social.link_to}}'>
<i class='{{social.icon_class}}'></i>
</a>
<h4 style='color: #fff'>{{social.title}}</h4>
<p>{{social.text}}</p>
</div>
<div class='two spacing'></div>
</div>
{% endfor %}
</div>
<div class='four spacing'></div>
<div class='two spacing'></div>
</div>
<div class='full no-padding' style='background: #111'>
<div class='two spacing'></div>
<div class='row'>
<div class='large-12 columns'>
<p>©2014 {{site.title}}. All rights reserved.</p>
</div>
</div>
<div class='spacing'></div>
</div>