-
Notifications
You must be signed in to change notification settings - Fork 0
/
clientes.html
383 lines (382 loc) · 21.1 KB
/
clientes.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Ana" />
<meta name="copyright" content="2024" />
<meta name="description" content="Sitio práctica bootstrap" />
<meta name="keywords" content="html,css,bootstrap" />
<link rel="shortcut icon" href="/img/favicon.png" />
<!-- BOOTSTRAP CSS-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous" />
<!-- BOOTSTRAP ICONOS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet" />
<!-- MI CSS -->
<link rel="stylesheet" href="./css/styles.css" />
<title>Clientes & Colaboraciones | STUDIO BAD DOG</title>
</head>
<body>
<header class="sticky-top">
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark" role="navigation">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="./img/bad-dog-studio-logo.png" alt="Logo bad dog" /></a>
<button
class="navbar-toggler border-0"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-lg-auto" role="list">
<li class="nav-item" role="listitem">
<a class="nav-link" href="index.html">Inicio</a>
</li>
<li class="nav-item dropdown" role="listitem">
<a
class="nav-link dropdown-toggle"
href="sitios.html"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false">
Sitios
</a>
<ul class="dropdown-menu" role="list">
<li role="listitem">
<a class="dropdown-item" href="sitios.html#ultimosproyectos">Últimos proyectos</a>
</li>
<li role="listitem">
<a class="dropdown-item" href="sitios.html#singlepage">SinglePage</a>
</li>
<li role="listitem">
<a class="dropdown-item" href="sitios.html#multipage">MultiPage</a>
</li>
</ul>
</li>
<li class="nav-item" role="listitem">
<a class="nav-link active" aria-current="page" href="clientes.html">Clientes</a>
</li>
<li class="nav-item" role="listitem">
<a class="nav-link" href="comencemos.html">Comencemos</a>
</li>
<li class="nav-item" role="listitem">
<a class="nav-link" href="contacto.html">¿Interesado?</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container mt-5">
<section class="row g-0">
<h1 class="text-center">Clientes & Colaboraciones</h1>
<p class="text-center fs-5">Aquí hay una selección de clientes felices y hermosos proyectos</p>
<article class="col-12" role="article">
<!-- Modal -->
<div class="modal fade" id="cliente-1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-title fs-5" id="exampleModalLabel" href="https://www.commerce.ai/" target="_blank"
>Commerce AI</a
>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Posicioné una nueva marca comercial (en línea) y diseñé un sitio web adaptado y hecho a medida.</p>
<img src="./img/work-layout-1.jpg" alt="imagen del sitio creado para el cliente Commerce AI" class="img-fluid" />
</div>
</div>
</div>
</div>
<div class="card text-bg-dark border-0 rounded-0">
<img src="./img/clients-1.jpg" class="card-img" alt="cliente 1" />
<div class="card-img-overlay opacidad-oscura d-md-flex flex-md-column justify-content-md-center">
<h5 class="card-title">Andy Pandharikar</h5>
<p class="card-text">CEO/Co-fundador, Commerce AI</p>
<a class="text-warning" href="#" data-bs-toggle="modal" data-bs-target="#cliente-1">Ver Proyecto</a>
<blockquote class="d-none d-md-block pt-5">
No estábamos satisfechos con ninguna de nuestras opciones anteriores. Pero Bad Dog tuvo lo que teníamos en mente.
</blockquote>
</div>
</div>
</article>
<article class="col-12 col-sm-6 col-lg-4" role="article">
<!-- Modal -->
<div class="modal fade" id="cliente-2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-title fs-5" id="exampleModalLabel" href="https://www.newenglandwalkers.com/" target="_blank"
>Walkers</a
>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
He estado trabajando con Zeb en varios otros proyectos en el último año. Cuando se contactó conmigo para
hablar sobre un proyecto que se desarrollaba en torno al diseño de una tienda web personalizada para su padre,
inmediatamente me interesé e inspiré. Esto resultó ser un proyecto realmente inspirador y divertido en el que
trabajar en conjunto, lo que dio como resultado un sitio web de diseño personalizado y muy creativo con una
tienda en línea.
</p>
<img src="./img/work-layout-2.jpg" alt="imagen del sitio creado para el cliente Zeb Couch" class="img-fluid" />
</div>
</div>
</div>
</div>
<div class="card text-bg-dark border-0 rounded-0">
<img src="./img/clients-2.jpg" class="card-img" alt="cliente 2" />
<div class="card-img-overlay opacidad-oscura d-md-flex flex-md-column justify-content-md-center">
<h5 class="card-title">Zeb Couch</h5>
<p class="card-text">Dueño de Zeb Couch</p>
<a class="text-warning" href="#" data-bs-toggle="modal" data-bs-target="#cliente-2">Ver Proyecto</a>
<blockquote class="d-none d-md-block pt-5">
He trabajado con Bad Dog en varios proyectos ahora y seguiré trabajando siempre que pueda.
</blockquote>
</div>
</div>
</article>
<article class="col-12 col-sm-6 col-lg-4" role="article">
<!-- Modal -->
<div class="modal fade" id="cliente-3" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-title fs-5" id="exampleModalLabel" href="https://www.heytextile.com/" target="_blank"
>Hey Textile</a
>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
Lori es dueña de su negocio junto con su esposo. Resultan ser una de esas empresas con las que me encanta
trabajar. Me dan mucha libertad en mi proceso de diseño creativo, pero aún tienen muchas de sus propias ideas
que quieren combinar. Este proyecto resultó ser un proyecto super divertido para trabajar juntos. ¡Ambos
estamos imaginando una buena relación de negocios para trabajar nuevamente en proyectos futuros!
</p>
<img src="./img/work-layout-3.jpg" alt="imagen del sitio creado para el cliente Hey Textile" class="img-fluid" />
</div>
</div>
</div>
</div>
<div class="card text-bg-dark border-0 rounded-0">
<img src="./img/clients-3.jpg" class="card-img" alt="cliente 3" />
<div class="card-img-overlay opacidad-oscura d-md-flex flex-md-column justify-content-md-center">
<h5 class="card-title">Lori Knisely</h5>
<p class="card-text">Co-dueña & Diseñadora de Hey Textile</p>
<a class="text-warning" href="#" data-bs-toggle="modal" data-bs-target="#cliente-3">Ver Proyecto</a>
<blockquote class="d-none d-md-block pt-5">¡Bad Dog, siempre lo consigue!</blockquote>
</div>
</div>
</article>
<article class="col-12 col-sm-6 col-lg-4" role="article">
<!-- Modal -->
<div class="modal fade" id="cliente-4" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a
class="modal-title fs-5"
id="exampleModalLabel"
href="https://cybercx.com.au/about-cybercx/basis/"
target="_blank"
>Basis Networks</a
>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
Tom me contactó con la idea de hacer un rediseño completo de su sitio web (obsoleto) y también hacer que
responda. Estaba buscando un sitio web de aplicación de estilo moderno y me dio mucha libertad para crear un
diseño que tenía en mente. El resultado es un sitio web de aspecto moderno del que ambos estamos orgullosos.
</p>
<img
src="./img/work-layout-4.jpg"
alt="imagen del sitio creado para el cliente Basis Networks"
class="img-fluid" />
</div>
</div>
</div>
</div>
<div class="card text-bg-dark border-0 rounded-0">
<img src="./img/clients-4.jpg" class="card-img" alt="cliente 4" />
<div class="card-img-overlay opacidad-oscura d-md-flex flex-md-column justify-content-md-center">
<h5 class="card-title">Tom Allan</h5>
<p class="card-text">Co-fundador & Director, Basis Networks</p>
<a class="text-warning" href="#" data-bs-toggle="modal" data-bs-target="#cliente-4">Ver Proyecto</a>
<blockquote class="d-none d-md-block pt-5">
Definitivamente continuaremos usando los servicios de Bad Dog para nuestros proyectos futuros.
</blockquote>
</div>
</div>
</article>
<article class="col-12 col-sm-6 col-lg-4" role="article">
<!-- Modal -->
<div class="modal fade" id="cliente-5" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-title fs-5" id="exampleModalLabel" href="https://www.swingvy.com/" target="_blank">Swingvy</a>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
He estado trabajando con el equipo de Shale Capital Group desde 2014. Hemos trabajado juntos en varios
proyectos de sitios web de (re) diseño y (re) marca. Estoy muy contento de que nuestra relación continua
demuestre que puedo ofrecer la calidad que requieren en sus proyectos.
</p>
<img src="./img/work-layout-5.jpg" alt="imagen del sitio creado para el cliente Swingvy" class="img-fluid" />
</div>
</div>
</div>
</div>
<div class="card text-bg-dark border-0 rounded-0">
<img src="./img/clients-5.jpg" class="card-img" alt="cliente 5" />
<div class="card-img-overlay opacidad-oscura d-md-flex flex-md-column justify-content-md-center">
<h5 class="card-title">Jin Choeh</h5>
<p class="card-text">Co-founder & CEO Swingvy</p>
<a class="text-warning" href="#" data-bs-toggle="modal" data-bs-target="#cliente-5">Ver Proyecto</a>
<blockquote class="d-none d-md-block pt-5">Bad Dog estaba más allá de nuestras expectativas.</blockquote>
</div>
</div>
</article>
<article class="col-12 col-sm-6 col-lg-4" role="article">
<!-- Modal -->
<div class="modal fade" id="cliente-6" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-title fs-5" id="exampleModalLabel" href="https://dekalash.com/" target="_blank"
>Lash Spa Studio</a
>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
He estado trabajando con el equipo de Lash Spa Studio desde 2014. Hemos trabajado juntos en varios proyectos
de sitios web de (re) diseño y (re) marca. Estoy muy contento de que nuestra relación continua demuestre que
puedo ofrecer la calidad que requieren en sus proyectos.
</p>
<img
src="./img/work-layout-6.jpg"
alt="imagen del sitio creado para el cliente Lash Spa Studio"
class="img-fluid" />
</div>
</div>
</div>
</div>
<div class="card text-bg-dark border-0 rounded-0">
<img src="./img/clients-6.jpg" class="card-img" alt="cliente 6" />
<div class="card-img-overlay opacidad-oscura d-md-flex flex-md-column justify-content-md-center">
<h5 class="card-title">Jennifer Blair</h5>
<p class="card-text">TCEO Lash Spa Studio</p>
<a class="text-warning" href="#" data-bs-toggle="modal" data-bs-target="#cliente-6">Ver Proyecto</a>
<blockquote class="d-none d-md-block pt-5">
Hemos encontrado un socio perfecto para nuestras necesidades de diseño y marca.
</blockquote>
</div>
</div>
</article>
<article class="col-12 col-sm-6 col-lg-4" role="article">
<!-- Modal -->
<div class="modal fade" id="cliente-7" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-title fs-5" id="exampleModalLabel" href="https://www.bambuu.nl/" target="_blank">Bambuu</a>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
He estado trabajando con Bambuu BV como diseñador gráfico y diseñador web de forma regular desde 2014. Bambuu
ha demostrado ser un negocio de inicio muy exitoso en los Países Bajos y estoy muy contento de poder ofrecer
la calidad de trabajo que ofrecen. Requieren en sus proyectos.
</p>
<img src="./img/work-layout-7.jpg" alt="imagen del sitio creado para el cliente Bambuu" class="img-fluid" />
</div>
</div>
</div>
</div>
<div class="card text-bg-dark border-0 rounded-0">
<img src="./img/clients-7.jpg" class="card-img" alt="cliente 7" />
<div class="card-img-overlay opacidad-oscura d-md-flex flex-md-column justify-content-md-center">
<h5 class="card-title">Sietse Kingma</h5>
<p class="card-text">Co-fundador Bambuu BV</p>
<a class="text-warning" href="#" data-bs-toggle="modal" data-bs-target="#cliente-7">Ver Proyecto</a>
<blockquote class="d-none d-md-block pt-5">
Bad Dog crea sitios impresionantes, estrategias increíbles y mucho más.
</blockquote>
</div>
</div>
</article>
<article class="col-12" role="article">
<!-- Modal -->
<div class="modal fade" id="cliente-8" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="modal-title fs-5" id="exampleModalLabel" href="https://webflow.com/" target="_blank">Webflow</a>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>
Fue justo al comienzo de mi negocio (principios de 2014), cuando el equipo de Webflow me contactó después de
haber visto algunos de mis sitios web basados en Webflow. Estaban lanzando un Template Marketplace en ese
entonces y me pidieron que fuera parte de él. ¡He estado creando plantillas de flujo web html5 modernas y
receptivas para ellos desde entonces!
</p>
</div>
<img src="./img/work-layout-8.jpg" alt="imagen del sitio creado para el cliente Webflow" class="img-fluid" />
</div>
</div>
</div>
<div class="card text-bg-dark border-0 rounded-0">
<img src="./img/clients-8.jpg" class="card-img" alt="cliente 8" />
<div class="card-img-overlay opacidad-oscura d-md-flex flex-md-column justify-content-md-center">
<h5 class="card-title">Sergie Magdalin</h5>
<p class="card-text">Co-fundador de Webflow</p>
<a class="text-warning" href="#" data-bs-toggle="modal" data-bs-target="#cliente-8">Ver Proyecto</a>
<blockquote class="d-none d-md-block pt-5">
Bad Dog es una de los mejores empresas con las que he trabajado.
</blockquote>
</div>
</div>
</article>
</section>
</main>
<footer class="bg-dark py-3 text-white" aria-label="pie de página">
<div class="container">
<nav class="d-flex justify-content-around mb-3 fs-3">
<a href="https://www.twitter.com" target="_blank"><i class="bi bi-twitter" aria-label="link twitter"></i></a>
<a href="https://www.github.com" target="_blank"><i class="bi bi-github" aria-label="link github"></i></a>
<a href="https://www.facebook.com" target="_blank"><i class="bi bi-facebook" aria-label="link facebook"> </i></a>
<a href="https://www.youtube.com" target="_blank"><i class="bi bi-youtube" aria-label="link youtube"></i></a>
<a href="https://www.instagram.com" target="_blank"><i class="bi bi-instagram" aria-label="link instagram"></i></a>
<a href="https://m.me/user" target="_blank"><i class="bi bi-messenger" aria-label="link messenger"></i></a>
<a href="https://api.whatsapp.com/send?phone=541111111111" target="_blank"><i class="bi bi-whatsapp" aria-label="link whatsapp"></i></a>
</nav>
<p class="d-flex justify-content-center">
©2024 Ana Galvez. Tomado del sitio  
<a href="https://www.studiocorvus.com" target="_blank">Studio Corvus</a>
</p>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>