WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Deslizador de tarjetas
13751
webleb
Video
Publica tu código
21
Recomendado
18 June 2025
Portal Escolar: Consulta de Resultados y Pago de Matrícula
22 April 2023
Menú desplegable con CSS
26 June 2025
Perfil de enlaces sociales
index.html
Copy
Webleb
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Previous
Next
styles.css
Copy
:root { --scrollcolor: #fff; --scrollbackground: #141e27; } * { box-sizing: border-box; } html, body { padding: 0; margin: 0; height: 100vh; } body { background: #203239; } .title { font-size: 2.5rem; font-family: system-ui; line-height: 1.1; font-weight: 300; color: #fff; margin: 4rem auto 1rem; width: 85%; max-width: 1280px; } .slider { width: 85%; max-width: 1280px; margin: 0 auto; } .slider__content { overflow-x: scroll; scroll-snap-type: x mandatory; display: flex; gap: 1rem; padding-bottom: 1rem; scrollbar-color: var(--scrollcolor) var(--scrollbackground); } .slider__content::-webkit-scrollbar { height: 0.5rem; width: 0.5rem; border-radius: 1rem; background: var(--scrollbackground); } .slider__content::-webkit-scrollbar-thumb { border-radius: 1rem; background: var(--scrollcolor); } .slider__content::-webkit-scrollbar-track { border-radius: 1rem; background: var(--scrollbackground); } .slider__item { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; min-width: 100%; width: 100%; border-radius: 0.25rem; overflow: hidden; position: relative; aspect-ratio: 1; } @media (min-width: 460px) { .slider__item { aspect-ratio: 0.6666666667; min-width: calc((100% / 2) - 2rem); } } @media (min-width: 940px) { .slider__item { min-width: calc((100% / 3) - 4rem); } } .slider__image { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .slider__info { position: relative; padding: 4rem 2rem 2rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(32, 50, 57, 0)); } .slider__info h2 { color: #fff; font-family: system-ui; line-height: 1.1; font-weight: 300; font-size: 1.75rem; margin: 0; } .slider__nav { margin: 1rem 0 4rem; width: 100%; padding: 0; display: flex; justify-content: flex-start; gap: 1rem; align-content: center; align-items: center; pointer-events: none; } @media (min-width: 460px) { .slider__nav { justify-content: flex-end; } } .slider__nav__button { margin: 0; appearance: none; border: 0; border-radius: 2rem; background: #fff; color: #203239; padding: 0.5rem 1rem; font-size: 0.75rem; line-height: 1; pointer-events: none; transition: 0.2s ease-out; opacity: 0.25; } .slider__nav__button--active { opacity: 1; pointer-events: auto; cursor: pointer; }
main.js
Copy
// JS included in the html file