-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
246 lines (228 loc) · 11.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Constructora Vargas</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="img/LOGO (1).jpeg" type="jpeg">
<!-- Bootstrap CSS v5.2.1 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"/>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #333;">
<div class="container">
<div class="logo">
<img src="img/LOGO (1).jpeg" alt="Logo Constructora Vargas" height="40">
</div>
<!-- Botón de menú para móviles -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Menú de navegación -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#inicio">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#servicios">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cotizar">Cotización</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#nosotros">Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contacto">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Hero Section -->
<section id="inicio" class="hero">
<div class="hero-content">
<h1>Construimos tus sueños con calidad y excelencia</h1>
<p>Desde diseños arquitectónicos innovadores hasta construcciones duraderas y sostenibles. Explora los proyectos que hemos realizado y cómo transformamos ideas en realidad.</p>
<p class="social-callout mt-2 md-2">
Descubre más de nuestro trabajo y encuentra inspiración en nuestra cuenta de Instagram:
<a href="https://instagram.com/tuempresa" target="_blank" class="instagram-link">@constructoravargas839</a>. ¡Síguenos para no perderte ninguna novedad!
</p>
<a href="#cotizar" class="cta-button">Solicita tu Cotización</a>
</div>
</section>
<!-- Servicios Section -->
<section id="servicios" class="services-section">
<div class="container">
<h2>Nuestros Servicios</h2>
<p>Ofrecemos una amplia gama de servicios para llevar tus proyectos al siguiente nivel.</p>
<div class="services-grid">
<div class="service-item">
<h3>Diseños Arquitectónicos</h3>
<p class="fw-bold">Costo: $300/M²</p>
<p>Diseños innovadores y personalizados que cumplen con tus expectativas.</p>
</div>
<div class="service-item">
<h3>Diseños Estructurales</h3>
<p class="fw-bold">Costo: $80/M²</p>
<p>Estructuras seguras y eficientes que garantizan la estabilidad de tus proyectos.</p>
</div>
<div class="service-item">
<h3>Diseños Eléctricos</h3>
<p class="fw-bold">Costo: $45/M²</p>
<p>Sistemas eléctricos eficientes, incorporando tecnologías sostenibles.</p>
</div>
<div class="service-item">
<h3>Diseños Sanitarios</h3>
<p class="fw-bold">Costo: $45/M²</p>
<p>Sistemas sanitarios eficaces y sostenibles, cumpliendo con las normativas.</p>
</div>
<div class="service-item">
<h3>Presupuestos</h3>
<p class="fw-bold">Costo: $45/M²</p>
<p>Proveemos presupuestos detallados y precisos para cada etapa del proyecto.</p>
</div>
<div class="service-item">
<h3>Supervisión de Obras</h3>
<p>Aseguramos la calidad y el cumplimiento de plazos en cada proyecto.</p>
</div>
<div class="service-item">
<h3>Construcciones</h3>
<p>Construcciones duraderas y de alta calidad adaptadas a tus necesidades.</p>
</div>
</div>
</div>
</section>
<!-- Cotización Section -->
<section id="cotizar" class="cotizacion-section">
<div class="container">
<h2>Cotiza tu Proyecto</h2>
<p class="disclaimer">
El valor de cotización mostrado será un aproximado. Si desea conocer el valor exacto, por favor contáctenos directamente.
</p>
<div class="disclaimer">
<form id="cotizador-form" class="p-4 border rounded shadow-sm">
<div class="mb-3">
<label for="metros" class="form-label fw-semibold">Cantidad de Metros Cuadrados</label>
<input type="number" id="metros" class="form-control" placeholder="Ingrese la cantidad de m²" required>
</div>
<div class="mb-4">
<h5 class="fw-semibold mb-3">Seleccione los servicios:</h5>
<div class="row">
<div class="col-md-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="diseno-arquitectonico" data-precio="300">
<label class="form-check-label" for="diseno-arquitectonico">Diseños Arquitectónicos ($300/M²)</label>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="diseno-estructural" data-precio="80">
<label class="form-check-label" for="diseno-estructural">Diseños Estructurales ($80/M²)</label>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="diseno-electrico" data-precio="45">
<label class="form-check-label" for="diseno-electrico">Diseños Eléctricos ($45/M²)</label>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="diseno-sanitario" data-precio="45">
<label class="form-check-label" for="diseno-sanitario">Diseños Sanitarios ($45/M²)</label>
</div>
</div>
<div class="col-md-6 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="presupuesto" data-precio="45">
<label class="form-check-label" for="presupuesto">Presupuestos ($45/M²)</label>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary w-100 fw-bold" onclick="calcularCosto()">Calcular Costo</button>
</form>
<div id="resultado" class="mt-4 p-3 border rounded shadow-sm"></div>
</div>
</div>
</section>
<!-- Nosotros Section -->
<section id="nosotros" class="about-section py-5">
<div class="container text-center">
<h2 class="mb-4">Sobre Constructora Vargas</h2>
<p class="lead mb-5">
En <strong>CONSTRUCTORA VARGAS</strong>, ofrecemos una amplia gama de servicios de construcción, garantizando calidad, innovación y satisfacción del cliente. Nos enfocamos en cumplir con los más altos estándares de seguridad, sostenibilidad y diseño.
</p>
<div class="row g-4">
<!-- Tarjeta de Contacto -->
<div class="col-lg-6 col-md-6">
<div class="card shadow">
<img src="img/card (2).jpg" class="card-img-top" alt="Tarjeta de Contacto">
<div class="card-body">
<h5 class="card-title">Nuestra Tarjeta de Contacto</h5>
<p class="card-text">Encuentra todos nuestros detalles de contacto aquí.</p>
</div>
</div>
</div>
<!-- Tarjeta de Servicios -->
<div class="col-lg-6 col-md-6">
<div class="card shadow">
<img src="img/SERVICIOS.jpeg" class="card-img-top" alt="Tarjeta de Servicios">
<div class="card-body">
<h5 class="card-title">Servicios que Ofrecemos</h5>
<p class="card-text">Descubre nuestra lista completa de servicios y tarifas.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contacto Section -->
<section id="contacto" class="contact-section">
<div class="container">
<h2>Contáctanos</h2>
<p>¿Tienes alguna consulta o deseas más información? ¡Estamos aquí para ayudarte!</p>
<div class="contact-info">
<ul class="social-links">
<li>
<a href="https://instagram.com/vargasconstructora839?igshid=YmMyMTA2M2Y=" target="_blank">
<img src="img/instagram.png" alt="Instagram">
Instagram
</a>
</li>
<li>
<a href="https://www.facebook.com/profile.php?id=100089422300267&mibextid=ZbWKwL" target="_blank">
<img src="img/facebook.png" alt="Facebook">
Facebook
</a>
</li>
<li>
<a href="https://wa.me/18297746932" target="_blank">
<img src="img/whatsapp.png" alt="WhatsApp">
WhatsApp: 829-774-6932
</a>
</li>
</ul>
</div>
</div>
</section>
<footer>
<p>© 2024 Constructora Vargas. Todos los derechos reservados.</p>
</footer>
<script src="js/Cotizacion.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"
></script>
</body>
</html>