Untitled
unknown
plain_text
2 years ago
1.7 kB
0
Indexable
Never
/* Шапка */ header { background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .header-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .header-logo img { width: 150px; height: 60px; } .header-social img { width: 40px; height: 40px; margin-right: 10px; } .header-contact p { font-size: 14px; margin: 0 10px; } .header-line { height: 1px; background-color: #eee; } /* Слайдер */ .slider-container .slider-btn { z-index: 1; } .slider-container .slide img { z-index: 0; } .slider { position: relative; width: 100%; height: 500px; overflow: hidden; } .slides { display: flex; width: 100%; height: 100%; } .slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; } .slide img { width: 100%; height: 100%; object-fit: cover; } .slide.active { z-index: 1; } .slide.previous { z-index: 0; transform: translateX(-100%); } .slide.next { z-index: 0; transform: translateX(100%); } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; color: #fff; background-color: rgba(0, 0, 0, 0.3); padding: 1rem; border: none; outline: none; cursor: pointer; } .prev { left: 0; z-index: 1; } .next { right: 0; z-index: 1; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.5); } .slider-buttons img { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; width: 50px; height: 50px; } .prev-slide { left: 20px; } .next-slide { right: 20px; }