HTML-Editor

CSS editieren

Hier stellen Sie die Farben und das Erscheinungsbild ein.

/* LOGOKOPF */
    header {
  background: #d0d0d0;
 display: flex; /* Aktiviert Flexbox */
  flex-direction: column; /* Ändert die Ausrichtung zu vertikal */
  align-items: center; /* Zentriert die Inhalte horizontal */
  padding: 0.5rem;
  text-align: center;
    }

/* NAVIMENÜ */
    nav {
     background-color: #d0d0d0; /* Hintergrundfarbe für das Menü */
     border: 0px solid #ccc; /* Optional: Rahmen um das Menü */
      padding: 1px;
      width: 250px;
      flex-shrink: 0;
    }

nav summary {
  color: #800000; /* Textfarbe auf Rot setzen */
  font-weight: bold; /* Schrift fett machen */
  font-size: 1.2rem; /* Optional: Schriftgröße anpassen */
  cursor: pointer; /* Optional: Zeigt den Mauscursor beim Hover */
}

nav a {
  color: #800000; /* Setzt die Standard-Textfarbe der Links */
  text-decoration: none; /* Entfernt die Unterstreichung */
 
  padding: 0px; /* Abstand um die Links herum */
  border: 0px solid #ccc; /* Optional: Rahmen um die Links */
  border-radius: 2px; /* Abrundung der Ecken des Rahmens */
  transition: all 0.3s ease; /* Animierter Übergang bei Hover-Effekten */
}

nav a:hover {
  color: #c00000; /* Textfarbe beim Hover */
  background-color: #e0e0e0; /* Hintergrundfarbe beim Hover */
  border-color: #ff6600; /* Rahmenfarbe beim Hover */
}

nav ul {
  list-style-type: none; /* Entfernt die Punkte vor den Links */
  padding: 0; /* Entfernt zusätzlichen Abstand */
}

nav li {
  margin: 0.1rem 0; /* Abstand zwischen den Links */
}

/* HAUPTTEIL in BOX */
.box {
  border: 2px solid black; /* Schwarzer Rand */
  padding: 3px; /* Abstand innerhalb der Box */
  width: 100%; /* Breite der Box (optional) */
  max-width: 1000px; /* Maximale Breite */
  text-align: left; /* Links ausgerichteter Text */
  margin: 10px auto; /* Zentriert die Box horizontal */
}

body {
background: #e0e0e0;
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
   align: center;
    }

/* 🔧 Alle Bilder responsiv */
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

.container {
      flex: 1;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }

main {
background: #e0e0e0;
  display: flex; /* Aktiviert Flexbox */
  justify-content: center;  /* Horizontale Zentrierung */
  align-items: center; /* Vertikale Zentrierung */
  flex-direction: column; /* Optional: Inhalte untereinander anordnen */
  padding: 0.3rem;
  width: 100%;
  max-width: 1200px; /* Optional: Maximale Breite für den Hauptinhalt */
  text-align: center; /* Zentriert den Text */
  margin: auto; /* Sorgt für zusätzliche Zentrierung bei begrenzter Breite */
}

/* LINKS HAUOTEIL WIE NAVI MACHEN */
main a {
  color: #a00000; /* Setzt die Standard-Textfarbe der Links */
  text-decoration: none; /* Entfernt die Unterstreichung */
 
  padding: 0px; /* Abstand um die Links herum */
  border: 0px solid #ccc; /* Optional: Rahmen um die Links */
  border-radius: 2px; /* Abrundung der Ecken des Rahmens */
  transition: all 0.3s ease; /* Animierter Übergang bei Hover-Effekten */
}

main a:hover {
  color: #c00000; /* Textfarbe beim Hover */
  background-color: #f0f0f0; /* Hintergrundfarbe beim Hover */
  border-color: #ff6600; /* Rahmenfarbe beim Hover */
}

main img {
  display: inline; /* Bilder werden wie Text behandelt */
  max-width: 100%; /* Bilder bleiben responsiv */
  height: auto; /* Höhe bleibt proportional */
}

footer {
background: #d0d0d0; /* Gelbe Hintergrundfarbe */
  display: flex; /* Flexbox aktivieren */
  flex-wrap: wrap; /* Umbruch bei Überschreiten der Breite */
  justify-content: center; /* Bilder zentrieren */
  gap: 10px; /* Abstand zwischen den Bildern */
margin: 5px 0; /* Abstand oben und unten */
padding: 0 5px; /* Abstand rechts und links vom Bildschirmrand */
}

footer img {
  flex: 0 1 auto; /* Responsiv ohne feste Breite */
  max-width: 100%; /* Passt sich an die verfügbare Breite an */
  height: auto; /* Höhe bleibt proportional */
margin: 5px 0; /* Abstand oben und unten */
padding: 0 5px; /* Abstand rechts und links vom Bildschirmrand */
}

@media (max-width: 1000) {
      .container {
        flex-direction: column;
      }

nav {
        width: 100%;
      }
    }
  </style>