itenmarcalex/msc-uxd-fs26-test
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Erfolgs- und Fehlermeldung bei Email

Browse Source
This commit is contained in:
Lara 2026-03-12 11:37:32 +01:00
parent f301c39309
commit ed0c5f7835
2 changed files with 93 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
styles.css
View File

@ -105,4 +105,67 @@ header nav a:hover {
}
.tile a:hover {
background: #c00311;
}
/* styles.css (weiter unten ergänzen) */
form {
max-width: 400px;
margin: 2rem auto; /* zentriert und etwas Abstand oben/unten */
padding: 1rem 1.5rem;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
}
form label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
form input[type="email"] {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 1rem;
margin-bottom: 1rem;
}
form button {
background: #e30613;
color: #fff;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
form button:hover {
background: #c00311;
}
/* styles.css – am Ende hinzufügen */
.message {
margin-top: 1rem;
padding: 0.75rem;
border-radius: 4px;
text-align: center;
font-weight: bold;
}
.message.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.message.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}

32
website-lara.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Rennrad Website</title>
<title>Cycle with me</title>
<link rel="stylesheet" href="styles.css">
</head>
@ -36,13 +36,15 @@
<!-- Willkommen -->
<section>
<h2>Willkommen</h2>
<p>Diese Website dreht sich um Rennräder, Technik und Training.</p>
<p>Diese Website dreht sich um Rennräder, Technik und Training. Hier erfährst du die aktuellsten Trends und Tipps aus der Welt der Rennräder.</p>
</section>
<!-- Marken -->
<section>
<h2>Beliebte Rennrad Marken</h2>
<ul>
<li>Thömus</li>
<li>Pinarello</li>
<li>Specialized</li>
<li>Trek</li>
<li>Canyon</li>
@ -72,11 +74,37 @@
</div>
<!-- weitere Kacheln nach Bedarf -->
</section>
<form id="emailForm">
<label for="email">E-Mail Adresse:</label><br>
<input type="email" id="email" name="email" placeholder="deine@email.com" required>
<br><br>
<button type="submit">Absenden</button>
<div id="message"></div>
</form>
</main>
<footer>
<p>© 2026 Rennrad Website</p>
</footer>
<script>
document.getElementById('emailForm').addEventListener('submit', function(event) {
event.preventDefault();
const email = document.getElementById('email').value;
const messageDiv = document.getElementById('message');
if (email.trim() === '') {
messageDiv.textContent = '❌ Bitte gib eine gültige E-Mail Adresse ein.';
messageDiv.className = 'message error';
} else {
messageDiv.textContent = '✅ Danke! Deine E-Mail wurde erfolgreich versendet.';
messageDiv.className = 'message success';
document.getElementById('email').value = ''; // Feld leeren
}
});
</script>
</body>
</html>