forked from halitbatur/movie-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.css
58 lines (50 loc) · 1000 Bytes
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#movie-backdrop {
width: 100%;
}
.container {
padding-top: 32px;
}
#actors {
margin: 24px 16px 0 0;
}
.sliderContainer{
padding: 2rem;
}
.slider-wrapper{
position:relative ;
max-width: 80%;
margin: 0 auto;
}
.slider{
display: flex;
aspect-ratio: 16/9;
overflow: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
cursor: pointer;
box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
overflow-y: hidden; /* Hide vertical scrollbar */
overflow-x: hidden; /* Hide horizontal scrollbar */
}
.slider img{
flex: 1 0 100%;
scroll-snap-align: start;
object-fit: cover;
}
.slider-nav{
display: flex;
column-gap: 1rem;
position: absolute;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.slider-nav a{
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: #fff;
opacity: 0.75;
transition:opacity ease 250ms ;
}