/
sergioplay.dev
/
slider_for_website
Обзор
Документация
Войти
/
sergioplay.dev
/
slider_for_website
Код
Запросы
0
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
main
css/slider.css
113 строк
2 KB
SerGio_Play
slider
07 июн 2023, 21:09
07 июн 2023, 21:09
921cdb7
Код
Авторство
О чём код?
body { background-color: #020220; overflow-y: hidden; } h1 { color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; } .slider-container { width: 100%; height: 700px; max-width: 60%; margin: 10% auto; position: relative; overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; } .slider.active { opacity: 1; } .slider img { width: 99.4%; min-height: 400px; border-radius: 15px; height: 600px; object-fit: cover; border: 2px solid #2a51ff; } .slider-text { background-color: rgba(28, 67, 196, 0.315); backdrop-filter: blur(30px); border: 2px solid #5977fd; padding: 4%; position: absolute; border-radius: 10px; top: 50%; left: 50%; transform: translate(-50%, 10%); text-align: center; color: #ffffff; z-index: 1; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } .slider-text h3 { font-size: 24px; } .slider-text p { font-size: 16px; } .slider-controls { text-align: center; width: 100%; } .prev-btn { left: 0px; top: 30%; position: absolute; } .next-btn { right: 0px; top: 30%; position: absolute; } .slider-controls button { margin: 3% 5px; width: 50px; background-color: rgb(63, 105, 243); border: 0cm; border-radius: 5px; cursor: pointer; } @media (max-width: 800px) { .slider-container { max-width: 100%; } .slider-text { transform: translate(-50%, 80%); } .slider-text h3 { font-size: 20px; } .slider-text p { font-size: 14px; } }