137 lines
4.8 KiB
HTML
137 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Kontakt - Entwicklung interaktiver Softwareanwendungen">
|
||
<title>Kontakt – EIS Projekt</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="icon" href="img/logo.png" type="image/png">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="header-container">
|
||
<div class="logo">
|
||
<img src="img/logo.png" alt="Logo">
|
||
<div class="logo-text">
|
||
<span class="institution">David & Karo</span>
|
||
<span class="project">EIS Projekt</span>
|
||
</div>
|
||
</div>
|
||
<!-- Dark Mode Toggle Button -->
|
||
<button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
|
||
<span class="dark-mode-icon">🌙</span>
|
||
</button>
|
||
<!-- Hamburger Menu Button (nur Mobile) -->
|
||
<button id="nav-toggle" type="button" class="nav-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
<nav id="main-nav">
|
||
<a href="index.html">Start</a>
|
||
<a href="ueber_uns.html">Über uns</a>
|
||
<a href="eis_projekt.html">Projekt</a>
|
||
<a href="team.html">Team</a>
|
||
<a href="galerie.html">Galerie</a>
|
||
<a href="notenrechner.html">Notenrechner</a>
|
||
<a href="textanalyse.html">Textanalyse</a>
|
||
<a href="kontakt.html" class="active">Kontakt</a>
|
||
<a href="impressum.html">Impressum</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<h1>Kontakt</h1>
|
||
<p>Sag Bescheid! Wir freuen uns auf deine Nachricht! 💌</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>📧 Kontaktinfos</h2>
|
||
<div class="cards">
|
||
<div class="card">
|
||
<h3>David</h3>
|
||
<p><strong>Email:</strong> <a href="mailto:david.kertzscher@stud.ph-weingarten.de">david.kertzscher@stud.ph-weingarten.de</a></p>
|
||
<p><strong>Vibe:</strong> Full-Stack Magic ✨</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Karo</h3>
|
||
<p><strong>Email:</strong> <a href="mailto:karolina.kibler@stud.ph-weingarten.de">karolina.kibler@stud.ph-weingarten.de</a></p>
|
||
<p><strong>Vibe:</strong> Creative Developer 💫</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>💬 Kontaktformular</h2>
|
||
<p>Senden Sie uns eine Nachricht über das folgende Formular:</p>
|
||
<form id="contactForm" novalidate>
|
||
<div class="form-group">
|
||
<label for="name">Ihr Name *</label>
|
||
<input type="text" id="name" name="name" placeholder="z. B. Max Mustermann" autocomplete="name">
|
||
<span class="field-error" id="error-name"></span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email">E-Mail-Adresse *</label>
|
||
<input type="email" id="email" name="email" placeholder="z. B. max@beispiel.de" autocomplete="email">
|
||
<span class="field-error" id="error-email"></span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="subject">Betreff *</label>
|
||
<input type="text" id="subject" name="subject" placeholder="z. B. Frage zum Projekt">
|
||
<span class="field-error" id="error-subject"></span>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="message">Nachricht *</label>
|
||
<textarea id="message" name="message" placeholder="Schreib uns gerne alles, was dich beschäftigt! 💬" rows="5"></textarea>
|
||
<span class="field-error" id="error-message"></span>
|
||
</div>
|
||
|
||
<button type="submit" class="btn">Nachricht senden 💌</button>
|
||
</form>
|
||
<div id="formMessage"></div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>📍 Wo ihr uns findet</h2>
|
||
<p>Wir sind meistens im Web zu finden, aber auch gerne bereit für Meetings in der echten Welt! 🌍</p>
|
||
<p>
|
||
<strong>Online-Vibes:</strong><br>
|
||
Discord, Telegram, oder einfach eine DM 💬
|
||
</p>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>❓ Fragen?</h2>
|
||
<div class="cards">
|
||
<div class="card">
|
||
<h3>🎨 Design-Fragen</h3>
|
||
<p>Karo hat immer ein offenes Ohr für deine kreativen Ideen!</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>💻 Tech-Fragen</h3>
|
||
<p>David kann dir helfen, wenn es um Code und Technik geht!</p>
|
||
</div>
|
||
<div class="card">
|
||
<h3>🤝 Kooperationen</h3>
|
||
<p>Lass uns zusammenarbeiten! Wir lieben neue Projekte! 🚀</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>© 2026 – Made with 💕 & ✨ – David & Karo</p>
|
||
<div class="footer-links">
|
||
<a href="impressum.html">Impressum</a>
|
||
<a href="kontakt.html">Kontakt</a>
|
||
<a href="#">Datenschutz</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="js/script.js"></script>
|
||
</body>
|
||
</html>
|