Code: Select all
html,body{
height: 100%;
width: 100%;
overflow: hidden;
background-color: #d3dce6;
font-family: monospace;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
label{
font-size: 24px;
font-weight: 700;
cursor: pointer;
color: #525d6f;
opacity: .4;
transition: opacity .4s ease-in-out;
display: block;
width: calc(100% - 48px) ;
text-align: right;
z-index: 100;
user-select: none;
}
input[type="radio"]{
display: none;
width: 0;
}
label:hover, input[type="radio"]:checked+label {
opacity: 1;
}
.popup{
width: 80%;
height: 80%;
min-height: 480px;
max-height: 480px;
border-radius: 48px;
box-sizing: border-box;
border: 16px solid #ebf0f4;
background-color: #dfe6ed;
overflow: hidden;
box-shadow: 16px 16px 48px #2e364330;
}
.tabs{
width: 100%;
max-width: 240px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
position: relative;
}
.marker{
position: absolute;
width: 100%;
height: 200%;
display: flex;
flex-direction: column;
top: calc(-100% );
left: 0;
transition: transform .2s ease-in-out;
}
.marker #bottom, .marker #top{
background-color: #ebf0f4;
box-shadow: 32px 32px 48px #2e364315;
}
.marker #top{
height: calc(50%);
margin-bottom: auto;
border-radius: 0 0 32px 0;
}
.marker #bottom{
height: calc(50% - 72px);
border-radius: 0 32px 0 0;
}
#tab1:checked ~ .marker{transform: translateY(calc(calc(50% / 6) * 0));}
#tab2:checked ~ .marker{transform: translateY(calc(calc(50% / 6) * 1));}
#tab3:checked ~ .marker{transform: translateY(calc(calc(50% / 6) * 2));}
#tab4:checked ~ .marker{transform: translateY(calc(calc(50% / 6) * 3));}
#tab5:checked ~ .marker{transform: translateY(calc(calc(50% / 6) * 4));}
#tab6:checked ~ .marker{transform: translateY(calc(calc(51% / 6) * 5));}< /code>
FIRST TAB
SECOND TAB
THIRD TAB
FOURTH TAB
FIFTH TAB
SIXTH TAB