82 lines
2.6 KiB
HTML
82 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Kontakt – Lena</title>
|
||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<style>
|
||
|
||
/* Spezielles Design für das Formular */
|
||
form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
background: white;
|
||
padding: 2rem;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||
}
|
||
input, textarea, button {
|
||
padding: 0.8rem;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 6px;
|
||
font-size: 1rem;
|
||
}
|
||
button {
|
||
background-color: #4f46e5;
|
||
color: white;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
border: none;
|
||
transition: background 0.3s;
|
||
}
|
||
button:hover {
|
||
background-color: #4338ca;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav>
|
||
<ul>
|
||
<li><a href="index.html">Home</a></li>
|
||
<li><a href="ueber_uns.html">Über mich</a></li>
|
||
<li><a href="eis_projekt.html">EIS Projekt</a></li>
|
||
<li><a href="kontakt.html">Kontakt</a></li>
|
||
<li><a href="impressum.html">Impressum</a></li>
|
||
<li><a href="notenrechner.html">Notenrechner</a></li>
|
||
<li><a href="textanalyse.html">Textanalyse</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<main>
|
||
<header>
|
||
<img src="img/logo.svg" alt="Logo" style="height: 40px;">
|
||
<h1>Kontakt</h1>
|
||
<p>Hast du Fragen an mich? Schreibe mir eine Nachricht!</p>
|
||
</header>
|
||
|
||
<section>
|
||
<form id="contactForm">
|
||
<label for="name">Name</label>
|
||
<input type="text" id="name" name="name" placeholder="Dein Name" required>
|
||
|
||
<label for="email">E-Mail</label>
|
||
<input type="email" id="email" name="email" placeholder="Deine E-Mail Adresse" required>
|
||
|
||
<label for="message">Nachricht</label>
|
||
<textarea id="message" name="message" rows="5" placeholder="Wie können wir dir helfen?" required></textarea>
|
||
|
||
<button type="submit">Nachricht senden</button>
|
||
</form>
|
||
<div id="formFeedback" style="margin-top: 1rem; display: none; color: #059669; font-weight: bold;">
|
||
Vielen Dank! Deine Nachricht wurde (simuliert) gesendet.
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|