AldrickChavarria
/
Chieltik


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557
							<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blogs</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

        .carousel {
            position: relative;
            max-width: 100%;
            margin: auto;
            overflow: hidden;
        }

        .carousel-inner {
            display: flex;
            width: 300%;
            transition: transform 0.5s ease;
        }

        .carousel-item {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
            position: relative;
        }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }

        .carousel-caption {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            text-align: left;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
            z-index: 2;
        }


        .carousel-caption h2 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .carousel-caption p {
            font-size: 1rem;
            margin-bottom: 20px;
        }

        .carousel-caption a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
        }

        .carousel-control-prev,
        .carousel-control-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2rem;
            color: white;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            cursor: pointer;
            border-radius: 50%;
        }

        .carousel-control-prev {
            left: 10px;
        }

        .carousel-control-next {
            right: 10px;
        }

        .carousel-indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .carousel-indicators button {
            width: 10px;
            height: 10px;
            background-color: white;
            border: none;
            margin: 0 5px;
            border-radius: 50%;
            cursor: pointer;
        }

        .carousel-indicators button.active {
            background-color: gray;
        }

        @media (max-width: 768px) {
            .carousel-caption h2 {
                font-size: 1.5rem;
            }

            .carousel-caption p {
                font-size: 0.9rem;
            }
        }

        .profiles {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .profile {
            display: flex;
            flex-direction: column;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: hidden;
            max-width: 800px;
            width: 100%;
        }

        .profile-image img {
            width: 100%;
            height: auto;
            border-bottom: 5px solid #000;
        }

        .profile-content {
            padding: 20px;
        }

        .instagram-button {
            display: inline-block;
            padding: 10px 20px;
            background-color: black;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .instagram-button:hover {
            background-color: #333;
        }

        .event {
            margin: 20px auto;
            padding: 20px;
            width: 50%;
            max-width: 1280px;
            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;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin-bottom: 15px;
        }

        @media (min-width: 768px) {
            .profiles {
                flex-direction: column;
                justify-content: space-around;
                flex-wrap: wrap;
                padding: 10px;
            }

            .profile {
                flex-direction: row;
                max-width: 45%;
            }

            .profile-image img {
                width: 300px;
                height: 100%;
                object-fit: cover;
            }

            .profile-content {
                padding: 20px;
                flex: 1;
            }
        }
    </style>
    <link rel="stylesheet" href="./assets/css/styles.css">
    <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>

<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="./equipo.html">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.html">Historias de éxito</a></li>
                        <li><a href="Blogs.html">Blogs</a></li>
                        <li><a href="eventos.html">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.linkedin.com/company/chieltik"><i class="fa-brands fa-linkedin-in"></i></a>
            <a href="https://www.facebook.com/Chieltik/"><i class="fa-brands fa-facebook-f"></i></a>
            <a href="https://www.youtube.com/c/Chieltik/"><i class="fa-brands fa-youtube"></i></a>
            <a href="https://www.instagram.com/chieltik/"><i class="fa-brands fa-instagram"></i></a>
            <a href="https://www.chieltik.org/"><i class="fa-brands fa-google-plus-g"></i></a>
        </div>
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

    <div class="carousel">
        <div class="carousel-inner" id="carouselInner">
            <div class="carousel-item">
                <img src="assets/img/20200212_090417.jpg" alt="Día de la Mujer">
                <div class="carousel-caption">
                    <p>October 23, 2017</p>
                    <h2>PREMIO VIDANTA 2017</h2>
                    <a href="#">Ver Post →</a>
                </div>
            </div>
            <div class="carousel-item">
                <img src="assets/img/20200212_092015.jpg" alt="Día Mundial del Cáncer">
                <div class="carousel-caption">
                    <p>April 7, 2017</p>
                    <h2>EL CAMINO CH'IELTIK APENAS COMIENZA</h2>
                    <a href="#">Ver Post →</a>
                </div>
            </div>
            <div class="carousel-item">
                <img src="assets/img/20200212_125208.jpg" alt="Día del Voluntariado">
                <div class="carousel-caption">
                    <p>August 10, 2022</p>
                    <h2>LA VOZ DE LOS JÓVENES CH'IELTIK LLEGA A LAS ...</h2>
                    <a href="#">Ver Post →</a>
                </div>
            </div>
        </div>

        <div class="carousel-control-prev" onclick="prevSlide()">&#10094;</div>
        <div class="carousel-control-next" onclick="nextSlide()">&#10095;</div>

        <div class="carousel-indicators" id="carouselIndicators">
            <button class="active" onclick="goToSlide(0)"></button>
            <button onclick="goToSlide(1)"></button>
            <button onclick="goToSlide(2)"></button>
        </div>
    </div>

    <div class="event">
        <div class="event-header">
            <p style="color: red;">March 11, 2022</p>
            <h3 style="text-align: center;">Todas las mujeres tenemos la capacidad de realizarnos y demostrar nuestro
                potencial</h3>
        </div>
        <p>Los roles de género siguen estando presentes, acentuando la desigualdad: desde niñas no se nos permite
            ejercer nuestro liderazgo ni participar de muchas actividades.</p>
        <p style="color: red;">leer mas </p>
    </div>

    <div class="event">
        <div class="event-header">
            <p style="color: red;">March 8, 2022</p>
            <h3 style="text-align: center;">Un mañana sostenible es posible reciclando prendas con la intervención de
                artesanas indígenas de Chiapas</h3>
        </div>
        <p>La ONU-Mujeres definió que el tema de este 8 de Marzo verse sobre la “Igualdad de género hoy para un mañana
            sostenible” y se reconozca la contribución de las mujeres y las niñas
            de todo el mundo que lideran esfuerzos de respuesta, mitigación y adaptación al cambio climático para
            construir un futuro más sostenible para todas las personas. En nuestro nuevo blog Ch’ieltik,
            tenemos como pluma invitada a la diseñadora de modas Alejandra López quien nos comparte de qué trata su
            nuevo
            proyecto artístico que involucra a artesanas de Chiapas y el impacto que este puede tener sobre nuestro
            entorno medioambiental.</p>
        <p style="color: red;">leer mas </p>
    </div>

    <div class="event">
        <div class="event-header">
            <p style="color: red;">February 22, 2022</p>
            <h3 style="text-align: center;">lenguas maternas son orgullo de los pueblos originarios y es nuestro derecho
                expresarlas sin temor a la discriminación</h3>
        </div>
        <p>LA LENGUA MATERNA es el primer idioma que aprende una persona durante sus primeros años de vida. Lo utilizará
            como un instrumento
            para pensar y comunicarse. La expresión ”lengua materna” se utiliza porque en las comunidades primitivas era
            el padre el que salía a
            proveer de alimentos a la familia y la madre quien se ocupaba y enseñaba a los hijos e hijas en su propia
            lengua</p>
        <p style="color: red;">leer mas </p>
    </div>

    <section class="profiles">
        <div class="profile">
            <div class="profile-image">
                <img src="assets/img/Imagen2.jpg" alt="Andrés Ta Chikinib">
            </div>
            <div class="profile-content">
                <h2>ANDRÉS TA CHIKINIB</h2>
                <p style="padding: 5px;"><strong>(José Andrés Hernández Pérez)</strong></p>
                <p style="padding: 5px;"><b>Ganador del Premio Nacional de la Juventud 2020-2021 en la categoría de
                        Fortalecimiento a la Cultura Indígena. </b></p>
                <p style="font-size: 10px;">Originario de Chiquinivalvo, municipio de Zinacantán, Chiapas (1997),
                    hablante de la lengua tsotsil. Licenciado en Comunicación por la Universidad Autónoma de Chiapas
                    (UNACH). Promotor de la lengua tsotsil, traductor, poeta, realizador de contenidos para redes
                    sociales. En 2020 crea de forma independiente Jts’ibatik li jk’optike (Escribamos nuestra lengua),
                    una serie de videos publicados en YouTube y Facebook con la finalidad de seguir promoviendo la
                    alfabetización en lengua tsotsil. En 2019 participó en la traducción del tsotsil al español, de la
                    película documental “Kuxlejal” (Vida), producido por Vientos Culturales A. C.</p>
                <a href="#" class="instagram-button" style="margin-top: 10px;">Instagram</a>
            </div>
        </div>

        <div class="profile">
            <div class="profile-image">
                <img src="assets/img/Imagen1.jpg" alt="Claudia Sántiz">
            </div>
            <div class="profile-content">
                <h2>CLAUDIA SÁNTIZ</h2>
                <p style="padding: 5px;"><strong>(Claudia Albertina Ruiz Sántiz)</strong></p>
                <p style="font-size: 10px;">Originaria de San Juan Chamula, Chiapas (1987), hablante de la lengua
                    tsotsil. Estudió gastronomía en la Universidad de Ciencias y Artes de Chiapas, siendo la primera
                    mujer indígena en ingresar y graduarse de la Unicah. En 2012 publicó “Recetario Chamula”, en tsotsil
                    y español. Trabajó en Pujol, el restaurante de Enrique Olvera; un año después estuvo en Máximo
                    Bistrot de Lalo García, durante tres años trabajó en el restaurante DUO Salado y Dulce de Estefanía
                    Robles y David Müller en Ciudad de México. En 2016 abrió su propio restaurante, Kokono’, en donde
                    resalta las costumbres culinarias de Chiapas, mezclando técnicas modernas con los ingredientes y
                    platillos típicos del estado.</p>
                <a href="#" class="instagram-button" style="margin-top: 10px;">Instagram</a>
            </div>
        </div>

        <div class="profile">
            <div class="profile-image">
                <img src="assets/img/Imagen1.jpg" alt="Claudia Sántiz">
            </div>
            <div class="profile-content">
                <h2>MARÍA SOJOB</h2>
                <p style="padding: 5px;"><strong>(María Dolores Arias Martínez)</strong></p>
                <p style="padding: 5px;"><b>Directora del documental Tote_Abuelo, Premio La Musa 2019</b></p>
                <p style="font-size: 10px;">Originaria de Chenalhó, Chiapas (1983), hablante de la lengua tsotsil.
                    Estudió la carrera en Ciencias de la Comunicación en la Universidad Autónoma de Chiapas y la
                    maestría en Cine Documental en la Universidad de Chile. Sus documentales han sido proyectados en
                    muestras y festivales de Cine a nivel nacional e internacional, entre los que destacan Berlinale,
                    Ficvaldivia, Edimburgh International Film Festival, FICMAYAB’, ganadora del Festival de Cine y Video
                    Indígena de Morelia en 2016, con su documental Bankilal (El hermano mayor). Integrante del Sistema
                    Nacional de Creadores de Arte del FONCA. En 2019 obtuvo el Premio La Musa, al Mejor Documental
                    realizado por una mujer en el Festival Internacional de Cine de Morelia (FICM), fue galardonada en
                    la categoría de Premio Ambulante a Documental. Obtuvo el reconocimiento al mejor documental mexicano
                    hecho por mujeres, el cual es otorgado por la Asociación de Mujeres en el Cine y la Televisión
                    (USA), participó en el Festival Zanate 2019. Participó en el primer Foro "Cineastas Indígenas
                    mexicanas" en el 17° Festival Internacional de Cine de Morelia (FICM).</p>
                <a href="#" class="instagram-button" style="margin-top: 10px;">Instagram</a>
            </div>
        </div>
    </section>

    <!-- 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>
        let currentIndex = 0;
        const totalSlides = document.querySelectorAll('.carousel-item').length;

        function updateCarousel() {
            const carouselInner = document.getElementById('carouselInner');
            const indicators = document.querySelectorAll('.carousel-indicators button');
            carouselInner.style.transform = `translateX(-${currentIndex * (100 / totalSlides)}%)`;
            indicators.forEach((indicator, index) => {
                indicator.classList.toggle('active', index === currentIndex);
            });
        }

        function nextSlide() {
            currentIndex = (currentIndex + 1) % totalSlides;
            updateCarousel();
        }

        function prevSlide() {
            currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
            updateCarousel();
        }

        function goToSlide(index) {
            currentIndex = index;
            updateCarousel();
        }

        document.addEventListener('DOMContentLoaded', () => {
            updateCarousel();
        });
    </script>

</body>

</html>