Footer completa

assets/css/footer.css

@@ -1,8 +1,9 @@
 .footer {
-    margin-top: 100px;
+    margin-top: 200px;
     font-family: 'Quicksand', sans-serif;
     width: 100%;
     height: auto;
+
 }
 
 .footer-header {
@@ -13,6 +14,9 @@
 }
 
 .form-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
     background-image:
         linear-gradient(rgba(157, 93, 93, 0.117), rgba(157, 93, 93, 0.003)),
         url(../img/fondo.jpg);
@@ -28,10 +32,77 @@
     padding: 20px;
 }
 
+.footer-form {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    height: 100%;
+    max-height: 50px;
+    width: 100%;
+    max-width: 40%;
+    border: 2px solid rgb(22, 22, 22);
+    border-radius: 30px;
+    padding-left: 40px;
+}
+
+.email-footer {
+    background-color: transparent;
+    height: 100%;
+    flex-grow: 2;
+    border: none;
+}
+
+
+.email-footer:focus {
+    outline: none;
+}
+
+
+.footer-form:focus-within {
+    outline: 1px solid #76225e;
+}
+
+.subscribe {
+    padding: 1px 20px;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: bold;
+    border-top-right-radius: 30px;
+    border-bottom-right-radius: 30px;
+    height: 100%;
+    border: 1px solid #f04f48;
+    background: #f04f48;
+}
+
+.subscribe:hover {
+    cursor: pointer;
+    transition: color 0.5s ease, color 0.5s ease;
+    color: #ffffff;
+}
+
+.icon-footerT {
+    border-radius: 100%;
+    padding: 10px;
+    margin-left: 5px;
+    margin-right: 5px;
+    background-color: rgb(150, 150, 150);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    text-decoration: none;
+    transition: color 0.3s ease, color 0.3s ease;
+}
+
+.icon-footerT i {
+    transform: scale(0.8);
+    color: black;
+}
+
 
 .footer-info {
     width: 100%;
-    height: 100px;
+    height: 400px;
     background-color: #76225e;
     display: flex;
     justify-content: center;
@@ -40,24 +111,49 @@
 
 .info-container {
     display: flex;
-    background-color: aqua;
+    width: 50%;
+}
+
+.part {
+    width: 100%;
+    max-width: 33%;
+    padding-left: 25px;
+    padding-right: 25px;
 }
 
-.part{
-    max-width: 250px;
+.part:nth-child(2) {
+    border-left: 1px solid #adadad;
+    border-right: 1px solid #adadad;
 }
 
-.donation-list{
+.donation-list {
     list-style: none;
 }
 
-.footer-title{
+.donation-list div {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.donation-list div:hover {
+    cursor: pointer;
+    transition: color 0.5s ease, color 0.5s ease;
+    color: #ff7a32;
+}
+
+.footer-title {
     display: flex;
     align-items: center;
-    justify-content: space-around;
+    justify-content: start
+}
+
+.iconF {
+    color: #f04f48;
+    transform: scale(2);
 }
 
-.footer-title-in{
+.footer-title-in {
+    padding-left: 20px;
     display: flex;
     flex-direction: column;
 }
@@ -69,8 +165,56 @@
     color: #ff3232;
 }
 
+.titleQ {
+    font-size: 22px;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 600;
+    color: #f04f48;
+}
+
+.part-text {
+    margin-top: 20px;
+}
+
+.join {
+    margin-top: 20px;
+    border: none;
+    border-radius: 25px;
+    padding: 20px 25px;
+    width: fit-content;
+    background-color: #f04f48;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: bold;
+}
+
+.join:hover {
+    cursor: pointer;
+    transition: color 0.5s ease, color 0.5s ease;
+    color: #ffffff;
+}
+
+.footer-color {
+    color: #73c7a4;
+}
+
 .footer-end {
     width: 100%;
     height: 100px;
     background-color: #341a42;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-end-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    max-width: 50%;
+}
+
+.ways-donate {
+    font-size: 30px;
+    font-family: 'Caveat', cursive;
 }

assets/css/home.css

@@ -10,11 +10,20 @@ body {
 }
 
 
+.container-scroll{
+    scroll-padding-top: 90px; /* Ajuste para el tamaño del slider */
 
+    overflow-y: scroll; 
+    scroll-snap-type: y mandatory; 
+    scroll-behavior: smooth; 
+}
 
 
 /* Carrusel  de inicio*/
 .slider {
+    scroll-snap-stop: always; /* Forzar que el scroll-snap ocurra siempre al hacer scroll */
+
+    scroll-snap-align: start;
     position: relative;
     width: 100%;
     height: calc(100vh - 90px);
@@ -61,6 +70,115 @@ body {
     right: 15px;
 }
 
+/* Sección historias de exito */
+.histories{
+    scroll-snap-stop: always; /* Forzar que el scroll-snap ocurra siempre al hacer scroll */
+
+    scroll-snap-align: start;
+    margin-top: 20px;
+    height: 80vh;
+    background-color: #471d0116;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.content{
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    max-width: 70%;
+    height: auto
+}
+
+.text-content{
+    padding-left: 20px;
+    padding-right: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 30%;
+}
+
+.histories-btn{
+    text-decoration: none;
+    color: white;
+    border-radius: 30px;
+    padding: 15px 30px;
+    width: fit-content;
+    font-weight: bold;
+    background-color: #f04f48;
+}
+
+.other-content{
+    padding-left: 20px;
+    padding-right: 20px;
+    width: 100%;
+    max-width: 65%;
+}
+
+.other-content img{
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+}
+
+
+
+#scrollToTopBtn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    display: none; 
+    color: #f04f48;
+    background-color: transparent;
+    font-weight: bold;
+    border: 2px solid #f04f48;
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+    padding: 15px;
+    font-size: 24px;
+    cursor: pointer;
+    z-index: 100;
+    transition: opacity 0.3s ease;
+}
+
+
+#scrollToTopBtn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 2px solid rgba(240, 79, 72, 0.5);
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    animation: radar-blur 2s infinite;
+    z-index: -1; 
+}
+
+#scrollToTopBtn:hover {
+    cursor: pointer;
+}
+
+
+@keyframes radar-blur {
+    0% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+    80% {
+        opacity: 0;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(2);
+        opacity: 0;
+    }
+}
+
 
 
 @keyframes fadeInDown {

assets/css/navbar.css

@@ -263,6 +263,7 @@ body {
 }
 
 
+
 @keyframes fadeIn {
     0% {
         opacity: 0;

assets/css/styles.css

@@ -2,6 +2,11 @@
     display: flex;
 }
 
+.d-col{
+    display: flex;
+    flex-direction: column;
+}
+
 .mr-10{
     margin-right: 10px;
 }

index.html

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Navbar Responsive</title>
+    <title>Chieltik</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">
@@ -88,76 +88,136 @@
         </div>
     </div>
 
-    <!-- Esto es de la navbar
+    <!-- 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 class="container-scroll">
+        <!-- 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>
-            <div class="slide">
-                <img src="./assets/img/img3Slider.jpg" alt="Slide 3">
+            <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>
             </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>
+        </section>
+    </div>
+
+
+    <button id="scrollToTopBtn" onclick="scrollToTop()">↑</button>
+
 
     <!-- Footer -->
     <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"></i>
+                        <i class="fa-solid fa-hand iconF"></i>
                         <div class="footer-title-in">
                             <span class="titleC">Donación por elección</span>
-                            <span>Titulo</span>
+                            <span class="titleQ footer-color">Titulo</span>
                         </div>
                     </header>
-                    <div>
-                        Prevents our being able to do we like best, every pleasures is every pain avoided.
+                    <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>
-                        Titulo
+                    <span class="titleQ footer-color">
+                        Donaciones
                     </span>
-                    <div>
+                    <div class="part-text">
                         <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>
-                            
+                            <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"></i>
+                        <i class="fa-solid fa-box-tissue iconF"></i>
                         <div class="footer-title-in">
                             <span class="titleC">Chielt'ik</span>
-                            <span>Apoyando a jovenes</span>
+                            <span class="titleQ footer-color">Apoyando a jovenes</span>
                         </div>
                     </header>
-                    <div>
-                        Prevents our being able to do we like best, every pleasures is every pain avoided.
+                    <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">
-            <span id="year" style="color: white;"></span>
+            <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>
 

main.js

@@ -1,9 +1,9 @@
 const hamburger = document.querySelector('.hamburger');
 const mobileMenu = document.querySelector('.mobile-menu');
 
-const yearSpan = document.getElementById('year');
+const year = document.getElementById('year');
 const currentYear = new Date().getFullYear();
-yearSpan.textContent = currentYear;
+year.textContent = currentYear;
 
 hamburger.addEventListener('click', () => {
     mobileMenu.classList.toggle('active');
@@ -34,3 +34,17 @@ function moveSlide(step) {
 
 showSlide(index);
 setInterval(() => moveSlide(1), 8000);
+
+
+window.onscroll = function() {
+    let scrollBtn = document.getElementById("scrollToTopBtn");
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        scrollBtn.style.display = "block"; 
+    } else {
+        scrollBtn.style.display = "none"; 
+    }
+};
+
+function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' }); 
+}