-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (181 loc) · 7.54 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Zetapath</title>
<meta name="title" content="zetapath">
<meta name="description" content="Social Payments in a easy way">
<meta name="keywords" content="zpath, zetapath, projects, opensource, drop shipping, campaign, marketing, social, twitter, facebook, payment, promote">
<meta name="author" content="zetapath ltd.">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="./assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./assets/css/zpath.site.thirds.css">
<link rel="stylesheet" href="./assets/css/zpath.site.css">
</head>
<body data-page="landing">
<!--
<aside data-flex="vertical grow">
<button data-action="aside" class="icon cross"></button>
<nav data-flex-grow="max" data-flex="vertical center" class="align center">
<a href="#intro">Home</a>
<a href="#intro">Overview</a>
<a href="#intro">Services</a>
<a href="#intro">Portfolio</a>
<a href="#intro">About us</a>
<a href="#intro">Contact us</a>
</nav>
</aside>
-->
<header data-flex="horizontal wrap">
<a href="/" class="logo"></a>
<nav data-flex-grow="max" class="align right">
<a href="/work" class="button transparent">Last Works</a>
<a href="#contact" class="button white">Start your project</a>
</nav>
</header>
<article id="intro" class="bck dots " data-flex="vertical center" data-stellar-background-ratio="0.5">
<video preload loop="loop" autoplay="autoplay" poster="http://">
<source src="../assets/video/landing.mp4">
</video>
<!-- <button data-action="aside" class="icon menu"></button> -->
<h1>A <span class="color theme">Digital</span> Product Design <span class="color theme">Agency</span></h1>
<a href="#we" class="icon down"></a>
</article>
<article id="we" class="bck white" data-content>
<div class="container">
<div data-column="8" data-offset="2">
<h2>We Design Digital Products to Help Businesses Grow</h2>
<p>
Our team is intentionally small, working with a handful of clients at a time. We consider our clients partners and strive to simplify the creative process by using an iterative approach. This allows for pure collaboration between client and team, creating an ideal environment for producing predictable, high-quality results.
</p>
<img src="http://" />
</div>
</div>
</article>
<!-- PROCEDURE -->
<article id="procedure" class="bck grey" data-content>
<div class="container">
<h2>Client as a Partner</h2>
</div>
</article>
<!-- CAPABILITIES -->
<article id="capabilities" class="bck white" data-content>
<div class="container">
<h2>Our Capabilities</h2>
</div>
<div class="container">
<ul data-column="4">
<h4>User Experience</h4>
<li>Mobile App Design</li>
<li>Responsive Design</li>
<li>Measurement & Analytics</li>
</ul>
<ul data-column="4">
<h4>Brand Identity</h4>
<li>Product Logo Design</li>
<li>Marketing Collateral</li>
<li>App Icon Design</li>
</ul>
<ul data-column="4">
<h4>Technology</h4>
<li>Mobile App Development</li>
<li>Multiplatform App Development</li>
<li>Web Application Development</li>
</ul>
</div>
</article>
<!-- LOCATION -->
<article id="location" class="bck white" data-content>
<div class="map" data-flex="horizontal wrap">
<iframe frameBorder='0' class="active" src='https://a.tiles.mapbox.com/v4/soyjavi.ln0djcnn/attribution.html?access_token=pk.eyJ1Ijoic295amF2aSIsImEiOiJMVjUxV1hjIn0.Cmsx5TE3grlCl69EjIeAUA' data-timezone="Europe/London"></iframe>
<iframe frameBorder='0' src='https://a.tiles.mapbox.com/v4/soyjavi.ln0cfi58/attribution.html?access_token=pk.eyJ1Ijoic295amF2aSIsImEiOiJMVjUxV1hjIn0.Cmsx5TE3grlCl69EjIeAUA' data-timezone="Asia/Bangkok"></iframe>
</div>
<div class="container">
<div data-column="6" class="align left active">
<div data-control="clock" data-timezone="Europe/London">
<div class="steeple center"></div>
<div class="steeple seconds"></div>
<div class="steeple minutes"></div>
<div class="steeple hours"></div>
<div class="text">AM</div>
<ul class="ticks">
<li>·</li>
<li>·</li>
<li>·</li>
<li>·</li>
</ul>
</div>
<div class="location">
<strong>London HQ</strong>
<p>
London, England
<br/>
Wenlock Road, 20-22, N1 7GU
</p>
</div>
</div>
<div data-column="6" class="align left">
<div data-control="clock" data-timezone="Asia/Bangkok">
<div class="steeple center"></div>
<div class="steeple seconds"></div>
<div class="steeple minutes"></div>
<div class="steeple hours"></div>
<div class="text">AM</div>
<ul class="ticks">
<li>·</li>
<li>·</li>
<li>·</li>
<li>·</li>
</ul>
</div>
<div class="location">
<strong>Chiang Mai HQ</strong>
<p>
Muang, Chiang Mai, Thailand
<br/>
7/2 Rachadamnoen Road, Soi 4, 50200
</p>
</div>
</div>
</div>
</article>
<!-- CONTACT -->
<article id="contact" class="bck grey" data-content>
<div class="container">
<div data-column="8" data-offset="2">
<h2>We’d Love to Hear About Your Project!</h2>
<p>
Please answer a few questions, this will save time on communication and help you receive an answer quickly.
</p>
<button class="theme" data-action="contact">Get In Touch Now</button>
</div>
</div>
</article>
<form data-flex="vertical center" class="bck dots">
<button data-action="contact" class="icon up"></button>
<a href="/" class="logo" data-action="contact">zeta<span class="color theme">path</span></a>
<h2>Tell us about yourself.</h2>
<label>Email</label>
<input type="email" name="from" placeholder="Enter your email" required/>
<label>Subject</label>
<input type="text" name="subject" placeholder="Introduce us to yourself" required/>
<label>Message</label>
<textarea name="text" placeholder="Tell us your story" required></textarea>
<button class="white" data-action="send">send</button>
</form>
<!-- FOOTER -->
<footer class="bck grey" data-flex="horizontal wrap">
<span class="align left">© 2015, Zetapath LTD.</span>
<nav class="align right" data-flex-grow="max">
<a href="https://twitter.com/zetapath" class="icon twitter"></a>
<a href="https://www.facebook.com/profile.php?id=307943159416072&fref=ts" class="icon facebook"></a>
<a href="https://github.com/zetapath" class="icon github"></a>
<a href="https://dribbble.com" class="icon dribbble"></a>
</nav>
</footer>
<script src="./assets/js/zpath.site.thirds.js"></script>
<script src="./assets/js/zpath.site.js"></script>
</body>
</html>