Antwort
Hier nochmal die CSS-Datei
body {
font-family: Verdana; /* Schriftart */
}
.Logo {
position: absolute; /* Textausrichtung */
}
.Ueberschrift {
text-align: center; /* Textausrichtung */
}
.link {
color: orange; /* Textfarbe */
background-color: transparent; /* Hintergrundfarbe */
text-decoration: underline; /* Textauszeichnung */
}
.link:visited {
color: darkorange; /* Textfarbe */
background-color: transparent; /* Hintergrundfarbe */
text-decoration: underline; /* Textauszeichnung */
}
.link:hover {
color: orangered; /* Textfarbe */
background-color: transparent; /* Hintergrundfarbe */
text-decoration: underline; /* Textauszeichnung */
}
.link:active {
color: orangered;
background-color: transparent; /* Hintergrundfarbe */
text-decoration: underline; /* Textauszeichnung */
}
h1 {
color: black; /* Farbe */
}
h2 {
color: black; /* Farbe */
}
h3 {
color:black; /* Farbe */
}
h4 {
color:black; /* Farbe */
}
summary {
color: black;
}
li {
color: black; /* Farbe */
}
th {
color: black; /* Farbe */
}
td {
color: black; /* Farbe */
}
p {
color:black; /* Farbe */
}
.b {
text-align: center; /* Textausrichtung */
}
.c {
text-align: center; /* Textausrichtung */
}
.d {
text-align: left; /* Textausrichtung */
}
.Impressum {
text-align: center; /* Textausrichtung */
}
.btn-flip {
opacity: 1; /* Transparenz */
outline: 0; /* Umriss */
color: #fff; /* Farbe */
line-height: 40px; /* Zeilenhöhe */
position: relative; /* Position */
text-align: center; /* Textausrichtung */
letter-spacing: 1px; /* Buchstaben-Abstand */
display: inline-block; /* Art der Darstellung */
text-decoration: none; /* Textauszeichnung */
font-family: "#"; /* Schriftart */
text-transform: uppercase; /* Groß- und Kleinbuchstaben */
}
.btn-flip:hover:after {
opacity: 1; /* Transparenz */
transform: translateY(0) rotateX(0); /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate(y): Repositioniert ein Element Vertikal auf einer 2D Fläche)
(rotate(x): Rotiert ein Element auf der X-Achse) */
}
.btn-flip:hover:before {
opacity: 0; /* Transparenz */
transform: translateY(50%) rotateX(90deg); /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate(y): Repositioniert ein Element Vertikal auf einer 2D Fläche)
(rotate(x): Rotiert ein Element auf der X-Achse) */
}
.btn-flip:before {
top: 0; /* Positionierung von oben */
left: 0; /* Positionierung von links */
opacity: 1; /* Transparenz */
color: #adadaf; /* Farbe */
display: block; /* Art der Darstellung */
padding: 0 30px; /* Innenabstand */
line-height: 40px; /* Zeilenhöhe */
transition: 0.5s; /* Übergang (Zeit) */
position: relative; /* Positionierung eines HTML-Elements */
background: #323237; /* Hintergrund (Farbe) */
content: attr(data-front); /* Erzeugt Content (Inhalte in einem Element) */
transform: translateY(0) rotateX(0); /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate(y): Repositioniert ein Element Vertikal auf einer 2D Fläche)
(rotate(x): Rotiert ein Element auf der X-Achse) */
}
.btn-flip:after {
top: 0; /* Positionierung von oben */
left: 0; /* Positionierung von links */
opacity: 0; /* Transparenz */
width: 100%; /* Breite */
color: #323237; /* Farbe */
display: block; /* Art der Darstellung */
transition: 0.5s; /* Übergang (Zeit) */
position: absolute; /* Positionierung eines HTML-Elements */
background: #adadaf; /* Hintergrund (Farbe) */
content: attr(data-back); /* Erzeugt Content (Inhalte in einem Element) */
transform: translateY(-50%) rotateX(90deg); /* Element drehen, skalieren, schräg stellen oder übersetzen, (translate(y): Repositioniert ein Element Vertikal auf einer 2D Fläche)
(rotate(x): Rotiert ein Element auf der X-Achse) */
}
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--dur: 0.3s;
}
body, input {
color: hsl(0,0%,10%);
}
form, .toggle:before, .toggle:after {
background: hsl(0,0%,90%);
}
form, .toggle {
position: relative;
}
form {
display: ;
justify-content: right;
align-items: right;
height: 100vh;
}
.curtain, .toggle:before, .toggle:after {
position: absolute;
}
.curtain, .toggle:before, .toggle:after {
transition: transform var(--dur);
}
.curtain {
top: 0;
left: 0;
}
.curtain {
background: hsl(0,0%,100%);
mix-blend-mode: difference;
pointer-events: none;
width: 100%;
height: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
}
.sr {
clip: rect(1px,1px,1px,1px);
color: transparent;
width: 1px;
height: 1px;
position: relative;
}
.toggle {
background: currentColor;
border-radius: 0.75em;
cursor: pointer;
width: 3em;
height: 1.5em;
appearance: none;
}
.toggle:checked ~ .curtain {
transform: scaleX(1);
}