-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
323 lines (266 loc) · 15.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- para que sea responsive -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Architects+Daughter&family=Dancing+Script:wght@500&family=Indie
+Flower&family=Lexend+Tera&family=Open+Sans
+Condensed:ital,wght@0,300;0,700;1,300&family=Piedra&family=Roboto:ital,wght@0,100;0,300;1,100;1,300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/ef236a1fbc.js" crossorigin="anonymous"></script>
<!-- //////////////
/// ESTILOS //
////////////// -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./estilos.css">
<!-- facebook -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v8.0" nonce="blGj83AM"></script>
<title>ALAN TATTOO</title>
</head>
<body>
<!-- //////////////////// CARTEL //////////////////////////////// -->
<div class="container sticky-top mt-5">
<div class="cartel">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<h1 class="display-6 text-left">ALAN TATTOO</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span>≡</span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#nosotros">NOSOTROS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#trabajos">TRABAJOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comentarios">COMENTARIOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#preguntas">PREGUNTAS FRECUENTES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacto">CONTACTO</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- //////////////////// NOSOTROS ////////////////////////////// -->
<div class="container" id="nosotros">
<div class="row ">
<div class="col-lg-6 col-sm-12 text-center">
<img src="./img/about_img.jpg" alt="">
</div>
<div class="col-lg-6 col-sm-12 texto text-center">
<h2>Alan David</h2>
<p>Amante de los autos clasicos, las Cafe Racer y el Rock & Roll, Alan no pasa inadvertido y deja su huella inevitablemente en quienes lo conocen.</p>
<p>Y no solo fascina por su imagen personal, sino tambien por las obras de arte que realiza desde hace mas de cinco años en el cuerpo de cientos de personas.</p>
<p>Tatuador de profesion, Rockstar de alma, Motociclista como hobbie, Alan ha pasado las fronteras en el rubro del tatuaje, y tras muchos años de trabajo ha sabido capitalizar su experiencia y convertir a Alan Tattoo en el estudio de tatuajes
mas importante y reconocido de V:P: Santa Ana</p>
<p>Hoy Alan Tattoo cuenta con la mejor atencion personal para recibir a quienes vengan a visitarnos!
</p>
</div>
</div>
</div>
<!-- //////////////////// TRABAJOS ////////////////////////////// -->
<div class="container">
<div class="trabajos1" id="trabajos1">
<div class="card " style="text-decoration: none;">
<img src="./img/banners/b1_2.jpg" height="150" alt="">
<div class="card-img-overlay">
<div class="col-lg-6 col-sm-12">
<h4>Nuestros Trabajos</h4>
</div>
</div>
</div>
<div class="row trabajos" id="trabajos">
<!-- #################################################
###------------------------------------------------###
### aqui se insertan las tarjetas de los TRABAJOS ###
###------------------------------------------------###
###################################################### -->
</div>
</div>
</div>
<!-- //////////////////// COMENTARIOS /////////////////////////// -->
<div class="container" id="comentarios">
<div class="row text-white">
<div class="col-lg-12 col-sm-12 bg-light my-3 py-2">
<h3 class="text-dark">Dejanos tu consulta en los comentarios</h3>
<div id="fb-root"></div>
<div class="fb-comments bg-light" data-href="https://cyberkrane.github.io/Alan-Tattoo/" data-numposts="5" data-width="">
</div>
<div class="fb-like" data-href="https://cyberkrane.github.io/Alan-Tattoo/" data-width="" data-layout="standard" data-action="like" data-size="small" data-share="true"></div>
</div>
</div>
</div>
<!-- //////////////////// PREGUNTAS FRECUENTES ////////////////// -->
<div class="container">
<div class="preguntas" id="preguntas">
<div class="card " style="text-decoration: none;">
<img src="./img/banners/b1_3.jpg" width="100%" height="150" alt="">
<div class="card-img-overlay">
<div class="col-6">
<h4>
Preguntas Frecuentes
</h4>
</div>
</div>
</div>
<div class="accordion mb-3" id="accordionExample" style="padding-left: 3%; padding-right: 3%;">
<div class="Sectores text-white">
<div class="card-header text-left" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link c" style="text-decoration: none;" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
¿CUANTO ME SALE UN TATUAJE?
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<p>El precio del tatuaje varía en función del tamaño y del diseño, razón por la cual es necesario acercarse por el local y hablar con alguno de los tatuadores, para convenir acerca del trabajo
a realizar y el presupuesto. No se envían presupuestos por mail, redes sociales ni por teléfono.
</p>
</div>
</div>
</div>
<div class="text-white">
<div class="card-header text-left" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link c collapsed" style="text-decoration: none;" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
¿QUE CUIDADOS TENGO QUE TENER LUEGO DE HACERME UN TATTOO?
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<p>Mantener el vendaje durante 4 horas<br /> (de lo contrario el tatuaje se adherirá a la ropa y al despegarlo extraerá el pigmento).<br /> Luego de las 4 horas, sacar el vendaje y lavar con agua y jabón neutro.
<br /> Colocar crema 4 veces por día. (NO USAR PRODUCTOS A BASE DE PETROLEO NI VASELINA)
<br /> Evitar el exceso de crema, sol, agua salada o con cloro . No mantener en agua demasiado tiempo mas que un remojo. <br /> No extraer las cáscaras y mantener el tatuaje alejado de la suciedad y grasitud. <br
/> Tomará aproximadamente 4 semanas en cicatrizar.
<br /> Usar la crema durante todo ese tiempo y un fuerte protector solar ayudará a mantener los colores vivos por mucho mas tiempo.
<br />
</p>
</div>
</div>
</div>
<div class="text-white">
<div class="card-header text-left" id="heading4">
<h2 class="mb-0">
<button class="btn btn-link c collapsed" style="text-decoration: none;" type="button" data-toggle="collapse" data-target="#collapse4 " aria-expanded="false" aria-controls="collapse4">
¿TENGO QUE PEDIR TURNO?
</button>
</h2>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordionExample">
<div class="card-body">
<p> cuando se trate de diseños pequeños se realizan en el momento (tratando de no venir sobre el horario de cierre del local), pero para diseños grandes es conveniente reservar un turno, para no correr el riesgo
de venir hasta el local y que no haya ningun tatuador disponible.
</p>
</div>
</div>
</div>
<div class="text-white">
<div class="card-header text-left" id="heading5">
<h2 class="mb-0">
<button class="btn btn-link c collapsed" style="text-decoration: none;" type="button" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">
¿COMO DEBO HACER SI SOY MENOR DE 18 AÑOS?
</button>
</h2>
</div>
<div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordionExample">
<div class="card-body">
<p>Los menores de 18 años que quieran hacerce un tattoo o piercing, deberan venir acompañados por alguno de sus padres, y todos con DNI, para firmar la autorización correspondiente.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- //////////////////// CONTACTO ////////////////////////////// -->
<div class="container">
<div class="row" id="contacto">
<div class="card " style="text-decoration: none;">
<img src="./img/banners/b1_6.jpg" width="100%" height="150" alt="">
<div class="card-img-overlay">
<div class="col-6">
<h4>
Contáctanos
</h4>
</div>
</div>
</div>
<!-- ///////////// TURNOS //////////////////// -->
<div class="col-12 col-lg-6 py-5">
<h3>Pedi turnos:</h3>
<h5>al Tel: 03547 466387</h5>
<div class="row">
<div class="redes-s text-center">
<a href="https://www.facebook.com/alan.tattoo.92" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook"></i></a>
<a class='blantershow-chat' onclick="mostrar_chat();" href='#' title='Show Chat'><i class="fab fa-whatsapp"></i>
</a>
<a href="https://www.instagram.com/alandcor/" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div id="whatsapp-chat" class="hide">
<div class="header-chat">
<div class="head-home">
<h3>Chatea con nosotros</h3>
<div class="info-avatar"><img src="./img/st.png" /></div>
</div>
</div>
<div class="start-chat">
<div class='first-msg'><span>¡Hola! ¿Qué puedo hacer por ti?</span></div>
<div class='blanter-msg'><textarea id='chat-input' placeholder='Escribe un mensaje' maxlength='120' row='1'></textarea>
<a href='#' onclick="enviar_mensaje();" id='send-it'>Enviar</a></div>
</div>
<div id='get-number'>543547466387</div><a class='close-chat' onclick="cerrar_chat();" href='#'>×</a>
</div>
<div id='get-number'>54347466387</div>
<br>
<h5>
Nuestro estudio esta sobre calle 15 esquina 6 <br> Nº 291 <br> Villa Parque Santa Ana
</h5>
</div>
<!-- /////////// MAPA /////////////////////////-->
<div class="col-12 col-lg-6">
<h3>Estamos aqui</h3>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d849.6675363281809!2d-64.35314207750328!3d-31.5880921700512!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x942d5902fdfd7627%3A0xe6e3d650f16f7612!2sAlan%20*2A%20Tattoo!5e0!3m2!1ses-419!2sar!4v1590248057918!5m2!1ses-419!2sar"
width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<!-- //////////////////// FOOTER //////////////////////////////// -->
<div class="container">
<div class="row pie">
<div class="col-4"></div>
<div class="col-4 " id="pie">
<h5><small>Created by </small> <a href="#">Cyberkrane_2020 ©</a></h5>
</div>
<!-- Contador de visitas -->
<div class="col-4">
<i>ya nos visitaron</i>
<img style="border: 0px solid; display: inline;" alt="contador de visitas"
src="http://www.websmultimedia.com/contador-de-visitas.php?id=285147">
<i>veces</i>
</div>
<!-- Fin Contador de visitas -->
</div>
</div>
</body>
<!-- //////////////
/// SCRIPTS //
////////////// -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./app.js"></script>
</html>