Erstellung einer Blog-Karte. Die Standard-Positionierung wird mithilfe von Flex angepasst.

Die Aufgabe besteht darin:
- Das Elternelement zu identifizieren, das sowohl das Beitragsbild (`img`-Tag mit dem Klassennamen `post-image`) als auch die Beitragsinformationen (`div`-Tag mit dem Klassennamen `post-info`) enthält.
- Flex-Eigenschaften auf das Elternelement (`div`-Tag mit dem Klassennamen `blog-card`) anzuwenden.
- Die Elemente innerhalb der Karte horizontal zu zentrieren.
- Sicherzustellen, dass die Elemente die gesamte Höhe der Karte ausfüllen.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iYmxvZy1jYXJkIj4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9hNWQ2ZWY1MC1jYmY1LTRhOTUtODlkNC00NzViNzA0Y2Q4MTEvc2VjdGlvbis0K0ZsZXhib3gvc3BhY2VzaGlwLnBuZyIKICAgICAgICB3aWR0aD0iMjAwcHgiCiAgICAgICAgYWx0PSJQb3N0IEltYWdlIgogICAgICAgIGNsYXNzPSJwb3N0LWltYWdlIgogICAgICAvPgogICAgICA8ZGl2IGNsYXNzPSJwb3N0LWluZm8iPgogICAgICAgIDxoMyBjbGFzcz0icG9zdC10aXRsZSI+U3BhY2VjcmFmdDwvaDM+CiAgICAgICAgPHAgY2xhc3M9InBvc3QtbWV0YSI+UG9zdGVkIG9uIEphbnVhcnkgMSwgMjAyMyBieSBQZXRlciBLZXlnZW48L3A+CiAgICAgICAgPHAgY2xhc3M9InBvc3QtZXhjZXJwdCI+U3BhY2UgdmVoaWNsZSBmb3IgY29sb25pemF0aW9uPC9wPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJyZWFkLW1vcmUiPlJlYWQgTW9yZTwvYT4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmJsb2ctY2FyZCB7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgZGlzcGxheTogX19fOwogIGZsZXgtZGlyZWN0aW9uOiBfX187CiAgYWxpZ24taXRlbXM6IF9fXzsKICBqdXN0aWZ5LWNvbnRlbnQ6IF9fXzsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBoZWlnaHQ6IDQwMHB4OwogIHdpZHRoOiA0MDBweDsKICBib3JkZXI6IDFweCBzb2xpZCAjY2NjOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4OwogIG1hcmdpbjogMCBhdXRvOwp9CgoucG9zdC1pbWFnZSB7CiAgaGVpZ2h0OiBhdXRvOwogIG1heC13aWR0aDogMTAwJTsKICBkaXNwbGF5OiBibG9jazsKfQoKLnBvc3QtaW5mbyB7CiAgcGFkZGluZzogMjBweDsKfQoKLnBvc3QtdGl0bGUgewogIGZvbnQtc2l6ZTogMS41cmVtOwogIG1hcmdpbjogMCAwIDEwcHggMDsKfQoKLnBvc3QtbWV0YSB7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjODg4OwogIG1hcmdpbjogMCAwIDEwcHggMDsKfQoKLnBvc3QtZXhjZXJwdCB7CiAgbWFyZ2luOiAwIDAgMjBweCAwOwp9CgoucmVhZC1tb3JlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA3YmZmOwogIGNvbG9yOiAjZmZmOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0=

- `display: flex;` kann nur auf das Elternelement angewendet werden.
- Die Standardausrichtung von Flex ist Zeile, daher muss sie mit der Eigenschaft `flex-direction: column;` geändert werden.
- Um Elemente horizontal zu zentrieren, `align-items: center;` verwenden.
- Um Elemente vertikal zu verteilen, `justify-content: space-between;` verwenden.

LmJsb2ctY2FyZCB7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIC8qIENoYW5nZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwogIGhlaWdodDogNDAwcHg7CiAgd2lkdGg6IDQwMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wb3N0LWltYWdlIHsKICBoZWlnaHQ6IGF1dG87CiAgbWF4LXdpZHRoOiAxMDAlOwogIGRpc3BsYXk6IGJsb2NrOwp9CgoucG9zdC1pbmZvIHsKICBwYWRkaW5nOiAyMHB4Owp9CgoucG9zdC10aXRsZSB7CiAgZm9udC1zaXplOiAxLjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgoucG9zdC1tZXRhIHsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM4ODg7CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgoucG9zdC1leGNlcnB0IHsKICBtYXJnaW46IDAgMCAyMHB4IDA7Cn0KCi5yZWFkLW1vcmUgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQ==

Beherrschen Sie die Grundlagen von CSS, der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie die Fähigkeiten, um optisch ansprechende und gut strukturierte Webseiten zu erstellen.

Layouts mit Hintergrundfarben, Bildern, Pseudoelementen und Schatten aufwerten. Visuelle Komponenten für Tiefe und Kontrast gestalten.

Herausforderung: Erstellen Sie Eine Vertikale Blog-Karte Mit Flexbox