Compare commits
5 Commits
main
...
feature-la
| Author | SHA1 | Date | |
|---|---|---|---|
|
ed0c5f7835 | ||
|
|
f301c39309 | ||
|
|
0904a0aaa3 | ||
|
|
4b2f1f5f27 | ||
|
|
653707ce00 |
171
styles.css
Normal file
171
styles.css
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
body, html {
|
||||||
|
margin: 5;
|
||||||
|
padding: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background: #fff;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
background: #e30613; /* Thömus‑Rot */
|
||||||
|
color: #fff;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
header nav ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 10;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
header nav a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
header nav a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.hero img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.hero .overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
.hero .content {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%; left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
}
|
||||||
|
.hero .content h2 {
|
||||||
|
margin: 0 0 .5rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.hero .content a {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: .75rem 1.5rem;
|
||||||
|
background: #e30613;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.hero .content a:hover {
|
||||||
|
background: #c00311;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tiles */
|
||||||
|
.tiles {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 2rem 1rem;
|
||||||
|
}
|
||||||
|
.tile {
|
||||||
|
background: #fafafa;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.tile img {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.tile h3 {
|
||||||
|
margin: .5rem 0;
|
||||||
|
}
|
||||||
|
.tile p {
|
||||||
|
padding: 0 1rem 1rem;
|
||||||
|
font-size: .9rem;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.tile a {
|
||||||
|
display: block;
|
||||||
|
margin: 0 1rem 1rem;
|
||||||
|
padding: .5rem;
|
||||||
|
background: #e30613;
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
110
website-lara.html
Normal file
110
website-lara.html
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
<!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>
|
||||||
Loading…
x
Reference in New Issue
Block a user