Bläddra i källkod

Nuevas vistas agregadas

AldrickChavarria 1 år sedan
förälder
incheckning
9d46f0d05e

+ 280 - 0
Contexto.html

@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contexto</title>
+    <link rel="stylesheet" href="./assets/css/navbar.css">
+    <link rel="stylesheet" href="./assets/css/footer.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+    }
+    .timeline-header {
+        background: url('https://www.perodri.es/wp-content/uploads/historia-reloj-arena.jpg') no-repeat center center;
+        background-size: cover;
+        color: white;
+        padding: 100px 20px;
+        font-size: 36px;
+        font-weight: bold;
+        position: relative;
+    }
+    .timeline-container {
+    padding: 20px 0; 
+    text-align: center;
+    }
+    .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(71, 185, 179, 0.5);
+            z-index: 1;
+        }
+
+        .title-text {
+            position: relative;
+            z-index: 2;
+            display: flex;
+            justify-content: center;
+        }
+
+        .title-text-1 {
+            background-color: #5aa07a;
+            width: 18%;
+            border-radius: 30px;
+            height: 75px;
+            align-items: center;
+            display: flex;
+            justify-content: center;
+            font-size: calc(1.5rem + 1vw);
+        }
+        .event {
+            margin: 20px auto;
+            padding: 10px;
+            width: 80%;
+            max-width: 1400px;
+            border-radius: 10px;
+        }
+        .icon, .year {
+            background-color: #7ccda0; 
+            color: white;
+            border-radius: 50%;
+            width: 70px;
+            height: 70px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+            margin: 0 10px;
+            text-align: center;
+            font-weight: bold;
+        }
+</style>
+<body>
+    <nav class="navbar">
+        <div class="navbar-left">
+            <img src="./assets/img/logo.png" alt="Logo" class="logo">
+            <div class="textC">
+                <img src="./assets/img/heart.png" alt="">
+                <span>Se voluntario</span>
+            </div>
+        </div>
+        <div class="navbar-center">
+            <ul class="nav-links">
+                <li><a href="#">Inicio</a></li>
+                <li class="dropdown">
+                    <a href="#">Quienes Somos</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">Misión, Visión y Principios</a></li>
+                        <li><a href="#">Equipos</a></li>
+                        <li><a href="./LineadelTiempo.html">Línea del Tiempo</a></li>
+                    </ul>
+                </li>
+                <li class="dropdown">
+                    <a href="#">Que hacemos</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="./Contexto.html">El contexto</a></li>
+                        <li><a href="./Programas.html">Programas</a></li>
+
+                    </ul>
+                </li>
+                <li><a href="#">Informes</a></li>
+                <li class="dropdown">
+                    <a href="#">Historias</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">Historias de éxito</a></li>
+                        <li><a href="#">Blogs</a></li>
+                        <li><a href="#">Eventos</a></li>
+                        <li><a href="#">Videos</a></li>
+
+                    </ul>
+                </li>
+                <li><button class="btn-donation"><span>DONA YA!</span></button></li>
+            </ul>
+        </div>
+        <div class="navbar-right">
+            <a href="https://www.facebook.com/Chieltik/"><i class="fa-brands fa-facebook-f"></i></a>
+            <a href="https://www.chieltik.org/"><i class="fa-brands fa-google-plus-g"></i></a>
+            <a href="https://www.instagram.com/chieltik/"><i class="fa-brands fa-instagram"></i></a>
+            <a href="https://www.linkedin.com/company/chieltik"><i class="fa-brands fa-linkedin-in"></i></a>
+            <a href="https://www.youtube.com/c/Chieltik/"><i class="fa-brands fa-youtube"></i></a>
+        </div>
+        <div class="hamburger">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </nav>
+
+    <div class="mobile-menu">
+        <ul>
+            <li><a href="#">Inicio</a></li>
+            <li><a href="#">Quienes Somos</a></li>
+            <li><a href="#">Que hacemos</a></li>
+            <li><a href="#">Informes</a></li>
+            <li><a href="#">Historias</a></li>
+        </ul>
+
+        <div class="icons">
+            <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
+            <a href="#"><i class="fa-brands fa-google-plus-g"></i></a>
+            <a href="#"><i class="fa-brands fa-instagram"></i></a>
+            <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+            <a href="#"><i class="fa-brands fa-youtube"></i></a>
+        </div>
+    </div>
+
+    <div class="timeline-container">
+        <div class="timeline-header">
+            <div class="overlay"></div>
+            <div class="title-text">
+                <div class="title-text-1">El contexto</div>
+            </div>
+        </div>
+
+        <div class="event" style="display: flex; justify-content: center;">
+            <span class="icon"><i class="fa-solid fa-user-pen" style="transform: scale(2);"></i></span>
+        </div>
+        <div class="event">
+            <p style="font-size: 18px; color: #a30980;"><b>Chiapas es uno de los estados ubiados en la frontera sur de la república mexicana y colinda con Guatemala; la población mayor de 3 años, hablante de una lengua
+                indígena, representa 27.3% de la población total y es la tercera entidad con mator concentración de población originaria (INEGI, 2013).</b>
+            </p>
+        </div>
+        <div class="event">
+            <p style="font-size: 18px; color: #a30980;"> <b>El estado presenta el menor índice de Desarrollo Humano (IDH)2 del país (0.667) y los mayores índices en pobreza infantil: según datos el CONEVAL, 82.3% 
+                de los menores de 18 años se encuentran en situación de pobreza, y las tasas más altas de deserción escolar sólo 39.8% de la población juvenil, concluye
+                con su educación media superior (INEE-UNICEF, 2017) y de fecundidad adolescente hay 102.6 nacimientos por cada 1,000 mujeres de 15 a 19 años.ENADID, 2015.
+                La deserción escolar está relacionada, en primer lugar, con la pobreza y en el caso de las mujeres, con configuraciones culturales como el matrimonio forzoso
+                y el embarazo a temprana edad.</b>
+            </p>
+        </div>
+        <div class="event">
+            <p style="font-size: 18px; color: #a30980;"><b>En los municipios donde trabajamos (Las Margaritas, San Juan Cancuc y Chenalhó), la tasa de fecundidad adolescente es de 89 a 105 nacimientos por cada mil mujeres
+                entre los 15 y 19 años. la escolaridad promedio es de 7.1 años para los hombres y 6.3 para las mujeres, en el nivel de medio superior sólo 1.5% de los alumnos 
+                son indígenas y sólo 1% logra ingresar a las universidades, las niñas, niños y jóvenes indígenas son sometidos a un sistema de escolarización que tiene 
+                pocas experiencias significativas para el fortalecimiento de su identidad indígena y el desarrollo de habilidades para la vida en el mundo actual.</b>
+            </p>
+        </div>
+    </div>
+
+    <footer class="footer">
+        <div class="footer-header">
+            <div class="form-container">
+                <img src="./assets/img/Logo-1.png" alt="" height="100px">
+                <i class="fa-regular fa-envelope"
+                    style="color: #76225e; transform: scale(2.5); margin-left: 20px;  margin-right: 20px;"></i>
+                <span style="font-size: 23px; font-weight: bold; margin-right: 30px;">Suscríbete</span>
+                <form class="footer-form">
+                    <input class="email-footer" placeholder="Direccción de Correo" />
+                    <button class="subscribe footer-color">SUSCRÍBETE</button>
+                </form>
+                <div class="d-flex">
+                    <a href="https://www.instagram.com/chieltik/" class="icon-footerT"><i
+                            class="fa-brands fa-instagram"></i></a>
+                    <a href="https://www.linkedin.com/company/chieltik" class="icon-footerT"><i
+                            class="fa-brands fa-linkedin-in"></i></a>
+                    <a href="https://www.facebook.com/Chieltik/" class="icon-footerT"><i
+                            class="fa-brands fa-facebook-f"></i></a>
+                </div>
+            </div>
+        </div>
+        <div class="footer-info">
+            <div class="info-container">
+                <div class="part">
+                    <header class="footer-title">
+                        <i class="fa-solid fa-hand iconF"></i>
+                        <div class="footer-title-in">
+                            <span class="titleC">Donación por elección</span>
+                            <span class="titleQ footer-color">Titulo</span>
+                        </div>
+                    </header>
+                    <div class="d-col part-text footer-color">
+                        <span>
+                            Prevents our being able to do we like best, every pleasures is every pain avoided.
+                        </span>
+                        <button class="join footer-color">ÚNETE</button>
+                    </div>
+                </div>
+                <div class="part">
+                    <span class="titleQ footer-color">
+                        Donaciones
+                    </span>
+                    <div class="part-text">
+                        <ul class="donation-list">
+                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                                <li>Donaciones</li>
+                            </div>
+                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                                <li>Programas</li>
+                            </div>
+                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                                <li>Contacto</li>
+                            </div>
+
+                        </ul>
+                    </div>
+                </div>
+                <div class="part">
+                    <header class="footer-title">
+                        <i class="fa-solid fa-box-tissue iconF"></i>
+                        <div class="footer-title-in">
+                            <span class="titleC">Chielt'ik</span>
+                            <span class="titleQ footer-color">Apoyando a jovenes</span>
+                        </div>
+                    </header>
+                    <div class="d-col part-text footer-color">
+                        <span class="titleQ">5555634780</span>
+                        <span>info@chieltik.org</span>
+
+                        <span class="footer-color"
+                            style="margin-top: 15px; font-size: 18px; font-weight: bold  ;">Oficinas</span>
+                        <span>Insurgentes Sur 1409 B, Benito Juárez, CDMX.</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer-end">
+            <div class="footer-end-container" style="color: gray; font-size: 18px;">
+                <span>&#169;<span id="year"></span>
+                    <span class="footer-color">
+                        Chieltik
+                    </span>
+                    Todos los derechos reservados.
+                </span>
+                <span class="ways-donate footer-color">Formas de donar: <i class="fa-brands fa-cc-paypal"
+                        style="color: gray;"></i></span>
+
+            </div>
+        </div>
+    </footer>
+
+</body>
+</html>

+ 524 - 0
LineadelTiempo.html

@@ -0,0 +1,524 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Línea del Tiempo</title>
+    <link rel="stylesheet" href="./assets/css/navbar.css">
+    <link rel="stylesheet" href="./assets/css/footer.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+
+        .timeline-container {
+            padding: 50px 0;
+            text-align: center;
+        }
+
+        .timeline-header {
+            background: url('https://www.perodri.es/wp-content/uploads/historia-reloj-arena.jpg') no-repeat center center;
+            background-size: cover;
+            color: white;
+            padding: 100px 20px;
+            font-size: 36px;
+            font-weight: bold;
+            position: relative;
+        }
+
+        .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(71, 185, 179, 0.5);
+            z-index: 1;
+        }
+
+        .title-text {
+            position: relative;
+            z-index: 2;
+            display: flex;
+            justify-content: center;
+        }
+
+        .title-text-1 {
+            background-color: #49976d;
+            width: 24%;
+            border-radius: 30px;
+            height: 75px;
+            align-items: center;
+            display: flex;
+            justify-content: center;
+            font-size: calc(1.5rem + 1vw);
+        }
+
+        .event {
+            margin: 20px auto;
+            padding: 20px;
+            width: 90%;
+            max-width: 1400px;
+            border-radius: 10px;
+        }
+
+        .event h3 {
+            color: #5b1651;
+            font-size: calc(1rem + 0.5vw); 
+            font-weight: bold;
+        }
+
+        .event p {
+            color: #a30980;
+            font-size: calc(0.9rem + 0.3vw); 
+        }
+
+        .event-header {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            margin-bottom: 15px;
+        }
+
+        .icon, .year {
+            background-color: #73C7A5; 
+            border: 3px solid #A9D8BF;
+            color: white;
+            border-radius: 50%;
+            width: 65px;
+            height: 65px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+            margin: 0 10px;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        @media (max-width: 768px) {
+            .timeline-header {
+                padding: 70px 20px;
+                font-size: 24px;
+            }
+
+            .title-text-1 {
+                width: 60%;
+                font-size: calc(1.2rem + 1vw);
+            }
+
+            .event-header {
+                margin-bottom: 10px;
+            }
+
+            .event {
+                width: 90%;
+                padding: 15px;
+            }
+
+            .icon, .year {
+                width: 40px;
+                height: 40px;
+                font-size: 14px;
+            }
+
+            .event h3 {
+                font-size: calc(0.9rem + 0.3vw);
+            }
+
+            .event p {
+                font-size: calc(0.8rem + 0.3vw);
+            }
+        }
+
+        @media (max-width: 480px) {
+            .timeline-header {
+                padding: 50px 10px;
+                font-size: 20px;
+            }
+
+            .title-text-1 {
+                width: 80%;
+                font-size: calc(1rem + 1vw);
+            }
+
+            .event {
+                width: 95%;
+                padding: 10px;
+            }
+
+            .icon, .year {
+                width: 30px;
+                height: 30px;
+                font-size: 12px;
+            }
+
+            .event h3, .event p {
+                font-size: calc(0.8rem + 0.2vw);
+            }
+        }
+    </style>
+</head>
+<body>
+    <nav class="navbar">
+        <div class="navbar-left">
+            <img src="./assets/img/logo.png" alt="Logo" class="logo">
+            <div class="textC">
+                <img src="./assets/img/heart.png" alt="">
+                <span>Se voluntario</span>
+            </div>
+        </div>
+        <div class="navbar-center">
+            <ul class="nav-links">
+                <li><a href="#">Inicio</a></li>
+                <li class="dropdown">
+                    <a href="#">Quienes Somos</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">Misión, Visión y Principios</a></li>
+                        <li><a href="#">Equipos</a></li>
+                        <li><a href="./LineadelTiempo.html">Línea del Tiempo</a></li>
+                    </ul>
+                </li>
+                <li class="dropdown">
+                    <a href="#">Que hacemos</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="./Contexto.html">El contexto</a></li>
+                        <li><a href="./Programas.html">Programas</a></li>
+
+                    </ul>
+                </li>
+                <li><a href="#">Informes</a></li>
+                <li class="dropdown">
+                    <a href="#">Historias</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">Historias de éxito</a></li>
+                        <li><a href="#">Blogs</a></li>
+                        <li><a href="#">Eventos</a></li>
+                        <li><a href="#">Videos</a></li>
+
+                    </ul>
+                </li>
+                <li><button class="btn-donation"><span>DONA YA!</span></button></li>
+            </ul>
+        </div>
+        <div class="navbar-right">
+            <a href="https://www.facebook.com/Chieltik/"><i class="fa-brands fa-facebook-f"></i></a>
+            <a href="https://www.chieltik.org/"><i class="fa-brands fa-google-plus-g"></i></a>
+            <a href="https://www.instagram.com/chieltik/"><i class="fa-brands fa-instagram"></i></a>
+            <a href="https://www.linkedin.com/company/chieltik"><i class="fa-brands fa-linkedin-in"></i></a>
+            <a href="https://www.youtube.com/c/Chieltik/"><i class="fa-brands fa-youtube"></i></a>
+        </div>
+        <div class="hamburger">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </nav>
+
+    <div class="mobile-menu">
+        <ul>
+            <li><a href="#">Inicio</a></li>
+            <li><a href="#">Quienes Somos</a></li>
+            <li><a href="#">Que hacemos</a></li>
+            <li><a href="#">Informes</a></li>
+            <li><a href="#">Historias</a></li>
+        </ul>
+
+        <div class="icons">
+            <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
+            <a href="#"><i class="fa-brands fa-google-plus-g"></i></a>
+            <a href="#"><i class="fa-brands fa-instagram"></i></a>
+            <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+            <a href="#"><i class="fa-brands fa-youtube"></i></a>
+        </div>
+    </div>
+
+    <div class="timeline-container">
+        <div class="timeline-header">
+            <div class="overlay"></div>
+            <div class="title-text">
+                <div class="title-text-1">
+                    Línea del Tiempo
+                </div>
+            </div>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon"  style="background-color: #CC4242; border: 3px solid #F5A3A3;">
+                    <i class="fa-solid fa-hand-holding-heart" style="transform: scale(2);"></i>
+                </span>
+                <h3>Fundación de Chieltik</h3>
+                <span class="year" style="background-color: #CC4242; border: 3px solid #F5A3A3;">2009</span>
+            </div>
+            <p>El <b>03 de noviembre</b> se constituye legalmente <b>IDEAS Información y Diseños Educativos para Acciones Saludables A.C.</b>, con la misión de <b>contribuir con plena conciencia al fortalecimiento de las habilidades de las y los jóvenes indígenas, favoreciendo el reconocimiento de sus derechos</b>, 
+                actuando con instituciones gubernamentales de salud, educación y con la población en general.</p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon" style="background-color: #8D79AA; border: 3px solid #b48df0;">2010</span>
+                <h3>Comienzo de Actividades</h3>
+                <span class="year" style="background-color: #8D79AA; border: 3px solid #b48df0;">2011</span>
+            </div>
+            <p>En <b>febrero</b> comenzamos nuestras actividades en el Colegio de Bachilleres 108 en Nuevo Momón, municipio de Las Margaritas Chiapas, con el programa: <b>Fortalecimiento de habilidades para la vida con adolescentes indígenas con énfasis en la salud sexual y reproductiva</b>, con el que se capacitó a adolescentes de las instituciones educativas,
+                además de fortalecer las habilidades de trabajo con jóvenes al personal educativo y de salud. A partir, de la experimentación de estrategias pedagógicas en este 
+                proyecto se asentaron las bases para el modelo de trabajo de IDEAS hacia la población juvenil indígena.
+            </p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon">
+                    <i class="fa-solid fa-rocket" style="transform: scale(2);"></i>
+                </span>
+                <h3>Comenzamos Proyecto</h3>
+                <span class="year">2011</span>
+            </div>
+            <p> Comenzamos con el proyecto <b>"Formación de adolescentes indígenas tojolabales para el empoderamiento, las relaciones equitativas y la prevención de la 
+                violenvia de género"</b> , el objetivo fue capacitar a las y los jóvenes estudiantes de bachillerato de la región de Nuevo Momón, municipio de las Margaritas,
+            para que visibilizar las formas de violencia de género en la comunidad.</p>
+            <p>Primera semana Cultura, realizamos talleres de teatro intergeneracional y video dirigido a adultos y jóvenes indígenas del Colegio de Bachilleres y Telesecundaria
+                de Nuevo Momón (Las Margaritas), con temas sobre derecho y equidad de género y Salud sexual y reproductiva.
+            </p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon" style="background-color: #DF4B6D; border: 3px solid #F5A3A3;">
+                    <i class="fa-solid fa-scale-balanced" style="transform: scale(2);"></i>
+                </span>
+                <h3>Formación de niñas y niños indígenas en sus derechos</h3>
+                <span class="year" style="background-color: #DF4B6D; border: 3px solid #F5A3A3;">2013</span>
+            </div>
+            <p>Proyecto <b>"Formación de niñas y niños indígenas en sus derechos"</b>, se realizó con el propósito de abordar diversas formas de violencia y vulneración de los derechos 
+                de las niñas y los niños en planteles de primaria intercultural en las comunidades de Nuevo Mamón, Nuevo San Juan Chamula y San Antonio Los Montes en el municipio de Las Margaritas.
+            </p>
+            <p>
+                <b>Tercera Temporada Cultural "¿Es madre se padre?"</b>  Talleres de teatro de video animación, de radio, y taller de video clip musical en torno a la 
+                paternidad y  la maternidad en la adolescencia y la juventud temprana, sus implicaciones en el proyecto de vida de las y los jóvenes. Se realizó en comunidades de nuevo Momón y 
+                Nuevo San Juan Chamula (Las Margaritas) y San Juan Cancuc (Cancuc).
+            </p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon"  style="background-color: #8D79AA; border: 3px solid #b48df0;">2013</span>
+                <h3>FortaleSiendo Jovenes</h3>
+                <span class="year"  style="background-color: #8D79AA; border: 3px solid #b48df0;">2016</span>
+            </div>
+            <p>Proyecto <b>"FortaleSiendo Jóvenes" Programa integral de salud sexual y reproductiva y prevención de la violncia de género</b>, dirigido a los jóvenes indígenas
+                de seis microrregiones de la Selva y los Altos de Chiapas. El programa considera cinco lineas de trabajo:
+                -Formación de educadores comunitarios indígenas
+                -Capacitación a jóvenes en los ejes temáticos
+                -Participacion juvenil
+                -Sensibilización de las y los adultos hacia la perpectiva juvenil y construcción de alianzas en favor de los derechos de las y los jóvenes indígenas.
+            </p>
+            <p><b>Proyecto "FortaleSiendo Jóvenes en Chenalhó"</b>, adecuado  al contexto cultural de las y los jovenes tsotsiles del municipio de Chenalhó.</p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon">
+                    <i class="fa-solid fa-scale-balanced" style="transform: scale(2);"></i>
+                </span>
+                <h3>Me formo, eligo, decido y comparto mis saberes</h3>
+                <span class="year">2014</span>
+            </div>
+            <p>Proyecto <b> "Me formo, eligo, decido y comparto mis saberes"</b>, este proyecto se enfocó a la capacitación de adolescentes, niñas y niños 
+                para <b>fortalecer las relaciones equitativas de género y el ejercicio de sus derechos</b>. Se realizo un Nuevo Momón y Nuevo San Juan Chamula, municipio de Las Margaritas.
+            </p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon"style="background-color: #CC4242; border: 3px solid #F5A3A3;">2014</span>
+                <h3>FortaleSiendo Jóvenes en San Juan Cancuc</h3>
+                <span class="year" style="background-color: #CC4242; border: 3px solid #F5A3A3;">2016</span>
+            </div>
+            <p>Proyecto <b>"FortaleSiendo Jóvenes en San Juan Cancuc"</b>, adecuado al contexto cultural de las y los jóvenes tseltales del municipio de Cancuc. Este proyecto incluye una línea de participación para el desarrollo de una radio juvenil comunitaria.</p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon"  style="background-color: #8D79AA; border: 3px solid #b48df0;">
+                    <i class="fa-solid fa-people-group" style="transform: scale(2);"></i>                
+                </span>
+                <h3>Creciendo Juntos</h3>
+                <span class="year"  style="background-color: #8D79AA; border: 3px solid #b48df0;">2014</span>
+            </div>
+            <p><b>1 Encuentro Intercultural de Jóvenes Indígenas en las Margaritas:"Creciendo Juntos"</b>, Encuentro entre jóvenes de diversas comunidades y culturas, con el objetivo de construir reservados
+                juveniles en las comunidades indígenas. El encuentro abordó la reflexión sobre la situación de ser joven e indígena, la discrimiación y los valores del Buen Vivir.
+            </p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon">2015</span>
+                <h3>Prevención de la violencia de género</h3>
+                <span class="year">2016</span>
+            </div>
+            <p><b>Prevención de la violencia de género y el matrimonio forzado con jóvenes indígenas de Chiapas</b>, proyecto orientado a la capacitación de mujeres y hombres jóvenes de comunidad indígenas
+                de Chenalhó, Cancuc y Las Margaritas, para la trasnformación de la violencia de género, <b>promoviendo acciones en favor del derecho a decidir de las mujeres</b> sobre el matrimonio y la maternidad.
+            </p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon" style="background-color: #CC4242; border: 3px solid #F5A3A3;">
+                    <i class="fa-solid fa-users-gear" style="transform: scale(2);"></i>
+                </span>
+                <h3>Construyendo el Buen Vivir para todos y todas</h3>
+                <span class="year" style="background-color: #CC4242; border: 3px solid #F5A3A3;">2015</span>
+            </div>
+            <p><b>II Encuentro Intercultural de Jóvenes Indígenas en las Margaritas: "Construyendo el Buen Vivir para todos y todas"</b>, este encuentro tuvo como temática la reflexión en torno a la situación 
+                de las mujeres en las comunidades indígenas.
+            </p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon" style="background-color: #8D79AA; border: 3px solid #b48df0;">
+                    <i class="fa-solid fa-file-pen" style="transform: scale(2);"></i>
+                </span>
+                <h3>Manual FortaleSiendo Jóvenes</h3>
+                <span class="year"  style="background-color: #8D79AA; border: 3px solid #b48df0;">2015</span>
+            </div>
+            <p>Material Creación del <b>"Manual FortaleSiendo Jóvenes" Manual para los educadores comunitarios </b>construido a partir de la sistematicación de la experiencia desd un enfoque intercultural. Consta de cuatro módulos.</p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon">
+                    <i class="fa-solid fa-award" style="transform: scale(2);"></i>
+                </span>
+                <h3>"Somos lo que creemos" o "nuestro crecimiento"</h3>
+                <span class="year">2017</span>
+            </div>
+            <p>Como resultado de los logros y transformación de IDEAS A.C., el equipo Semillero, construido por jóvenes tseltales, tsotsiles y tojolabales <b>nombran a nuestro proyecto
+                como Ch'ieltik que en lengua tseltal significa "Somos lo que creemos" o "nuestro crecimiento"</b> , así, desde su espiritualidad logran comunicar lo que hacemos y nuestras aspiraciones.
+            </p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon" style="background-color: #CC4242; border: 3px solid #F5A3A3;">
+                    <i class="fa-solid fa-chart-line" style="transform: scale(2);"></i>
+                </span>
+                <h3>Reconocimientos</h3>
+                <span class="year" style="background-color: #CC4242; border: 3px solid #F5A3A3;">2017</span>
+            </div>
+            <p>Fuimos reconocidos con el <b>2do Lugar del Premio OEA-SGIB-Fundatión Vidanta</b>, por su contribución a la reducción de la pobreza y desigualdad en América Latina y Caribe.</p>
+            <p>Mención especial del <b> Premio de Derechos Humanos de la República Francesa</b> por la Promoción y Defensoría de los Derechos Sexuales y Reproductivos de los Jóvenes indígenas.</p>
+        </div>
+
+        <div class="event">
+            <div class="event-header">
+                <span class="icon"  style="background-color: #8D79AA; border: 3px solid #b48df0;"></span>
+                <h3>Premio Iberoamericano de la Juventud 2018</h3>
+                <span class="year"  style="background-color: #8D79AA; border: 3px solid #b48df0;">2018</span>
+            </div>
+            <p>Recibimos el <b>Premio Iberoamericano de la Juventud 2018</b> en la categoria de activismo juvenil.</p>
+        </div>
+
+    </div>
+
+    <footer class="footer">
+        <div class="footer-header">
+            <div class="form-container">
+                <img src="./assets/img/Logo-1.png" alt="" height="100px">
+                <i class="fa-regular fa-envelope"
+                    style="color: #76225e; transform: scale(2.5); margin-left: 20px;  margin-right: 20px;"></i>
+                <span style="font-size: 23px; font-weight: bold; margin-right: 30px;">Suscríbete</span>
+                <form class="footer-form">
+                    <input class="email-footer" placeholder="Direccción de Correo" />
+                    <button class="subscribe footer-color">SUSCRÍBETE</button>
+                </form>
+                <div class="d-flex">
+                    <a href="https://www.instagram.com/chieltik/" class="icon-footerT"><i
+                            class="fa-brands fa-instagram"></i></a>
+                    <a href="https://www.linkedin.com/company/chieltik" class="icon-footerT"><i
+                            class="fa-brands fa-linkedin-in"></i></a>
+                    <a href="https://www.facebook.com/Chieltik/" class="icon-footerT"><i
+                            class="fa-brands fa-facebook-f"></i></a>
+                </div>
+            </div>
+        </div>
+        <div class="footer-info">
+            <div class="info-container">
+                <div class="part">
+                    <header class="footer-title">
+                        <i class="fa-solid fa-hand iconF"></i>
+                        <div class="footer-title-in">
+                            <span class="titleC">Donación por elección</span>
+                            <span class="titleQ footer-color">Titulo</span>
+                        </div>
+                    </header>
+                    <div class="d-col part-text footer-color">
+                        <span>
+                            Prevents our being able to do we like best, every pleasures is every pain avoided.
+                        </span>
+                        <button class="join footer-color">ÚNETE</button>
+                    </div>
+                </div>
+                <div class="part">
+                    <span class="titleQ footer-color">
+                        Donaciones
+                    </span>
+                    <div class="part-text">
+                        <ul class="donation-list">
+                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                                <li>Donaciones</li>
+                            </div>
+                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                                <li>Programas</li>
+                            </div>
+                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                                <li>Contacto</li>
+                            </div>
+
+                        </ul>
+                    </div>
+                </div>
+                <div class="part">
+                    <header class="footer-title">
+                        <i class="fa-solid fa-box-tissue iconF"></i>
+                        <div class="footer-title-in">
+                            <span class="titleC">Chielt'ik</span>
+                            <span class="titleQ footer-color">Apoyando a jovenes</span>
+                        </div>
+                    </header>
+                    <div class="d-col part-text footer-color">
+                        <span class="titleQ">5555634780</span>
+                        <span>info@chieltik.org</span>
+
+                        <span class="footer-color"
+                            style="margin-top: 15px; font-size: 18px; font-weight: bold  ;">Oficinas</span>
+                        <span>Insurgentes Sur 1409 B, Benito Juárez, CDMX.</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer-end">
+            <div class="footer-end-container" style="color: gray; font-size: 18px;">
+                <span>&#169;<span id="year"></span>
+                    <span class="footer-color">
+                        Chieltik
+                    </span>
+                    Todos los derechos reservados.
+                </span>
+                <span class="ways-donate footer-color">Formas de donar: <i class="fa-brands fa-cc-paypal"
+                        style="color: gray;"></i></span>
+
+            </div>
+        </div>
+    </footer>
+
+</body>
+</html>

+ 331 - 0
Programas.html

@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Programas</title>
+    <link rel="stylesheet" href="./assets/css/navbar.css">
+    <link rel="stylesheet" href="./assets/css/footer.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+    }
+    .timeline-header {
+        background: url('https://www.perodri.es/wp-content/uploads/historia-reloj-arena.jpg') no-repeat center center;
+        background-size: cover;
+        color: white;
+        padding: 100px 20px;
+        font-size: 36px;
+        font-weight: bold;
+        position: relative;
+    }
+    .overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(71, 185, 179, 0.5);
+        z-index: 1;
+    }
+    .title-text {
+        position: relative;
+        z-index: 2;
+        display: flex;
+        justify-content: center;
+    }
+    .title-text-1 {
+        background-color: #5aa07a;
+        width: 17%;
+        border-radius: 30px;
+        height: 75px;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        font-size: calc(1.5rem + 1vw);
+    }
+    .timeline-container {
+        padding: 20px 0; 
+        text-align: center;
+    }
+    .card {
+        background: #fff;
+        margin: 25px;
+        padding: 15px; 
+        border-radius: 8px;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        transition: transform 0.3s ease;
+        border: 3px solid #09C2AB;
+        width: 100%; 
+        max-width: 450px; 
+    }
+    .card:hover {
+        transform: translateY(-5px);
+    }
+    .circulo {
+        border: 3px solid #09C2AB;
+        color: rgb(240, 12, 12);
+        border-radius: 50%;
+        width: 50px; 
+        height: 50px; 
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30px; 
+        margin: 5px;
+        text-align: center;
+        font-weight: bold;
+        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+    }
+    h2, p, a {
+        margin: 10px 0; 
+    }
+    h2 {
+        color: #333;
+    }
+    p {
+        color: #666;
+        font-size: 0.9rem;
+    }
+    a {
+        color: #F04F4A;
+        font-size: 12px;
+        text-decoration: none;
+        font-weight: bold;
+    }
+    @media (min-width: 600px) {
+        .card {
+            width: 30%;
+        }
+        /* .timeline-container {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+        } */
+    }
+</style>
+</head>
+<body>
+    <nav class="navbar">
+        <div class="navbar-left">
+            <img src="./assets/img/logo.png" alt="Logo" class="logo">
+            <div class="textC">
+                <img src="./assets/img/heart.png" alt="">
+                <span>Se voluntario</span>
+            </div>
+        </div>
+        <div class="navbar-center">
+            <ul class="nav-links">
+                <li><a href="#">Inicio</a></li>
+                <li class="dropdown">
+                    <a href="#">Quienes Somos</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">Misión, Visión y Principios</a></li>
+                        <li><a href="#">Equipos</a></li>
+                        <li><a href="./LineadelTiempo.html">Línea del Tiempo</a></li>
+                    </ul>
+                </li>
+                <li class="dropdown">
+                    <a href="#">Que hacemos</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="./Contexto.html">El contexto</a></li>
+                        <li><a href="./Programas.html">Programas</a></li>
+
+                    </ul>
+                </li>
+                <li><a href="#">Informes</a></li>
+                <li class="dropdown">
+                    <a href="#">Historias</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">Historias de éxito</a></li>
+                        <li><a href="#">Blogs</a></li>
+                        <li><a href="#">Eventos</a></li>
+                        <li><a href="#">Videos</a></li>
+
+                    </ul>
+                </li>
+                <li><button class="btn-donation"><span>DONA YA!</span></button></li>
+            </ul>
+        </div>
+        <div class="navbar-right">
+            <a href="https://www.facebook.com/Chieltik/"><i class="fa-brands fa-facebook-f"></i></a>
+            <a href="https://www.chieltik.org/"><i class="fa-brands fa-google-plus-g"></i></a>
+            <a href="https://www.instagram.com/chieltik/"><i class="fa-brands fa-instagram"></i></a>
+            <a href="https://www.linkedin.com/company/chieltik"><i class="fa-brands fa-linkedin-in"></i></a>
+            <a href="https://www.youtube.com/c/Chieltik/"><i class="fa-brands fa-youtube"></i></a>
+        </div>
+        <div class="hamburger">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </nav>
+
+    <div class="mobile-menu">
+        <ul>
+            <li><a href="#">Inicio</a></li>
+            <li><a href="#">Quienes Somos</a></li>
+            <li><a href="#">Que hacemos</a></li>
+            <li><a href="#">Informes</a></li>
+            <li><a href="#">Historias</a></li>
+        </ul>
+
+        <div class="icons">
+            <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
+            <a href="#"><i class="fa-brands fa-google-plus-g"></i></a>
+            <a href="#"><i class="fa-brands fa-instagram"></i></a>
+            <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+            <a href="#"><i class="fa-brands fa-youtube"></i></a>
+        </div>
+    </div>
+
+<div class="timeline-container">
+    <div class="timeline-header">
+        <div class="overlay"></div>
+        <div class="title-text">
+            <div class="title-text-1">Programas</div>
+        </div>
+    </div>
+
+    <div style="display: flex; justify-content: center; margin-top: 40px;">
+        <div class="card" id="concientizar">
+            <h2>Concientizar</h2>
+            <div style="margin-bottom: 10px; display: flex; align-items: center;">
+                <div><span class="circulo">1</span></div>
+                <p style="color: #a30980;">Dar los conocimientos necesarios a los y las jóvenes para que puedan tomar conciencia de los diferentes temas relacionados con...</p>
+                <div><span class="circulo"><i class="fa-solid fa-hands-clapping"></i></span></div>
+            </div>
+            <div>
+                <div style="border-bottom: 2px solid #F04F4A; width: 30px; margin-left: 150px;"></div>
+                <a href="#">Más detalles</a>
+            </div>
+        </div>
+        <div class="card" id="educacion">
+            <h2>Educación</h2>
+            <div style="margin-bottom: 10px; display: flex; align-items: center;">
+                <div><span class="circulo">2</span></div>
+                <p style="color: #a30980;">Ayudar a los y las jóvenes a mejorar parte de su conocimiento, a través de programas de clases de tronco común y de escuela básica...</p>
+                <div><span class="circulo"><i class="fa-solid fa-graduation-cap"></i></span></div>
+            </div>
+            <div>
+                <div style="border-bottom: 2px solid #F04F4A; width: 30px; margin-left: 150px;"></div>
+                <a href="#">Más detalles</a>
+            </div>
+        </div>
+        <div class="card" id="salud">
+            <h2>Salud</h2>
+            <div style="margin-bottom: 10px; display: flex; align-items: center;">
+                <div><span class="circulo">3</span></div>
+                <p style="color: #a30980;">Llevar ayuda médica a las comunidades más apartadas de las ciudades, para asegurar un trato más digno para todos y cada uno de...</p>
+                <div><span class="circulo"><i class="fa-solid fa-heart-pulse"></i></span></div>
+            </div>
+            <div>
+                <div style="border-bottom: 2px solid #F04F4A; width: 30px; margin-left: 150px;"></div>
+                <a href="#">Más detalles</a>
+            </div>
+        </div>
+    </div>
+    <div style="display: flex; justify-content: center; align-items: center; margin-top: 50px;">
+        <span style="border: 2px solid; width: 76px; height: 40px; border-radius: 5px; align-items: center; display: flex; justify-content: space-evenly;">
+            <i class="fa-solid fa-arrow-left" style="cursor: pointer;"></i>
+            <i class="fa-solid fa-arrow-right" style="cursor: pointer;;"></i>
+        </span>
+    </div>
+</div>
+<footer class="footer">
+    <div class="footer-header">
+        <div class="form-container">
+            <img src="./assets/img/Logo-1.png" alt="" height="100px">
+            <i class="fa-regular fa-envelope"
+                style="color: #76225e; transform: scale(2.5); margin-left: 20px;  margin-right: 20px;"></i>
+            <span style="font-size: 23px; font-weight: bold; margin-right: 30px;">Suscríbete</span>
+            <form class="footer-form">
+                <input class="email-footer" placeholder="Direccción de Correo" />
+                <button class="subscribe footer-color">SUSCRÍBETE</button>
+            </form>
+            <div class="d-flex">
+                <a href="https://www.instagram.com/chieltik/" class="icon-footerT"><i
+                        class="fa-brands fa-instagram"></i></a>
+                <a href="https://www.linkedin.com/company/chieltik" class="icon-footerT"><i
+                        class="fa-brands fa-linkedin-in"></i></a>
+                <a href="https://www.facebook.com/Chieltik/" class="icon-footerT"><i
+                        class="fa-brands fa-facebook-f"></i></a>
+            </div>
+        </div>
+    </div>
+    <div class="footer-info">
+        <div class="info-container">
+            <div class="part">
+                <header class="footer-title">
+                    <i class="fa-solid fa-hand iconF"></i>
+                    <div class="footer-title-in">
+                        <span class="titleC">Donación por elección</span>
+                        <span class="titleQ footer-color">Titulo</span>
+                    </div>
+                </header>
+                <div class="d-col part-text footer-color">
+                    <span>
+                        Prevents our being able to do we like best, every pleasures is every pain avoided.
+                    </span>
+                    <button class="join footer-color">ÚNETE</button>
+                </div>
+            </div>
+            <div class="part">
+                <span class="titleQ footer-color">
+                    Donaciones
+                </span>
+                <div class="part-text">
+                    <ul class="donation-list">
+                        <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                            <li>Donaciones</li>
+                        </div>
+                        <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                            <li>Programas</li>
+                        </div>
+                        <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                            <li>Contacto</li>
+                        </div>
+
+                    </ul>
+                </div>
+            </div>
+            <div class="part">
+                <header class="footer-title">
+                    <i class="fa-solid fa-box-tissue iconF"></i>
+                    <div class="footer-title-in">
+                        <span class="titleC">Chielt'ik</span>
+                        <span class="titleQ footer-color">Apoyando a jovenes</span>
+                    </div>
+                </header>
+                <div class="d-col part-text footer-color">
+                    <span class="titleQ">5555634780</span>
+                    <span>info@chieltik.org</span>
+
+                    <span class="footer-color"
+                        style="margin-top: 15px; font-size: 18px; font-weight: bold  ;">Oficinas</span>
+                    <span>Insurgentes Sur 1409 B, Benito Juárez, CDMX.</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer-end">
+        <div class="footer-end-container" style="color: gray; font-size: 18px;">
+            <span>&#169;<span id="year"></span>
+                <span class="footer-color">
+                    Chieltik
+                </span>
+                Todos los derechos reservados.
+            </span>
+            <span class="ways-donate footer-color">Formas de donar: <i class="fa-brands fa-cc-paypal"
+                    style="color: gray;"></i></span>
+
+        </div>
+    </div>
+</footer>
+</body>
+</html>

+ 4 - 3
assets/css/footer.css

@@ -1,5 +1,5 @@
 .footer {
-    margin-top: 200px;
+    margin-top: 130px;
     font-family: 'Quicksand', sans-serif;
     width: 100%;
     height: auto;
@@ -162,7 +162,7 @@
     font-size: 20px;
     font-family: 'Caveat', cursive;
     font-weight: 600;
-    color: #ff3232;
+    color: #FB4C44;
 }
 
 .titleQ {
@@ -199,7 +199,8 @@
 
 .footer-end {
     width: 100%;
-    height: 100px;
+    padding-top: 10px;
+    padding-bottom: 10px;
     background-color: #341a42;
     display: flex;
     justify-content: center;

+ 67 - 65
assets/css/home.css

@@ -10,19 +10,11 @@ body {
 }
 
 
-.container-scroll{
-    scroll-padding-top: 90px; /* Ajuste para el tamaño del slider */
 
-    overflow-y: scroll; 
-    scroll-snap-type: y mandatory; 
-    scroll-behavior: smooth; 
-}
 
 
 /* Carrusel  de inicio*/
 .slider {
-    scroll-snap-stop: always; /* Forzar que el scroll-snap ocurra siempre al hacer scroll */
-
     scroll-snap-align: start;
     position: relative;
     width: 100%;
@@ -71,19 +63,17 @@ body {
 }
 
 /* Sección historias de exito */
-.histories{
-    scroll-snap-stop: always; /* Forzar que el scroll-snap ocurra siempre al hacer scroll */
+.histories {
 
-    scroll-snap-align: start;
     margin-top: 20px;
-    height: 80vh;
+    height: 85vh;
     background-color: #471d0116;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.content{
+.content {
     display: flex;
     justify-content: space-around;
     width: 100%;
@@ -91,7 +81,7 @@ body {
     height: auto
 }
 
-.text-content{
+.text-content {
     padding-left: 20px;
     padding-right: 20px;
     display: flex;
@@ -100,7 +90,7 @@ body {
     width: 30%;
 }
 
-.histories-btn{
+.histories-btn {
     text-decoration: none;
     color: white;
     border-radius: 30px;
@@ -110,84 +100,96 @@ body {
     background-color: #f04f48;
 }
 
-.other-content{
+.other-content {
     padding-left: 20px;
     padding-right: 20px;
     width: 100%;
     max-width: 65%;
 }
 
-.other-content img{
+.other-content img {
     border-radius: 50%;
     width: 100%;
     height: 100%;
 }
 
+/* Slider infinito */
 
+.infinite-carousel {
+    margin: 0 auto;
+    padding: 20px 0;
+    max-width: 65%;
+    overflow: hidden;
+    display: flex;
+    height: 15vh;
+}
 
-#scrollToTopBtn {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    display: none; 
-    color: #f04f48;
-    background-color: transparent;
-    font-weight: bold;
-    border: 2px solid #f04f48;
-    width: 70px;
-    height: 70px;
-    border-radius: 50%;
-    padding: 15px;
-    font-size: 24px;
-    cursor: pointer;
-    z-index: 100;
-    transition: opacity 0.3s ease;
+.group {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    justify-content: space-between;
+    padding-right: 20px;
+    will-change: transform;
+    animation: scrolling 30s linear infinite;
 }
 
+.card {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 24px;
+    margin-left: 100px;
 
-#scrollToTopBtn::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 2px solid rgba(240, 79, 72, 0.5);
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 1;
-    animation: radar-blur 2s infinite;
-    z-index: -1; 
+
+
+    /* &:nth-child(1) {
+        background: #7958ff;
+    }
+
+    &:nth-child(2) {
+        background: #5d34f2;
+    }
+
+    &:nth-child(3) {
+        background: #4300da;
+    } */
 }
 
-#scrollToTopBtn:hover {
-    cursor: pointer;
+.card img {
+    border-bottom: 3px solid transparent;
+    border-image: linear-gradient(to left, #dd9494 0%, #d62525 100%, #dd9494 0%) 1;
+    height: 90px;
+    width: 150px;
 }
 
 
-@keyframes radar-blur {
+
+
+
+@keyframes scrolling {
     0% {
-        transform: translate(-50%, -50%) scale(1);
-        opacity: 1;
-    }
-    80% {
-        opacity: 0;
+        transform: translateX(0);
     }
+
     100% {
-        transform: translate(-50%, -50%) scale(2);
-        opacity: 0;
+        transform: translateX(-100%);
     }
 }
 
 
 
+
+
 @keyframes fadeInDown {
-	from {
-		opacity: 0;
-		transform: translate3d(0, -20%, 0);
-	}
-	to {
-		opacity: 1;
-		transform: translate3d(0, 0, 0);
-	}
+    from {
+        opacity: 0;
+        transform: translate3d(0, -20%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
 }

+ 81 - 0
assets/css/mision.css

@@ -0,0 +1,81 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Quicksand', sans-serif;
+    background-image: url(../img/fondo.jpg);
+}
+
+.header {
+    background: url('https://www.perodri.es/wp-content/uploads/historia-reloj-arena.jpg') no-repeat center center;
+    background-size: cover;
+    color: white;
+    padding: 100px 20px;
+    font-size: 36px;
+    font-weight: bold;
+    position: relative;
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(71, 185, 179, 0.5);
+    z-index: 1;
+}
+
+.title-text {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+}
+
+.title-text-1 {
+    background-color: #5aa07a;
+    width: fit-content;
+    padding: 30px;
+    border-radius: 23px;
+    height: 60px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    font-size: calc(1.5rem + 1vw);
+}
+
+.general-content{
+    width: 100%;
+    /* arriba, lados */
+    padding: 50px 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.content{
+    width: 55%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.circle-img{
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    background-color: #5aa07a;
+}
+
+.list li{
+    margin-top: 10px;
+}

+ 3 - 4
assets/css/navbar.css

@@ -6,7 +6,6 @@
 
 body {
     font-family: 'Quicksand', sans-serif;
-    background-color: aqua;
 }
 
 .navbar {
@@ -39,7 +38,7 @@ body {
     line-height: 30px;
     font-family: 'Caveat', cursive;
     font-weight: 400;
-    color: #73C7A4;
+    color: #04BFAA;
     margin-left: 100px;
 }
 
@@ -121,7 +120,7 @@ body {
 }
 
 .navbar .dropdown-menu li a:hover {
-    color: #73C7A4;
+    color: #04BFAA;
     text-decoration: none;
 }
 
@@ -130,7 +129,7 @@ body {
 }
 
 .nav-links a:hover {
-    color: #77c8a6;
+    color: #04BFAA;
 }
 
 .btn-donation {

+ 55 - 0
assets/css/styles.css

@@ -10,3 +10,58 @@
 .mr-10{
     margin-right: 10px;
 }
+
+#scrollToTopBtn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: none;
+    color: #f04f48;
+    background-color: transparent;
+    font-weight: bold;
+    border: 2px solid #f04f48;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    padding: 15px;
+    font-size: 24px;
+    cursor: pointer;
+    z-index: 100;
+    transition: opacity 0.3s ease;
+}
+
+
+#scrollToTopBtn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 2px solid rgba(240, 79, 72, 0.5);
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    animation: radar-blur 2s infinite;
+    z-index: -1;
+}
+
+#scrollToTopBtn:hover {
+    cursor: pointer;
+}
+
+@keyframes radar-blur {
+    0% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+
+    80% {
+        opacity: 0;
+    }
+
+    100% {
+        transform: translate(-50%, -50%) scale(2);
+        opacity: 0;
+    }
+}

BIN
assets/img/Linea-del-tiempo.jpg


BIN
assets/img/Programas.jpg


BIN
assets/img/brand1.png


BIN
assets/img/brand2.png


BIN
assets/img/brand3.png


BIN
assets/img/brand4.png


BIN
assets/img/brand5.jpg


BIN
assets/img/fondo.jpg


BIN
assets/img/mision.png


BIN
assets/img/principios.png


BIN
assets/img/vision.png


+ 28 - 18
index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="./assets/css/navbar.css">
     <link rel="stylesheet" href="./assets/css/footer.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
 </head>
@@ -25,20 +26,20 @@
         </div>
         <div class="navbar-center">
             <ul class="nav-links">
-                <li><a href="#">Inicio</a></li>
+                <li><a href="./index.html">Inicio</a></li>
                 <li class="dropdown">
                     <a href="#">Quienes Somos</a>
                     <ul class="dropdown-menu">
-                        <li><a href="#">Misión, Visión y Principios</a></li>
+                        <li><a href="./mision.html">Misión, Visión y Principios</a></li>
                         <li><a href="#">Equipos</a></li>
-                        <li><a href="#">Línea del Tiempo</a></li>
+                        <li><a href="./LineadelTiempo.html">Línea del Tiempo</a></li>
                     </ul>
                 </li>
                 <li class="dropdown">
                     <a href="#">Que hacemos</a>
                     <ul class="dropdown-menu">
-                        <li><a href="#">El contexto</a></li>
-                        <li><a href="#">Programas</a></li>
+                        <li><a href="./Contexto.html">El contexto</a></li>
+                        <li><a href="./Programas.html">Programas</a></li>
 
                     </ul>
                 </li>
@@ -90,7 +91,7 @@
 
     <!-- Esto es de la navbar 👆
     ------------------------------------------------ -->
-    <div class="container-scroll">
+    
         <!-- Carrusel -->
         <section class="slider">
             <div class="slider-container">
@@ -123,6 +124,23 @@
                 </div>
             </div>
         </section>
+
+
+    <div class="infinite-carousel">
+        <div class="group">
+            <div class="card"><img src="./assets/img/brand1.png" alt=""></div>
+            <div class="card"><img src="./assets/img/brand2.png" alt=""></div>
+            <div class="card"><img src="./assets/img/brand3.png" alt=""></div>
+            <div class="card"><img src="./assets/img/brand4.png" alt=""></div>
+            <div class="card"><img src="./assets/img/brand5.jpg" alt=""></div>
+        </div>
+        <div aria-hidden class="group">
+            <div class="card"><img src="./assets/img/brand1.png" alt=""></div>
+            <div class="card"><img src="./assets/img/brand2.png" alt=""></div>
+            <div class="card"><img src="./assets/img/brand3.png" alt=""></div>
+            <div class="card"><img src="./assets/img/brand4.png" alt=""></div>
+            <div class="card"><img src="./assets/img/brand5.jpg" alt=""></div>
+        </div>
     </div>
 
 
@@ -138,17 +156,9 @@
                     style="color: #76225e; transform: scale(2.5); margin-left: 20px;  margin-right: 20px;"></i>
                 <span style="font-size: 23px; font-weight: bold; margin-right: 30px;">Suscríbete</span>
                 <form class="footer-form">
-                    <input class="email-footer" placeholder="Direccción de Correo" />
-                    <button class="subscribe footer-color">SUSCRÍBETE</button>
+                    <input class="email-footer" type="email" placeholder="Direccción de Correo" />
+                    <button class="subscribe footer-color" type="submit">SUSCRÍBETE</button>
                 </form>
-                <div class="d-flex">
-                    <a href="https://www.instagram.com/chieltik/" class="icon-footerT"><i
-                            class="fa-brands fa-instagram"></i></a>
-                    <a href="https://www.linkedin.com/company/chieltik" class="icon-footerT"><i
-                            class="fa-brands fa-linkedin-in"></i></a>
-                    <a href="https://www.facebook.com/Chieltik/" class="icon-footerT"><i
-                            class="fa-brands fa-facebook-f"></i></a>
-                </div>
             </div>
         </div>
         <div class="footer-info">
@@ -191,9 +201,9 @@
                     <header class="footer-title">
                         <i class="fa-solid fa-box-tissue iconF"></i>
                         <div class="footer-title-in">
-                            <span class="titleC">Chielt'ik</span>
+                            <span class="titleC">Chieltik</span>
                             <span class="titleQ footer-color">Apoyando a jovenes</span>
-                        </div>
+                        </div>                                                                                                        
                     </header>
                     <div class="d-col part-text footer-color">
                         <span class="titleQ">5555634780</span>

+ 247 - 0
mision.html

@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./assets/css/mision.css">
+    <link rel="stylesheet" href="./assets/css/navbar.css">
+    <link rel="stylesheet" href="./assets/css/footer.css">
+    <link rel="stylesheet" href="./assets/css/styles.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+</head>
+
+<body>
+    <nav class="navbar">
+        <div class="navbar-left">
+            <img src="./assets/img/logo.png" alt="Logo" class="logo">
+            <div class="textC">
+                <img src="./assets/img/heart.png" alt="">
+                <span>Se voluntario</span>
+            </div>
+        </div>
+        <div class="navbar-center">
+            <ul class="nav-links">
+                <li><a href="./index.html">Inicio</a></li>
+                <li class="dropdown">
+                    <a href="#">Quienes Somos</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="./mision.html">Misión, Visión y Principios</a></li>
+                        <li><a href="#">Equipos</a></li>
+                        <li><a href="./LineadelTiempo.html">Línea del Tiempo</a></li>
+                    </ul>
+                </li>
+                <li class="dropdown">
+                    <a href="#">Que hacemos</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="./Contexto.html">El contexto</a></li>
+                        <li><a href="./Programas.html">Programas</a></li>
+
+                    </ul>
+                </li>
+                <li><a href="#">Informes</a></li>
+                <li class="dropdown">
+                    <a href="#">Historias</a>
+                    <ul class="dropdown-menu">
+                        <li><a href="#">Historias de éxito</a></li>
+                        <li><a href="#">Blogs</a></li>
+                        <li><a href="#">Eventos</a></li>
+                        <li><a href="#">Videos</a></li>
+
+                    </ul>
+                </li>
+                <li><button class="btn-donation"><span>DONA YA!</span></button></li>
+            </ul>
+        </div>
+        <div class="navbar-right">
+            <a href="https://www.facebook.com/Chieltik/"><i class="fa-brands fa-facebook-f"></i></a>
+            <a href="https://www.chieltik.org/"><i class="fa-brands fa-google-plus-g"></i></a>
+            <a href="https://www.instagram.com/chieltik/"><i class="fa-brands fa-instagram"></i></a>
+            <a href="https://www.linkedin.com/company/chieltik"><i class="fa-brands fa-linkedin-in"></i></a>
+            <a href="https://www.youtube.com/c/Chieltik/"><i class="fa-brands fa-youtube"></i></a>
+        </div>
+        <div class="hamburger">
+            <span></span>
+            <span></span>
+            <span></span>
+        </div>
+    </nav>
+
+    <div class="mobile-menu">
+        <ul>
+            <li><a href="#">Inicio</a></li>
+            <li><a href="#">Quienes Somos</a></li>
+            <li><a href="#">Que hacemos</a></li>
+            <li><a href="#">Informes</a></li>
+            <li><a href="#">Historias</a></li>
+        </ul>
+
+        <div class="icons">
+            <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
+            <a href="#"><i class="fa-brands fa-google-plus-g"></i></a>
+            <a href="#"><i class="fa-brands fa-instagram"></i></a>
+            <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
+            <a href="#"><i class="fa-brands fa-youtube"></i></a>
+        </div>
+    </div>
+
+
+    <div class="general-container">
+        <header class="header">
+            <div class="overlay"></div>
+            <div class="title-text">
+                <div class="title-text-1">
+                    Misión, Visión y Principios
+                </div>
+            </div>
+        </header>
+        <section class="general-content">
+            <div class="content">
+                <div class="circle-img">
+                    <img src="./assets/img/mision.png" alt="">
+                </div>
+                <span style="font-weight: bold; font-size: 19px;">Misión</span>
+                <br>
+                <p style="font-weight: bold; font-size: 18px; color: #77225F;">Fortalecer a las juventudes mayas de
+                    Chiapas con un enfoque de derechos, interculturalidad e igualdad
+                    de género, a través de acciones y proyectos que transforman sus vidas y las de sus comunidades.</p>
+
+                <br>
+                <br>
+                <br>
+                <div class="circle-img">
+                    <img src="./assets/img/vision.png" alt="">
+                </div>
+                <span style="font-weight: bold; font-size: 19px;">Visión</span>
+                <br>
+                <p style="font-weight: bold; font-size: 18px; color: #77225F;">Ch’ieltik aspira a que las y los jóvenes
+                    mayas ejerzan sus derechos con plenitud y formen parte activa de sus comunidades, articulando
+                    acciones que repercutan positivamente en sus vidas y su entorno.</p>
+                <br>
+                <br>
+                <br>
+                <div class="circle-img">
+                    <img src="./assets/img/principios.png" alt="">
+                </div>
+                <span style="font-weight: bold; font-size: 19px;">Principios</span>
+                <br>
+                <p style="font-weight: bold; font-size: 18px; color: #77225F;">
+                    Nuestro trabajo se basa en cuatro
+                    principios que retoman la sabiduria de los pueblos mesoamericanos y las practicas de la plena
+                    consciencia.</p>
+                <ol class="list">
+                    <li style="font-weight: bold; font-size: 18px; color: #77225F;">
+                        Sabernos que no somos seres individuales, sino que actuamos y Somos en conjunto con los demás.
+                    </li>
+                    <li style="font-weight: bold; font-size: 18px; color: #77225F;">
+                        Reconocemos que las diferencias de ideas, experiencias, formas de actuar y ver el mundo, son una
+                        fuente de enriquecimiento y el respeto a estas diferencias es fundamental para una sociedad
+                        incluyente.
+                    </li>
+                    <li style="font-weight: bold; font-size: 18px; color: #77225F;">
+                        Contribuimos a crear entornos armoniosos donde las personas se sientan respetadas, 'y buscaremos
+                        colaborar en la solucién de conflictos tanto entre las personas como entre las distintas
+                        comunidades.
+                    </li>
+                    <li style="font-weight: bold; font-size: 18px; color: #77225F;">
+                        Buscamos consolidar redes de apoyo entre las ‘personas y las organizaciones con quienes
+                        desarrollamos nuestro quehacer profesional
+                    </li>
+                </ol>
+            </div>
+        </section>
+    </div>
+    <button id="scrollToTopBtn" onclick="scrollToTop()">↑</button>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="footer-header">
+            <div class="form-container">
+                <img src="./assets/img/Logo-1.png" alt="" height="100px">
+                <i class="fa-regular fa-envelope"
+                    style="color: #76225e; transform: scale(2.5); margin-left: 20px;  margin-right: 20px;"></i>
+                <span style="font-size: 23px; font-weight: bold; margin-right: 30px;">Suscríbete</span>
+                <form class="footer-form">
+                    <input class="email-footer" type="email" placeholder="Direccción de Correo" />
+                    <button class="subscribe footer-color" type="submit">SUSCRÍBETE</button>
+                </form>
+            </div>
+        </div>
+        <div class="footer-info">
+            <div class="info-container">
+                <div class="part">
+                    <header class="footer-title">
+                        <i class="fa-solid fa-hand iconF"></i>
+                        <div class="footer-title-in">
+                            <span class="titleC">Donación por elección</span>
+                            <span class="titleQ footer-color">Titulo</span>
+                        </div>
+                    </header>
+                    <div class="d-col part-text footer-color">
+                        <span>
+                            Prevents our being able to do we like best, every pleasures is every pain avoided.
+                        </span>
+                        <button class="join footer-color">ÚNETE</button>
+                    </div>
+                </div>
+                <div class="part">
+                    <span class="titleQ footer-color">
+                        Donaciones
+                    </span>
+                    <div class="part-text">
+                        <ul class="donation-list">
+                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                                <li>Donaciones</li>
+                            </div>
+                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                                <li>Programas</li>
+                            </div>
+                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
+                                <li>Contacto</li>
+                            </div>
+
+                        </ul>
+                    </div>
+                </div>
+                <div class="part">
+                    <header class="footer-title">
+                        <i class="fa-solid fa-box-tissue iconF"></i>
+                        <div class="footer-title-in">
+                            <span class="titleC">Ch’ieltik</span>
+                            <span class="titleQ footer-color">Apoyando a jovenes</span>
+                        </div>
+                    </header>
+                    <div class="d-col part-text footer-color">
+                        <span class="titleQ">5555634780</span>
+                        <span>info@chieltik.org</span>
+
+                        <span class="footer-color"
+                            style="margin-top: 15px; font-size: 18px; font-weight: bold  ;">Oficinas</span>
+                        <span>Insurgentes Sur 1409 B, Benito Juárez, CDMX.</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer-end">
+            <div class="footer-end-container" style="color: gray; font-size: 18px;">
+                <span>&#169;<span id="year"></span>
+                    <span class="footer-color">
+                        Chieltik
+                    </span>
+                    Todos los derechos reservados.
+                </span>
+                <span class="ways-donate footer-color">Formas de donar: <i class="fa-brands fa-cc-paypal"
+                        style="color: gray;"></i></span>
+
+            </div>
+        </div>
+    </footer>
+
+    <script src="main.js"></script>
+</body>
+
+</html>