add file #14
2
lara-hofer.txt
Normal file
2
lara-hofer.txt
Normal file
@ -0,0 +1,2 @@
|
||||
Dies ist Laras persönliches File.
|
||||
Ich schreibe mal eine zweite Zeile.
|
||||
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