equipo.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Carrusel de Equipo Semillero</title>
  7. <link rel="stylesheet" href="./assets/css/styles.css">
  8. <link rel="stylesheet" href="./assets/css/equipo.css">
  9. <link rel="stylesheet" href="./assets/css/navbar.css">
  10. <link rel="stylesheet" href="./assets/css/footer.css">
  11. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  12. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap">
  13. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap">
  14. </head>
  15. <body>
  16. <nav class="navbar">
  17. <div class="navbar-left">
  18. <img src="./assets/img/logo.png" alt="Logo" class="logo">
  19. <div class="textC">
  20. <img src="./assets/img/heart.png" alt="">
  21. <span>Se voluntario</span>
  22. </div>
  23. </div>
  24. <div class="navbar-center">
  25. <ul class="nav-links">
  26. <li><a href="./index.html">Inicio</a></li>
  27. <li class="dropdown">
  28. <a href="#">Quienes Somos</a>
  29. <ul class="dropdown-menu">
  30. <li><a href="./mision.html">Misión, Visión y Principios</a></li>
  31. <li><a href="./equipo.html">Equipos</a></li>
  32. <li><a href="./LineadelTiempo.html">Línea del Tiempo</a></li>
  33. </ul>
  34. </li>
  35. <li class="dropdown">
  36. <a href="#">Que hacemos</a>
  37. <ul class="dropdown-menu">
  38. <li><a href="./Contexto.html">El contexto</a></li>
  39. <li><a href="./Programas.html">Programas</a></li>
  40. </ul>
  41. </li>
  42. <li><a href="#">Informes</a></li>
  43. <li class="dropdown">
  44. <a href="#">Historias</a>
  45. <ul class="dropdown-menu">
  46. <li><a href="Historias.html">Historias de éxito</a></li>
  47. <li><a href="Blogs.html">Blogs</a></li>
  48. <li><a href="eventos.html">Eventos</a></li>
  49. <li><a href="#">Videos</a></li>
  50. </ul>
  51. </li>
  52. <li><button class="btn-donation"><span>DONA YA!</span></button></li>
  53. </ul>
  54. </div>
  55. <div class="navbar-right">
  56. <a href="https://www.linkedin.com/company/chieltik"><i class="fa-brands fa-linkedin-in"></i></a>
  57. <a href="https://www.facebook.com/Chieltik/"><i class="fa-brands fa-facebook-f"></i></a>
  58. <a href="https://www.youtube.com/c/Chieltik/"><i class="fa-brands fa-youtube"></i></a>
  59. <a href="https://www.instagram.com/chieltik/"><i class="fa-brands fa-instagram"></i></a>
  60. <a href="https://www.chieltik.org/"><i class="fa-brands fa-google-plus-g"></i></a>
  61. </div>
  62. <div class="hamburger">
  63. <span></span>
  64. <span></span>
  65. <span></span>
  66. </div>
  67. </nav>
  68. <div class="container-all">
  69. <!-- <div class="carousel-container">
  70. <div class="carousel">
  71. <div class="carousel-track">
  72. <div class="card-car">
  73. <img src="./assets/img/personita.png" alt="">
  74. <span>Juanito1</span>
  75. </div>
  76. <div class="card-car">
  77. <img src="./assets/img/personita.png" alt="">
  78. <span>Juanito2</span>
  79. </div>
  80. <div class="card-car">
  81. <img src="./assets/img/personita.png" alt="">
  82. <span>Juanito3</span>
  83. </div>
  84. <div class="card-car">
  85. <img src="./assets/img/personita.png" alt="">
  86. <span>Juanito4</span>
  87. </div>
  88. <div class="card-car">
  89. <img src="./assets/img/personita.png" alt="">
  90. <span>Juanito5</span>
  91. </div>
  92. <div class="card-car">
  93. <img src="./assets/img/personita.png" alt="">
  94. <span>Juanito6</span>
  95. </div>
  96. <div class="card-car">
  97. <img src="./assets/img/personita.png" alt="">
  98. <span>Juanito7</span>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="carousel-controls">
  103. <button id="prevBtn" class="carousel-btn"><i class="fa-solid fa-arrow-left"></i></button>
  104. <button id="nextBtn" class="carousel-btn"><i class="fa-solid fa-arrow-right"></i></button>
  105. </div>
  106. </div> -->
  107. <!-- --------------Miembros del equipo---------------- -->
  108. <div class="team">
  109. <div class="member">
  110. <img src="./assets/img/equipo/Norma Inés Barreiro Garcia.jpg" alt="">
  111. <div class="name-bg">
  112. <span class="name">Norma Inés Barreiro García</span>
  113. </div>
  114. <span class="position">Directora ejecutiva</span>
  115. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">**Estudió la licenciatura en
  116. Psicología,
  117. para la ella la educación en las y los más jóvenes
  118. originarios es muy importante, pues esta les permitirá tener más herramientas para su desarrollo y
  119. el desempeño de sus derechos.</span>
  120. </div>
  121. <div class="member">
  122. <img src="./assets/img/equipo/Carlos Meza Lavaniegos, .jpg" alt="">
  123. <div class="name-bgF">
  124. <span class="name">Carlos Meza Lavaniegos</span>
  125. </div>
  126. <span class="position">Director de finanzas y administración</span>
  127. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originario de San Cristobal de las
  128. Casas, Chiapas. Licenciado en desarrollo sustentable, con maestría en Desarrollo Humano y recién
  129. terminó la maestría en liderazgo y dirección de centros educativos</span>
  130. </div>
  131. <!-- ------------------- -->
  132. <div class="member">
  133. <img src="./assets/img/equipo/marilu.jpg" alt="">
  134. <div class="name-bgF">
  135. <span class="name">María Marilú Jiménez López</span>
  136. </div>
  137. <span class="position">Directora operativa</span>
  138. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">**Originario de San Cristobal de las
  139. Casas, Chiapas. Licenciado en desarrollo sustentable, con maestría en Desarrollo Humano y recién
  140. terminó la maestría en liderazgo y dirección de centros educativos</span>
  141. </div>
  142. <div class="member">
  143. <img src="./assets/img/equipo/Lizeth Jazmin Vásquez Lòpez_ Coordinadora Municipal Las Margaritas .jpg"
  144. alt="">
  145. <div class="name-bg">
  146. <span class="name">Lizeth Jazmín Vázquez López</span>
  147. </div>
  148. <span class="position">Coordinadora regional La Selva.</span>
  149. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Estudió la licenciatura en Psicología,
  150. para la ella la educación en las y los más jóvenes
  151. originarios es muy importante, pues esta les permitirá tener más herramientas para su desarrollo y
  152. el desempeño de sus derechos.</span>
  153. </div>
  154. <div class="member">
  155. <img src="./assets/img/equipo/Erik José Hernández Reyes, Coordinador estatal .jpg" alt="">
  156. <div class="name-bgF">
  157. <span class="name">Erik José Hernández Reyes</span>
  158. </div>
  159. <span class="position">Coordinador regiónal Los Altos</span>
  160. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originario de San Cristóbal de las
  161. Casas, Chiapas. Licenciado en desarrollo sustentable y recién egresado de la maestría en Desarrollo
  162. Humano.</span>
  163. </div>
  164. <div class="member">
  165. <img src="./assets/img/equipo/jhony.jpg" alt="">
  166. <div class="name-bgF">
  167. <span class="name">Jhonny Hernández López</span>
  168. </div>
  169. <span class="position">Directora operativa</span>
  170. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originario de Las Margaritas, Chiapas.
  171. Licenciado en Ciencias de la Educación por la universidad Valle Grijalva. </span>
  172. </div>
  173. <div class="member">
  174. <img src="./assets/img/equipo/Montzerrat.jpg" alt="">
  175. <div class="name-bgF">
  176. <span class="name">Montzerrat Soto García</span>
  177. </div>
  178. <span class="position">Coordinadora de Comunicación Social</span>
  179. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">**Originario de San Cristobal de las
  180. Casas, Chiapas. Licenciado en desarrollo sustentable, con maestría en Desarrollo Humano y recién
  181. terminó la maestría en liderazgo y dirección de centros educativos</span>
  182. </div>
  183. <!-- ------------------------------------------------ -->
  184. <div class="member">
  185. <img src="./assets/img/equipo/andy.jpg" alt="">
  186. <div class="name-bg">
  187. <span class="name">Andrea Bautista Gómez</span>
  188. </div>
  189. <span class="position">Educadora comunitaria en Los Altos</span>
  190. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originaria de Amatenango del Valle,
  191. Chiapas, joven indígena tseltal y artesana alfarera. Ingresa a como educadora comunitaria de la
  192. comunidad de San Juan Cancuc, en Los Altos de Chiapas, en el año 2019. </span>
  193. </div>
  194. <div class="member">
  195. <img src="./assets/img/equipo/marco.jpg" alt="">
  196. <div class="name-bgF">
  197. <span class="name">Marco Antonio Hernández Pérez</span>
  198. </div>
  199. <span class="position">Promotor juvenil en Los Altos</span>
  200. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Nacido en la comunidad tseltal de
  201. Chiloljá municipio de San Juan Cancuc es hablante del tseltal, lengua indígena de los Altos de
  202. Chiapas. Marco tuvo la oportunidad de estudiar desde la primaria hasta la preparatoria sin salir de
  203. su
  204. comunidad.</span>
  205. </div>
  206. <div class="member">
  207. <img src="./assets/img/equipo/manu.jpg" alt="">
  208. <div class="name-bgF">
  209. <span class="name">Manuel Heredia López</span>
  210. </div>
  211. <span class="position">Educador comunitario en Los Altos</span>
  212. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Ingreso por primera vez a IDEAS A.C. -
  213. Ch’ieltik en agosto de 2013 hasta diciembre de 2014, y reingreso en noviembre de 2019, durante el
  214. periodo fuera de la organización fue parte de las autoridades comunitarias de San Juan Chamula,
  215. desempeño como Tesorero de Educación.</span>
  216. </div>
  217. <div class="member">
  218. <img src="./assets/img/equipo/alexis.jpg" alt="">
  219. <div class="name-bgF">
  220. <span class="name">Alexis Alfaro Jiménez</span>
  221. </div>
  222. <span class="position">Encargado de Monitoreo y evaluación</span>
  223. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">**Originario de San Cristobal de las
  224. Casas, Chiapas. Licenciado en desarrollo sustentable, con maestría en Desarrollo Humano y recién
  225. terminó la maestría en liderazgo y dirección de centros educativos</span>
  226. </div>
  227. <div class="member">
  228. <img src="./assets/img/equipo/marile.jpg" alt="">
  229. <div class="name-bgF">
  230. <span class="name">María Leticia Santiz Jiménez</span>
  231. </div>
  232. <span class="position">Promotora juvenil en La Selva</span>
  233. <span style="font-size: 24px; color: #76225e; margin-top: 10px;">Originaria del Barrio de Sacsalum,
  234. municipio de Las Margaritas, Chiapas, hablante de la lengua tojolabal.
  235. Lety estudio en el Colegio de Bachilleres de Las Margaritas, su pasión por la información y respeto
  236. por su lengua originaria, la llevaron a participar por varios años años en una muy importante radio
  237. cultural indigenista de la frontera sur.</span>
  238. </div>
  239. </div>
  240. </div>
  241. <!-- Footer -->
  242. <footer class="footer">
  243. <div class="footer-header">
  244. <div class="form-container">
  245. <img src="./assets/img/Logo-1.png" alt="" height="100px">
  246. <i class="fa-regular fa-envelope"
  247. style="color: #76225e; transform: scale(2.5); margin-left: 20px; margin-right: 20px;"></i>
  248. <span style="font-size: 23px; font-weight: bold; margin-right: 30px;">Suscríbete</span>
  249. <form class="footer-form">
  250. <input class="email-footer" type="email" placeholder="Direccción de Correo" />
  251. <button class="subscribe footer-color" type="submit">SUSCRÍBETE</button>
  252. </form>
  253. </div>
  254. </div>
  255. <div class="footer-info">
  256. <div class="info-container">
  257. <div class="part">
  258. <header class="footer-title">
  259. <i class="fa-solid fa-hand iconF"></i>
  260. <div class="footer-title-in">
  261. <span class="titleC">Donación por elección</span>
  262. <span class="titleQ footer-color">Titulo</span>
  263. </div>
  264. </header>
  265. <div class="d-col part-text footer-color">
  266. <span>
  267. Prevents our being able to do we like best, every pleasures is every pain avoided.
  268. </span>
  269. <button class="join footer-color">ÚNETE</button>
  270. </div>
  271. </div>
  272. <div class="part">
  273. <span class="titleQ footer-color">
  274. Donaciones
  275. </span>
  276. <div class="part-text">
  277. <ul class="donation-list">
  278. <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
  279. <li>Donaciones</li>
  280. </div>
  281. <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
  282. <li>Programas</li>
  283. </div>
  284. <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
  285. <li>Contacto</li>
  286. </div>
  287. </ul>
  288. </div>
  289. </div>
  290. <div class="part">
  291. <header class="footer-title">
  292. <i class="fa-solid fa-box-tissue iconF"></i>
  293. <div class="footer-title-in">
  294. <span class="titleC">Ch’ieltik</span>
  295. <span class="titleQ footer-color">Apoyando a jovenes</span>
  296. </div>
  297. </header>
  298. <div class="d-col part-text footer-color">
  299. <span class="titleQ">5555634780</span>
  300. <span>info@chieltik.org</span>
  301. <span class="footer-color"
  302. style="margin-top: 15px; font-size: 18px; font-weight: bold ;">Oficinas</span>
  303. <span>Insurgentes Sur 1409 B, Benito Juárez, CDMX.</span>
  304. </div>
  305. </div>
  306. </div>
  307. </div>
  308. <div class="footer-end">
  309. <div class="footer-end-container" style="color: gray; font-size: 18px;">
  310. <span>&#169;<span id="year"></span>
  311. <span class="footer-color">
  312. Chieltik
  313. </span>
  314. Todos los derechos reservados.
  315. </span>
  316. <span class="ways-donate footer-color">Formas de donar: <i class="fa-brands fa-cc-paypal"
  317. style="color: gray;"></i></span>
  318. </div>
  319. </div>
  320. </footer>
  321. <script src="./equipo.js"></script>
  322. </body>
  323. </html>