body { background: url("../imagenes/fondo_flores.jpg"); background-repeat: no-repeat; background-size: cover; font-family: "Open Sans", sans-serif; text-decoration: none; } /*HEADER*/ /* definir la animación */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .logo{ width: 4.375rem; margin-right: 10px; /* aplicar la animación */ animation-name: fade-in; animation-duration: 3s; animation-fill-mode: forwards; } .navbar, .footer { background-color: #947474; } .nav-item a { font-size: 20px; color: white; } .nav-item a:hover { color: #3e0a0b; } .navbar-brand h2, footer h2 { color: #550d0e; font-size: 2rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -o-text-overflow: clip; text-overflow: clip; white-space: pre; text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 30px #913785, 0 0 30px #913785, 0 0 80px #913785, 0 0 100px #913785; -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); } h2:hover { text-shadow: 0 0 10px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 1), 0 0 40px #6fa78a, 0 0 70px #6fa78a, 0 0 80px #6fa78a, 0 0 100px #6fa78a; } li .btn { font-weight: 700; background: #4c606d; border-radius: 15px; cursor: pointer; transition: all 0.3s ease 0s; color: white; } li:hover .btn { background-color: #a8c9b1; transform: scale(1.1); color: #3e0a0b; } .dropdown-menu{ display: none; position: absolute; background: #9a8e8e; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 100; border-radius: 5px; list-style: none; border: none; width: 240px; padding: 10px 0; } .dropdown-menu a{ color: black; text-align: center; } .dropdown-menu a:hover{ background: #83b099; transform: scale(1.2); padding-left: 20px; font-size: 16px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); } /* CONTENIDO */ #seccion{ width: 100%; height: 2.8125rem; background-color: #FFF7EC; text-align: center; color: #6a6f8c; font-size: 18px; } #seccion h3{ font-size: 1.5rem; padding: 0.5rem; } .slide { margin: auto; margin-bottom: 30px; } .carousel-item img{ padding: 7px; } p { color: white; text-align: center; font-size: 20px; } /*Aquí debajo va el FOOTER*/ /*Aquí debajo va el FOOTER*/ footer { position: relative; bottom: 0; left: 0; height: fit-content; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: var(--dark); color: white; background-color: #947474; font-size: 20px; } .footer-content-container img { height: 112px; align-self: center; } .copyright-container { width: 100%; display: flex; justify-content: center; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.3); } .copyright { font-size: 12px; opacity: 0.7; font-weight: 400; padding: 10px 0; } .footer-menus { display: flex; justify-content: space-between; align-items: flex-start; width: 40%; } .footer-container { height: fit-content; width: 100%; padding: 3rem 4rem; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-start; } .footer-content-container { display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; } footer .website-logo { margin-bottom: 1.2rem; font-size: calc(1vw + 20px); } .footer-info, .menu-item-footer { margin: 0.2rem 0; opacity: 0.7; color: white; text-decoration: none; transition: 0.5s; } .menu-item-footer:hover { opacity: 1; } .menu-title { font-size: var(--medium-text-font); font-weight: 400; text-transform: uppercase; margin-bottom: 1.2rem; } .social-container { display: flex; justify-content: center; align-items: center; height: 30px; width: 100%; } .social-container a { height: 100%; width: 30px; background-size: 70%; background-position: center; margin-right: 1rem; } .social-container a:hover { opacity: 0.7; } details { margin: 20px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } summary { font-weight: bold; cursor: pointer; } footer img { max-width: 100%; display: block; margin: 10px auto; } .subscription__form input, .subscription__form button { border: none; padding: 8px 20px; border-radius: 25px; background: rgba(255, 255, 255, 0.521); } /*MEDIA QUERY*/ @media (max-width: 800px) { .footer-container { padding: 2rem; flex-direction: column; } .footer-content-container { width: 100%; padding: 2rem 0; border-bottom: 1px solid #2a2a2a; justify-content: center; align-items: center; } .footer-content-container:nth-of-type(3) { border-bottom: none; padding-bottom: 0; } .footer-menus { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #2a2a2a; } }