-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
337 lines (312 loc) · 15 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
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset="UTF-8">
<title>Software for Smart Teams</title>
<meta property="og:title" content="Creating lean and amazing web applications for your business - Qindio">
<meta property="og:description" content="Qindio creates intuitive, lean and amazing web applications to enhance your core business.">
<meta property="og:type" content="website">
<meta property="og:url" content="/"> <link rel="canonical" href="https://qindio.com/">
<meta name="description" content="Qindio creates intuitive, lean and amazing web applications to enhance your core business">
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">
<meta name="keywords" content="develop web applications, build web apps, python, ruby on rails, bigdata, analytical, web applications, development, coding, programming">
<meta name="author" content="Qindio">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links -->
<link rel="preload" as="image" href="assets/video/background.gif">
<link rel="preload" as="image" href="assets/images/flatLogo.svg">
<link rel="stylesheet" type="text/css" href="assets/stylesheets/main.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Ubuntu:700">
<link rel="preload" as="style" href="assets/font-awesome/css/font-awesome.min.css" onload="this.rel='stylesheet'" crossorigin>
<link rel="stylesheet" type="text/css" href="assets/stylesheets/normalize.css">
<!-- Header -->
<header>
<section class="navbar-fixed">
<div class="navbar-flex cell--m">
<div class="flat-logo">
<a href="index_text.html">qindio</a>
</div>
<a href="#" class="dropdown-button">
<i class="fa fa-bars fa-lg"></i>
</a>
<nav class="nav primary-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Products</a></li>
<li><a href="#approach">Approach</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="dropdown-menu tac">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Products</a></li>
<li><a href="#approach">Approach</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</section>
</header>
<!-- Main content-->
<div class="main-flex">
<!--Section - Badge and message -->
<section class="banner-section tac mg-top" >
<div class="banner-flex container">
<div class="banner-img">
<img class="banner-img" src="assets/images/flatLogo.svg" alt="logo of Qindio"/>
</div>
<h1>Code & Craft </h1>
</div>
</section>
</div>
<!-- Video -->
<div class="background-video">
<video autoplay loop id="wrapper-video" >
<source src="assets/video/background.mp4" type='video/mp4;' />
<source src="assets/video/background.webm" type='video/webm;' />
<source src="assets/video/background.ogv" type='video/ogg;' />
</video>
</div>
</head>
<body>
<!-- Main content-->
<div class="main-flex">
<!-- Section - About -->
<section class="about-section title-section" id="about">
<div class="container about-flex">
<h1>We Build Software for Smart Teams</h1>
<div class="cell--l">
<p>We want you to do your best work. Our applications get out of the way so you can get your job done faster, and focus your energy on what really matters.</p>
<p>We build predictable, dependable software you can trust. We also help you along the way so you can make the most of our products.</p>
</div>
</div>
</section>
<!-- Section - Services -->
<section class="services-section break-section title-section " id="services">
<div class="container">
<h1>Products</h1>
<div class="container">
<div class="teaser-all cell--s">
<!-- Information Management -->
<div class="teaser cell--s tac">
<a href="#" class="applyTeaser">
<img src="assets/images/information-managment.svg" alt="Information Management">
</a>
<h3>Information Management</h3>
<div class="div-services-info">
<p class="services-info">Store your structured and unstructured data, tag it and easily find it when you need it. Control access using clear rules.</p>
</div>
</div>
<!--Decision Making-->
<div class="teaser cell--s tac">
<a href="#" class="applyTeaser">
<img src="assets/images/decision.svg" alt="Decision Making">
</a>
<h3>Decision Making</h3>
<div class="div-services-info">
<p class="services-info">Define the criteria and gather the facts for your decisions. Make your best choice and track your success rate.</p>
</div>
</div>
<!--Reflection & improvement-->
<div class="teaser cell--s tac">
<a href="#" class="applyTeaser">
<img src="assets/images/telescope.svg" alt="Reflection and improvement">
</a>
<h3>Reflection & Improvement</h3>
<div class="div-services-info">
<p class="services-info">Look back on what went well and on what can be improved. Give kind feedback. Assign goals and make plans for your next challenge.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section - Our approach -->
<section class="approach-section break-section title-section " id="approach">
<div class="container">
<h1>Approach</h1>
<div class="container">
<div class="teaser-all cell--s">
<!-- Work the way you do -->
<div class="teaser-approach cell--s tac">
<a href="#" class="applyTeaser">
<img src="assets/images/responsive.svg" alt="Work the way you do">
</a>
<h3>Work your Way</h3>
<div class="div-approach-info">
<p class="approach-info">Work from your laptop, tablet or phone. Integrate our products with your existing tools using our APIs.</p>
</div>
</div>
<!--Reliable platform-->
<div class="teaser-approach cell--s tac">
<a href="#" class="applyTeaser">
<img src="assets/images/server.svg" alt="Reliable platform">
</a>
<h3>Reliable Platform</h3>
<div class="div-approach-info">
<p class="approach-info">We value your data as much as you do. We build solid systems to protect it and make it available at all times.</p>
</div>
</div>
<!--Pragmatic design-->
<div class="teaser-approach cell--s tac">
<a href="#" class="applyTeaser">
<img src="assets/images/pragmatic-design.svg" alt="Pragmatic design">
</a>
<h3>Pragmatic Design</h3>
<div class="div-approach-info">
<p class="approach-info">We invest a lot of effort in the usability and little details of our products, so you don't have to spend your energy understanding how to use them.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section - Message -->
<section class="sentence-section img-trees">
<div class="cover-img">
<div class="container">
<h1>We care about
<div class="slidingVertical">
<span>security!</span>
<span>quality!</span>
<span>solid code!</span>
<span>details!</span>
<span>your needs!</span>
</div>
</h1>
</div>
</div>
</section>
<!-- Section - Team -->
<section class="title-section team-section" id="team">
<div class="container">
<h1>Meet the team</h1>
<div class="container">
<div class="team-flex cell--s">
<!-- Karla Jaramillo-->
<div class="team-info">
<div>
<h2>Karla Jaramillo</h2>
<!-- <h3>Lights! Camera! Code in my life!</h3> -->
</div>
<div class="team-info--flex">
<div class="team-contact tac">
<a href="http://karlajaramillo.github.io/">
<img src="assets/images/karla-jaramillo.jpg" alt="Photo of Karla Jaramillo" class="photo-size">
</a>
<ul>
<li><a href="https://twitter.com/kavajaga">@kavajaga</a></li>
<li><a href="http://karlajaramillo.github.io/">karlajaramillo.github.io</a></li>
</ul>
</div>
<div class="team-contact--text">
<p>Karla has helped many businesses to improve their workflows, be more productive and respectful with their people and the environment. Now she builds software for teams that want to work better. Karla has an impressive ability for designing consistent interfaces and perfecting the little details.</p>
<p>Karla holds a BSc in Environmental Science from the University of Salamanca, and she's been certified as a Lead Auditor for ISO 9000, ISO 14000 and OHSAS 18000.</p>
</div>
</div>
</div>
<!-- Lorenzo Planas -->
<div class="team-info">
<div>
<h2>Lorenzo Planas</h2>
<!-- <h3>Coffee & Code Amateur</h3> -->
</div>
<div class="team-info--flex">
<div class="team-contact tac">
<a href="http://lorenzoplanas.com/">
<img src="assets/images/lorenzo-planas.jpg" alt="Photo of Lorenzo Planas" class="photo-size">
</a>
<ul>
<li><a href="https://twitter.com/lorenzoplanas">@lorenzoplanas</a></li>
<li><a href="http://lorenzoplanas.com/">lorenzoplanas.com</a></li>
</ul>
</div>
<div class="team-contact--text">
<p>Lorenzo has a strong background in systems and information security from his dotcom days. As a manager of a consulting firm in Europe and as an entrepreneur in China he learned that the best way to become better at what you do is to do less.</p>
<p>Lorenzo holds a Diploma in Computing from the Open University, the CISSP credential from (ISC)2 and the CISA, CISM, CRISC and CGEIT credentials from ISACA. He's been certified as a Lead Auditor for ISO 27000 and ISO 20000.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section - Contact -->
<section class="contact" id="contact">
<div class="container">
<h1>We'd love to hear from you! <br>Drop us a line at <a class="mail"href="mailto:[email protected]">[email protected],</a> <br> or just fill in this form.</h1>
<form action="https://qindio-mailer.herokuapp.com/messages" method="POST" id="myForm">
<fieldset class="contact-form">
<!-- Name -->
<div class="divMessage">
<p class="showMessage">Thanks for writing in! We'll get back to you soon.</p>
</div>
<div class="wrapper">
<i class="fa fa-user"></i>
<input class="focus-name" type="text" name="name" placeholder="What is your name?" required>
</div>
<!-- Email -->
<div class="wrapper">
<i class="fa fa-envelope-o"></i>
<input type="email" name="email" placeholder="What is your email?" required>
</div>
<!-- Subject -->
<div class="wrapper">
<i class="fa fa-quote-right"></i>
<input type="text" name="subject" placeholder="Subject" required>
</div>
<!-- Message -->
<div class="wrapper widen-wrapper">
<i class="fa fa-comments-o"></i>
<textarea name="message" placeholder="Please enter your message" required></textarea>
</div>
<!-- Send -->
<div class="input-submit">
<input id="input-submit" type="submit" value="Send">
</div>
</fieldset>
</form>
</div>
</section>
<!-- Footer -->
<footer class="flex-item primary-footer group nav-media">
<nav class="nav nav-footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Products</a></li>
<li><a href="#approach">Approach</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<small>© Qindio</small>
</footer>
<!-- Credits -->
<section class="credits-section" id="credits">
<div class="container">
<p>Icon credits:
<a href="https://thenounproject.com/icon/17528/"> Axe by Guvnor Co, AU. </a>
<a href="https://thenounproject.com/icon/1210/"> Coffee by Ben Byford, GB. </a>
<a> Badge by George Bourletsikas. </a>
<a href="https://thenounproject.com/term/responsive-screens/899135/"> Responsive Screens by Celeste Njoo, AU. </a>
<a href="https://thenounproject.com/search/?q=server&i=741336"> Server by Designify.me, BG. </a>
<a href="https://thenounproject.com/search/?q=browser%20work%20flow&i=602412"> Browser Structure by unlimicon, ID. </a>
<a href="https://thenounproject.com/search/?q=decision%20tree&i=986797">Decision Tree by Becris. </a>
<a href="https://thenounproject.com/search/?q=decision&i=880487"> Direction by Maxim Basinski. </a>
<a href="https://thenounproject.com/search/?q=telescope&i=924774"> Telescope by AfterGrind, PH. </a>
</p>
</div>
</section>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script async src="script.js"></script>
</body>
</html>