* { /* outline: 1px solid red; */ margin: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #dceefc; } /* Clase .modal-abierto se agrega al body solo cuando se abre la modal */ body.modal-abierto { /* selecciona el elemento solo cuando tiene la clase modal-abierto. */ overflow: hidden; /* desactiva el scroll (oculta las barras de desplazamiento) en toda la página */ } :where(header, footer) { width: 100%; height: 50px; color: whitesmoke; background-color: #5c7295; display: grid; place-content: center; } footer { height: 150px; } header { position: fixed; top: 0; z-index: 1; } main { width: min(80%, 1200px); margin: 100px auto; display: flex; flex-direction: column; gap: 80px; } /* 1er section - tipos de position */ .re-div, .re-card, .ab-mod { display: flex; justify-content: space-evenly; flex-wrap: wrap; gap: 64px; } .re-div > div { width: 200px; height: 200px; } .a { color: whitesmoke; background-color: #735389; display: grid; place-content: center; } .b { position: relative; border-style: dotted; } .b1 { width: 200px; height: 200px; color: whitesmoke; background-color: #832344; position: absolute; top: 50px; left: 50px; display: grid; place-content: center; } .c { width: 100%; height: 100%; border-style: dotted; } .c1 { width: 100%; height: 100%; color: whitesmoke; background-color: #2d3a5b; position: relative; top: -145px; left: 50px; display: grid; place-content: center; } /* 2da section - contenedor con hijo absolut */ .re-ab { display: flex; justify-content: center; } .contenedor { width: 80%; max-width: 600px; height: 300px; border: 3px solid #735389; position: relative; } .medio { max-width: 300px; height: 150px; margin: 50px; border: 3px solid #832344; } .elemento { width: 50px; height: 50px; color: whitesmoke; background-color: #832344; font-size: 12px; position: absolute; top: 0; left: 0; display: grid; place-content: center; } /* 3er section - texto y sticky */ .st-div { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; } /* div 1 */ .cont { min-width: 250px; line-height: 1.5; background-color: #d9e2ea; padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 16px; } .elem { width: 250px; color: whitesmoke; background-color: #832344; padding: 10px; text-align: center; position: sticky; top: 51px; right: 0; } /* div 2 */ .cont2 { min-width: 250px; height: 500px; line-height: 1.5; overflow-y: scroll; flex: 1; background-color: #d9e2ea; padding: 16px; display: flex; flex-direction: column; gap: 16px; } .elem2 { width: 250px; color: whitesmoke; background-color: #832344; padding: 10px; text-align: center; position: sticky; top: 0; } /* Boton fijo */ .fixed-btn { width: 50px; height: 50px; border-radius: 50%; color: whitesmoke; background-color: #832344; font-size: 12px; position: fixed; bottom: 20px; right: 20px; display: grid; place-content: center; opacity: 0; transform: translateY(10px); animation: aparecer linear both; animation-timeline: scroll(root); animation-range: 0 500px; /* Empieza al hacer scroll */ } @keyframes aparecer { to { opacity: 1; transform: translateY(0); } } /* 4ta section - cards */ .card { width: 250px; height: 250px; } /* card 1 */ .card1 { position: relative; overflow: hidden; /* escondemos el texto de momento, y si la imagén se desborda la pone detras de la card */ } .card1 img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform 0.5s ease; } .card1:hover img { transform: scale(1.1); } .card1 > div { position: absolute; top: 50%; /* Estas 3 líneas permiten el centrado perfecto de un elemento con postion */ left: 50%; transform: translate(-50%, -50%); /* <- transform: mueve el elemento hacia arriba y a la izquierda, la mitad de su tamaño, corrigiendo el desalineamiento y centrándolo perfectamente. Es dinámico: funciona sin saber el ancho/alto del elemento. */ text-align: center; color: whitesmoke; font-size: 1.5rem; font-weight: bold; text-shadow: 1px 1px 8px rgba(0,0,0,0.7); pointer-events: none; } /* card 2 */ .card2 { display: flex; justify-content: center; align-items: center; text-align: center; aspect-ratio: 1/1; background-image: url(https://den-cards.pokellector.com/413/Team-Rockets-Ariana.SV10.128.57159.png); /* background-image: url('https://picsum.photos/1200/800'); <- Imágen random */ background-size: 100%; background-position: center; background-repeat: no-repeat; overflow: hidden; transition: background-size 0.5s ease; color: whitesmoke; font-size: 1.5rem; font-weight: bold; text-shadow: 1px 1px 8px rgba(0,0,0,0.7); } .card2:hover { background-size: 110%; } /* card 3 */ .card3 { position: relative; overflow: hidden; } .card3 img { width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: filter 0.3s ease; } .card3-context { position: absolute; inset: 0; /* cubrimos todo el contenedor */ background-color: rgba(0, 0, 0, 0.5); /* oscurece */ backdrop-filter: blur(5px); /* desenfoque */ display: flex; justify-content: center; align-items: center; text-align: center; color: whitesmoke; font-size: 1.5rem; font-weight: bold; text-shadow: 1px 1px 8px rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.3s ease; } .card3:hover .card3-context { opacity: 1; } .card3:hover img { filter: blur(2px); } /* card 4 */ .card4 { position: relative; overflow: hidden; } .card4 img { width: 100%; height: 100%; display: block; object-fit: cover; } .card4:hover article { left: 0; } .card4 > article { width: 100%; height: 100%; background-color: rgba(217, 226, 234, 0.658); color: #832344; font-size: 1.5rem; font-weight: bold; text-shadow: 1px 1px 8px rgba(0,0,0,0.7); display: grid; place-content: center; position: absolute; top: 0; left: 100%; transition: left .5s; } /* 5ta section - modal */ /* Div sobrepuestos */ .cont-zind { width: 200px; height: 200px; } .zind { position: relative; margin-top: -100px; margin-left: 30px; } .zind:first-child { background-color: #735389; width: 150px; height: 200px; top: 70px; } .zind:nth-child(2) { background-color: #832344; height: 150px; width: 250px; right: 50px; } .zind:last-child { background-color: #2d3a5b; width: 100px; height: 100px; top: -30px; left: 50px; } /* boton modal*/ .modal-btn { width: 200px; height: 200px; background-color: #d9e2ea; display: grid; place-content: center; } #openBtn, #closeBtn { /* estilos para los botones de la modal */ display: block; font-size: 16px; color: whitesmoke; background-color: #832344; border: none; padding: 10px; transition: .5s; } :is(#openBtn, #closeBtn):is(:hover, :active) { background-color: #2d3a5b; } dialog { /* estilos de la modal */ width: min(80%, 350px); border: none; padding: 32px; line-height: 1.5; box-shadow: 0 0 4px rgba(0, 0, 0, 0.675); top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(20px); animation: entradaModal 0.3s ease forwards; } dialog > :is(h3, p) { margin-bottom: 16px; } dialog::backdrop { background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); } /* Animación cuando aparece la modal */ @keyframes entradaModal { from { opacity: 0; transform: translate(-50%, -50%) translateY(20px); } to { opacity: 1; transform: translate(-50%, -50%) translateY(0); } }