Andreas König

/* Definiert benutzerdefinierte Farbvariablen */ :root { --petrol-color: rgba(20, 87, 104, 1); /* Petrol-Farbe */ --orange-color: rgba(244, 121, 44, 1); /* Orange-Farbe */ } /* Stil für den Container, der das Bild und den Namen enthält */ .image-container { display: flex; flex-direction: column; /* Setzt die Ausrichtung der Elemente auf eine Spalte */ justify-content: center; /* Vertikal zentrieren */ align-items: center; /* Horizontal zentrieren */ min-height: 300px; /* Mindesthöhe von 250px */ overflow: hidden; /* Verhindert das Anzeigen des Bildes außerhalb des runden Rahmens */ margin: 0; /* Entfernt den äußeren Abstand */ padding: 0; /* Entfernt den inneren Abstand */ } /* Stil für den Inhalt innerhalb des Container */ .content { display: flex; flex-direction: column; align-items: center; margin-top: 10px; /* Abstand zwischen Bild und Name */ } /* Stil für das runde Bild */ .rounded-image { width: 300px; /* Hier kannst du die gewünschte Breite des Bildes einstellen */ height: 300px; /* Automatische Höhe basierend auf Breite */ border-radius: 50%; background-size: cover; /* Skaliert das Hintergrundbild, um den Container vollständig zu bedecken */ background-position: center; /* Zentriert das Hintergrundbild im Container */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: fügt einen Schatten hinzu, um das Bild hervorzuheben */ border: 5px solid var(--orange-color); /* Standard-Rahmenfarbe: Orange */ } /* Stil für den Namen */ .name { font-size: 16px; /* Hier kannst du die gewünschte Schriftgröße des Namens einstellen */ font-weight: bold; color: var(--petrol-color); /* Farbe des Namens */ text-align: center; /* Zentriert den Text */ margin-top: 10px; /* Abstand über dem Namen */ }