HTML
<label for="open-leistungen"><a>Alle Leistungen</a></label>
<label for="open-kontakt"><a>Mehr Kontakt</a></label>
<label for="open-ihr-fenster"><a>Ihr Fenster</a></label>
Und hier ist die dazugehörige Einschalt-Funktion dieser Fenster in der CSS-Datei ('boxfenster.css):
CSS
/* schaltfunktion AN / AUS */
input#open-leistungen:checked ~ .boxfenster,
input#open-kontakt:checked ~ .boxfenster,
input#open-ihr-fenster:checked ~ .boxfenster {
margin:0;
background:rgba(0,0,0,.7);
opacity:1;
}
Das eigentliche Fenster ist in der HTML-Datei dann wie folgt unter Einbindung eines Fenster-Schließen-Buttons gestaltet, hier am Beispiel des 'Leistungen-Links':
HTML
<div class="schalter">
<input type="checkbox" id="open-leistungen">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-leistungen"><i class="far fa-window-close"></i></label>
. . . Hier steht der Leistungen Text . . .
</div></div></div>
Und so würde es entsprechend für ihr neu anzulegendes Fenster aussehen:
HTML
<div class="schalter">
<input type="checkbox" id="open-ihr-fenster">
<div class="boxfenster">
<div class="boxinhalt">
<label class="button-close" for="open-ihr-fenster"><i class="far fa-window-close"></i></label>
. . . Hier steht der Text fuer ihr neues Fenster . . .
</div></div></div>