Carrusel de inicio completo y comienzo del footer

assets/css/footer.css

@@ -0,0 +1,76 @@
+.footer {
+    margin-top: 100px;
+    font-family: 'Quicksand', sans-serif;
+    width: 100%;
+    height: auto;
+}
+
+.footer-header {
+    width: 100%;
+    height: 60px;
+    background-color: #341a42;
+    position: relative;
+}
+
+.form-container {
+    background-image:
+        linear-gradient(rgba(157, 93, 93, 0.117), rgba(157, 93, 93, 0.003)),
+        url(../img/fondo.jpg);
+    width: 60%;
+    height: 120px;
+    max-height: 120px;
+    position: absolute;
+    top: -61px;
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    padding: 20px;
+}
+
+
+.footer-info {
+    width: 100%;
+    height: 100px;
+    background-color: #76225e;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.info-container {
+    display: flex;
+    background-color: aqua;
+}
+
+.part{
+    max-width: 250px;
+}
+
+.donation-list{
+    list-style: none;
+}
+
+.footer-title{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.footer-title-in{
+    display: flex;
+    flex-direction: column;
+}
+
+.titleC {
+    font-size: 20px;
+    font-family: 'Caveat', cursive;
+    font-weight: 600;
+    color: #ff3232;
+}
+
+.footer-end {
+    width: 100%;
+    height: 100px;
+    background-color: #341a42;
+}

assets/css/home.css

@@ -0,0 +1,75 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Quicksand', sans-serif;
+    background-image: url(../img/fondo.jpg);
+}
+
+
+
+
+
+/* Carrusel  de inicio*/
+.slider {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 90px);
+    overflow: hidden;
+    z-index: 0;
+}
+
+.slider-container {
+    display: flex;
+    transition: transform 1s ease;
+}
+
+.slide {
+    min-width: 100%;
+}
+
+.slide img {
+    width: 100%;
+    display: block;
+}
+
+.btn {
+    background-color: rgb(255, 255, 255);
+    border: none;
+    border-radius: 100%;
+    width: 50px;
+    height: 50px;
+    color: #76225e;
+    padding: 10px;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    transform: scale(1.2);
+    font-size: 24px;
+    z-index: 10;
+}
+
+.prev {
+    left: 15px;
+}
+
+.next {
+    right: 15px;
+}
+
+
+
+@keyframes fadeInDown {
+	from {
+		opacity: 0;
+		transform: translate3d(0, -20%, 0);
+	}
+	to {
+		opacity: 1;
+		transform: translate3d(0, 0, 0);
+	}
+}

styles.css → assets/css/navbar.css

@@ -16,6 +16,7 @@ body {
     background-color: #ffffff;
     padding: 10px 20px;
     position: relative;
+    z-index: 100;
 }
 
 .navbar-left {
@@ -68,6 +69,66 @@ body {
     transition: color 0.3s ease, color 0.3s ease;
 }
 
+/* Subopciones de la navbar*/
+.navbar .dropdown {
+    z-index: 200;
+}
+
+.navbar .dropdown-menu {
+    display: none;
+    position: absolute;
+    border-radius: 20px;
+    background-color: #fff;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+    margin: 0;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    list-style: none;
+    z-index: 1;
+}
+
+.navbar .dropdown-menu li {
+    padding: 12px 5px;
+    transition: color 0.2s ease, color 0.2s ease;
+    animation: fadeIn 0.2s ease-in both;
+}
+
+.navbar .dropdown-menu li:nth-child(1) {
+    animation-delay: 0.1s;
+}
+
+.navbar .dropdown-menu li:nth-child(2) {
+    border-top: 1px solid #dbdbdb;
+    animation-delay: 0.2s;
+}
+
+.navbar .dropdown-menu li:nth-child(3) {
+    border-top: 1px solid #dbdbdb;
+    animation-delay: 0.3s;
+    
+}
+
+.navbar .dropdown-menu li:nth-child(4) {
+    border-top: 1px solid #dbdbdb;
+    animation-delay: 0.4s;
+    
+}
+
+.navbar .dropdown-menu li a {
+    color: #333;
+    font-size: 16px;
+    text-decoration: none;
+}
+
+.navbar .dropdown-menu li a:hover {
+    color: #73C7A4;
+    text-decoration: none;
+}
+
+.navbar .dropdown:hover .dropdown-menu {
+    display: block;
+}
+
 .nav-links a:hover {
     color: #77c8a6;
 }
@@ -145,18 +206,16 @@ body {
     transition: 0.3s;
 }
 
-/* Mobile Menu (hidden by default) */
+/* menu del cel (ocultado por defualt) */
 .mobile-menu {
     display: none;
     position: absolute;
     top: 60px;
-    /* Ajustado para que se despliegue debajo de la navbar */
     left: 0;
     width: 100%;
     background-color: #333;
     text-align: center;
     z-index: 1000;
-    /* Asegura que esté encima del contenido */
 }
 
 .mobile-menu ul {
@@ -180,62 +239,16 @@ body {
     border-radius: 5px;
 }
 
-/* ----------------------------- de la nav ------------------------------ */
-
-/* Slider */
-.slider {
-    position: relative;
-    width: 100%;
-    height: calc(100vh - 90px);
-    overflow: hidden;
-}
-
-.slider-container {
-    display: flex;
-    transition: transform 1s ease;
-}
-
-.slide {
-    min-width: 100%;
-}
-
-.slide img {
-    width: 100%;
+.mobile-menu.active {
     display: block;
+    animation: fadeIn 0.3s ease-out forwards;
 }
 
-.btn {
-    background-color: rgb(255, 255, 255);
-    border: none;
-    border-radius: 100%;
-    width: 50px;
-    height: 50px;
-    color: #76225e;
-    padding: 10px;
-    cursor: pointer;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    transform: scale(1.2);
-    font-size: 24px;
-    z-index: 10;
-}
-
-.prev {
-    left: 15px;
-}
-
-.next {
-    right: 15px;
-}
-
-
-
-
-@media (max-width: 1300px) {
+@media only screen and (max-width: 1300px) {
     .textC {
         display: none;
     }
+
     .navbar-center {
         display: none;
     }
@@ -250,11 +263,6 @@ body {
 }
 
 
-.mobile-menu.active {
-    display: block;
-    animation: fadeIn 0.3s ease-out forwards;
-}
-
 @keyframes fadeIn {
     0% {
         opacity: 0;

assets/css/styles.css

@@ -0,0 +1,7 @@
+.d-flex{
+    display: flex;
+}
+
+.mr-10{
+    margin-right: 10px;
+}

index.html

@@ -5,7 +5,10 @@
     <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="./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">
 
@@ -23,19 +26,42 @@
         <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 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><a href="#">Historias</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="#"><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>
+            <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>
@@ -82,6 +108,59 @@
         <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>

main.js

@@ -1,18 +1,29 @@
 const hamburger = document.querySelector('.hamburger');
 const mobileMenu = document.querySelector('.mobile-menu');
 
+const yearSpan = document.getElementById('year');
+const currentYear = new Date().getFullYear();
+yearSpan.textContent = currentYear;
+
 hamburger.addEventListener('click', () => {
     mobileMenu.classList.toggle('active');
 });
 
-// ----------------del carrusel ----------------
+
+window.addEventListener('resize', () => {
+    if (window.innerWidth > 1300) {
+        mobileMenu.classList.remove('active');
+    }
+});
+
+// ---------------- del carrusel ----------------
 let index = 0;
 
 function showSlide(n) {
     const slides = document.querySelectorAll('.slide');
     if (n >= slides.length) index = 0;
     if (n < 0) index = slides.length - 1;
-    
+
     const newTransformValue = -index * 100 + '%';
     document.querySelector('.slider-container').style.transform = `translateX(${newTransformValue})`;
 }
@@ -21,5 +32,5 @@ function moveSlide(step) {
     showSlide(index += step);
 }
 
-showSlide(index)
-setInterval(() => moveSlide(1), 8000); 
+showSlide(index);
+setInterval(() => moveSlide(1), 8000);