AldrickChavarria
/
Chieltik


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
							<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programas</title>
    <link rel="stylesheet" href="./assets/css/navbar.css">
    <link rel="stylesheet" href="./assets/css/footer.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    .timeline-header {
        background: url('https://www.perodri.es/wp-content/uploads/historia-reloj-arena.jpg') no-repeat center center;
        background-size: cover;
        color: white;
        padding: 100px 20px;
        font-size: 36px;
        font-weight: bold;
        position: relative;
    }
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(71, 185, 179, 0.5);
        z-index: 1;
    }
    .title-text {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
    }
    .title-text-1 {
        background-color: #5aa07a;
        width: 17%;
        border-radius: 30px;
        height: 75px;
        align-items: center;
        display: flex;
        justify-content: center;
        font-size: calc(1.5rem + 1vw);
    }
    .timeline-container {
        padding: 20px 0; 
        text-align: center;
    }
    .card {
        background: #fff;
        margin: 25px;
        padding: 15px; 
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
        border: 3px solid #09C2AB;
        width: 100%; 
        max-width: 450px; 
    }
    .card:hover {
        transform: translateY(-5px);
    }
    .circulo {
        border: 3px solid #09C2AB;
        color: rgb(240, 12, 12);
        border-radius: 50%;
        width: 50px; 
        height: 50px; 
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px; 
        margin: 5px;
        text-align: center;
        font-weight: bold;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }
    h2, p, a {
        margin: 10px 0; 
    }
    h2 {
        color: #333;
    }
    p {
        color: #666;
        font-size: 0.9rem;
    }
    a {
        color: #F04F4A;
        font-size: 12px;
        text-decoration: none;
        font-weight: bold;
    }
    @media (min-width: 600px) {
        .card {
            width: 30%;
        }
        /* .timeline-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        } */
    }
</style>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-left">
            <img src="./assets/img/logo.png" alt="Logo" class="logo">
            <div class="textC">
                <img src="./assets/img/heart.png" alt="">
                <span>Se voluntario</span>
            </div>
        </div>
        <div class="navbar-center">
            <ul class="nav-links">
                <li><a href="#">Inicio</a></li>
                <li class="dropdown">
                    <a href="#">Quienes Somos</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Misión, Visión y Principios</a></li>
                        <li><a href="#">Equipos</a></li>
                        <li><a href="./LineadelTiempo.html">Línea del Tiempo</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#">Que hacemos</a>
                    <ul class="dropdown-menu">
                        <li><a href="./Contexto.html">El contexto</a></li>
                        <li><a href="./Programas.html">Programas</a></li>

                    </ul>
                </li>
                <li><a href="#">Informes</a></li>
                <li class="dropdown">
                    <a href="#">Historias</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Historias de éxito</a></li>
                        <li><a href="#">Blogs</a></li>
                        <li><a href="#">Eventos</a></li>
                        <li><a href="#">Videos</a></li>

                    </ul>
                </li>
                <li><button class="btn-donation"><span>DONA YA!</span></button></li>
            </ul>
        </div>
        <div class="navbar-right">
            <a href="https://www.facebook.com/Chieltik/"><i class="fa-brands fa-facebook-f"></i></a>
            <a href="https://www.chieltik.org/"><i class="fa-brands fa-google-plus-g"></i></a>
            <a href="https://www.instagram.com/chieltik/"><i class="fa-brands fa-instagram"></i></a>
            <a href="https://www.linkedin.com/company/chieltik"><i class="fa-brands fa-linkedin-in"></i></a>
            <a href="https://www.youtube.com/c/Chieltik/"><i class="fa-brands fa-youtube"></i></a>
        </div>
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

    <div class="mobile-menu">
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Quienes Somos</a></li>
            <li><a href="#">Que hacemos</a></li>
            <li><a href="#">Informes</a></li>
            <li><a href="#">Historias</a></li>
        </ul>

        <div class="icons">
            <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
            <a href="#"><i class="fa-brands fa-google-plus-g"></i></a>
            <a href="#"><i class="fa-brands fa-instagram"></i></a>
            <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
            <a href="#"><i class="fa-brands fa-youtube"></i></a>
        </div>
    </div>

<div class="timeline-container">
    <div class="timeline-header">
        <div class="overlay"></div>
        <div class="title-text">
            <div class="title-text-1">Programas</div>
        </div>
    </div>

    <div style="display: flex; justify-content: center; margin-top: 40px;">
        <div class="card" id="concientizar">
            <h2>Concientizar</h2>
            <div style="margin-bottom: 10px; display: flex; align-items: center;">
                <div><span class="circulo">1</span></div>
                <p style="color: #a30980;">Dar los conocimientos necesarios a los y las jóvenes para que puedan tomar conciencia de los diferentes temas relacionados con...</p>
                <div><span class="circulo"><i class="fa-solid fa-hands-clapping"></i></span></div>
            </div>
            <div>
                <div style="border-bottom: 2px solid #F04F4A; width: 30px; margin-left: 150px;"></div>
                <a href="#">Más detalles</a>
            </div>
        </div>
        <div class="card" id="educacion">
            <h2>Educación</h2>
            <div style="margin-bottom: 10px; display: flex; align-items: center;">
                <div><span class="circulo">2</span></div>
                <p style="color: #a30980;">Ayudar a los y las jóvenes a mejorar parte de su conocimiento, a través de programas de clases de tronco común y de escuela básica...</p>
                <div><span class="circulo"><i class="fa-solid fa-graduation-cap"></i></span></div>
            </div>
            <div>
                <div style="border-bottom: 2px solid #F04F4A; width: 30px; margin-left: 150px;"></div>
                <a href="#">Más detalles</a>
            </div>
        </div>
        <div class="card" id="salud">
            <h2>Salud</h2>
            <div style="margin-bottom: 10px; display: flex; align-items: center;">
                <div><span class="circulo">3</span></div>
                <p style="color: #a30980;">Llevar ayuda médica a las comunidades más apartadas de las ciudades, para asegurar un trato más digno para todos y cada uno de...</p>
                <div><span class="circulo"><i class="fa-solid fa-heart-pulse"></i></span></div>
            </div>
            <div>
                <div style="border-bottom: 2px solid #F04F4A; width: 30px; margin-left: 150px;"></div>
                <a href="#">Más detalles</a>
            </div>
        </div>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; margin-top: 50px;">
        <span style="border: 2px solid; width: 76px; height: 40px; border-radius: 5px; align-items: center; display: flex; justify-content: space-evenly;">
            <i class="fa-solid fa-arrow-left" style="cursor: pointer;"></i>
            <i class="fa-solid fa-arrow-right" style="cursor: pointer;;"></i>
        </span>
    </div>
</div>
<footer class="footer">
    <div class="footer-header">
        <div class="form-container">
            <img src="./assets/img/Logo-1.png" alt="" height="100px">
            <i class="fa-regular fa-envelope"
                style="color: #76225e; transform: scale(2.5); margin-left: 20px;  margin-right: 20px;"></i>
            <span style="font-size: 23px; font-weight: bold; margin-right: 30px;">Suscríbete</span>
            <form class="footer-form">
                <input class="email-footer" placeholder="Direccción de Correo" />
                <button class="subscribe footer-color">SUSCRÍBETE</button>
            </form>
            <div class="d-flex">
                <a href="https://www.instagram.com/chieltik/" class="icon-footerT"><i
                        class="fa-brands fa-instagram"></i></a>
                <a href="https://www.linkedin.com/company/chieltik" class="icon-footerT"><i
                        class="fa-brands fa-linkedin-in"></i></a>
                <a href="https://www.facebook.com/Chieltik/" class="icon-footerT"><i
                        class="fa-brands fa-facebook-f"></i></a>
            </div>
        </div>
    </div>
    <div class="footer-info">
        <div class="info-container">
            <div class="part">
                <header class="footer-title">
                    <i class="fa-solid fa-hand iconF"></i>
                    <div class="footer-title-in">
                        <span class="titleC">Donación por elección</span>
                        <span class="titleQ footer-color">Titulo</span>
                    </div>
                </header>
                <div class="d-col part-text footer-color">
                    <span>
                        Prevents our being able to do we like best, every pleasures is every pain avoided.
                    </span>
                    <button class="join footer-color">ÚNETE</button>
                </div>
            </div>
            <div class="part">
                <span class="titleQ footer-color">
                    Donaciones
                </span>
                <div class="part-text">
                    <ul class="donation-list">
                        <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
                            <li>Donaciones</li>
                        </div>
                        <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
                            <li>Programas</li>
                        </div>
                        <div class="d-flex footer-color"><i class="fa-solid fa-check mr-10"></i>
                            <li>Contacto</li>
                        </div>

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

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

        </div>
    </div>
</footer>
</body>
</html>