diff --git a/css/style.css b/css/style.css index ac2a83f..e0fabec 100644 --- a/css/style.css +++ b/css/style.css @@ -617,6 +617,107 @@ textarea { color: #d946ef; } +/* =========================== + Team Page Styles + =========================== */ + +.team-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 2.5rem; + margin: 2rem 0; +} + +.team-card { + display: flex; + flex-direction: row; + gap: 1.5rem; + background: rgba(255, 255, 255, 0.85); + border: 2px solid rgba(255, 105, 180, 0.2); + border-radius: 20px; + padding: 2rem; + box-shadow: 0 8px 32px rgba(255, 20, 147, 0.15); + transition: all 0.3s ease; + animation: slideUp 0.6s ease-out; +} + +.team-card:hover { + transform: translateY(-8px); + box-shadow: 0 12px 40px rgba(255, 20, 147, 0.25); + border-color: rgba(255, 105, 180, 0.4); +} + +.team-image { + flex-shrink: 0; + width: 180px; + height: 180px; + border-radius: 15px; + overflow: hidden; + border: 3px solid rgba(255, 105, 180, 0.3); + background: linear-gradient(135deg, #ffc0cb 0%, #ffe6f0 100%); + display: flex; + align-items: center; + justify-content: center; + animation: float-flower 3s ease-in-out infinite; +} + +.team-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.team-info { + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; +} + +.team-info h3 { + font-size: 1.8rem; + margin-bottom: 0.5rem; + color: #ff1493; +} + +.team-meta { + font-size: 0.95rem; + color: #b8659c; + margin-bottom: 1rem; + font-weight: 500; +} + +.team-description { + color: #6b3a5f; + line-height: 1.8; + margin-bottom: 1.5rem; + font-size: 1rem; +} + +.team-skills { + display: flex; + flex-wrap: wrap; + gap: 0.7rem; +} + +.skill-tag { + display: inline-block; + background: linear-gradient(135deg, #ffc0cb 0%, #ffe6f0 100%); + color: #d946ef; + padding: 0.4rem 1rem; + border-radius: 25px; + font-size: 0.9rem; + font-weight: 500; + border: 1px solid rgba(255, 105, 180, 0.2); + transition: all 0.3s ease; +} + +.skill-tag:hover { + background: linear-gradient(135deg, #ff69b4 0%, #ffc0cb 100%); + color: #fff; + transform: scale(1.05); +} + /* =========================== Responsive Design =========================== */ @@ -693,4 +794,19 @@ textarea { .galerie img { height: 200px; } + + .team-container { + grid-template-columns: 1fr; + } + + .team-card { + flex-direction: column; + align-items: center; + text-align: center; + } + + .team-image { + width: 150px; + height: 150px; + } } diff --git a/eis_projekt.html b/eis_projekt.html index ee20bf3..68328b3 100644 --- a/eis_projekt.html +++ b/eis_projekt.html @@ -22,6 +22,7 @@ Start Über uns Projekt + Team Galerie Kontakt Impressum diff --git a/galerie.html b/galerie.html index d076ae8..8dd1cf4 100644 --- a/galerie.html +++ b/galerie.html @@ -22,6 +22,7 @@ Start Über uns Projekt + Team Galerie Kontakt Impressum diff --git a/img/avatardavid.png b/img/avatardavid.png new file mode 100644 index 0000000..dd09cd2 Binary files /dev/null and b/img/avatardavid.png differ diff --git a/img/avatarkaro.png b/img/avatarkaro.png new file mode 100644 index 0000000..28b461a Binary files /dev/null and b/img/avatarkaro.png differ diff --git a/impressum.html b/impressum.html index c66331b..7c1d5d1 100644 --- a/impressum.html +++ b/impressum.html @@ -22,6 +22,7 @@ Start Über uns Projekt + Team Galerie Kontakt Impressum diff --git a/index.html b/index.html index efef8a8..abbed5c 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,7 @@ Start Über uns Projekt + Team Galerie Kontakt Impressum diff --git a/kontakt.html b/kontakt.html index af7e9b2..93cc384 100644 --- a/kontakt.html +++ b/kontakt.html @@ -22,6 +22,7 @@ Start Über uns Projekt + Team Galerie Kontakt Impressum diff --git a/team.html b/team.html new file mode 100644 index 0000000..b1b25af --- /dev/null +++ b/team.html @@ -0,0 +1,96 @@ + + + + + + + Team – David & Karo + + + + +
+
+ + +
+
+ +
+
+

🌸 Unser Team 💕

+

Lerne David & Karo kennen – die kreativen Köpfe hinter diesem Projekt! 🌷✨

+
+ +
+

👥 Team Members

+

Hier stellen sich die Macher dieses Projekts vor:

+ +
+ +
+
+ David Avatar +
+
+

David 👨‍💻

+

Alter: 23 Jahre | Gender: Boy

+

+ David ist leidenschaftlicher Gamer und Bildbearbeiter. Mit einem Auge für visuelle Details und der Liebe zu Computerspielen bringt er kreative Energie ins Team. Seine Fähigkeiten in der Bildbearbeitung sorgen dafür, dass das Projekt optisch top aussieht! 🎮🖼️ +

+
+ 🎮 Gaming + 🖼️ Bildbearbeitung + 💻 Tech +
+
+
+ + +
+
+ Karo Avatar +
+
+

Karo 👩‍🎨

+

Alter: 24 Jahre | Gender: Girl

+

+ Karo ist eine Design-Enthusiastin mit einem flauschigen Kater an ihrer Seite. Sie liebt es, kreative Designs zu gestalten und Projekte zum Leben zu erwecken. Mit ihrem Design-Know-how und der entspannten Energie ihres Katers schafft sie Inspiration und Gemütlichkeit im Team! 🐱✨ +

+
+ 🎨 Design + 🐱 Katzenliebhaberin + ✨ Kreativität +
+
+
+
+
+ +
+

🤝 Zusammen sind wir stark

+

David und Karo bilden ein perfektes Team: Während David mit technischen Fähigkeiten und visueller Kreativität glänzt, bringt Karo Design-Expertise und künstlerische Vision ein. Zusammen schaffen sie ein interaktives Projekt, das nicht nur funktional ist, sondern auch eine Freude zu nutzen! 💪✨

+
+ + +
+ + + + diff --git a/ueber_uns.html b/ueber_uns.html index b821232..3cbf2e4 100644 --- a/ueber_uns.html +++ b/ueber_uns.html @@ -22,6 +22,7 @@ Start Über uns Projekt + Team Galerie Kontakt Impressum