Programmiererforum

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

Ich versuche Tabs zu machen, aber ich habe nicht so lange codiert, also habe ich vergessen, wie man dieses Zeug macht. Ich kann nicht herausfinden, wie man Inhalte in jede Registerkarte einfügt, da jedes Mal, wenn ich versuche, Text zu setzen, der Text nicht angezeigt wird. Ich weiß nicht, welche Tags ich verwenden soll. Wenn ich ein weiteres Div -Tag einstellen sollte, um von dem weiterzumachen, was ich habe. Dies war, was mein Freund für mich angefangen hatte, damit wir gemeinsam ein Projekt machen können. Ich weiß wirklich nicht, wohin ich von hier aus gehen soll. Bitte helfen Sie uns < /p>


[code]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






[/code]