Revisión 53ea2b45
Añadido por Nicolás Rafael Chelaru Tanase hace 7 meses
| ong/cat1.html | ||
|---|---|---|
|
<!DOCTYPE html>
|
||
|
<html lang="es">
|
||
|
<head>
|
||
|
<meta charset="UTF-8">
|
||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
<title>Recogida de Fondos - Hermanita de la Caridad</title>
|
||
|
<style>
|
||
|
/* General Styles */
|
||
|
body {
|
||
|
font-family: 'Arial', sans-serif;
|
||
|
margin: 0;
|
||
|
padding: 0;
|
||
|
color: #333;
|
||
|
background: #f9f9f9;
|
||
|
line-height: 1.6;
|
||
|
}
|
||
|
|
||
|
h1, h2 {
|
||
|
font-family: 'Georgia', serif;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
text-decoration: none;
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
a:hover {
|
||
|
text-decoration: underline;
|
||
|
}
|
||
|
|
||
|
/* Header */
|
||
|
header {
|
||
|
background: linear-gradient(to right, #5c85d6, #3a5fcd);
|
||
|
color: white;
|
||
|
text-align: center;
|
||
|
padding: 50px 20px;
|
||
|
}
|
||
|
|
||
|
header h1 {
|
||
|
font-size: 2.5rem;
|
||
|
}
|
||
|
|
||
|
header p {
|
||
|
font-size: 1.2rem;
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
|
||
|
/* Navigation */
|
||
|
nav {
|
||
|
display: flex;
|
||
|
justify-content: center;
|
||
|
background: #3a5fcd;
|
||
|
padding: 10px;
|
||
|
position: sticky;
|
||
|
top: 0;
|
||
|
z-index: 1000;
|
||
|
}
|
||
|
|
||
|
nav a {
|
||
|
margin: 0 15px;
|
||
|
padding: 10px 20px;
|
||
|
background: #5c85d6;
|
||
|
border-radius: 5px;
|
||
|
transition: background 0.3s;
|
||
|
}
|
||
|
|
||
|
nav a:hover {
|
||
|
background: #2e49a1;
|
||
|
}
|
||
|
|
||
|
/* Main Container */
|
||
|
.container {
|
||
|
max-width: 1200px;
|
||
|
margin: 0 auto;
|
||
|
padding: 20px;
|
||
|
}
|
||
|
|
||
|
section {
|
||
|
margin-bottom: 40px;
|
||
|
background: white;
|
||
|
padding: 20px;
|
||
|
border-radius: 10px;
|
||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
|
}
|
||
|
|
||
|
section h2 {
|
||
|
font-size: 1.8rem;
|
||
|
color: #3a5fcd;
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
section p, section ul {
|
||
|
font-size: 1rem;
|
||
|
margin-bottom: 20px;
|
||
|
}
|
||
|
|
||
|
ul {
|
||
|
list-style: none;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
ul li {
|
||
|
padding: 10px 0;
|
||
|
border-bottom: 1px solid #eee;
|
||
|
}
|
||
|
|
||
|
ul li:last-child {
|
||
|
border-bottom: none;
|
||
|
}
|
||
|
|
||
|
/* Form */
|
||
|
.donation-form {
|
||
|
display: grid;
|
||
|
grid-template-columns: 1fr;
|
||
|
gap: 15px;
|
||
|
}
|
||
|
|
||
|
.donation-form input,
|
||
|
.donation-form select,
|
||
|
.donation-form textarea {
|
||
|
padding: 10px;
|
||
|
border: 1px solid #ddd;
|
||
|
border-radius: 5px;
|
||
|
font-size: 1rem;
|
||
|
}
|
||
|
|
||
|
.donation-form button {
|
||
|
padding: 10px 20px;
|
||
|
font-size: 1rem;
|
||
|
border: none;
|
||
|
border-radius: 5px;
|
||
|
background: #3a5fcd;
|
||
|
color: white;
|
||
|
cursor: pointer;
|
||
|
transition: background 0.3s;
|
||
|
}
|
||
|
|
||
|
.donation-form button:hover {
|
||
|
background: #2e49a1;
|
||
|
}
|
||
|
|
||
|
/* Footer */
|
||
|
footer {
|
||
|
background: #3a5fcd;
|
||
|
color: white;
|
||
|
text-align: center;
|
||
|
padding: 20px 10px;
|
||
|
}
|
||
|
|
||
|
footer p {
|
||
|
margin: 0;
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
|
||
|
<header>
|
||
|
<h1>Recogida de Fondos para los Más Necesitados</h1>
|
||
|
<p>Hagamos la diferencia juntos</p>
|
||
|
</header>
|
||
|
|
||
|
<nav>
|
||
|
<a href="#about">Sobre el Proyecto</a>
|
||
|
<a href="#how-to-help">Cómo Ayudar</a>
|
||
|
<a href="#donate">Donar</a>
|
||
|
</nav>
|
||
|
|
||
|
<div class="container">
|
||
|
<section id="about">
|
||
|
<h2>Sobre el Proyecto</h2>
|
||
|
<p>
|
||
|
Nuestra iniciativa busca recaudar fondos para proporcionar alimentos, ropa y medicamentos esenciales
|
||
|
a familias en situación de extrema necesidad. Cada pequeña contribución puede cambiar una vida.
|
||
|
Juntos podemos llevar esperanza y apoyo a quienes más lo necesitan.
|
||
|
</p>
|
||
|
</section>
|
||
|
|
||
|
<section id="how-to-help">
|
||
|
<h2>Cómo Ayudar</h2>
|
||
|
<ul>
|
||
|
<li><strong>Realiza una Donación:</strong> Cada euro cuenta.</li>
|
||
|
<li><strong>Comparte:</strong> Difunde este mensaje entre tus amigos y redes sociales.</li>
|
||
|
<li><strong>Voluntariado:</strong> Ayuda a organizar y distribuir los recursos recaudados.</li>
|
||
|
</ul>
|
||
|
</section>
|
||
|
|
||
|
<section id="donate">
|
||
|
<h2>Formulario de Donación</h2>
|
||
|
<form class="donation-form">
|
||
|
<input type="text" id="name" name="name" placeholder="Tu nombre" required>
|
||
|
<input type="email" id="email" name="email" placeholder="Tu correo electrónico" required>
|
||
|
<select id="amount" name="amount" required>
|
||
|
<option value="" disabled selected>Selecciona una cantidad</option>
|
||
|
<option value="10">€10</option>
|
||
|
<option value="20">€20</option>
|
||
|
<option value="50">€50</option>
|
||
|
<option value="100">€100</option>
|
||
|
<option value="other">Otro</option>
|
||
|
</select>
|
||
|
<textarea id="message" name="message" rows="4" placeholder="Deja un mensaje (opcional)"></textarea>
|
||
|
<button type="submit">Donar Ahora</button>
|
||
|
</form>
|
||
|
</section>
|
||
|
</div>
|
||
|
|
||
|
<footer>
|
||
|
<p>© 2024 Hermanita de la Caridad. Todos los derechos reservados.</p>
|
||
|
</footer>
|
||
|
|
||
|
</body>
|
||
|
</html>
|
||
|
|
||
Exportar a: Unified diff
Pagina creada al 50%