WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Deslizador de tarjetas
13509
webleb
Publica tu código
Recomendado
15 July 2025
Animación de alternancia de triángulos CSS
22 May 2025
Juego de lanzar monedas
1 December 2024
Un código de robustvariable23
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