-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
286 lines (253 loc) · 15.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quotes</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
</head>
<body>
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-google-plus" viewBox="0 0 1024 1024">
<title>google-plus</title>
<path class="path1" d="M325.8 457.4v111.8h184.8c-7.4 48-55.8 140.6-184.8 140.6-111.2 0-202-92.2-202-205.8s90.8-205.8 202-205.8c63.4 0 105.6 27 129.8 50.2l88.4-85.2c-56.8-53-130.4-85.2-218.2-85.2-180.2 0.2-325.8 145.8-325.8 326s145.6 325.8 325.8 325.8c188 0 312.8-132.2 312.8-318.4 0-21.4-2.4-37.8-5.2-54h-307.6z"></path>
<path class="path2" d="M1024 448h-96v-96h-96v96h-96v96h96v96h96v-96h96z"></path>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 1024 1024">
<title>facebook</title>
<path class="path1" d="M608 192h160v-192h-160c-123.514 0-224 100.486-224 224v96h-128v192h128v512h192v-512h160l32-192h-192v-96c0-17.346 14.654-32 32-32z"></path>
</symbol>
<symbol id="icon-twitter" viewBox="0 0 1024 1024">
<title>twitter</title>
<path class="path1" d="M1024 226.4c-37.6 16.8-78.2 28-120.6 33 43.4-26 76.6-67.2 92.4-116.2-40.6 24-85.6 41.6-133.4 51-38.4-40.8-93-66.2-153.4-66.2-116 0-210 94-210 210 0 16.4 1.8 32.4 5.4 47.8-174.6-8.8-329.4-92.4-433-219.6-18 31-28.4 67.2-28.4 105.6 0 72.8 37 137.2 93.4 174.8-34.4-1-66.8-10.6-95.2-26.2 0 0.8 0 1.8 0 2.6 0 101.8 72.4 186.8 168.6 206-17.6 4.8-36.2 7.4-55.4 7.4-13.6 0-26.6-1.4-39.6-3.8 26.8 83.4 104.4 144.2 196.2 146-72 56.4-162.4 90-261 90-17 0-33.6-1-50.2-3 93.2 59.8 203.6 94.4 322.2 94.4 386.4 0 597.8-320.2 597.8-597.8 0-9.2-0.2-18.2-0.6-27.2 41-29.4 76.6-66.4 104.8-108.6z"></path>
</symbol>
<symbol id="icon-youtube" viewBox="0 0 1024 1024">
<title>youtube</title>
<path class="path1" d="M1013.8 307.2c0 0-10-70.6-40.8-101.6-39-40.8-82.6-41-102.6-43.4-143.2-10.4-358.2-10.4-358.2-10.4h-0.4c0 0-215 0-358.2 10.4-20 2.4-63.6 2.6-102.6 43.4-30.8 31-40.6 101.6-40.6 101.6s-10.2 82.8-10.2 165.8v77.6c0 82.8 10.2 165.8 10.2 165.8s10 70.6 40.6 101.6c39 40.8 90.2 39.4 113 43.8 82 7.8 348.2 10.2 348.2 10.2s215.2-0.4 358.4-10.6c20-2.4 63.6-2.6 102.6-43.4 30.8-31 40.8-101.6 40.8-101.6s10.2-82.8 10.2-165.8v-77.6c-0.2-82.8-10.4-165.8-10.4-165.8zM406.2 644.8v-287.8l276.6 144.4-276.6 143.4z"></path>
</symbol>
<symbol id="icon-linkedin2" viewBox="0 0 1024 1024">
<title>linkedin2</title>
<path class="path1" d="M384 384h177.106v90.782h2.532c24.64-44.194 84.958-90.782 174.842-90.782 186.946 0 221.52 116.376 221.52 267.734v308.266h-184.61v-273.278c0-65.184-1.334-149.026-96.028-149.026-96.148 0-110.82 70.986-110.82 144.292v278.012h-184.542v-576z"></path>
<path class="path2" d="M64 384h192v576h-192v-576z"></path>
<path class="path3" d="M256 224c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z"></path>
</symbol>
</defs>
</svg>
<header>
<div class="menu">
<a href="">
<img src="img/menu.png" alt="">
</a>
<label>Menú</label>
</div>
<nav id="menu-options" class="hidden">
<div class="sections">
<a href="#we-are">Quiénes somos</a>
<a href="#project">Proyecto</a>
<a href="#budget">Costo del proyecto</a>
<a href="#contact">Contacto</a>
</div>
<div class="social">
<a href="https://www.facebook.com/simianlab/" target="_blank"><svg class="icon icon-facebook"><use xlink:href="#icon-facebook"></use></svg></a>
<a href="https://twitter.com/simianlab" target="_blank"><svg class="icon icon-twitter"><use xlink:href="#icon-twitter"></use></svg></a>
<a href="https://www.linkedin.com/company/simian-s-a-s-" target="_blank"><svg class="icon icon-linkedin2"><use xlink:href="#icon-linkedin2"></use></svg></a>
<a href="https://plus.google.com/+SimianCo" target="_blank"><svg class="icon icon-google-plus"><use xlink:href="#icon-google-plus"></use></svg></a>
<a href="https://www.youtube.com/user/SimianLab" target="_blank"><svg class="icon icon-youtube"><use xlink:href="#icon-youtube"></use></svg></a>
</div>
</nav>
</header>
<div id="first">
<div class="triangle">
<img src="img/client-logo.jpg" alt="">
<h1 class="main-title">Oso de anteojos y algo un poco más largo para probar espacio</h1>
<h2 class="secondary-title">This is a short project description. This is a short project description.</h2>
</div>
<img class="monkey-hand" src="img/hand-mobile.jpg" >
<p>Vulputate eros eleifend tellus facilisis, ut congue lorem finibus. Curabitur rutrum pellentesque convallis. Aenean nec posuere est, quis iaculis est. Praesent auctor ullamcorper lacinia. <a href="http://www.metallica.com" target="blank">Vestibulum porttitor</a> tincidunt consectetur. Nullam hendrerit tincidunt orci, ac gravida nulla efficitur in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<ul>
<li>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos
</li>
<li>
Aenean nec posuere est, quis iaculis est. Praesent auctor ullamcorper lacinia
</li>
<li>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
</li>
</ul>
<img class="screw" src="img/screw-mobile.png" >
</div>
<div id="we-are">
<div class="content">
<h3 class="section-title">¿Quiénes somos?</h3>
<img class="simian-logo" src="img/simian-logo.png" alt="Simian Logo">
<p>Duis molestie odio sit amet posuere fermentum. Suspendisse ut malesuada sapien. Quisque libero ipsum, tempus quis facilisis quis, placerat at sem. Vestibulum sit amet ligula aliquet, maximus libero ac, sollicitudin eros. Mauris sagittis, leo eget scelerisque commodo, est orci venenatis velit, et rhoncus nunc velit quis enim. Suspendisse cursus est libero, id ornare elit euismod ac. Fusce lacinia laoreet viverra. Maecenas non neque eget purus iaculis ornare.</p>
<h2>¿A quiénes hemos ayudado a cumplir sus objetivos?</h2>
<p>Integer vehicula nibh sed convallis sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam euismod vel ligula eget elementum. Nullam a pellentesque enim. Nulla rhoncus aliquam neque, ac gravida ipsum aliquet in. In at.</p>
<p>
<iframe src="https://www.youtube.com/embed/b6m-XlOxjbk" frameborder="0" allowfullscreen></iframe>
</p>
<div class="gallery">
<figure>
<img src="img/gallery/image.jpg" alt="">
<figcaption>Imagen</figcaption>
</figure>
<figure>
<img src="img/gallery/image.jpg" alt="">
<figcaption>Imagen</figcaption>
</figure>
<figure>
<img src="img/gallery/image.jpg" alt="">
<figcaption>Imagen</figcaption>
</figure>
<figure>
<img src="img/gallery/image.jpg" alt="">
<figcaption>Imagen</figcaption>
</figure>
<figure>
<img src="img/gallery/image.jpg" alt="">
<figcaption>Imagen</figcaption>
</figure>
<figure>
<img src="img/gallery/image.jpg" alt="">
<figcaption>Imagen</figcaption>
</figure>
</div>
<p>Integer vehicula nibh sed convallis sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam euismod vel ligula eget elementum. Nullam a pellentesque enim. Nulla rhoncus aliquam neque, ac gravida ipsum aliquet in. In at.
Integer vehicula nibh sed convallis sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam euismod vel ligula eget elementum. Nullam a pellentesque enim. Nulla rhoncus aliquam neque, ac gravida ipsum aliquet in. In at.</p>
</div>
</div>
<div id="project">
<div class="content">
<h3 class="section-title">Proyecto</h3>
<h1>Oso de anteojos y algo un poco más largo para probar el espacio</h1>
<p>Curabitur magna diam, ornare ut lorem eu, venenatis bibendum nibh. Morbi aliquam nibh a est pellentesque congue. Maecenas mollis, est eu pellentesque lacinia, nisl leo suscipit massa, ultrices lacinia ex tellus in dui. Fusce libero dolor, egestas ultrices purus ut, efficitur egestas augue. Cras in nibh pretium, tincidunt sem id, rhoncus odio. Sed porttitor congue nulla, nec varius eros imperdiet ac. Sed ac molestie mauris. Pellentesque condimentum molestie lorem, id interdum massa accumsan cursus. Fusce nec metus urna. Donec eget bibendum nulla, et vulputate turpis. Curabitur ex lectus, varius vel enim vitae, sollicitudin dapibus nibh. Morbi luctus, ipsum interdum venenatis molestie, purus ipsum auctor orci, id dapibus justo lorem eu justo. Maecenas in laoreet libero. Nam ac ante ut urna fermentum dignissim nec non metus. Sed dictum ex et fermentum vulputate.</p>
<h2>Detalles técnicos</h2>
<figure class="aligncenter hide-mobile">
<iframe src="//invis.io/H55Q08IXZ" width="438" height="930" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<figcaption class="centered">Este es un embed</figcaption>
</figure>
<figure class="aligncenter">
<iframe src="https://docs.google.com/presentation/d/1SAd0_7YxiD-zYl1-6-F47iOqujaEcJYZDSEP6upYCh0/embed?start=false&loop=false&delayms=3000" width="960" height="569" frameborder="0" allowfullscreen="allowfullscreen">
</iframe>
</figure>
<ul>
<li><strong>Integer vehicula nibh sed convallis sagittis.</strong> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam euismod vel ligula eget elementum. Nullam a pellentesque enim. Nulla rhoncus aliquam neque, ac gravida ipsum aliquet in. In at.</li>
<li>Integer vehicula nibh sed convallis sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam euismod vel ligula eget elementum. Nullam a pellentesque enim. Nulla rhoncus aliquam neque, ac gravida ipsum aliquet in. In at.</li>
<li><strong>Again, as on the preceding day.</strong>
<ul>
<li>Integer vehicula nibh sed convallis sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam euismod vel ligula eget elementum. Nullam a pellentesque enim. Nulla rhoncus aliquam neque, ac gravida ipsum aliquet in. In at.</li>
<li>Again, as on the preceding day.</li>
<li>Again, as on the preceding day.
<ul>
<li>Again, as on the preceding day.</li>
<li>Again, as on the preceding day.</li>
<li>Again, as on the preceding day.</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="aligncenter">
<iframe src="http://ionicframework.com/present-ionic/slides/#/" width="100%" height="600" frameborder="0"></iframe>
<figcaption>Presentación 3: Ionic Framework</figcaption>
</figure>
<h2>Propuesta Gráfica</h2>
<figure class="alignnone">
<img src="img/graphic-proposal.png" alt="">
<figcaption>Imagen 1, and finished the monster before he could regain his feet.</figcaption>
</figure>
<p><strong>Duis molestie odio sit amet posuere fermentum.</strong> Suspendisse ut malesuada sapien. Quisque libero ipsum, tempus quis facilisis quis, placerat at sem. Vestibulum sit amet ligula aliquet, maximus libero ac, sollicitudin eros. Mauris sagittis, leo eget scelerisque commodo, est orci venenatis velit, et rhoncus nunc velit quis enim. Suspendisse cursus est libero, id ornare elit euismod ac. Fusce lacinia laoreet viverra. Maecenas non neque eget purus iaculis ornare.</p>
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
</ol>
<div class="gallery">
<figure>
<img src="img/gallery/image.jpg" alt="">
<figcaption>Imagen</figcaption>
</figure>
<figure>
<img src="img/gallery/image.jpg" alt="">
<figcaption>Imagen</figcaption>
</figure>
<figure>
<img src="img/gallery/image.jpg" alt="">
<figcaption>Imagen</figcaption>
</figure>
</div>
<figure class="alignnone">
<img src="img/graphic-proposal.png" alt="">
<figcaption>Imagen 1, and finished the monster before he could regain his feet.</figcaption>
</figure>
<p><strong>Duis molestie odio sit amet posuere fermentum.</strong> Suspendisse ut malesuada sapien. Quisque libero ipsum, tempus quis facilisis quis, placerat at sem. Vestibulum sit amet ligula aliquet, maximus libero ac, sollicitudin eros. Mauris sagittis, leo eget scelerisque commodo, est orci venenatis velit, et rhoncus nunc velit quis enim. Suspendisse cursus est libero, id ornare elit euismod ac. Fusce lacinia laoreet viverra. Maecenas non neque eget purus iaculis ornare.</p>
</div>
</div>
<div id="budget">
<div class="content">
<h3 class="section-title">Presupuesto</h3>
<table>
<thead>
<tr>
<th><h2>Concepto</h2></th>
<th><h2>Valor</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Suspendisse ut malesuada sapien.</strong> Quisque libero ipsum, tempus quis facilisis quis, placerat at sem.</td>
<td class="money">$000.000.000<span>cop</span></td>
</tr>
<tr>
<td><strong>Suspendisse ut malesuada sapien.</strong> Quisque libero ipsum, tempus quis facilisis quis, placerat at sem.</td>
<td class="money">$000.000.000<span>cop</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><h2>Total</h2></td>
<td class="money"><h2>$000.000.000</h2><span>cop</span><span class="iva">+ iva</span></td>
</tr>
</tfoot>
</table>
<img class="money-mobile" src="img/money-mobile.png">
<h2 class="time">Tiempo Estimado</h2>
<p>Again, as on the preceding day, I had recourse to earthly tactis, <strong>and swinging my right fist full upon the point.</strong></p>
<h2 class="payment">Forma de Pago</h2>
<p>Again, as on the preceding day, I had recourse to earthly tactis, <strong>and swinging my right fist full upon the point.</strong></p>
<ul>
<li>Pago de 50% al empezar el proyecto.</li>
<li>Pago de 50% al finalizar el tercer sprint.</li>
<li>Pago del 25% al entregar el proyecto.</li>
</ul>
</div>
</div>
<div id="contact">
<div class="content">
<h3 class="section-title">Contacto</h3>
<p>Si tiene dudas acerca de esta propuesta, por favor contáctenos a:</p>
<div class="signature">
<img src="img/simian_checho.png" alt="">
<div class="info">
<h1>Sergio Acosta</h1>
<label>CEO & Developer</label><br>
<a href="tel:573115992255">(+57) 311-5992255</a><br>
<a href="mailto:sergio@simian.co">sergio@simian.co</a><br>
<a href="http://simian.co" target="_blank" class="site">simian.co</a>
</div>
</div>
</div>
</div>
<footer>
<p><strong>Aviso legal: </strong> La información presentada en esta propuesta es de caracter netamente confidencial y no puede ser utilizada sin el acuerdo de ambas partes para otros fines distintos a los aquí descritos.</p>
</footer>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery.fitvids/jquery.fitvids.js"></script>
<script src="js/main.js"></script>
</body>
</html>