110 lines
3.2 KiB
HTML
110 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Cycle with me</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<header>
|
||
<h1>Rennräder</h1>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="#">Startseite</a></li>
|
||
<li><a href="#">Modelle</a></li>
|
||
<li><a href="#">Tipps</a></li>
|
||
<li><a href="#">Kontakt</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section class="hero">
|
||
<img src="hero-bike.jpg" alt="Rennrad auf offener Straße">
|
||
<div class="overlay"></div>
|
||
<div class="content">
|
||
<h2>Erlebe die Freiheit auf zwei Rädern</h2>
|
||
<p>Alles rund ums Rennrad – Technik, Training und Inspiration.</p>
|
||
<a href="#">Mehr erfahren</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Willkommen -->
|
||
<section>
|
||
<h2>Willkommen</h2>
|
||
<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>
|
||
<li>Bianchi</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Kachel‑Grid -->
|
||
<section class="tiles">
|
||
<div class="tile">
|
||
<img src="tile1.jpg" alt="Produkt 1">
|
||
<h3>Produkt 1</h3>
|
||
<p>Kurze Beschreibung des Produkts oder Blogbeitrags.</p>
|
||
<a href="#">Details</a>
|
||
</div>
|
||
<div class="tile">
|
||
<img src="tile2.jpg" alt="Produkt 2">
|
||
<h3>Produkt 2</h3>
|
||
<p>Kurze Beschreibung des Produkts oder Blogbeitrags.</p>
|
||
<a href="#">Details</a>
|
||
</div>
|
||
<div class="tile">
|
||
<img src="tile3.jpg" alt="Produkt 3">
|
||
<h3>Produkt 3</h3>
|
||
<p>Kurze Beschreibung des Produkts oder Blogbeitrags.</p>
|
||
<a href="#">Details</a>
|
||
</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> |