Carrusel inicio casi completo

assets/css/carrusel.css

@@ -0,0 +1,62 @@
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f4f4f4;
+        }
+
+        .carousel-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+        }
+
+        .carousel {
+            display: flex;
+            transition: transform 0.4s ease-in-out;
+            overflow: hidden;
+            width: 300px;
+            height: 200px;
+        }
+
+        .carousel-track {
+            display: flex;
+            transition: transform 0.4s ease-in-out;
+        }
+
+        .card {
+            min-width: 100%;
+            height: 100%;
+            background-color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 24px;
+            border: 1px solid #ddd;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .carousel-controls {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 15px;
+        }
+
+        .carousel-btn {
+            background-color: #333;
+            color: #fff;
+            border: none;
+            padding: 10px;
+            cursor: pointer;
+            border-radius: 50%;
+        }

assets/css/footer.css

@@ -19,7 +19,7 @@
     justify-content: space-around;
     background-image:
         linear-gradient(rgba(157, 93, 93, 0.117), rgba(157, 93, 93, 0.003)),
-        url(../img/fondo.jpg);
+        url(../img/fondo.png);
     width: 60%;
     height: 120px;
     max-height: 120px;

assets/css/home.css

@@ -6,7 +6,7 @@
 
 body {
     font-family: 'Quicksand', sans-serif;
-    background-image: url(../img/fondo.jpg);
+    background-image: url(../img/fondo.png);
 }
 
 
@@ -105,14 +105,74 @@ body {
     padding-right: 20px;
     width: 100%;
     max-width: 65%;
+    position: relative; 
 }
 
-.other-content img {
+.other-content .bg-img{
     border-radius: 50%;
     width: 100%;
     height: 100%;
 }
 
+.carousel-container {
+    position: absolute; 
+    bottom:-60px; 
+    left: 0; 
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.carousel {
+    display: flex;
+    transition: transform 0.4s ease-in-out;
+    overflow: hidden;
+    width: 380px;
+    height: 600px;
+}
+
+.carousel-track {
+    display: flex;
+    transition: transform 0.4s ease-in-out;
+}
+
+.card-car {
+    min-width: fit-content;
+    height: auto;
+    margin-top: 50px;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+    font-size: 24px;
+    border-radius: 10px;
+}
+
+.bubble{
+    height: 500px;
+    width: 375px;
+    background-image: url(../img/pensamiento.png);
+    background-size: cover;
+}
+
+.carousel-controls {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 15px;
+}
+
+.carousel-btn {
+    background-color: #333;
+    color: #fff;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+
+
+
 /* Slider infinito */
 
 .infinite-carousel {

assets/css/navbar.css

@@ -156,26 +156,25 @@ body {
 }
 
 .navbar-right a {
-    border-radius: 100%;
-    padding: 10px;
-    margin-left: 5px;
-    margin-right: 5px;
-    background-color: beige;
+    /* border-radius: 100%;
+    padding: 10px; */
+    margin-left: 10px;
+    margin-right: 10px;
+    
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 40px;
-    height: 40px;
     text-decoration: none;
     transition: color 0.3s ease, color 0.3s ease;
+    color: black;
 }
 
 .navbar-right a i {
-    transform: scale(0.8);
-    color: black;
+    transform: scale(1.5);
 }
 
-.navbar-right a:hover {
+.navbar-right a i:hover {
+    
     color: #76225e;
 }
 

equipo.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Carrusel de Cards</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f4f4f4;
+        }
+
+        .carousel-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            position: relative;
+        }
+
+        .carousel {
+            display: flex;
+            transition: transform 0.4s ease-in-out;
+            overflow: hidden;
+            width: 300px;
+            height: 200px;
+        }
+
+        .carousel-track {
+            display: flex;
+            transition: transform 0.4s ease-in-out;
+        }
+
+        .card {
+            min-width: 100%;
+            height: 100%;
+            background-color: #fff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 24px;
+            border: 1px solid #ddd;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .carousel-controls {
+            display: flex;
+            justify-content: space-between;
+            width: 120px;
+            margin-top: 15px;
+        }
+
+        .carousel-btn {
+            background-color: #333;
+            color: #fff;
+            border: none;
+            padding: 10px;
+            cursor: pointer;
+            border-radius: 50%;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="carousel-container">
+        <div class="carousel">
+            <div class="carousel-track">
+                <div class="card">Card 1</div>
+                <div class="card">Card 2</div>
+                <div class="card">Card 3</div>
+                <div class="card">Card 4</div>
+                <div class="card">Card 5</div>
+            </div>
+        </div>
+
+        <!-- Contenedor de botones centrados -->
+        <div class="carousel-controls">
+            <button id="prevBtn" class="carousel-btn">⟨</button>
+            <button id="nextBtn" class="carousel-btn">⟩</button>
+        </div>
+    </div>
+
+    <script>
+        const carouselTrack = document.querySelector('.carousel-track');
+        const cards = document.querySelectorAll('.card');
+        const prevBtn = document.getElementById('prevBtn');
+        const nextBtn = document.getElementById('nextBtn');
+
+        let currentIndex = 0;
+        const totalCards = cards.length;
+
+        function showCard(index) {
+            carouselTrack.style.transform = `translateX(${-index * 100}%)`;
+        }
+
+        prevBtn.addEventListener('click', () => {
+            currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalCards - 1;
+            showCard(currentIndex);
+        });
+
+        nextBtn.addEventListener('click', () => {
+            currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
+            showCard(currentIndex);
+        });
+
+        setInterval(() => {
+            currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
+            showCard(currentIndex);
+        }, 3000);
+    </script>
+</body>
+
+</html>

index.html

@@ -31,7 +31,7 @@
                     <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="#">Equipos</a></li>
+                        <li><a href="./equipo.html">Equipos</a></li>
                         <li><a href="./LineadelTiempo.html">Línea del Tiempo</a></li>
                     </ul>
                 </li>
@@ -58,11 +58,11 @@
             </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.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>
@@ -91,39 +91,64 @@
 
     <!-- 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>
+
+    <!-- Carrusel -->
+    <section class="slider">
+        <div class="slider-container">
+            <div class="slide">
+                <img src="./assets/img/img1Slider.jpg" alt="Slide 1">
             </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="#" class="histories-btn" style="margin-top: 30px;">TODAS LAS HISTORIAS</a>
-                </div>
-                <div class="other-content">
-                    <img src="./assets/img/img-section.jpg" alt="">
+            <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="#" 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>
+                                <img src="./assets/img/personita.png" alt="" >
+                            </div>
+                            <div class="card-car">
+                                <div class="bubble"></div>
+                                <img src="./assets/img/personita.png" alt="">
+                            </div>
+                            <div class="card-car">
+                                <div class="bubble"></div>
+                                <img src="./assets/img/personita.png" alt="">
+                            </div>
+                            
+                        </div>
+                    </div>
+
+                    <!-- Contenedor de botones centrados -->
+                    <div class="carousel-controls">
+                        <button id="prevBtn" class="carousel-btn">⟨</button>
+                        <button id="nextBtn" class="carousel-btn">⟩</button>
+                    </div>
                 </div>
             </div>
-        </section>
+        </div>
+    </section>
 
 
     <div class="infinite-carousel">
@@ -203,7 +228,7 @@
                         <div class="footer-title-in">
                             <span class="titleC">Ch’ieltik</span>
                             <span class="titleQ footer-color">Apoyando a jovenes</span>
-                        </div>                                                                                                        
+                        </div>
                     </header>
                     <div class="d-col part-text footer-color">
                         <span class="titleQ">5555634780</span>

main.js

@@ -36,15 +36,54 @@ showSlide(index);
 setInterval(() => moveSlide(1), 8000);
 
 
-window.onscroll = function() {
+window.onscroll = function () {
     let scrollBtn = document.getElementById("scrollToTopBtn");
     if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-        scrollBtn.style.display = "block"; 
+        scrollBtn.style.display = "block";
     } else {
-        scrollBtn.style.display = "none"; 
+        scrollBtn.style.display = "none";
     }
 };
 
 function scrollToTop() {
-    window.scrollTo({ top: 0, behavior: 'smooth' }); 
+    window.scrollTo({ top: 0, behavior: 'smooth' });
 }
+
+// carrusel de personas
+const carouselTrack = document.querySelector('.carousel-track');
+const cards = document.querySelectorAll('.card-car');
+const prevBtn = document.getElementById('prevBtn');
+const nextBtn = document.getElementById('nextBtn');
+
+let currentIndex = 0;
+const totalCards = cards.length;
+movePercent = 100 / totalCards;
+
+function showCard(index) {
+    carouselTrack.style.transform = `translateX(${-index * movePercent}%)`;
+}
+
+prevBtn.addEventListener('click', () => {
+    currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalCards - 1;
+    showCard(currentIndex);
+});
+
+nextBtn.addEventListener('click', () => {
+    currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
+    showCard(currentIndex);
+});
+
+// setInterval(() => {
+//     currentIndex = (currentIndex < totalCards - 1) ? currentIndex + 1 : 0;
+//     showCard(currentIndex);
+// }, 5000);
+
+
+const bubble = document.querySelector('.bubble');
+const img = new Image();
+img.src = '../img/pensamiento.png'; // Ruta de tu imagen
+
+img.onload = function () {
+    bubble.style.width = img.width + 'px';
+    bubble.style.height = img.height + 'px';
+};