Guten Abend, ich benötige Hilfe bei einer Website, die ich derzeit programmiere. Ich versuche einen "Dark-Mode" An-Aus Schalter hinzuzufügen. Dabei stoße ich derzeit auf ein Problem: Ich würde den betreffenden 'Knopf' zum ändern der Hintergrundfarbe gerne an den oberen, rechten Seitenrand verschieben, jedoch finde ich nicht den richtigen Befehl an der richtigen Stelle dazu. Ihr kennt euch sicherlich besser mit so etwas aus. Vielen Dank schon mal im Voraus.
(Entschuldigung für die fehlende Formatierung, die Nachricht hätte sonst zu viele Zeichen) + (CSS-Datei befindet sich in den Kommentaren)
Hier der Code der HTML-Seite:
<html lang="de">
<head>
<meta charset=utf-8>
<title>Test-Titel(Tab)</title>
<link rel="Stylesheet" href="TestSeite.css">
</head>
<body>
<form>
<!-- LOGO -->
<div class="Logo">
<a href="https://www.google.com/"> <img src="ImpressumsSymbol (sklein).png"> </a>
</div>
<!-- ----- -->
<!-- HIER BEFINDET SICH DIE FRAGE -->
<input id="dark-mode" class="toggle" type="checkbox" name="Dark mode" role="switch" value="on">
<div class="curtain"></div>
<!-- UEBERSCHRIFT -->
<div class="Ueberschrift">
<h1> <b> ÜBERSCHIRFT </b> </h1>
<h2> IMPRESSUM </h2>
</div>
<!-- ----- -->
<!-- BUTTONS -->
<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>
<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>
<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>
<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>
<!-- ----- -->
<!-- KONTAKT -->
<div class="Impressum">
<h2> <u> TEXT </u> </h2>
</div>
<center>
<p>
<strong>
TEXT
</strong>
<br>
TEXT
<br>
TEXT
</p>
<p>
TEXT
<br>
TEXT
</p>
<p> TEXT </p>
</center>
<!-- ----- -->
<!-- IMPRESSUM -->
<div class="Impressum">
<h2> <u> IMPRESSUM </u> </h2>
<h3>TEXT</h3>
<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p> TEXT
<br>
TEXT
</p>
<p>
<strong>
TEXT
</strong>
<br>
TEXT
</p>
<h2>TEXT</h2>
<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p>
<a href="https://www.google.com/" class="link">TEXT</a>
</p>
<p>
TEXT
</p>
<h3>Haftung für Inhalte</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>
<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>
<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>
</div>
<!-- ----- -->
</form>
</body>
</html>
