AldrickChavarria
/
Chieltik


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Responsive</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://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="#">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="#">Línea del Tiempo</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#">Que hacemos</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">El contexto</a></li>
                        <li><a href="#">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>

    <!-- 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>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-header">
            <div class="form-container">

            </div>
        </div>
        <div class="footer-info">
            <div class="info-container">
                <div class="part">
                    <header class="footer-title">
                        <i class="fa-solid fa-hand"></i>
                        <div class="footer-title-in">
                            <span class="titleC">Donación por elección</span>
                            <span>Titulo</span>
                        </div>
                    </header>
                    <div>
                        Prevents our being able to do we like best, every pleasures is every pain avoided.
                    </div>
                </div>
                <div class="part">
                    <span>
                        Titulo
                    </span>
                    <div>
                        <ul class="donation-list">
                            <div class="d-flex"><i class="fa-solid fa-check mr-10"></i><li>Donaciones</li></div>
                            <div class="d-flex"><i class="fa-solid fa-check mr-10"></i><li>Programas</li></div>
                            <div class="d-flex"><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"></i>
                        <div class="footer-title-in">
                            <span class="titleC">Chielt'ik</span>
                            <span>Apoyando a jovenes</span>
                        </div>
                    </header>
                    <div>
                        Prevents our being able to do we like best, every pleasures is every pain avoided.
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-end">
            <span id="year" style="color: white;"></span>
        </div>
    </footer>


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

</html>