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

@ -106,3 +106,66 @@ header nav a:hover {
.tile a:hover { .tile a:hover {
background: #c00311; 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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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"> <link rel="stylesheet" href="styles.css">
</head> </head>
@ -36,13 +36,15 @@
<!-- Willkommen --> <!-- Willkommen -->
<section> <section>
<h2>Willkommen</h2> <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> </section>
<!-- Marken --> <!-- Marken -->
<section> <section>
<h2>Beliebte Rennrad Marken</h2> <h2>Beliebte Rennrad Marken</h2>
<ul> <ul>
<li>Thömus</li>
<li>Pinarello</li>
<li>Specialized</li> <li>Specialized</li>
<li>Trek</li> <li>Trek</li>
<li>Canyon</li> <li>Canyon</li>
@ -72,11 +74,37 @@
</div> </div>
<!-- weitere Kacheln nach Bedarf --> <!-- weitere Kacheln nach Bedarf -->
</section> </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> </main>
<footer> <footer>
<p>© 2026 Rennrad Website</p> <p>© 2026 Rennrad Website</p>
</footer> </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> </body>
</html> </html>