commit 0bf7cfaa928a0c34d6fade5978f1a7608f2d2511
Author: NicolÃ¡s Rafael Chelaru Tanase <nrtc0001@red.ujaen.es>
Date:   Sat Nov 30 11:28:39 2024 +0100

    ActualizaciÃ³n de contacto.html

diff --git a/ong/contacto.html b/ong/contacto.html
index 809b934..bde31b8 100644
--- a/ong/contacto.html
+++ b/ong/contacto.html
@@ -1,12 +1,149 @@
-<html>
+<!DOCTYPE html>
+<html lang="es">
 <head>
-<title>Contacto</title>
-</head>
+   <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Localización y Contacto - 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;
+            color: #3a5fcd;
+        }
+
+        a {
+            text-decoration: none;
+            color: #fff;
+        }
+
+        /* Header */
+        header {
+            background: linear-gradient(to right, #5c85d6, #3a5fcd);
+            color: white;
+            text-align: center;
+            padding: 50px 20px;
+        }
+
+        header h1 {
+            font-size: 2.5rem;
+        }
+
+        /* 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 {
+            margin-bottom: 20px;
+        }
+
+        /* Map */
+        .map {
+            width: 100%;
+            height: 400px;
+            border: none;
+            border-radius: 10px;
+        }
+
+        /* Contact Form */
+        .contact-form {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 15px;
+        }
+
+        .contact-form input, 
+        .contact-form textarea {
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 1rem;
+        }
 
+        .contact-form button {
+            padding: 10px 20px;
+            font-size: 1rem;
+            border: none;
+            border-radius: 5px;
+            background: #3a5fcd;
+            color: white;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+
+        .contact-form button:hover {
+            background: #2e49a1;
+        }
+
+        /* Footer */
+        footer {
+            background: #3a5fcd;
+            color: white;
+            text-align: center;
+            padding: 20px 10px;
+        }
+
+        footer p {
+            margin: 0;
+        }
+    </style>
+</head>
 <body>
-<h1>Localización y contacto</h1>
-En esta página introduciréis información sobre la ubicación de la ONG, así como datos de contacto.
-<br />
-<a href="principal.html">Volver</a>
+
+<header>
+    <h1>Localización y Contacto</h1>
+    <p>Encuentra nuestra ubicación o contáctanos directamente</p>
+</header>
+
+<div class="container">
+    <section id="location">
+        <h2>Localización</h2>
+        <p>Estamos ubicados en:</p>
+        <p><strong>Calle Esperanza, 123, 28001 Madrid, España</strong></p>
+        <!-- Google Maps Embed -->
+        <iframe 
+            class="map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3047.9696556696344!2d-3.7037906841346855!3d40.41677597936347!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd4229978e351e2b%3A0xabc1234567890!2sPuerta%20del%20Sol!5e0!3m2!1ses!2ses!4v1695403142325!5m2!1ses!2ses"
+            allowfullscreen="" 
+            loading="lazy">
+        </iframe>
+    </section>
+
+    <section id="contact">
+        <h2>Formulario de Contacto</h2>
+        <p>Envíanos tus consultas, sugerencias o mensajes, y nos pondremos en contacto contigo lo antes posible.</p>
+        <form class="contact-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>
+            <textarea id="message" name="message" rows="4" placeholder="Tu mensaje" required></textarea>
+            <button type="submit">Enviar Mensaje</button>
+        </form>
+    </section>
+</div>
+
+<footer>
+    <p>&copy; 2024 Hermanita de la Caridad. Todos los derechos reservados.</p>
+</footer>
+
 </body>
-</html>
\ No newline at end of file
+</html>
+
