Код: Выделить всё
html,
body {
height: 100%;
width: 100%;
overflow: scroll;
background-color: #d3dce6;
scroll-behavior: smooth;
font-family: "Courier Prime";
color: #4c585b;
}
body {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
label {
font-size: 24px;
font-weight: 700;
cursor: pointer;
color: #525d6f;
opacity: 0.4;
transition: opacity 0.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: 500px;
max-height: 1000px;
border-radius: 48px;
box-sizing: border-box;
border: 16px solid #ebf0f4;
background-color: #dfe6ed;
overflow: hidden;
box-shadow: 16px 16px 48px #2e364330;
display: flex;
.content {
display: none;
}
&:has(#tab1:checked) {
.content[data-tab="tab1"] {
display: block;
}
}
&:has(#tab2:checked) {
.content[data-tab="tab2"] {
display: block;
}
}
&:has(#tab3:checked) {
.content[data-tab="tab3"] {
display: block;
}
}
&:has(#tab4:checked) {
.content[data-tab="tab4"] {
display: block;
}
}
&:has(#tab5:checked) {
.content[data-tab="tab5"] {
display: block;
}
}
&:has(#tab6:checked) {
.content[data-tab="tab6"] {
display: block;
}
}
}
.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 0.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));
}
.content {
flex: 1;
padding: 26px;
overflow: scroll;
}
h2 {
font-family: "Abril Fatface";
font-weight: bold;
font-size: 26px;
text-align: center;
color: #4c585b;
text-shadow: 1px 3px #eef7ff;
padding: 9px;
border-style: dashed;
border-color: #a5bfcc;
border-width: 5px;
background-color: #e5e1da;
}
aside {
background-color: #e5e1da;
width: 30%;
color: #4c585b;
display: inline-flex;
flex-flow: column;
padding: 12px;
border: 5px dashed #a5bfcc;
vertical-align: top;
font-family: "Courier Prime";
}
.quote {
color: #7e99a3;
font-size: 20px;
text-indent: 50px;
line-height: 30px;
}
.ab {
background-color: #e5e1da;
display: inline-flex;
flex-flow: column;
padding: 24px;
border: 5px dashed #a5bfcc;
width: 55%;
margin-top: 0px;
}
input[type="submit"] {
background-color: #d0ddd0;
color: white;
padding: 6px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}< /code>
Homepage
Daily Check-in
Calendar
Our Bot Linda
Puzzles
Collab w/ Amazon
The Daily Journal
Quote of the Day
"Even the smallest positive change can ripple outwards, creating a beautiful effect on your day."
Record Your Emotion
Enjoyment
Excitement
Happy
Confusion
Anxious
Fear
Anger
Disgust
Bored
Sadness
Content
Content Second Tab
Content third Tab
Content fourth Tab
Content fifth Tab
amazon web services
Подробнее здесь: https://stackoverflow.com/questions/794 ... -checklist