-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
414 lines (396 loc) · 15 KB
/
index.html
File metadata and controls
414 lines (396 loc) · 15 KB
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
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="Spider Web - Especialistas en programación, diseño gráfico, edición de video y manejo de redes de marca. Desde Mendoza al mundo." />
<meta name="keywords"
content="programación, diseño gráfico, edición de video, redes sociales, branding, marketing digital, Mendoza, Argentina" />
<meta name="author" content="Spider Web" />
<meta name="robots" content="index, follow" />
<!-- Open Graph para Facebook -->
<meta property="og:title" content="Spider Web - Programación, Diseño y Creatividad Digital" />
<meta property="og:description"
content="Especialistas en programación, diseño gráfico, edición de video y manejo de redes de marca. Desde Mendoza, Argentina, al mundo." />
<meta property="og:image" content="https://francocalegari.github.io/SpiderWebTest/assets/img/Webv1.png" />
<meta property="og:url" content="https://francocalegari.github.io/SpiderWebTest/" />
<meta property="og:type" content="website" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Spider Web - Programación, Diseño y Creatividad Digital" />
<meta name="twitter:description" content="Desde Mendoza al mundo. Programación, diseño gráfico, edición de video y redes de marca." />
<meta name="twitter:image" content="https://francocalegari.github.io/SpiderWebTest/assets/img/Webv1.png" />
<title>Spider Web - Programación, Diseño y Creatividad Digital</title>
<link rel="stylesheet" href="./assets/css/styletest.css" />
<link rel="stylesheet" href="./assets/css/responsive.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="icon" type="image/svg+xml" href="./assets/img/logo.svg">
</head>
<body>
<div class="animation-container">
<img src="./assets/img/logo.svg" alt="Logo" id="logo" />
<h1 id="text">Spider Web</h1>
</div>
<div class="main-content" id="main-content">
<!-- Header with Logo and Navigation -->
<header class="site-header">
<div class="logoContainer">
<img src="./assets/img/logo.svg" alt="Logo Spider Web" />
<h1>Spider Web</h1>
</div>
<button class="hamburger" id="hamburger-btn" aria-label="Abrir menú" aria-expanded="false">
<i class="fa-solid fa-bars"></i>
</button>
<nav id="main-nav">
<a href="#services" class="nav-link">Servicios</a>
<a href="#contact" class="nav-link">Contacto</a>
<a href="#about" class="nav-link">Sobre Nosotros</a>
</nav>
</header>
<header class="hero">
<div class="hero-content">
<h1>Tu visión,<br/><span class="hero-accent">nuestra red.</span></h1>
<p class="hero-typewriter">Programación · Diseño Gráfico · Edición de Video · Redes de Marca</p>
<p class="hero-sub">Impulsamos tu marca hacia el mundo digital, con soluciones de primer nivel.</p>
<div class="hero-cta">
<a href="#services" class="btn-primary">Nuestros Servicios</a>
<a href="#contact" class="btn-secondary">Contactanos</a>
</div>
</div>
<!--
<div class="hero-logo-wrap">
<img src="./assets/img/logo.svg" alt="Spider Web Logo" class="hero-center-logo" />
</div>
-->
</header>
<!-- Servicios Section -->
<section id="services" class="services-section">
<h2>Nuestros Servicios</h2>
<p class="section-subtitle">Soluciones digitales completas para llevar tu marca al siguiente nivel</p>
<div class="services-carousel">
<div class="service-card">
<div class="service-icon"><i class="fa-solid fa-code"></i></div>
<h3>Programación Web</h3>
<p>Sitios y aplicaciones a medida con MongoDB, Node.js, HTML, CSS, JavaScript y PHP.</p>
<img src="./assets/img/recurses/capturasTEst/img2.png" alt="Programación Web" />
</div>
<div class="service-card">
<div class="service-icon"><i class="fa-solid fa-pen-ruler"></i></div>
<h3>Diseño Gráfico</h3>
<p>Identidad visual, logos y material gráfico que comunican la esencia de tu marca.</p>
<img src="./assets/img/recurses/capturasTEst/img3.png" alt="Diseño Gráfico" />
</div>
<div class="service-card">
<div class="service-icon"><i class="fa-solid fa-film"></i></div>
<h3>Edición de Video y Publicidad</h3>
<p>Flyers, videos publicitarios y contenido audiovisual que impactan a tu audiencia.</p>
<img src="./assets/img/recurses/capturasTEst/instagramn1.png" alt="Edición de Video y Publicidad" />
</div>
<div class="service-card">
<div class="service-icon"><i class="fa-solid fa-hashtag"></i></div>
<h3>Redes de Marca</h3>
<p>Gestión y estrategia de redes sociales para posicionar tu marca y hacer crecer tu comunidad.</p>
</div>
</div>
</section>
<!-- Sobre Nosotros Section -->
<section id="about" class="about-section">
<div class="about-inner">
<h2>De Mendoza al mundo</h2>
<p class="about-text">Nos especializamos en programación, diseño gráfico, edición de video y manejo de redes de marca, ofreciendo soluciones integrales que transforman la presencia digital de nuestros clientes.</p>
<div class="about-stats">
<div class="stat-item">
<span class="stat-number">100%</span>
<span class="stat-label">Proyectos Personalizados</span>
</div>
<div class="stat-item">
<span class="stat-number">4+</span>
<span class="stat-label">Servicios Especializados</span>
</div>
<div class="stat-item">
<span class="stat-number stat-icon"><i class="fa-solid fa-globe"></i></span>
<span class="stat-label">Alcance Global</span>
</div>
</div>
</div>
</section>
<!-- Designs Section -->
<section id="designs" class="designs">
<h2>Diseños y Publicidad</h2>
<div class="designs-grid">
<!-- Contenido dinámico -->
</div>
</section>
<!-- Proyectos Destacados Section -->
<section id="projects" class="projects">
<h2>Proyectos Destacados</h2>
<div class="gallery">
<!-- Los proyectos se cargarán dinámicamente aquí -->
</div>
</section>
<script src="./assets/js/script.js"></script>
<!-- Sponsors Section -->
<section id="sponsors" class="sponsors">
<h2>Nuestros Clientes</h2>
<div class="carousel">
<div class="sponsor-track">
<!-- Los sponsors se cargarán dinámicamente aquí -->
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="faq-section">
<h2>Preguntas Frecuentes</h2>
<div class="faq-container">
<div class="faq-item">
<button class="faq-question">
¿Qué es Spider Web?
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>
Spider Web es una empresa digital con origen en Mendoza, Argentina, especializada en programación, diseño gráfico, edición de video y manejo de redes de marca. Nuestra misión es que tu presencia digital muestre la verdadera esencia de tu negocio.
</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
¿Qué servicios ofrecen?
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>
Ofrecemos una gama completa de servicios: Programación Web, Diseño Gráfico, Edición de Video, Gestión de Redes de Marca, Branding, SEO, Diseño UI/UX, Producción Audiovisual y más.
</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
¿Con qué tipos de clientes trabajan?
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>
Colaboramos con una amplia variedad de clientes —desde startups
hasta empresas consolidadas— que buscan soluciones de diseño e
ingeniería personalizadas y de alta calidad.
</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
¿Qué diferencia a Spider Web de otros proveedores?
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>
Nuestra combinación única de diseño, rapidez y calidad nos diferencia. Nos centramos en la innovación y en una comunicación directa con cada cliente, asegurando resultados que superen sus expectativas.
</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
¿Cómo puedo iniciar un proyecto con ustedes?
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>
Para iniciar un proyecto con nosotros, complete el formulario de
contacto en nuestro sitio web o contactando al correo,
<a href="https://spider-web-test.vercel.app/"
target="_blank">https://spider-web-test.vercel.app/</a>. A continuación, programaremos
una llamada para hablar sobre
su visión y comenzar la planificación del proyecto.
</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
¿Ofrecen cotizaciones sin compromiso?
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>
Sí. Tras una conversación inicial para definir el alcance, le
enviaremos una propuesta personalizada y sin compromiso.
</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
¿Puedo solicitar un proyecto totalmente personalizado?
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>
Por supuesto. Los proyectos personalizados son nuestra
especialidad. Adaptamos cada paso del proceso a sus necesidades
y objetivos.
</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
¿Dónde están? ¿Trabajan de forma remota?
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>
Estamos ubicados en Mendoza, Argentina, pero colaboramos con clientes
de todo el mundo. Según los requisitos del proyecto, ofrecemos
colaboración tanto presencial como remota.
</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">
¿Cuánto tiempo dura un proyecto?
<span class="arrow">▼</span>
</button>
<div class="faq-answer">
<p>
Los plazos dependen de la complejidad del proyecto. Los
desarrollos sencillos pueden tardar unas semanas; los más
complejos, varios meses. Siempre trabajamos con plazos claros y
realistas.
</p>
</div>
</div>
</div>
</section>
<!-- Contacto Section -->
<section id="contact" class="contact">
<h2>Contacto</h2>
<div class="contactcardcontainer">
<div class="contactcard">
<div class="imgcontactconainer">
<img src="./assets/img/recurses/logos/Franco Calegari Logo (2).png" alt="SpiderWeb"
class="contact-img" />
<!-- Cambia el src a la imagen del logo o una imagen representativa -->
</div>
<h3>Franco Calegari</h3>
<div class="contact-buttons">
<button onclick="window.location.href='mailto:francocalegari55@gmail.com'">
Email
</button>
<button onclick="window.location.href='tel:+5492617735869'">
Llamar
</button>
<button
onclick="window.location.href='https://francocalegari.github.io/PortfolioFrancoCalegari/'">
Visitar Web
</button>
</div>
</div>
<div class="contactcard spiderweb-card">
<div class="imgcontactconainer">
<img src="./assets/img/recurses/logos/SpiderLogo.jpg" alt="SpiderWeb" class="contact-img" />
<!-- Cambia el src a la imagen del logo o una imagen representativa -->
</div>
<h3>Spider Web</h3>
<div class="contact-buttons">
<button onclick="window.location.href='mailto:officialspiderwebdesign@gmail.com'">
Email
</button>
</div>
</div>
<div class="contactcard">
<div class="imgcontactconainer">
<img src="./assets/img/recurses/logos/gabodesing.png" alt="SpiderWeb" class="contact-img" />
<!-- Cambia el src a la imagen del logo o una imagen representativa -->
</div>
<h3>Gabo-Dev</h3>
<div class="contact-buttons">
<button onclick="window.location.href='mailto:gabodev240402@gmail.com'">
Email
</button>
<button onclick="window.location.href='tel:+123456789'">
Llamar
</button>
<button onclick="window.location.href='https://portafolio-gabo-dev.vercel.app/'">
Visitar Web
</button>
</div>
</div>
</div>
</section>
<footer class="site-footer">
<div class="footer-container">
<div class="footer-section">
<h3>Contacto</h3>
<ul>
<li class="textCorreo">
Correo: officialspiderwebdesign@gmail.com
</li>
<li>
Instagram:
<a href="https://www.instagram.com/spiderweb.arg/" target="_blank">@spiderweb.arg</a>
</li>
<li>Correo Gabriel Reina: gabodev240402@gmail.com</li>
<li>Correo Franco Calegari: francocalegari55@gmail.com</li>
<li>
GitHub Gabriel Reina:
<a href="https://github.com/GaboDev24" target="_blank">github.com/GaboDev24</a>
</li>
<li>
GitHub Franco Calegari:
<a href="https://github.com/FrancoCalegari" target="_blank">github.com/FrancoCalegari</a>
</li>
</ul>
</div>
<div class="footer-section">
<h3>Servicios</h3>
<ul>
<li>Programación Web</li>
<li>Diseño Gráfico</li>
<li>Edición de Video</li>
<li>Redes de Marca</li>
<li>Marketing Digital</li>
<li>Community Manager</li>
<li>Soporte Técnico Online</li>
</ul>
</div>
<div class="footer-logo">
<img src="./assets/img/logo.svg" alt="Logo SpiderWeb" style="filter: brightness(0) invert(1)" />
<p>Spider Web © 2026</p>
</div>
<div class="footer-settings">
</div>
</div>
<!-- Settings Popup -->
<div id="settingsPopup" class="settings-popup">
<div class="settings-header">
<h4>Personalizar</h4>
<span class="close-settings" onclick="toggleSettings()">×</span>
</div>
<div class="settings-body">
<label for="accentHue">Color de Acento</label>
<input type="range" id="accentHue" min="0" max="360" value="0" class="hue-slider" />
<button id="randomColorBtn" class="random-btn">
Color Aleatorio 🎲
</button>
</div>
</div>
</footer>
</div>
<!-- Design Modal -->
<div id="designDetailModal" class="design-modal">
<span class="close-modal" onclick="closeDesignModal()">×</span>
<div class="design-modal-content">
<div class="design-image-col">
<img id="modalDesignImage" src="" alt="Design" />
</div>
<div class="design-info-col">
<div class="client-header">
<img id="modalClientLogo" src="" alt="Client Logo" class="client-logo-img" />
<h3 id="modalDesignTitle"></h3>
</div>
<!-- <h4>Cliente: <span id="modalClientName"></span></h4> -->
<p id="modalDesignDesc"></p>
<a id="modalDesignLink" href="#" target="_blank" class="design-link-btn">Ver Publicación</a>
</div>
</div>
</div>
</body>
</html>