input[type=
'radio'
] {
display
:
none
;
}
input[type=
'radio'
]#section
1:
checked ~ nav > label[for=
'section1'
] {
background-color
:
white
;
}
input[type=
'radio'
]#section
1:
checked ~ section:nth-of-type(
1
) {
z-index
:
1
;
top
:
0
;
transition
:
top
0.5
s ease-in-out;
transition-delay
:
0
s;
}
input[type=
'radio'
]#section
1:
checked ~ .
cover
{
background-color
:
#eb9385
;
}
input[type=
'radio'
]#section
2:
checked ~ nav > label[for=
'section2'
] {
background-color
:
white
;
}
input[type=
'radio'
]#section
2:
checked ~ section:nth-of-type(
2
) {
z-index
:
1
;
top
:
0
;
transition
:
top
0.5
s ease-in-out;
transition-delay
:
0
s;
}
input[type=
'radio'
]#section
2:
checked ~ .
cover
{
background-color
:
#99c0bc
;
}
input[type=
'radio'
]#section
3:
checked ~ nav > label[for=
'section3'
] {
background-color
:
white
;
}
input[type=
'radio'
]#section
3:
checked ~ section:nth-of-type(
3
) {
z-index
:
1
;
top
:
0
;
transition
:
top
0.5
s ease-in-out;
transition-delay
:
0
s;
}
input[type=
'radio'
]#section
3:
checked ~ .
cover
{
background-color
:
#937782
;
}
input[type=
'radio'
]#section
4:
checked ~ nav > label[for=
'section4'
] {
background-color
:
white
;
}
input[type=
'radio'
]#section
4:
checked ~ section:nth-of-type(
4
) {
z-index
:
1
;
top
:
0
;
transition
:
top
0.5
s ease-in-out;
transition-delay
:
0
s;
}
input[type=
'radio'
]#section
4:
checked ~ .
cover
{
background-color
:
#2d4249
;
}
.nav {
position
:
fixed
;
z-index
:
2
;
right
:
30px
;
top
:
50%
;
transform
:
translateY
(
-50%
);
}
.nav__item {
width
:
12px
;
height
:
12px
;
display
:
block
;
margin
:
12px
auto
;
border
:
solid
2px
white
;
border-radius
:
50%
;
cursor
:
pointer
;
}
.nav__item:hover {
background-color
:
white
;
}
section {
height
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
position
:
absolute
;
top
:
100%
;
right
:
0
;
left
:
0
;
transition-delay
:
0.5
s;
}
section:nth-of-type(
1
) {
background
:
#eb9385
;
}
section:nth-of-type(
2
) {
background
:
#99c0bc
;
}
section:nth-of-type(
3
) {
background
:
#937782
;
}
section:nth-of-type(
4
) {
background
:
#2d4249
;
}
.
cover
{
position
:
fixed
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
z-index
:
-1
;
}
html,
body {
height
:
100%
;
}
body {
overflow
:
hidden
;
color
:
white
;
}