首頁 探索 說明
註冊 登入
AldrickChavarria
/
Chieltik
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Proyecto junto

EmilianoChavarria 1 年之前
父節點
ec5eb9024a
當前提交
55b5e86459
共有 32 個文件被更改，包括 2163 次插入 和 429 次删除
分割檢視 顯示文件統計
  1. 557 0
      Blogs.html
  2. 13 20
      Contexto.html
  3. 303 0
      Historias.html
  4. 13 20
      LineadelTiempo.html
  5. 244 228
      Programas.html
  6. 118 0
      assets/css/equipo.css
  7. 79 11
      assets/css/home.css
  8. 二進制
      assets/img/20200212_090417.jpg
  9. 二進制
      assets/img/20200212_092015.jpg
  10. 二進制
      assets/img/20200212_125208.jpg
  11. 二進制
      assets/img/Imagen1.jpg
  12. 二進制
      assets/img/Imagen2.jpg
  13. 二進制
      assets/img/Imagen3.jpg
  14. 二進制
      assets/img/Imagen4.jpg
  15. 二進制
      assets/img/equipo/Carlos Meza Lavaniegos, .jpg
  16. 二進制
      assets/img/equipo/Erik José Hernández Reyes, Coordinador estatal .jpg
  17. 二進制
      assets/img/equipo/Lizeth Jazmin Vásquez Lòpez_ Coordinadora Municipal Las Margaritas .jpg
  18. 二進制
      assets/img/equipo/Montzerrat.jpg
  19. 二進制
      assets/img/equipo/Norma Inés Barreiro Garcia.jpg
  20. 二進制
      assets/img/equipo/alexis.jpg
  21. 二進制
      assets/img/equipo/andy.jpg
  22. 二進制
      assets/img/equipo/jhony.jpg
  23. 二進制
      assets/img/equipo/manu.jpg
  24. 二進制
      assets/img/equipo/marco.jpg
  25. 二進制
      assets/img/equipo/marile.jpg
  26. 二進制
      assets/img/equipo/marilu.jpg
  27. 317 99
      equipo.html
  28. 54 0
      equipo.js
  29. 383 0
      eventos.html
  30. 47 12
      index.html
  31. 28 32
      main.js
  32. 7 7
      mision.html

+ 557 - 0
Blogs.html
查看文件 

@@ -0,0 +1,557 @@
 
+<!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>

+ 13 - 20
Contexto.html
查看文件 

@@ -89,12 +89,12 @@
 
         </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="#">Equipos</a></li>
 
+                        <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>
 
@@ -110,9 +110,9 @@
 
                 <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="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>
 
@@ -121,11 +121,11 @@
 
             </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.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>
 
@@ -185,6 +185,7 @@
 
         </div>
 
     </div>
 
 
+    <!-- Footer -->
 
     <footer class="footer">
 
         <div class="footer-header">
 
             <div class="form-container">
 
@@ -193,17 +194,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">
 
@@ -246,7 +239,7 @@
 
                     <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">Ch’ieltik</span>
 
                             <span class="titleQ footer-color">Apoyando a jovenes</span>
 
                         </div>
 
                     </header>

+ 303 - 0
Historias.html
查看文件 

@@ -0,0 +1,303 @@
 
+<!DOCTYPE html>
 
+<html lang="es">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Historias de Éxito</title>
 
+    <style>
 
+        body {
 
+            font-family: Arial, sans-serif;
 
+            background-color: #f3f3f3;
 
+            margin: 0;
 
+            padding: 0;
 
+        }
 
+
 
+        .container {
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 
+            gap: 20px;
 
+            padding: 20px;
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+        }
 
+
 
+        .card {
 
+            background-color: white;
 
+            border-radius: 10px;
 
+            overflow: hidden;
 
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
+            transition: transform 0.2s;
 
+        }
 
+
 
+        .card:hover {
 
+            transform: scale(1.05);
 
+        }
 
+
 
+        .card img {
 
+            width: 100%;
 
+            height: 200px;
 
+            object-fit: cover;
 
+            display: block;
 
+            margin: 0 auto;
 
+        }
 
+
 
+        .card-content {
 
+            padding: 15px;
 
+        }
 
+
 
+        .date {
 
+            color: white;
 
+            background-color: #800080;
 
+            padding: 5px 10px;
 
+            border-radius: 5px;
 
+            display: inline-block;
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .subtitle {
 
+            color: #33A466;
 
+            font-weight: bold;
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .title {
 
+            font-size: 1em;
 
+            color: #333;
 
+            margin-bottom: 15px;
 
+            height: 70px;
 
+            overflow: hidden;
 
+            text-overflow: ellipsis;
 
+            display: -webkit-box;
 
+            -webkit-box-orient: vertical;
 
+        }
 
+
 
+        .card-footer {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+
 
+        .read-more {
 
+            text-decoration: none;
 
+            color: #800080;
 
+            font-weight: bold;
 
+            cursor: pointer;
 
+        }
 
+
 
+        @media (max-width: 768px) {
 
+            .container {
 
+                grid-template-columns: 1fr;
 
+            }
 
+        }
 
+    </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="container">
 
+        <div class="card">
 
+            <img src="assets/img/Imagen1.jpg" alt="Historia de éxito 1">
 
+            <div class="card-content">
 
+                <div class="date">José Antonio, 19 años</div>
 
+                <div class="subtitle">Historias de Éxito</div>
 
+                <div class="title">José Antonio es un joven, indígena Tsotsil, que vive en El Pozo, municipio de San
 
+                    Juan Cancuc, Chiapas junto a sus dos hermanas, su hermano y su madre, quienes se dedican a la
 
+                    agricultura del café.
 
+                </div>
 
+                <div class="card-footer">
 
+                    <a href="#" class="read-more">Leer más</a>
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="card">
 
+            <img src="assets/img/Imagen2.jpg" alt="Historia de éxito 2">
 
+            <div class="card-content">
 
+                <div class="date">Josué Daniel Santiz Hernández, 20 años.</div>
 
+                <div class="subtitle">Historias de Éxito</div>
 
+                <div class="title">Josué es un joven indígena tzotzil, que vive en la comunidad Nuevo San Juan Chamula,
 
+                    municipio de Las Margaritas, Chiapas, junto con sus padres y hermanos, quienes se dedican al
 
+                    comercio y al trabajo de campo</div>
 
+                <div class="card-footer">
 
+                    <a href="#" class="read-more">Leer más</a>
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="card">
 
+            <img src="assets/img/Imagen3.jpg" alt="Historia de éxito 3">
 
+            <div class="card-content">
 
+                <div class="date">Juliana Pedro Ramos, 22 años</div>
 
+                <div class="subtitle">Historias de Éxito</div>
 
+                <div class="title">Juliana, es originaria de la comunidad Nuevo San Juan Chamula, Municipio de Las
 
+                    Margaritas Chiapas hablante de la lengua materna K’anjob’al, viviendo con sus abuelos maternos en la
 
+                    misma comunidad debido a que su mamá vive y trabaja en E.U.A desde pequeña se creció ahí debido a
 
+                    las circunstancias económicas que vivían.</div>
 
+                <div class="card-footer">
 
+                    <a href="#" class="read-more">Leer más</a>
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="card">
 
+            <img src="assets/img/Imagen4.jpg" alt="Historia de éxito 4">
 
+            <div class="card-content">
 
+                <div class="date">Frida Domínguez</div>
 
+                <div class="subtitle">Historias de Éxito</div>
 
+                <div class="title">Frida es una joven con gran iniciativa, vive en la comunidad de Chiloljá municipio de
 
+                    San Juan Cancuc. Es de origen tseltal, vive con sus padres que se dedican a la agricultura. En su
 
+                    casa viven 11 personas contando a su papá, mamá, 4 hermanitos y 5 hermanas.</div>
 
+                <div class="card-footer">
 
+                    <a href="#" class="read-more">Leer más</a>
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+    </div>
 
+    <!-- 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>
 
+</body>
 
+
 
+</html>

+ 13 - 20
LineadelTiempo.html
查看文件 

@@ -176,12 +176,12 @@
 
         </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="#">Equipos</a></li>
 
+                        <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>
 
@@ -197,9 +197,9 @@
 
                 <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="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>
 
@@ -208,11 +208,11 @@
 
             </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.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>
 
@@ -429,6 +429,7 @@
 
 
     </div>
 
 
+    <!-- Footer -->
 
     <footer class="footer">
 
         <div class="footer-header">
 
             <div class="form-container">
 
@@ -437,17 +438,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">
 
@@ -490,7 +483,7 @@
 
                     <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">Ch’ieltik</span>
 
                             <span class="titleQ footer-color">Apoyando a jovenes</span>
 
                         </div>
 
                     </header>

+ 244 - 228
Programas.html
查看文件 

@@ -1,115 +1,133 @@
 
 <!DOCTYPE html>
 
 <html lang="es">
 
+
 
 <head>
 
-<meta charset="UTF-8">
 
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-<title>Programas</title>
 
+    <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) {
 
+    <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 {
 
-            width: 30%;
 
+            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);
 
         }
 
-        /* .timeline-container {
 
+
 
+        .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>
 
+        }
 
+    </style>
 
 </head>
 
+
 
 <body>
 
     <nav class="navbar">
 
         <div class="navbar-left">
 
@@ -121,12 +139,12 @@
 
         </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="#">Equipos</a></li>
 
+                        <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>
 
@@ -142,9 +160,9 @@
 
                 <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="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>
 
@@ -153,11 +171,11 @@
 
             </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.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>
 
@@ -184,148 +202,146 @@
 
         </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 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>
 
 
-    <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 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>
 
-        <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 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>
 
-                <div style="border-bottom: 2px solid #F04F4A; width: 30px; margin-left: 150px;"></div>
 
-                <a href="#">Más detalles</a>
 
+            <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 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 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>
 
-    <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>
 
+    <!-- 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>
 
-    <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 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>
 
-                </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.
 
+                </div>
 
+                <div class="part">
 
+                    <span class="titleQ footer-color">
 
+                        Donaciones
 
                     </span>
 
-                    <button class="join footer-color">ÚNETE</button>
 
+                    <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>
 
-            <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 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>
 
 
-                    </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>
 
+                        <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>
 
-                </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
 
+        <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>
 
-                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>
 
+                <span class="ways-donate footer-color">Formas de donar: <i class="fa-brands fa-cc-paypal"
 
+                        style="color: gray;"></i></span>
 
 
+            </div>
 
         </div>
 
-    </div>
 
-</footer>
 
+    </footer>
 
 </body>
 
-</html>
 
+
 
+</html>

+ 118 - 0
assets/css/equipo.css
查看文件 

@@ -0,0 +1,118 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+}
 
+
 
+body {
 
+    background-image: url(../img/fondo.png);
 
+
 
+}
 
+
 
+.container-all{
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+
 
+.carousel-container {
 
+    width: 80%;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    overflow: hidden;
 
+}
 
+
 
+.carousel {
 
+    display: flex;
 
+    justify-content: center;
 
+}
 
+
 
+.carousel-track {
 
+    display: flex;
 
+    transition: transform 0.4s ease-in-out;
 
+}
 
+
 
+.card-car {
 
+    min-width: 200px;
 
+    margin: 10px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    font-size: 24px;
 
+    border-radius: 10px;
 
+    filter: grayscale(100%);
 
+    transition: filter 0.3s ease;
 
+}
 
+
 
+.card-car.active {
 
+    filter: grayscale(0%);
 
+}
 
+
 
+.carousel-controls {
 
+    margin-top: 15px;
 
+    display: flex;
 
+    justify-content: space-between;
 
+}
 
+
 
+.carousel-btn {
 
+    margin: 0 10px;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    background-color: #ffffff;
 
+    color: #76225e;
 
+    font-weight: bold;
 
+    font-size: 20px;
 
+    border: none;
 
+    width: 50px;
 
+    height: 50px;
 
+    cursor: pointer;
 
+    border-radius: 50%;
 
+}
 
+
 
+
 
+.team {
 
+    width: 80%;
 
+}
 
+
 
+.team img {
 
+    height: 70px;
 
+    width: 70px;
 
+    border-radius: 50%;
 
+    margin: 0 10px;
 
+}
 
+
 
+.member {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+    margin-top: 40px;
 
+}
 
+
 
+.name-bg {
 
+    margin-top: 15px;
 
+    width: 40%;
 
+    background-color: #76225e;
 
+    text-align: center;
 
+}
 
+
 
+.name-bgF {
 
+    margin-top: 15px;
 
+    width: 40%;
 
+    background-color: #03C0A8;
 
+    text-align: center;
 
+}
 
+
 
+.name {
 
+    font-size: 22px;
 
+    color: white;
 
+}
 
+
 
+.position {
 
+    margin-top: 10px;
 
+    font-size: 22px;
 
+    color: rgb(37, 37, 37);
 
+}

+ 79 - 11
assets/css/home.css
查看文件 

@@ -105,19 +105,21 @@ body {
 
     padding-right: 20px;
 
     width: 100%;
 
     max-width: 65%;
 
-    position: relative; 
+    position: relative;
 
 }
 
 
-.other-content .bg-img{
 
+.other-content .bg-img {
 
     border-radius: 50%;
 
     width: 100%;
 
     height: 100%;
 
 }
 
 
+/* ----------Carrussel de historias de exito------------ */
 
+
 
 .carousel-container {
 
-    position: absolute; 
-    bottom:-60px; 
-    left: 0; 
+    position: absolute;
 
+    bottom: -60px;
 
+    left: 0;
 
     display: flex;
 
     flex-direction: column;
 
     align-items: center;
 
@@ -127,7 +129,7 @@ body {
 
     display: flex;
 
     transition: transform 0.4s ease-in-out;
 
     overflow: hidden;
 
-    width: 380px;
 
+    width: 390px;
 
     height: 600px;
 
 }
 
 
@@ -148,24 +150,90 @@ body {
 
     border-radius: 10px;
 
 }
 
 
-.bubble{
 
+.bubble {
 
     height: 500px;
 
-    width: 375px;
 
+    width: 425px;
 
     background-image: url(../img/pensamiento.png);
 
     background-size: cover;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+
 
+.bubble-content {
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    justify-content: center;
 
+    width: 80%;
 
+}
 
+
 
+
 
+.purple-circle {
 
+    background-color: #76225e;
 
+    color: white;
 
+    width: 60px;
 
+    height: 60px;
 
+    border-radius: 100%;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+
 
+.bubble-title {
 
+    color: #76225e;
 
+    font-size: 22px;
 
+    font-weight: bold;
 
+    margin-top: 20px;
 
+}
 
+
 
+.bubble-text{
 
+    padding-left: 15px;
 
+    padding-right: 15px;
 
+    color: #000;
 
+    font-size: 17px;
 
+    margin-top: 20px;   
+}
 
+
 
+.bubble-name{
 
+    color: #2c2c2c;
 
+    font-size: 22px;
 
+    font-weight: bold;
 
+    margin-top: 20px;
 
+}
 
+
 
+.place{
 
+    font-size: 30px;
 
+    font-family: 'Caveat', cursive;
 
+    font-weight: 400;
 
+    color: #04BFAA;
 
+}
 
+
 
+.card-car img {
 
+    margin-left: 150px;
 
+    margin-top: -20px;
 
 }
 
 
 .carousel-controls {
 
+    margin-top: -50px;
 
     display: flex;
 
     justify-content: space-between;
 
     margin-top: 15px;
 
 }
 
 
 .carousel-btn {
 
-    background-color: #333;
 
-    color: #fff;
 
+    margin-right: 10px;
 
+    margin-left: 10px;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    background-color: #ffffff;
 
+    color: #76225e;
 
+    font-weight: bold;
 
+    font-size: 20px;
 
     border: none;
 
-    padding: 10px;
 
+    width: 50px;
 
+    height: 50px;
 
     cursor: pointer;
 
     border-radius: 50%;
 
 }

二進制
assets/img/20200212_090417.jpg
查看文件


二進制
assets/img/20200212_092015.jpg
查看文件


二進制
assets/img/20200212_125208.jpg
查看文件


二進制
assets/img/Imagen1.jpg
查看文件


二進制
assets/img/Imagen2.jpg
查看文件


二進制
assets/img/Imagen3.jpg
查看文件


二進制
assets/img/Imagen4.jpg
查看文件


二進制
assets/img/equipo/Carlos Meza Lavaniegos, .jpg
查看文件


二進制
assets/img/equipo/Erik José Hernández Reyes, Coordinador estatal .jpg
查看文件


二進制
assets/img/equipo/Lizeth Jazmin Vásquez Lòpez_ Coordinadora Municipal Las Margaritas .jpg
查看文件


二進制
assets/img/equipo/Montzerrat.jpg
查看文件


二進制
assets/img/equipo/Norma Inés Barreiro Garcia.jpg
查看文件


二進制
assets/img/equipo/alexis.jpg
查看文件


二進制
assets/img/equipo/andy.jpg
查看文件


二進制
assets/img/equipo/jhony.jpg
查看文件


二進制
assets/img/equipo/manu.jpg
查看文件


二進制
assets/img/equipo/marco.jpg
查看文件


二進制
assets/img/equipo/marile.jpg
查看文件


二進制
assets/img/equipo/marilu.jpg
查看文件


+ 317 - 99
equipo.html
查看文件 

@@ -4,120 +4,338 @@
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>Carrusel de Cards</title>
 
-    <style>
 
-        * {
 
-            box-sizing: border-box;
 
-            margin: 0;
 
-            padding: 0;
 
-        }
 
-
 
-        body {
 
-            display: flex;
 
-            justify-content: center;
 
-            align-items: center;
 
-            height: 100vh;
 
-            background-color: #f4f4f4;
 
-        }
 
+    <title>Carrusel de Equipo Semillero</title>
 
+    <link rel="stylesheet" href="./assets/css/styles.css">
 
+    <link rel="stylesheet" href="./assets/css/equipo.css">
 
+    <link rel="stylesheet" href="./assets/css/navbar.css">
 
+    <link rel="stylesheet" href="./assets/css/footer.css">
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.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">
 
+</head>
 
 
-        .carousel-container {
 
-            display: flex;
 
-            flex-direction: column;
 
-            align-items: center;
 
-            position: relative;
 
-        }
 
+<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>
 
 
-        .carousel {
 
-            display: flex;
 
-            transition: transform 0.4s ease-in-out;
 
-            overflow: hidden;
 
-            width: 300px;
 
-            height: 200px;
 
-        }
 
+                    </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>
 
 
-        .carousel-track {
 
-            display: flex;
 
-            transition: transform 0.4s ease-in-out;
 
-        }
 
+                    </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>
 
 
-        .card {
 
-            min-width: 100%;
 
-            height: 100%;
 
-            background-color: #fff;
 
-            display: flex;
 
-            justify-content: center;
 
-            align-items: center;
 
-            font-size: 24px;
 
-            border: 1px solid #ddd;
 
-            border-radius: 10px;
 
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
-        }
 
+    
 
-        .carousel-controls {
 
-            display: flex;
 
-            justify-content: space-between;
 
-            width: 120px;
 
-            margin-top: 15px;
 
-        }
 
+    <div class="container-all">
 
+        <!-- <div class="carousel-container">
 
+            <div class="carousel">
 
+                <div class="carousel-track">
 
+                    <div class="card-car">
 
+                        <img src="./assets/img/personita.png" alt="">
 
+                        <span>Juanito1</span>
 
+                    </div>
 
+                    <div class="card-car">
 
+                        <img src="./assets/img/personita.png" alt="">
 
+                        <span>Juanito2</span>
 
+                    </div>
 
+                    <div class="card-car">
 
+                        <img src="./assets/img/personita.png" alt="">
 
+                        <span>Juanito3</span>
 
+                    </div>
 
+                    <div class="card-car">
 
+                        <img src="./assets/img/personita.png" alt="">
 
+                        <span>Juanito4</span>
 
+                    </div>
 
+                    <div class="card-car">
 
+                        <img src="./assets/img/personita.png" alt="">
 
+                        <span>Juanito5</span>
 
+                    </div>
 
+                    <div class="card-car">
 
+                        <img src="./assets/img/personita.png" alt="">
 
+                        <span>Juanito6</span>
 
+                    </div>
 
+                    <div class="card-car">
 
+                        <img src="./assets/img/personita.png" alt="">
 
+                        <span>Juanito7</span>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+    
+            <div class="carousel-controls">
 
+                <button id="prevBtn" class="carousel-btn"><i class="fa-solid fa-arrow-left"></i></button>
 
+                <button id="nextBtn" class="carousel-btn"><i class="fa-solid fa-arrow-right"></i></button>
 
+            </div>
 
+        </div> -->
 
+        
+        <!-- --------------Miembros del equipo---------------- -->
 
+        <div class="team">
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/Norma Inés Barreiro Garcia.jpg" alt="">
 
+                <div class="name-bg">
 
+                    <span class="name">Norma Inés Barreiro García</span>
 
+                </div>
 
+                <span class="position">Directora ejecutiva</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">**Estudió la licenciatura en
 
+                    Psicología,
 
+                    para la ella la educación en las y los más jóvenes
 
+                    originarios es muy importante, pues esta les permitirá tener más herramientas para su desarrollo y
 
+                    el desempeño de sus derechos.</span>
 
+            </div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/Carlos Meza Lavaniegos, .jpg" alt="">
 
+                <div class="name-bgF">
 
+                    <span class="name">Carlos Meza Lavaniegos</span>
 
+                </div>
 
+                <span class="position">Director de finanzas y administración</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originario de San Cristobal de las
 
+                    Casas, Chiapas. Licenciado en desarrollo sustentable, con maestría en Desarrollo Humano y recién
 
+                    terminó la maestría en liderazgo y dirección de centros educativos</span>
 
+            </div>
 
 
-        .carousel-btn {
 
-            background-color: #333;
 
-            color: #fff;
 
-            border: none;
 
-            padding: 10px;
 
-            cursor: pointer;
 
-            border-radius: 50%;
 
-        }
 
-    </style>
 
-</head>
 
+            <!-- ------------------- -->
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/marilu.jpg" alt="">
 
+                <div class="name-bgF">
 
+                    <span class="name">María Marilú Jiménez López</span>
 
+                </div>
 
+                <span class="position">Directora operativa</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">**Originario de San Cristobal de las
 
+                    Casas, Chiapas. Licenciado en desarrollo sustentable, con maestría en Desarrollo Humano y recién
 
+                    terminó la maestría en liderazgo y dirección de centros educativos</span>
 
+            </div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/Lizeth  Jazmin Vásquez Lòpez_ Coordinadora Municipal Las Margaritas .jpg"
 
+                    alt="">
 
+                <div class="name-bg">
 
+                    <span class="name">Lizeth Jazmín Vázquez López</span>
 
+                </div>
 
+                <span class="position">Coordinadora regional La Selva.</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Estudió la licenciatura en Psicología,
 
+                    para la ella la educación en las y los más jóvenes
 
+                    originarios es muy importante, pues esta les permitirá tener más herramientas para su desarrollo y
 
+                    el desempeño de sus derechos.</span>
 
+            </div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/Erik José Hernández Reyes, Coordinador estatal .jpg" alt="">
 
+                <div class="name-bgF">
 
+                    <span class="name">Erik José Hernández Reyes</span>
 
+                </div>
 
+                <span class="position">Coordinador regiónal Los Altos</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originario de San Cristóbal de las
 
+                    Casas, Chiapas. Licenciado en desarrollo sustentable y recién egresado de la maestría en Desarrollo
 
+                    Humano.</span>
 
+            </div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/jhony.jpg" alt="">
 
+                <div class="name-bgF">
 
+                    <span class="name">Jhonny Hernández López</span>
 
+                </div>
 
+                <span class="position">Directora operativa</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originario de Las Margaritas, Chiapas.
 
+                    Licenciado en Ciencias de la Educación por la universidad Valle Grijalva. </span>
 
+            </div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/Montzerrat.jpg" alt="">
 
+                <div class="name-bgF">
 
+                    <span class="name">Montzerrat Soto García</span>
 
+                </div>
 
+                <span class="position">Coordinadora de Comunicación Social</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">**Originario de San Cristobal de las
 
+                    Casas, Chiapas. Licenciado en desarrollo sustentable, con maestría en Desarrollo Humano y recién
 
+                    terminó la maestría en liderazgo y dirección de centros educativos</span>
 
+            </div>
 
+            <!-- ------------------------------------------------ -->
 
 
-<body>
 
-    <div class="carousel-container">
 
-        <div class="carousel">
 
-            <div class="carousel-track">
 
-                <div class="card">Card 1</div>
 
-                <div class="card">Card 2</div>
 
-                <div class="card">Card 3</div>
 
-                <div class="card">Card 4</div>
 
-                <div class="card">Card 5</div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/andy.jpg" alt="">
 
+                <div class="name-bg">
 
+                    <span class="name">Andrea Bautista Gómez</span>
 
+                </div>
 
+                <span class="position">Educadora comunitaria en Los Altos</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originaria de Amatenango del Valle,
 
+                    Chiapas, joven indígena tseltal y artesana alfarera. Ingresa a como educadora comunitaria de la
 
+                    comunidad de San Juan Cancuc, en Los Altos de Chiapas, en el año 2019. </span>
 
             </div>
 
-        </div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/marco.jpg" alt="">
 
+                <div class="name-bgF">
 
+                    <span class="name">Marco Antonio Hernández Pérez</span>
 
+                </div>
 
+                <span class="position">Promotor juvenil en Los Altos</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Nacido en la comunidad tseltal de
 
+                    Chiloljá municipio de San Juan Cancuc es hablante del tseltal, lengua indígena de los Altos de
 
+                    Chiapas. Marco tuvo la oportunidad de estudiar desde la primaria hasta la preparatoria sin salir de
 
+                    su
 
+                    comunidad.</span>
 
+            </div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/manu.jpg" alt="">
 
+                <div class="name-bgF">
 
+                    <span class="name">Manuel Heredia López</span>
 
+                </div>
 
+                <span class="position">Educador comunitario en Los Altos</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Ingreso por primera vez a IDEAS A.C. -
 
+                    Ch’ieltik en agosto de 2013 hasta diciembre de 2014, y reingreso en noviembre de 2019, durante el
 
+                    periodo fuera de la organización fue parte de las autoridades comunitarias de San Juan Chamula,
 
+                    desempeño como Tesorero de Educación.</span>
 
+            </div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/alexis.jpg" alt="">
 
+                <div class="name-bgF">
 
+                    <span class="name">Alexis Alfaro Jiménez</span>
 
+                </div>
 
+                <span class="position">Encargado de Monitoreo y evaluación</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">**Originario de San Cristobal de las
 
+                    Casas, Chiapas. Licenciado en desarrollo sustentable, con maestría en Desarrollo Humano y recién
 
+                    terminó la maestría en liderazgo y dirección de centros educativos</span>
 
+            </div>
 
+            <div class="member">
 
+                <img src="./assets/img/equipo/marile.jpg" alt="">
 
+                <div class="name-bgF">
 
+                    <span class="name">María Leticia Santiz Jiménez</span>
 
+                </div>
 
+                <span class="position">Promotora juvenil en La Selva</span>
 
+                <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originaria del Barrio de Sacsalum,
 
+                    municipio de Las Margaritas, Chiapas, hablante de la lengua tojolabal.
 
 
-        <!-- Contenedor de botones centrados -->
 
-        <div class="carousel-controls">
 
-            <button id="prevBtn" class="carousel-btn">⟨</button>
 
-            <button id="nextBtn" class="carousel-btn">⟩</button>
 
+                    Lety estudio en el Colegio de Bachilleres de Las Margaritas, su pasión por la información y respeto
 
+                    por su lengua originaria, la llevaron a participar por varios años años en una muy importante radio
 
+                    cultural indigenista de la frontera sur.</span>
 
+            </div>
 
         </div>
 
     </div>
 
 
-    <script>
 
-        const carouselTrack = document.querySelector('.carousel-track');
 
-        const cards = document.querySelectorAll('.card');
 
-        const prevBtn = document.getElementById('prevBtn');
 
-        const nextBtn = document.getElementById('nextBtn');
 
-
 
-        let currentIndex = 0;
 
-        const totalCards = cards.length;
 
+    <!-- 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>
 
 
-        function showCard(index) {
 
-            carouselTrack.style.transform = `translateX(${-index * 100}%)`;
 
-        }
 
+                        </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>
 
 
-        prevBtn.addEventListener('click', () => {
 
-            currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalCards - 1;
 
-            showCard(currentIndex);
 
-        });
 
+                        <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>
 
 
-        nextBtn.addEventListener('click', () => {
 
-            currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
 
-            showCard(currentIndex);
 
-        });
 
+            </div>
 
+        </div>
 
+    </footer>
 
 
-        setInterval(() => {
 
-            currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
 
-            showCard(currentIndex);
 
-        }, 3000);
 
-    </script>
 
+    <script src="./equipo.js"></script>
 
 </body>
 
 
-</html>
 
+</html>

+ 54 - 0
equipo.js
查看文件 

@@ -0,0 +1,54 @@
 
+const carouselTrack = document.querySelector('.carousel-track');
 
+const cards = Array.from(document.querySelectorAll('.card-car'));
 
+const prevBtn = document.getElementById('prevBtn');
 
+const nextBtn = document.getElementById('nextBtn');
 
+
 
+const totalCards = cards.length;
 
+let currentIndex = 0;
 
+const visibleCards = 0; // Número de tarjetas visibles
 
+const cardWidth = 200; // Ancho de cada tarjeta
 
+
 
+// Inicializa el carrusel
 
+function initializeCarousel() {
 
+    showCard(currentIndex);
 
+}
 
+
 
+// Función para mover el carrusel
 
+function showCard(index) {
 
+    const offset = (index - Math.floor(visibleCards / 2)) * cardWidth;
 
+    carouselTrack.style.transform = `translateX(${-offset}px)`;
 
+    updateCardColors(index);
 
+}
 
+
 
+// Función para actualizar las clases de color
 
+function updateCardColors(index) {
 
+    cards.forEach((card, i) => {
 
+        card.classList.remove('active');
 
+        // Asegura que la tarjeta del medio sea siempre a color
 
+        if (i === index+3) {
 
+            card.classList.add('active');
 
+        }
 
+    });
 
+}
 
+
 
+// Función para cambiar el índice y mostrar la nueva tarjeta
 
+function changeIndex(direction) {
 
+    if (direction === 'next') {
 
+        currentIndex = (currentIndex + 1) % totalCards;
 
+    } else if (direction === 'prev') {
 
+        currentIndex = (currentIndex - 1 + totalCards) % totalCards;
 
+    }
 
+    showCard(currentIndex);
 
+}
 
+
 
+nextBtn.addEventListener('click', () => {
 
+    changeIndex('next');
 
+});
 
+
 
+
 
+prevBtn.addEventListener('click', () => {
 
+    changeIndex('prev');
 
+});
 
+
 
+
 
+initializeCarousel();

+ 383 - 0
eventos.html
查看文件 

@@ -0,0 +1,383 @@
 
+<!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/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">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+        }
 
+
 
+        body {
 
+            background-image: url(../img/fondo.png);
 
+            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="./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="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">
 
+                    Eventos
 
+                </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-carrot" style="transform: scale(2);"></i></span>
 
+                <h3>Alimentacion del niño pequeno</h3>
 
+                <span class="year" style="background-color: #CC4242; border: 3px solid #F5A3A3;">2024</span>
 
+            </div>
 
+            <p>El <b>03 de noviembre de 2024</b> se llevara a cabo el evento de <b>Alimentación del niño pequeño: La
 
+                    importancia
 
+                    de una adecuada introducción de alimentos.</b> Esto con la con la consigna de poder dara conocer la
 
+                reelevancia que tiene la alimentacion a temprana edad y las ventajas que tiene sobre...</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-handshake" style="transform: scale(2);"></i></span>
 
+                <h3>Taller de Manejo de emociones</h3>
 
+                <span class="year" style="background-color: #8D79AA; border: 3px solid #b48df0;">2024</span>
 
+            </div>
 
+            <p>
 
+                Este <b>9 de julio</b> se llevó acabo un taller de sensibilización con el tema de <b> manejo de
 
+                    emociones</b>
 
+                con el objetivo de generar reflexión entre los docentes sobre el cuidado de las emociones con sus
 
+                alumnos para
 
+                formar espacios seguras.
 
+            </p>
 
+        </div>
 
+
 
+
 
+    </div>
 
+    <!-- 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>
 
+
 
+</body>
 
+
 
+</html>

+ 47 - 12
index.html
查看文件 

@@ -47,9 +47,9 @@
 
                 <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="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>
 
@@ -117,7 +117,7 @@
 
                 <span style="font-weight: bold; font-size: 40px; margin-top: 10px;">Historias de Éxito</span>
 
                 <span style="margin-top: 20px;">Puedes ver las historias de éxito de las personas que
 
                     ayudamos</span>
 
-                <a href="#" class="histories-btn" style="margin-top: 30px;">TODAS LAS HISTORIAS</a>
 
+                <a href="Historias.html" class="histories-btn" style="margin-top: 30px;">TODAS LAS HISTORIAS</a>
 
             </div>
 
             <div class="other-content">
 
                 <img src="./assets/img/img-section.jpg" alt="" class="bg-img">
 
@@ -125,25 +125,60 @@
 
                     <div class="carousel">
 
                         <div class="carousel-track">
 
                             <div class="card-car">
 
-                                <div class="bubble"></div>
 
-                                <img src="./assets/img/personita.png" alt="" >
 
+                                <div class="bubble">
 
+                                    <div class="bubble-content">
 
+                                        <div class="purple-circle">
 
+                                            <i class="fa-solid fa-quote-left"></i>
 
+                                        </div>
 
+                                        <span class="bubble-title">Tengo buenas experiencias</span>
 
+                                        <span class="bubble-text">Lorem ipsum dolor sit, amet consectetur adipisicing
 
+                                            elit. Modi omnis corporis quidem vel nisi aut, unde maxime! Est placeat
 
+                                            labore a</span>
 
+                                        <span class="bubble-name">Juanito Perez</span>
 
+                                        <span class="place">California</span>
 
+                                    </div>
 
+                                </div>
 
+                                <img src="./assets/img/personita.png" alt="">
 
                             </div>
 
                             <div class="card-car">
 
-                                <div class="bubble"></div>
 
+                                <div class="bubble">
 
+                                    <div class="bubble-content">
 
+                                        <div class="purple-circle">
 
+                                            <i class="fa-solid fa-quote-left"></i>
 
+                                        </div>
 
+                                        <span class="bubble-title">Tengo buenas experiencias</span>
 
+                                        <span class="bubble-text">Lorem ipsum dolor sit, amet consectetur adipisicing
 
+                                            elit. Modi omnis corporis quidem vel nisi aut, unde maxime! Est placeat
 
+                                            labore a</span>
 
+                                        <span class="bubble-name">Juanito Perez</span>
 
+                                        <span class="place">California</span>
 
+                                    </div>
 
+                                </div>
 
                                 <img src="./assets/img/personita.png" alt="">
 
                             </div>
 
                             <div class="card-car">
 
-                                <div class="bubble"></div>
 
+                                <div class="bubble">
 
+                                    <div class="bubble-content">
 
+                                        <div class="purple-circle">
 
+                                            <i class="fa-solid fa-quote-left"></i>
 
+                                        </div>
 
+                                        <span class="bubble-title">Tengo buenas experiencias</span>
 
+                                        <span class="bubble-text">Lorem ipsum dolor sit, amet consectetur adipisicing
 
+                                            elit. Modi omnis corporis quidem vel nisi aut, unde maxime! Est placeat
 
+                                            labore a</span>
 
+                                        <span class="bubble-name">Juanito Perez</span>
 
+                                        <span class="place">California</span>
 
+                                    </div>
 
+                                </div>
 
                                 <img src="./assets/img/personita.png" alt="">
 
                             </div>
 
-                            
+
 
                         </div>
 
                     </div>
 
 
-                    <!-- Contenedor de botones centrados -->
 
                     <div class="carousel-controls">
 
-                        <button id="prevBtn" class="carousel-btn">⟨</button>
 
-                        <button id="nextBtn" class="carousel-btn">⟩</button>
 
+                        <button id="prevBtn" class="carousel-btn"><i class="fa-solid fa-arrow-left"></i></button>
 
+                        <button id="nextBtn" class="carousel-btn"><i class="fa-solid fa-arrow-right"></i></button>
 
                     </div>
 
                 </div>
 
             </div>

+ 28 - 32
main.js
查看文件 

@@ -49,41 +49,37 @@ function scrollToTop() {
 
     window.scrollTo({ top: 0, behavior: 'smooth' });
 
 }
 
 
-// carrusel de personas
 
-const carouselTrack = document.querySelector('.carousel-track');
 
-const cards = document.querySelectorAll('.card-car');
 
-const prevBtn = document.getElementById('prevBtn');
 
-const nextBtn = document.getElementById('nextBtn');
 
-
 
-let currentIndex = 0;
 
-const totalCards = cards.length;
 
-movePercent = 100 / totalCards;
 
-
 
-function showCard(index) {
 
-    carouselTrack.style.transform = `translateX(${-index * movePercent}%)`;
 
-}
 
+    // carrusel de personas
 
+    const carouselTrack = document.querySelector('.carousel-track');
 
+    const cards = document.querySelectorAll('.card-car');
 
+    const prevBtn = document.getElementById('prevBtn');
 
+    const nextBtn = document.getElementById('nextBtn');
 
+
 
+    let currentIndex = 0;
 
+    const totalCards = cards.length;
 
+    movePercent = 100 / totalCards;
 
+
 
+    function showCard(index) {
 
+        carouselTrack.style.transform = `translateX(${-index * movePercent}%)`;
 
+    }
 
 
-prevBtn.addEventListener('click', () => {
 
-    currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalCards - 1;
 
-    showCard(currentIndex);
 
-});
 
+    prevBtn.addEventListener('click', () => {
 
+        currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalCards - 1;
 
+        showCard(currentIndex);
 
+    });
 
+
 
+    nextBtn.addEventListener('click', () => {
 
+        currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
 
+        showCard(currentIndex);
 
+    });
 
+
 
+    setInterval(() => {
 
+        currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
 
+        showCard(currentIndex);
 
+    }, 5000);
 
 
-nextBtn.addEventListener('click', () => {
 
-    currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
 
-    showCard(currentIndex);
 
-});
 
 
-// setInterval(() => {
 
-//     currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
 
-//     showCard(currentIndex);
 
-// }, 5000);
 
 
+// ---------------- del carrusel de quipos ----------------
 
 
-const bubble = document.querySelector('.bubble');
 
-const img = new Image();
 
-img.src = '../img/pensamiento.png'; // Ruta de tu imagen
 
 
-img.onload = function () {
 
-    bubble.style.width = img.width + 'px';
 
-    bubble.style.height = img.height + 'px';
 
-};

+ 7 - 7
mision.html
查看文件 

@@ -31,7 +31,7 @@
 
                     <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="./equipo.html">Equipos</a></li>
 
                         <li><a href="./LineadelTiempo.html">Línea del Tiempo</a></li>
 
                     </ul>
 
                 </li>
 
@@ -47,9 +47,9 @@
 
                 <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="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>
 
@@ -58,11 +58,11 @@
 
             </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.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>