EVOLUTION-MANAGER
Edit File: index.html
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CeiboKids - Educación Inicial</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"> <style> /* Custom Styles */ .hero { background: url('img/hero.jpg') center center/cover no-repeat; height: 75vh; display: flex; align-items: center; justify-content: center; color: #fff; } .program-card img { height: 200px; object-fit: cover; } </style> </head> <body> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top"> <div class="container"> <a class="navbar-brand d-flex align-items-center" href="#"> <img src="img/logo.png" alt="CeiboKids Logo" width="40" height="40" class="d-inline-block align-text-top me-2"> <span>CeiboKids</span> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link active" href="#hero">Inicio</a></li> <li class="nav-item"><a class="nav-link" href="#about">Nosotros</a></li> <li class="nav-item"><a class="nav-link" href="#programs">Programas</a></li> <li class="nav-item"><a class="nav-link" href="#gallery">Galería</a></li> <li class="nav-item"><a class="nav-link" href="#facebook">Noticias</a></li> <li class="nav-item"><a class="nav-link" href="#contact">Contacto</a></li> </ul> </div> </div> </nav> <!-- Hero Section --> <section id="hero" class="hero text-center text-white"> <div class="container"> <h1 class="display-4 fw-bold">Bienvenidos a CeiboKids</h1> <p class="lead">Aprendizaje y diversión para los más pequeños</p> <a href="#about" class="btn btn-primary btn-lg">Conócenos</a> </div> </section> <!-- About Section --> <section id="about" class="py-5"> <div class="container"> <h2 class="mb-4">Sobre CeiboKids</h2> <p>En CeiboKids ofrecemos un ambiente seguro y estimulante para el desarrollo integral de niños de 2 a 6 años. Nuestro equipo de educadores y psicopedagogos acompaña a los pequeños en su crecimiento cognitivo, emocional y social.</p> </div> </section> <!-- Programs Section --> <section id="programs" class="py-5 bg-light"> <div class="container"> <h2 class="mb-4">Nuestros Programas</h2> <div class="row g-4"> <div class="col-md-4"> <div class="card program-card h-100"> <img src="img/program1.jpg" class="card-img-top" alt="Programa Montessori"> <div class="card-body"> <h5 class="card-title">Programa Montessori</h5> <p class="card-text">Metodología enfocada en la autonomía y exploración.</p> </div> </div> </div> <div class="col-md-4"> <div class="card program-card h-100"> <img src="img/program2.jpg" class="card-img-top" alt="Programa Waldorf"> <div class="card-body"> <h5 class="card-title">Programa Waldorf</h5> <p class="card-text">Enseñanza basada en el desarrollo artístico y social.</p> </div> </div> </div> <div class="col-md-4"> <div class="card program-card h-100"> <img src="img/program3.jpg" class="card-img-top" alt="Salud y Bienestar"> <div class="card-body"> <h5 class="card-title">Salud y Bienestar</h5> <p class="card-text">Actividades físicas y promoción de hábitos saludables.</p> </div> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="py-5"> <div class="container"> <h2 class="mb-4">Galería</h2> <div class="row g-3"> <div class="col-sm-6 col-md-4"><img src="img/gallery1.jpg" class="img-fluid rounded" alt="Galería 1"></div> <div class="col-sm-6 col-md-4"><img src="img/gallery2.jpg" class="img-fluid rounded" alt="Galería 2"></div> <div class="col-sm-6 col-md-4"><img src="img/gallery3.jpg" class="img-fluid rounded" alt="Galería 3"></div> </div> </div> </section> <!-- Facebook Feed Section --> <section id="facebook" class="py-5 bg-light"> <div class="container"> <h2 class="mb-4">Últimas Noticias</h2> <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v15.0"></script> <div class="fb-page" data-href="https://www.facebook.com/ceibokids" data-tabs="timeline" data-width="" data-height="600" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"> <blockquote cite="https://www.facebook.com/ceibokids" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/ceibokids">CeiboKids</a></blockquote> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="py-5"> <div class="container"> <h2 class="mb-4">Contáctanos</h2> <div class="row"> <div class="col-md-6"> <p><strong>Dirección:</strong> Av. Principal S/N, Quito, Ecuador</p> <p><strong>Teléfono:</strong> +593 2 123 4567</p> <p><strong>Email:</strong> info@ceibokids.edu.ec</p> <div class="ratio ratio-16x9"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3976.123456789!2d-78.46783868441498!3d-0.1806537974567890!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x91d59c11d5b5b3f7%3A0x123456789abcdef!2sCeiboKids!5e0!3m2!1ses!2sec!4v1621234567890" allowfullscreen="" loading="lazy"></iframe> </div> </div> <div class="col-md-6"> <form> <div class="mb-3"> <label for="name" class="form-label">Nombre</label> <input type="text" id="name" class="form-control" required> </div> <div class="mb-3"> <label for="email" class="form-label">Email</label> <input type="email" id="email" class="form-control" required> </div> <div class="mb-3"> <label for="message" class="form-label">Mensaje</label> <textarea id="message" class="form-control" rows="5" required></textarea> </div> <button type="submit" class="btn btn-primary">Enviar</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="py-4 bg-dark text-white"> <div class="container text-center"> <p class="mb-0">© 2025 CeiboKids. Todos los derechos reservados.</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>