<!DOCTYPE html>
<html
lang="es">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Semilla Laguna |
Compañerismo Cristiano</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
scroll-behavior: smooth;
background: #f4f7f6;
}
header {
background: rgba(0,0,0,0.6);
color: white;
padding: 15px;
position: fixed;
width: 100%;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header img {
height: 60px;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.hero {
height: 100vh;
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65');
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
animation: fadeIn 2s;
}
@keyframes
fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
section {
padding: 80px 20px;
text-align: center;
}
h2 {
color: #2E7D32;
}
.card {
background: white;
margin: 20px auto;
padding: 20px;
border-radius: 15px;
max-width: 500px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transition: transform 0.3s;
}
.card:hover
{
transform: translateY(-10px);
}
iframe {
width: 100%;
height: 300px;
border-radius: 10px;
}
/* BOTÓN
WHATSAPP */
.whatsapp {
position: fixed;
bottom: 20px;
right: 20px;
background: #25D366;
color: white;
padding: 15px;
border-radius: 50%;
font-size: 25px;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
footer {
background: #1B5E20;
color: white;
padding: 20px;
}
/*
RESPONSIVE */
@media(max-width: 768px){
nav {
display: none;
}
}
</style>
</head>
<body>
<header>
<img src="logo.png">
<nav>
<a href="#inicio">Inicio</a>
<a href="#actividades">Actividades</a>
<a href="#recursos">Recursos</a>
<a href="#ubicacion">Ubicación</a>
</nav>
</header>
<!-- HERO -->
<div
class="hero" id="inicio">
<h1>Semilla Laguna</h1>
<p>Compañerismo Cristiano</p>
</div>
<!-- ACTIVIDADES -->
<section id="actividades">
<h2>Nuestras Actividades</h2>
<div
class="card">
<h3>Reunión Dominical</h3>
<p>Domingos 10:00 AM</p>
</div>
<div
class="card">
<h3>Estudio Bíblico</h3>
<p>Miércoles 7:00 PM</p>
</div>
<div
class="card">
<h3>Oración</h3>
<p>Viernes 6:00 PM</p>
</div>
</section>
<!-- RECURSOS -->
<section id="recursos">
<h2>Predicaciones</h2>
<div
class="card">
<h3>Predicación (Video)</h3>
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>
<div
class="card">
<h3>Audio</h3>
<audio controls>
<source src="audio.mp3"
type="audio/mpeg">
</audio>
</div>
</section>
<!-- MAPA -->
<section id="ubicacion">
<h2>Ubicación</h2>
<iframe
src="https://www.google.com/maps?q=Torreon&output=embed">
</iframe>
</section>
<footer>
<p>©
2026 Semilla Laguna</p>
</footer>
<!-- WHATSAPP -->
<a class="whatsapp"
href="https://wa.me/5210000000000"
target="_blank">
💬
</a>
</body>
</html>
``