AldrickChavarria
/
Chieltik


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chieltik</title>
    <link rel="stylesheet" href="./assets/css/styles.css">
    <link rel="stylesheet" href="./assets/css/home.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="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>

    <!-- Esto es de la navbar 👆
    ------------------------------------------------ -->

    <!-- Carrusel -->
    <section class="slider">
        <div class="slider-container">
            <div class="slide">
                <img src="./assets/img/img1Slider.jpg" alt="Slide 1">
            </div>
            <div class="slide">
                <img src="./assets/img/img2Slider.png" alt="Slide 2">
            </div>
            <div class="slide">
                <img src="./assets/img/img3Slider.jpg" alt="Slide 3">
            </div>
        </div>
        <button class="btn prev" onclick="moveSlide(-1)"><i class="fa-solid fa-arrow-left"></i></button>
        <button class="btn next" onclick="moveSlide(1)"><i class="fa-solid fa-arrow-right"></i></button>
    </section>

    <!-- Sección de historias -->
    <section class="histories">
        <div class="content">
            <div class="text-content">
                <span style="font-weight: bold; font-size: 25px; color: #f04f48;">Testimonios</span>
                <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="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">
                <div class="carousel-container">
                    <div class="carousel">
                        <div class="carousel-track">
                            <div class="card-car">
                                <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 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 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>

                    <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>
            </div>
        </div>
    </section>


    <div class="infinite-carousel">
        <div class="group">
            <div class="card"><img src="./assets/img/brand1.png" alt=""></div>
            <div class="card"><img src="./assets/img/brand2.png" alt=""></div>
            <div class="card"><img src="./assets/img/brand3.png" alt=""></div>
            <div class="card"><img src="./assets/img/brand4.png" alt=""></div>
            <div class="card"><img src="./assets/img/brand5.jpg" alt=""></div>
        </div>
        <div aria-hidden class="group">
            <div class="card"><img src="./assets/img/brand1.png" alt=""></div>
            <div class="card"><img src="./assets/img/brand2.png" alt=""></div>
            <div class="card"><img src="./assets/img/brand3.png" alt=""></div>
            <div class="card"><img src="./assets/img/brand4.png" alt=""></div>
            <div class="card"><img src="./assets/img/brand5.jpg" alt=""></div>
        </div>
    </div>


    <button id="scrollToTopBtn" onclick="scrollToTop()">↑</button>


    <!-- Footer -->
    <footer class="footer">
        <div class="footer-header">
            <div class="form-container">
                <img src="./assets/img/Logo-1.png" alt="" height="100px">
                <i class="fa-regular fa-envelope"
                    style="color: #76225e; transform: scale(2.5); margin-left: 20px;  margin-right: 20px;"></i>
                <span style="font-size: 23px; font-weight: bold; margin-right: 30px;">Suscríbete</span>
                <form class="footer-form">
                    <input class="email-footer" type="email" placeholder="Direccción de Correo" />
                    <button class="subscribe footer-color" type="submit">SUSCRÍBETE</button>
                </form>
            </div>
        </div>
        <div class="footer-info">
            <div class="info-container">
                <div class="part">
                    <header class="footer-title">
                        <i class="fa-solid fa-hand iconF"></i>
                        <div class="footer-title-in">
                            <span class="titleC">Donación por elección</span>
                            <span class="titleQ footer-color">Titulo</span>
                        </div>
                    </header>
                    <div class="d-col part-text footer-color">
                        <span>
                            Prevents our being able to do we like best, every pleasures is every pain avoided.
                        </span>
                        <button class="join footer-color">ÚNETE</button>
                    </div>
                </div>
                <div class="part">
                    <span class="titleQ footer-color">
                        Donaciones
                    </span>
                    <div class="part-text">
                        <ul class="donation-list">
                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
                                <li>Donaciones</li>
                            </div>
                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
                                <li>Programas</li>
                            </div>
                            <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
                                <li>Contacto</li>
                            </div>

                        </ul>
                    </div>
                </div>
                <div class="part">
                    <header class="footer-title">
                        <i class="fa-solid fa-box-tissue iconF"></i>
                        <div class="footer-title-in">
                            <span class="titleC">Ch’ieltik</span>
                            <span class="titleQ footer-color">Apoyando a jovenes</span>
                        </div>
                    </header>
                    <div class="d-col part-text footer-color">
                        <span class="titleQ">5555634780</span>
                        <span>info@chieltik.org</span>

                        <span class="footer-color"
                            style="margin-top: 15px; font-size: 18px; font-weight: bold  ;">Oficinas</span>
                        <span>Insurgentes Sur 1409 B, Benito Juárez, CDMX.</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-end">
            <div class="footer-end-container" style="color: gray; font-size: 18px;">
                <span>&#169;<span id="year"></span>
                    <span class="footer-color">
                        Chieltik
                    </span>
                    Todos los derechos reservados.
                </span>
                <span class="ways-donate footer-color">Formas de donar: <i class="fa-brands fa-cc-paypal"
                        style="color: gray;"></i></span>

            </div>
        </div>
    </footer>


    <script src="main.js"></script>
</body>

</html>