-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
301 lines (277 loc) · 16.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7QP7X015V3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7QP7X015V3');
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Remodelaciones o construcciones completas de tu hogar o negocio, descubre la mejor solución con el mejor diseño, la mejor calidad y al mejor precio."/>
<meta name="keywords" content="remodelacion, constructora, carpinteria, herreria, restauración, instalaciones, diseño, interiores, oficina, pintura"/>
<title>Vértice Soluciones | Inicio</title>
<link rel="icon" href="img/vertice-soluciones-arriba.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Navbar -->
<div class="container-fluid navbar-light bg-light fixed-top">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html"><img id="logo-vertice" src="img/vertice-soluciones.png"
alt="logo de la empresa"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="conocenos.html">Conócenos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="servicios.html">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="proyectos.html">Proyectos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacto.html">Contacto</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Navbar -->
<!-- Portada inicio -->
<div class="container-fluid background" id="background-inicio">
</div>
<div id="inicio-contents">
<h1 class="main-title" id="inicio-title">VÉRTICE</h1>
<h2 class="main-subtitle pt-3" id="inicio-subtitle">Tu espacio a tu medida</h2>
</div>
<!-- Portada inicio -->
<div class="container-fluid py-4" style="background-color: #c7cbce;">
<div class="container">
<!-- Card Somos -->
<div class="card mb-4">
<div class="row align-items-center">
<div class="col-md-6 col-lg-8 ">
<div class="card-body">
<h4 class="card-title color-vertice">SOMOS...</h4>
<p class="card-text">Una empresa con 20 años de experiencia, comprometidos con la calidad y
la honestidad.
Buscamos solucionar las necesidades de todos nuestros clientes al mejor precio y con
un equipo de profesionales en la construcción y el diseño, para asegurar
resultados satisfactorios.</p>
</div>
</div>
<div class="col-md-6 col-lg-4 ms-auto ">
<img src="img/arquitectos-1.jpg" class="img-fluid p-3" alt="arquitectos con experiencia">
<div class="row justify-content-center pb-3">
<a class="btn btn-primary background-color-vertice px-md-5 py-2 mx-auto"
href="conocenos.html" role="button">CONÓCENOS</a>
</div>
</div>
</div>
</div>
<!-- Card Somos -->
<!-- Card Crea -->
<div class="card mb-4">
<div class="row align-items-center">
<div class="col-md-6 col-lg-4 align-items-center">
<img src="img/estudio.jpg" class="img-fluid p-3" alt="remodelado de estudio">
<div class="row justify-content-center pb-3">
<a class="btn btn-primary background-color-vertice px-md-5 py-2 mx-auto d-none d-md-block"
href="servicios.html" role="button">NUESTROS SERVICIOS</a>
</div>
</div>
<div class="col-md-6 col-lg-8 ">
<div class="card-body">
<h4 class="card-title color-vertice">CREA EL ESPACIO PERFECTO</h4>
<p class="card-text">No importa si es una pequeña remodelación o una construcción completa,
si es tu hogar o tu negocio, te ayudamos a descubrir la mejor solución
para que tu espacio se adecúe a todas tus necesidades, con el mejor diseño,
el material de mayor calidad y al mejor precio.</p>
</div>
<div class="row justify-content-center pb-3">
<a class="btn btn-primary background-color-vertice px-md-5 py-2 mx-auto d-md-none"
href="servicios.html" role="button">NUESTROS SERVICIOS</a>
</div>
</div>
</div>
</div>
<!-- Card Crea -->
<!-- Card Soluciona -->
<div class="card mb-4">
<div class="row align-items-center">
<div class="col-md-6 col-lg-8 ">
<div class="card-body">
<h4 class="card-title color-vertice">SOLUCIONA CADA DETALLE</h4>
<p class="card-text">Todos los detalles importan y para solucionarlos tenemos al mejor
equipo,
que te ayudará a diseñar y planear tu proyecto,
y a volverlo realidad. Además, contamos con especialistas en arquitectura, topografía,
carpintería, herrería, energías renovables… ¡Y muchos más! </p>
</div>
</div>
<div class="col-md-6 col-lg-4 ms-auto " ms-auto>
<img src="img/soluciona.jpg" class="img-fluid p-3" alt="diseño de interiores">
<div class="row justify-content-center pb-3">
<a class="btn btn-primary background-color-vertice px-md-5 py-2 mx-auto"
href="servicios.html" role="button">NUESTROS SERVICIOS</a>
</div>
</div>
</div>
</div>
<!-- Card Soluciona -->
<!-- Card Conoce -->
<div class="card">
<div class="card-body">
<h1 class="text-center card-title color-vertice">¡CONOCE NUESTRO TRABAJO!</h1>
<!-- Imagenes conoce estáticas -->
<div class="row align-items-center p-3 d-none d-md-flex" >
<div class="col px-2 opacidad">
<img src="img/terraza.jpg" class="img-fluid carousel-trigger" alt="diseño de terraza" style="cursor: pointer;" data-slide-to="0" data-toggle="modal" data-target="#modalConoce">
</div>
<div class="col pr-2 opacidad">
<img src="img/edificio-insurgentes-1.jpg" class="img-fluid carousel-trigger" alt="remodelación de edificio" style="cursor: pointer;" data-slide-to="1" data-toggle="modal" data-target="#modalConoce">
</div>
<div class="col pr-2 opacidad">
<img src="img/baño-sencillo-1.jpg" class="img-fluid carousel-trigger" alt="remodelación de baño" style="cursor: pointer;" data-slide-to="2" data-toggle="modal" data-target="#modalConoce">
</div>
</div>
<!-- Imagenes conoce estáticas -->
<!-- Carousel Conoce -->
<div class="row align-items-center p-3 d-md-none" data-toggle="modal" data-target="#modalConoce">
<div id="carouselConoce" class="carousel slide carousel-fade carouselNoModal" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/terraza.jpg" class="d-block w-100" alt="diseño de terraza">
</div>
<div class="carousel-item">
<img src="img/edificio-insurgentes-1.jpg" class="d-block w-100" alt="Remodelación de edificio">
</div>
<div class="carousel-item">
<img src="img/baño-sencillo-1.jpg" class="d-block w-100" alt="Remodelación de baño">
</div>
</div>
</div>
</div>
<!-- Carousel Conoce -->
<div class="row justify-content-center">
<a class="btn btn-primary background-color-vertice px-md-5 py-2" href="proyectos.html"
role="button">NUESTROS PROYECTOS</a>
</div>
</div>
</div>
<!-- Card Conoce -->
<!-- Modal-carousel Conoce -->
<div class="modal fade" id="modalConoce" tabindex="-1" role="dialog" aria-hidden="true" data-target="#modalConoce">
<div class="modal-dialog" role="document">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Carousel Modal conoce -->
<div id="carouselModalConoce" class="carousel slide carouselModal" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/terraza.jpg" alt="diseño de terraza">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/edificio-insurgentes-1.jpg" alt="remodelacion de edificio">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/baño-sencillo-1.jpg" alt="remodelación de baño">
</div>
</div>
<a class="carousel-control-prev" href="#carouselModalConoce" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselModalConoce" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Carousel Modal conoce -->
</div>
</div>
<!-- Modal content -->
</div>
</div>
<!-- Modal-carousel Conoce -->
</div>
</div>
<div class="container-fluid pb-lg-4 card-conoce-container" style="background-color: #c7cbce;">
<div class="container card-conoce">
<!-- Card Comencemos -->
<div class="card background-color-vertice no-border-radius">
<div class="row card-conoce-row align-items-center">
<div class="col-md-6 col-lg-6">
<div class="card-body">
<h3 class="card-title blanco pb-3">¡Comencemos tu proyecto!</h3>
<p class="card-text blanco pb-3">Escríbenos y agendemos una cita para preparar tu presupuesto
e iniciar a trabajar en tu proyecto. </p>
<h5 class="card-title blanco pb-3">Ing. José Federico Herrera</h5>
<a href="tel:55-1504-5206" class="d-flex flex-row align-content-center">
<img src="img/llamada-telefonica.png" class="icono-small" alt="teléfono icono">
<p class="card-text blanco pl-2"> 55-1504-5206 </p>
</a>
<a href="mailto:[email protected]"
class="d-flex flex-row align-content-center pt-2">
<img src="img/email.png" class="icono-small" alt="teléfono icono">
<p class="card-text blanco conocenos-text pl-2 text-break">
[email protected] </p>
</a>
</div>
</div>
<div class="col-md-6 col-lg-6 ms-auto" ms-auto>
<div class="p-3">
<iframe width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3764.1324238003895!2d-99.13497487678156!3d19.36341794509882!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1ff31875e5d3d%3A0xb79b7909367161d4!2sV%C3%A9rtice%20Soluciones%20(Construcci%C3%B3n%20y%20Remodelaci%C3%B3n)!5e0!3m2!1ses!2smx!4v1655779606549!5m2!1ses!2smx">
</iframe>
</div>
</div>
</div>
</div>
<!-- Card Comencemos -->
</div>
</div>
<a href="https://api.whatsapp.com/send?phone=5255-15-04-52-06" target="_blank" class="pl-1 whatsapp-icon-container d-none d-lg-flex">
<img src="img/whatsapp.png" alt="icono de whatsapp" class="whatsapp-icon">
<p class="m-0 px-2">Contáctanos</p>
</a>
<a href="https://api.whatsapp.com/send?phone=525515045206" target="_blank" class="pl-1 whatsapp-icon-container d-lg-none" style="background: none;">
<img src="img/whatsapp.png" alt="icono de whatsapp" class="whatsapp-icon-mobile">
</a>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vertice.js"></script>
</body>
</html>