Skip to content

Commit 1f5181b

Browse files
HelpFugaHelpFuga
authored
Add files via upload
1 parent f5d6139 commit 1f5181b

2 files changed

Lines changed: 227 additions & 0 deletions

File tree

‎estilo.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
body {
2+
font-family: 'Montserrat', Arial, sans-serif;
3+
margin: 0;
4+
background-color: #fff7eb;
5+
color: #222;
6+
}
7+
.navbar {
8+
display: flex;
9+
justify-content: space-between;
10+
align-items: center;
11+
background: linear-gradient(90deg, #ff8800 70%, #ffb347 100%);
12+
padding: 0.6em 1.2em;
13+
box-shadow: 0 2px 10px rgba(255,136,0,0.13);
14+
position: sticky;
15+
top: 0; z-index: 10;
16+
flex-wrap: wrap;
17+
}
18+
.logo-nav {
19+
display: flex;
20+
align-items: center;
21+
}
22+
.logo-title {
23+
font-size: 1.6em; font-weight: 800; color: #fff;
24+
letter-spacing: 2px;
25+
}
26+
.navbar ul {
27+
display: flex; list-style: none; margin: 0; padding: 0;
28+
}
29+
.navbar li { margin: 0 0.6em; }
30+
.navbar a {
31+
color: #fff;
32+
text-decoration: none;
33+
font-weight: 600;
34+
padding: 0.4em 1em;
35+
border-radius: 20px;
36+
transition: background 0.15s, color 0.15s;
37+
}
38+
.navbar a.active, .navbar a:hover {
39+
background: #fff;
40+
color: #ff8800;
41+
}
42+
.contact-info-nav {
43+
display: flex;
44+
gap: 1em;
45+
font-size: 1em;
46+
align-items: center;
47+
}
48+
.contact-info-nav a {
49+
color: #fff;
50+
text-decoration: underline;
51+
font-weight: 600;
52+
transition: color 0.2s;
53+
}
54+
.contact-info-nav a:hover {
55+
color: #222;
56+
}
57+
main {
58+
max-width: 900px;
59+
margin: 2em auto;
60+
padding: 0 1em;
61+
}
62+
.card {
63+
background: #fff;
64+
border-radius: 18px;
65+
box-shadow: 0 2px 14px rgba(255,136,0,0.09);
66+
margin-bottom: 2em;
67+
padding: 2em 1.5em;
68+
transition: box-shadow 0.16s;
69+
position: relative;
70+
}
71+
.card:hover {
72+
box-shadow: 0 6px 22px rgba(255,136,0,0.15);
73+
}
74+
.card h2 {
75+
color: #ff8800;
76+
font-size: 2em;
77+
margin-top: 0;
78+
font-weight: 800;
79+
letter-spacing: 1px;
80+
}
81+
.card p {
82+
font-size: 1.14em;
83+
margin-top: 1em;
84+
font-weight: 600;
85+
line-height: 1.7;
86+
}
87+
.contact-buttons {
88+
margin-top: 1em;
89+
}
90+
.btn, .btn-secondary {
91+
display: inline-block;
92+
margin: 0.4em 0.3em;
93+
padding: 0.7em 2em;
94+
border-radius: 30px;
95+
text-decoration: none;
96+
font-weight: bold;
97+
font-size: 1em;
98+
transition: box-shadow 0.15s, transform 0.15s;
99+
box-shadow: 0 2px 12px rgba(255,136,0,0.10);
100+
}
101+
.btn {
102+
background-color: #ff8800;
103+
color: white;
104+
border: none;
105+
}
106+
.btn:hover {
107+
background-color: #ff6600;
108+
transform: translateY(-2px) scale(1.045);
109+
box-shadow: 0 4px 18px rgba(255,136,0,0.19);
110+
}
111+
.btn-secondary {
112+
background-color: #fff;
113+
color: #ff8800;
114+
border: 2px solid #ff8800;
115+
}
116+
.btn-secondary:hover {
117+
background-color: #ffe1c1;
118+
color: #ff6600;
119+
border-color: #ff6600;
120+
transform: translateY(-2px) scale(1.045);
121+
}
122+
footer {
123+
text-align: center;
124+
padding: 1.2em;
125+
background: linear-gradient(90deg, #ff8800 60%, #ffb347 100%);
126+
color: white;
127+
font-size: 1em;
128+
letter-spacing: 1px;
129+
margin-top: 2em;
130+
border-radius: 12px 12px 0 0;
131+
box-shadow: 0 -2px 12px rgba(255,136,0,0.07);
132+
}
133+
@media (max-width: 700px) {
134+
.navbar ul { flex-direction: column; }
135+
.navbar li { margin: 0.4em 0; }
136+
main { padding: 0 0.5em; }
137+
.card { padding: 1.2em 0.6em; }
138+
.card h2 { font-size: 1.3em; }
139+
.contact-info-nav { flex-direction: column; gap: 0.4em; font-size: 0.95em;}
140+
}

‎index.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Helpfuga - Detección de fugas en Barcelona</title>
7+
<link rel="stylesheet" href="estilo.css">
8+
<link rel="icon" href="favicon.ico">
9+
<!-- Fuente moderna Google Fonts -->
10+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
<nav class="navbar">
14+
<div class="logo-nav">
15+
<span class="logo-title">Helpfuga</span>
16+
</div>
17+
<ul>
18+
<li><a href="#fugas" class="active">Fugas</a></li>
19+
<li><a href="#equipo">Equipo</a></li>
20+
<li><a href="#tecnologia">Tecnología</a></li>
21+
<li><a href="#zonas">Zonas</a></li>
22+
<li><a href="#contacto">Contacto</a></li>
23+
</ul>
24+
<div class="contact-info-nav">
25+
<span>📞 <a href="tel:+34632980683">632 980 683</a></span>
26+
<span>✉️ <a href="mailto:varelajimmy30@gmail.com">varelajimmy30@gmail.com</a></span>
27+
</div>
28+
</nav>
29+
30+
<main>
31+
<section id="fugas" class="card">
32+
<h2>¿Tienes una fuga?</h2>
33+
<p>Detectamos fugas en minutos usando tecnología de gas traza, segura y no invasiva. Sin romper paredes ni dañar muebles. ¡Sube una foto o vídeo de tu caso para analizarlo!</p>
34+
</section>
35+
36+
<section id="equipo" class="card">
37+
<h2>¿Quiénes somos?</h2>
38+
<p>
39+
En Helpfuga somos un equipo de fontaneros con años de experiencia, formados y especializados en la detección de fugas de agua.<br><br>
40+
Aunque conocemos todos los aspectos del oficio, nuestra especialidad es encontrar fugas con precisión quirúrgica, sin romper suelos, techos ni paredes.<br><br>
41+
Nuestra pasión por el detalle, el uso de tecnología de punta y la atención cercana al cliente nos han convertido en una referencia en el sector. Sabemos lo frustrante que puede ser una fuga oculta, por eso nos enfocamos en resolver el problema de raíz, rápido y sin daños.
42+
</p>
43+
</section>
44+
45+
<section id="tecnologia" class="card">
46+
<h2>Tecnología segura y avanzada</h2>
47+
<p>
48+
En Helpfuga apostamos por la tecnología más avanzada para proteger tu hogar y darte resultados exactos.<br><br>
49+
Utilizamos un sistema de detección basado en un gas trazador compuesto de hidrógeno y nitrógeno, una mezcla completamente segura, no tóxica, no corrosiva y no inflamable, aprobada por nuestros proveedores para su uso en entornos domésticos y profesionales.<br><br>
50+
Este gas se introduce en las tuberías, y gracias a nuestra máquina de última generación, podemos detectar con altísima precisión el punto exacto donde se escapa.<br><br>
51+
No hablamos de un equipo cualquiera: se trata de un instrumento profesional de alta gama, de los más costosos del mercado, reservado para especialistas. La calidad del equipo marca la diferencia… y se nota en los resultados.<br><br>
52+
✅ Sin romper<br>
53+
✅ Sin obras<br>
54+
✅ Sin riesgos<br>
55+
✅ Con diagnóstico en minutos
56+
</p>
57+
</section>
58+
59+
<section id="zonas" class="card">
60+
<h2>Zonas de servicio</h2>
61+
<p>
62+
Actualmente ofrecemos servicio en toda la ciudad de Barcelona y en el Baix Llobregat, incluyendo municipios como Esplugues de Llobregat, Cornellà, Sant Boi, L’Hospitalet, Gavà, El Prat, entre muchos otros.<br><br>
63+
Nuestra base operativa se encuentra en Barcelona ciudad y Esplugues, lo que nos permite cubrir de manera eficiente tanto la capital como las zonas colindantes.<br><br>
64+
Nos desplazamos directamente al lugar, siempre bajo cita previa, garantizando atención personalizada y rápida.<br><br>
65+
Además, estamos en expansión: pronto ofreceremos cobertura en todo el territorio nacional, para que más personas puedan beneficiarse de un diagnóstico preciso sin daños ni complicaciones.
66+
</p>
67+
</section>
68+
69+
<section id="contacto" class="card">
70+
<h2>Contacto rápido</h2>
71+
<p>
72+
¿Tienes dudas? Contáctanos por WhatsApp, correo, teléfono o formulario. Respondemos rápido y con atención personalizada.<br><br>
73+
<strong>Teléfono:</strong> <a href="tel:+34632980683">632 980 683</a><br>
74+
<strong>Correo:</strong> <a href="mailto:varelajimmy30@gmail.com">varelajimmy30@gmail.com</a>
75+
</p>
76+
<div class="contact-buttons">
77+
<a href="https://wa.me/34632980683" class="btn">WhatsApp</a>
78+
<a href="mailto:varelajimmy30@gmail.com" class="btn-secondary">Correo</a>
79+
</div>
80+
</section>
81+
</main>
82+
83+
<footer>
84+
<p>&copy; 2025 Helpfuga. Todos los derechos reservados.</p>
85+
</footer>
86+
</body>
87+
</html>

0 commit comments

Comments
 (0)