Apply CSS styles to HTML elements

HTML

<div class="container">
  <h1>Experimentiere mit CSS!</h1>

  <!-- Textformatierung -->
  <p class="basic-text">Dies ist ein einfaches Beispiel für Textformatierungen.</p>
  <p class="bold-text">Dieser Text ist fett und hat eine andere Farbe.</p>
  <p class="italic-text">Dieser Text ist kursiv und hat eine Schatteneffekt.</p>
  <p class="uppercase-text">Der Text wird in Großbuchstaben angezeigt.</p>

  <!-- Box-Modell -->
  <div class="box"></div>
  <div class="box with-padding"></div>
  <div class="box with-margin"></div>

  <!-- Layout mit Flexbox -->
  <div class="flexbox-container">
    <div class="flexbox-item">Item 1</div>
    <div class="flexbox-item">Item 2</div>
    <div class="flexbox-item">Item 3</div>
  </div>

  <!-- Grid Layout -->
  <div class="grid-container">
    <div class="grid-item">Grid Item 1</div>
    <div class="grid-item">Grid Item 2</div>
    <div class="grid-item">Grid Item 3</div>
    <div class="grid-item">Grid Item 4</div>
  </div>

  <!-- Buttons -->
  <button class="btn">Klick mich</button>

  <!-- Card -->
  <div class="card">
    <h2>Card Titel</h2>
    <p>Dies ist eine einfache Card mit Schatteneffekten und abgerundeten Ecken.</p>
  </div>

  <!-- Animationen -->
  <div class="animated-box"></div>

  <!-- Hover-Effekte -->
  <div class="hover-box">Bewege die Maus hier!</div>

  <!-- Footer -->
  <footer>
    <p>Experimentiere mit CSS-Stilen in diesem Bereich!</p>
  </footer>
</div>

CSS

/* Grundlegende Layout- und Schriftarten */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  color: #333;
}

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}

/* Textformatierungen */
.basic-text {
  font-size: 18px;
}

.bold-text {
  font-weight: bold;
  color: #e74c3c;
}

.italic-text {
  font-style: italic;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.uppercase-text {
  text-transform: uppercase;
  font-size: 20px;
}

/* Box-Modell */
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 20px 0;
}

.with-padding {
  width: 100px;
  height: 100px;
  background-color: #9b59b6;
  padding: 20px;
}

.with-margin {
  width: 100px;
  height: 100px;
  background-color: #f39c12;
  margin: 40px;
}

/* Flexbox Layout */
.flexbox-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

.flexbox-item {
  background-color: #2ecc71;
  padding: 20px;
  width: 30%;
  text-align: center;
  border-radius: 8px;
}

/* Grid Layout */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 30px;
}

.grid-item {
  background-color: #f1c40f;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

/* Button-Stil */
.btn {
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #45a049;
}

/* Card-Stil */
.card {
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  margin-top: 40px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card h2 {
  color: #34495e;
}

.card p {
  font-size: 16px;
}

/* Animationen */
.animated-box {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  margin-top: 40px;
  animation: moveBox 3s ease-in-out infinite alternate;
}

@keyframes moveBox {
  0% {
   ...