AldrickChavarria
/
Chieltik


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!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="styles.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><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>
                <li><button class="btn-donation"><span>DONA YA!</span></button></li>
            </ul>
        </div>
        <div class="navbar-right">
            <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 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>


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

</html>