Revisión 6b16bb43
Añadido por Nicolás Rafael Chelaru Tanase hace 7 meses
| ong/cat1.html | ||
|---|---|---|
|
<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>
|
||
|
<title>Acceso a Agua Potable - Proyecto UNICEF</title>
|
||
|
<style>
|
||
|
/* General Styles */
|
||
|
body {
|
||
| ... | ... | |
|
margin: 0;
|
||
|
padding: 0;
|
||
|
color: #333;
|
||
|
background: #f9f9f9;
|
||
|
line-height: 1.6;
|
||
|
background: #f5f5f5;
|
||
|
}
|
||
|
|
||
|
h1, h2 {
|
||
|
h1, h2, h3 {
|
||
|
font-family: 'Georgia', serif;
|
||
|
margin: 0;
|
||
|
color: #0056b3;
|
||
|
}
|
||
|
|
||
|
a {
|
||
|
text-decoration: none;
|
||
|
color: #fff;
|
||
|
}
|
||
|
|
||
|
a:hover {
|
||
|
text-decoration: underline;
|
||
|
color: white;
|
||
|
}
|
||
|
|
||
|
/* Header */
|
||
|
header {
|
||
|
background: linear-gradient(to right, #5c85d6, #3a5fcd);
|
||
|
background: linear-gradient(to right, #007bff, #0056b3);
|
||
|
color: white;
|
||
|
text-align: center;
|
||
|
padding: 50px 20px;
|
||
|
padding: 60px 20px;
|
||
|
}
|
||
|
|
||
|
header h1 {
|
||
|
font-size: 2.5rem;
|
||
|
font-size: 3rem;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
header p {
|
||
|
font-size: 1.2rem;
|
||
|
font-size: 1.5rem;
|
||
|
margin-top: 10px;
|
||
|
line-height: 1.6;
|
||
|
}
|
||
|
|
||
|
/* 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 */
|
||
|
/* Main Section */
|
||
|
.container {
|
||
|
max-width: 1200px;
|
||
|
margin: 0 auto;
|
||
| ... | ... | |
|
section {
|
||
|
margin-bottom: 40px;
|
||
|
background: white;
|
||
|
padding: 20px;
|
||
|
padding: 30px;
|
||
|
border-radius: 10px;
|
||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
|
||
|
section h2 {
|
||
|
font-size: 1.8rem;
|
||
|
color: #3a5fcd;
|
||
|
font-size: 2rem;
|
||
|
margin-bottom: 20px;
|
||
|
text-align: center;
|
||
|
}
|
||
|
|
||
|
section p, section ul {
|
||
|
font-size: 1rem;
|
||
|
section p {
|
||
|
font-size: 1.2rem;
|
||
|
line-height: 1.8;
|
||
|
margin-bottom: 20px;
|
||
|
text-align: justify;
|
||
|
}
|
||
|
|
||
|
ul {
|
||
|
list-style: none;
|
||
|
padding: 0;
|
||
|
}
|
||
|
|
||
|
ul li {
|
||
|
padding: 10px 0;
|
||
|
border-bottom: 1px solid #eee;
|
||
|
section ul {
|
||
|
list-style: disc;
|
||
|
padding-left: 20px;
|
||
|
line-height: 1.8;
|
||
|
margin: 20px 0;
|
||
|
}
|
||
|
|
||
|
ul li:last-child {
|
||
|
border-bottom: none;
|
||
|
section ul li {
|
||
|
font-size: 1.2rem;
|
||
|
}
|
||
|
|
||
|
/* Form */
|
||
|
.donation-form {
|
||
|
display: grid;
|
||
|
grid-template-columns: 1fr;
|
||
|
gap: 15px;
|
||
|
section img {
|
||
|
width: 100%;
|
||
|
border-radius: 10px;
|
||
|
margin: 20px 0;
|
||
|
}
|
||
|
|
||
|
.donation-form input,
|
||
|
.donation-form select,
|
||
|
.donation-form textarea {
|
||
|
padding: 10px;
|
||
|
border: 1px solid #ddd;
|
||
|
border-radius: 5px;
|
||
|
font-size: 1rem;
|
||
|
.call-to-action {
|
||
|
text-align: center;
|
||
|
margin-top: 20px;
|
||
|
}
|
||
|
|
||
|
.donation-form button {
|
||
|
padding: 10px 20px;
|
||
|
font-size: 1rem;
|
||
|
border: none;
|
||
|
border-radius: 5px;
|
||
|
background: #3a5fcd;
|
||
|
.call-to-action a {
|
||
|
padding: 15px 40px;
|
||
|
font-size: 1.2rem;
|
||
|
background: #0056b3;
|
||
|
border-radius: 50px;
|
||
|
color: white;
|
||
|
cursor: pointer;
|
||
|
transition: background 0.3s;
|
||
|
display: inline-block;
|
||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
||
|
transition: background 0.3s, box-shadow 0.3s;
|
||
|
}
|
||
|
|
||
|
.donation-form button:hover {
|
||
|
background: #2e49a1;
|
||
|
.call-to-action a:hover {
|
||
|
background: #003c82;
|
||
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
|
||
|
}
|
||
|
|
||
|
/* Footer */
|
||
|
footer {
|
||
|
background: #3a5fcd;
|
||
|
background: #0056b3;
|
||
|
color: white;
|
||
|
text-align: center;
|
||
|
padding: 20px 10px;
|
||
|
padding: 30px 10px;
|
||
|
margin-top: 40px;
|
||
|
}
|
||
|
|
||
|
footer p {
|
||
|
font-size: 1rem;
|
||
|
margin: 0;
|
||
|
}
|
||
|
|
||
|
/* Responsive Design */
|
||
|
@media (max-width: 768px) {
|
||
|
header h1 {
|
||
|
font-size: 2.5rem;
|
||
|
}
|
||
|
|
||
|
header p {
|
||
|
font-size: 1.2rem;
|
||
|
}
|
||
|
|
||
|
section h2 {
|
||
|
font-size: 1.8rem;
|
||
|
}
|
||
|
|
||
|
section p {
|
||
|
font-size: 1rem;
|
||
|
}
|
||
|
|
||
|
.call-to-action a {
|
||
|
font-size: 1rem;
|
||
|
padding: 10px 30px;
|
||
|
}
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
<body>
|
||
|
|
||
|
<header>
|
||
|
<h1>Recogida de Fondos para los Más Necesitados</h1>
|
||
|
<p>Hagamos la diferencia juntos</p>
|
||
|
<h1>Acceso a Agua Potable</h1>
|
||
|
<p>Garantizando un futuro saludable para las comunidades más vulnerables del mundo.</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">
|
||
|
<!-- Sección de Introducción -->
|
||
|
<section id="about">
|
||
|
<h2>Sobre el Proyecto</h2>
|
||
|
<h2>¿Por qué es importante el acceso al agua potable?</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.
|
||
|
Más de 2.200 millones de personas carecen de agua potable segura. Este recurso básico es vital
|
||
|
para la supervivencia, la salud y el desarrollo de comunidades enteras. En UNICEF trabajamos
|
||
|
para transformar esta realidad, llevando agua limpia a los rincones más remotos del planeta.
|
||
|
</p>
|
||
|
<img src="https://via.placeholder.com/1200x400" alt="Comunidades accediendo a agua potable">
|
||
|
</section>
|
||
|
|
||
|
<section id="how-to-help">
|
||
|
<h2>Cómo Ayudar</h2>
|
||
|
<!-- Sección de Objetivos -->
|
||
|
<section id="objectives">
|
||
|
<h2>Nuestros Objetivos</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>
|
||
|
<li>Construcción de pozos en comunidades rurales y áreas de difícil acceso.</li>
|
||
|
<li>Implementación de sistemas avanzados de purificación de agua.</li>
|
||
|
<li>Capacitación en higiene y saneamiento para prevenir enfermedades.</li>
|
||
|
<li>Fomentar la recolección sostenible de agua de lluvia.</li>
|
||
|
</ul>
|
||
|
</section>
|
||
|
|
||
|
<!-- Sección de Impacto -->
|
||
|
<section id="impact">
|
||
|
<h2>El Impacto de tu Ayuda</h2>
|
||
|
<p>
|
||
|
Gracias a nuestros proyectos, más de 50.000 personas ahora tienen acceso a agua potable,
|
||
|
reduciendo la incidencia de enfermedades y mejorando la calidad de vida de miles de familias.
|
||
|
Con tu apoyo, podemos extender este impacto a muchas más comunidades.
|
||
|
</p>
|
||
|
</section>
|
||
|
|
||
|
<!-- Sección de Donaciones -->
|
||
|
<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>
|
||
|
<h2>¿Cómo puedes marcar la diferencia?</h2>
|
||
|
<p>
|
||
|
Cada contribución ayuda a construir un futuro más justo y sostenible. Haz tu donación hoy y sé parte
|
||
|
de este cambio transformador. Cada gota cuenta.
|
||
|
</p>
|
||
|
<div class="call-to-action">
|
||
|
<a href="#!">Dona Ahora</a>
|
||
|
</div>
|
||
|
</section>
|
||
|
</div>
|
||
|
|
||
|
<footer>
|
||
|
<p>© 2024 Hermanita de la Caridad. Todos los derechos reservados.</p>
|
||
|
<p>© 2024 Proyecto UNICEF - Acceso a Agua Potable. Unidos por un futuro mejor.</p>
|
||
|
</footer>
|
||
|
|
||
|
</body>
|
||
Exportar a: Unified diff
Pagina 1 creada al 100