hermanitascaridad/ong/cat1.html @ 53ea2b45
| 53ea2b45 | Nicolás Rafael Chelaru Tanase | <!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>
|