-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·343 lines (316 loc) · 18.8 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="es"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="es"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="es"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="es"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Triangle</title>
<meta name="description" content="Triangle es un pequeño estudio de desarrollo web, en los que creamos páginas web únicas, para clientes únicos.">
<meta name="keywords" content="Triangle, Diseño Web, Desarrollo Web, Páginas Web, Sitios Web, México, Diseño Web México, Diseño Web Profesional, Diseño Web Responsive, Diseño Web Adaptable, Desarrollo Web México, Desarrollo Web Profesional, Desarrollo Web Responsive, Desarrollo Web Adaptable">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- OpenGraph -->
<meta property="og:title" content="Triangle" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://triangle.mx" />
<meta property="og:image" content="https://res.cloudinary.com/triangle/image/upload/v1492639647/tile_jo3ljs.png" />
<!-- Estilos -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<!-- Iconos -->
<link rel="stylesheet" href="fonts/carbon-icons/css/carbon-icons.css">
<!-- Modernizr -->
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<!-- WOW.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>
new WOW().init();
</script>
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Triangle",
"url": "http://www.triangle.mx/",
"description": "Somos un estudio de desarrollo web y diseño gráfico con completa seguridad en que tu proyecto tiene que ser visto como lo que es: una idea tuya."
"contactPoint": [{
"@type": "ContactPoint",
"email": "[email protected]",
"url": "http://triangle.mx/#contacto/",
"contactType": "customer service"
}]
}
</script>
</head>
<body onload="//setTimeout(closeNotificationBar, 20000); $('#ideas-modal').modal('show');">
<!--[if lt IE 8]>
<p class="browserupgrade">Estas usando una versión muy <strong>anticuada</strong> de tu navegador. Por favor <a href="http://browsehappy.com/">actualiza tu navegador</a> para tener una mejor experiencia en la red.</p>
<![endif]-->
<!-- Hero -->
<div class="hero">
<div class="container wow zoomIn" data-wow-duration="1s" data-wow-delay=".5s" >
<div class="row rellax" data-rellax-speed="-2">
<div class="col-md-2">
<!--<img class="hero-img wow fadeInLeft" data-wow-duration="1.5s" data-wow-delay="1.5s" src="img/Lap.svg">-->
</div>
<div class="col-md-8 hero-textbox wow fadeInRigth" data-wow-duration="1.5s" data-wow-delay="1.5s">
<!--<h1 id="hero-impact"><script src="js/quote-randomizer.js"></script></h1>-->
<!--<h1 id="hero-impact">Hoy = <span>Internet</span><br><span>Hacemos</span> que te <span>vean</span>.</h1>-->
<img id="hero-logo" src="img/logo.png">
<h1 id="hero-impact">Es hora de <span>hacer</span><br>que te <span>vean</span>.</h1>
<!--<div class="hero-divider"></div>-->
<p class="hero-intro">Somos <strong>Triangle</strong>, un estudio de diseño y desarrollo web que enseñará lo mejor de tu proyecto.</p>
<a class="hero-cta bounce-btn" href="#proceso" role="button">¡Empecemos! <i class="carbon-rocket"></i></a>
</div>
</div>
</div>
</div>
<!--/. Hero -->
<!-- Modal
<div class="modal fade modal-large" id="ideas-modal" tabindex="-1" role="dialog" aria-labelledby="video Ideas">
<div class="modal-dialog" role="document">
<div class="modal-body">
<a class="close-modal" data-dismiss="modal"><span aria-hidden="true"><i class="carbon-cancel"> </i></span>Cerrar</a>
<video id="ideas-vid" class="video-js vjs-default-skin" controls preload data-setup='{ "aspectRatio":"899:658" }' poster="img/thumb.png">
<source src="https://res.cloudinary.com/triangle/video/upload/v1492608260/ideas.mp4" type="video/mp4">
<p class="browserupgrade">Estas usando una versión muy <strong>anticuada</strong> de tu navegador. Por favor <a href="http://browsehappy.com/">actualiza tu navegador</a> para tener una mejor experiencia en la red.</p>
</video>
</div>
</div>
</div>
<!-- Notification Bar -->
<!--<div class="" data-wow-duration=".5s" data-wow-delay="1.5s">
<div id="notification-bar" class="animated"><p>¡No te pierdas de nada! Síguenos en <a target="_blank" href="https://www.facebook.com/trianglewebmexico">Facebook</a> <i onclick="closeNotificationBar()" id="close-btn" class="carbon-cancel"></i></p></div>
</div>-->
<!--/. Notification Bar -->
<!-- Servicios -->
<!--<div id="servicios">
<div class="container">
<h1 class="section-title"></h1>
</div>
</div>
-->
<!-- Proceso -->
<div id="proceso">
<div class="container">
<h1 class="section-title">El <span>Proceso</span> </h1>
<div class="divider-title"></div>
<p class="section-lead">Sabemos que obtener una buena página web puede ser tedioso, por lo que hemos creado un sistema de desarrollo de proyectos basado en 7 simples pasos, que nos ayudarán a hacer que tu página web quede excelente sin tener que fastidiarte.</p>
<div class="row">
<div class="col-md-6">
<div class="step row">
<div class="col-xs-4">
<i class="step-icon carbon-users"></i>
</div>
<div class="col-xs-8">
<span class="step-title">1. Reunión de Diseño</span>
<div class="divider"></div>
<p class="step-text">En esta primera junta te ayudamos a aterrizar tus ideas de diseño dentro de la página, claro tomando en cuenta lo mejor para tu proyecto.</p>
</div>
</div>
<div class="step row">
<div class="col-xs-4">
<i class="step-icon carbon-dollar"></i>
</div>
<div class="col-xs-8">
<span class="step-title">2. Cotización</span>
<div class="divider"></div>
<p class="step-text">Con base a la primera junta realizaremos una cotización usando la complejidad y las necesidades de tu proyecto como base para dicha cotización.</p>
</div>
</div>
<div class="step row">
<div class="col-xs-4">
<i class="step-icon carbon-pencil"></i>
</div>
<div class="col-xs-8">
<span class="step-title">3. Contrato</span>
<div class="divider"></div>
<p class="step-text">Nos volvemos a encontrar, hay firma de un contrato y recibimos toda la información necesaria para comenzar a desarrollar tu página web.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="step row">
<div class="col-xs-4">
<i class="step-icon carbon-lightbulb"></i>
</div>
<div class="col-xs-8">
<span class="step-title">4. Prototipo de Página</span>
<div class="divider"></div>
<p class="step-text">También conocido como <i>mockup</i>, se te da a conocer un prototipo de tu página con el diseño incluido, ya con el visto bueno te la mostramos en físico (impresa).
</p>
</div>
</div>
<div class="step row">
<div class="col-xs-4">
<i class="step-icon carbon-search"></i>
</div>
<div class="col-xs-8">
<span class="step-title">5. Reunión de Revisión</span>
<div class="divider"></div>
<p class="step-text">Te mostraremos tu página impresa, corregiremos los últimos detalles menores y pronto podrás obsevar la página de tu proyecto en línea y casi lista.</p>
</div>
</div>
<div class="step row">
<div class="col-xs-4">
<i class="step-icon carbon-laptop"></i>
</div>
<div class="col-xs-8">
<span class="step-title">6. Prueba Operativa</span>
<div class="divider"></div>
<p class="step-text">Podrás ver tu página online en lo que conocemos como una <i>benchmark</i> y en esta parte del proceso podrás decirnos "Houston, tenemos un problema". Y tenlo por seguro: Lo corregiremos.</p>
</div>
</div>
</div>
<div class="col-md-12" style="font-size: 110%;">
<div class="step last-step">
<i class="step-icon carbon-diamond"></i>
<br>
<span class="step-title">7. ¡Disfrútala!</span>
<div class="divider"></div>
<p style="font-size: 95%;">Siéntete orgulloso: ¡La página de tu proyecto ya estará disponible!</p>
</div>
</div>
<!--<div class="button-group">
<a class="section-cta black-btn" href="#proyectos" role="button">Descubre Más<i class="carbon-search"></i></a>
</div>-->
</div>
</div>
</div>
<!--./ Proceso -->
<!-- Proyectos -->
<div id="proyectos">
<div class="container">
<h1 class="section-title">Los <span>Proyectos</span> </h1>
<div class="divider-title"></div>
<p class="section-lead">Hemos diseñado, desarrollado e implementado nuevos proyectos. Queremos que el tuyo esté en esta lista también.</p>
<div class="proyectos-flexbox">
<div class="proyecto">
<a href="http://congresodelosjovenesup.com" target="_blank"><img class="proyecto-img" src="img/Proyectos/UP.png"></a>
</div>
<div class="proyecto">
<a href="http://kida.com.mx" target="_blank"><img class="proyecto-img" src="img/Proyectos/Kida.png"></a>
</div>
<div class="proyecto">
<a href="http://trent.triangle.mx" target="_blank"><img class="proyecto-img" src="img/Proyectos/Trent.png"></a>
</div>
</div>
<div class="button-group">
<a class="section-cta white-btn" href="portfolio.html" role="button">Ver Proyectos <i class="carbon-television"></i></a>
</div>
<br>
</div>
</div>
<!--./ Proyectos -->
<!-- About -->
<div id="about">
<div class="container">
<h1 class="section-title">Sobre <span>Nosotros</span> </h1>
<div class="divider-title"></div>
<p class="section-lead">Somos un estudio de desarrollo web convencido de que tu página tiene que ser exactamente como la visualizas tu. Y para que esto ocurra tenemos tres diferenciadorees que sabemos que van a lograr nuestro objeitivo. </p>
<div class="row">
<div class="col-md-4 marketing-item">
<i class="marketing-icon carbon-laptop"></i>
<span class="marketing-title">Diseño Responsive</span>
<span class="marketing-text">Con las mejores tecnologías de diseño y desarrollo web (HTML5, CSS3 y JS ES6) hacemos que tu sitio sea vea impactantemente bien en todos los dispositivos, ya sea un celular, una laptop, desktops, tablets e incluso televisiones de último modelo.</span>
</div>
<div class="col-md-4 marketing-item">
<i class="marketing-icon carbon-work"></i>
<span class="marketing-title">Adaptación de Necesidades</span>
<span class="marketing-text">Nosotros nos basamos en algo muy simple, sabemos que tu proyecto es único, y eso es lo que lo hace especial, por lo tanto necesitas una página web, igual de única; una que sea exacta para ti. Incluso sabemos que tus necesidades cambian a lo largo del tiempo.</span>
</div>
<div class="col-md-4 marketing-item">
<i class="marketing-icon carbon-users"></i>
<span class="marketing-title">Servicio al Cliente</span>
<span class="marketing-text">Tu proyecto verdaderamente nos importa, entonces queremos que siempre sigas estando actualizado. Para eso tenemos el mejor mantenimiento dependiendo lo que necesite tu página a corto, mediano y largo plazo, para que tu proyecto siempre pueda estar al día.</span>
</div>
</div>
<!--<div class="equipo-flexbox">
<div class="miembro">
<img class="miembro-foto" src="img/Equipo/JPIglesias.png">
<span class="miembro-name">José Pablo Iglesias</span>
<span class="miembro-puesto">Director General</span>
</div>
<div class="miembro">
<img class="miembro-foto" src="img/Equipo/Blix.png">
<span class="miembro-name">Imanol Blix</span>
<span class="miembro-puesto">Director de Finanzas</span>
</div>
<div class="miembro">
<img class="miembro-foto" src="img/Equipo/Suarez.png">
<span class="miembro-name">David Suárez</span>
<span class="miembro-puesto">Director de Ventas</span>
</div>
</div>-->
<div class="button-group">
<a class="section-cta black-btn" href="about.html" role="button">Descubre Más <i class="carbon-search"></i></a>
</div>
<br>
</div>
</div>
<!-- ./ About -->
<!-- Contacto -->
<div id="contacto">
<div class="container">
<h1 class="section-title"> <span>Contáctanos</span> </h1>
<div class="divider-title"></div>
<p class="section-lead">Ya nos conoces. Ahora nosotros queremos saber un poco de ti. ¡Porfavor escríbenos!</p>
<form class="contactform" method="POST" action="http://formspree.io/[email protected]">
<p class="placeholder">Tu Nombre:</p>
<input type="text" name="name"><br>
<p class="placeholder">Tu Correo Electrónico (para poder contactarte):</p>
<input id="email" type="email" name="_replyto"><br>
<input type="hidden" name="_next" value="thanks.html" />
<input type="text" name="_gotcha" style="display:none" />
<p class="placeholder">El Mensaje que desees enviarnos:</p>
<textarea name="message" rows="4"></textarea><br>
<button class="hero-cta bounce-btn" style="cursor: pointer; border: none;" type="submit" role="button">Enviar <i class="carbon-plane"></i></button>
</form>
</div>
</div>
<!--./ Contacto -->
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<span class="trademark">Somos <strong>Triangle</strong></span>
</div>
<div class="col-md-4">
<ul class="list-inline social-links">
<li class="social-icon"><a href="https://www.facebook.com/trianglewebmexico" target="_blank"><i class="carbon-facebook"></i></a></li>
<li class="social-icon"><a href="https://www.instagram.com/trianglewebsmex/" target="_blank"><i class="carbon-instagram"></i></a></li>
<li class="social-icon"><a href="https://twitter.com/triangle_webs" target="_blank"><i class="carbon-twitter"></i></a></li>
</ul>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<!-- ./ Footer -->
<!-- Scripts -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74662952-2', 'auto');
ga('send', 'pageview');
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>'
</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script src="js/vendor/rellax.js"></script>
<script>
var rellax = new Rellax('.rellax');
</script>
<!-- ./ Scripts -->
</body>
</html>