koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

webseite comedy

Browse Source
This commit is contained in:
Estelle Köhler 2026-03-12 11:43:38 +01:00
parent 52af606d12
commit 5a6b363093
2 changed files with 113 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
estelle-köhler.html
View File

@ -3,10 +3,120 @@
<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>Document</title> <title>Estelle's Comedy Show</title>
<style>
:root {
--bg-color: #111;
--text-color: #eee;
--accent-color: #ff69b4; /* pink accent */
--accent2-color: #9370db; /* lila accent */
--font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
margin: 0;
font-family: var(--font-stack);
color: var(--text-color);
background-color: var(--bg-color);
text-align: center;
overflow-x: hidden;
}
header {
background-color: #222;
padding: 1rem;
text-align: center;
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
.hero {
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero img {
max-height: 400px;
width: auto;
border-radius: 8px;
border: 4px solid var(--accent-color);
}
.tour {
padding: 2rem;
}
.tour table {
width: 100%;
max-width: 600px;
margin: 0 auto;
border-collapse: collapse;
}
.tour th, .tour td {
border: 1px solid #444;
padding: 0.5rem;
text-align: center;
}
.tour th {
background-color: #222;
}
@media (max-width: 600px) {
.hero img {
max-width: 200px;
}
}
</style>
</head> </head>
<body> <body>
<h1>The trying website</h1> <header>
<button>Contact</button> <h1>Estelle's Comedy Show</h1>
</header>
<section class="hero">
<h2>Live on stage!</h2>
<img src="image_2e567a.png" alt="Estelle auf der Bühne">
</section>
<section class="tour">
<h2>Tour-Daten</h2>
<table>
<thead>
<tr><th>Datum</th><th>Ort</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>15. April 2026</td><td>Zürich</td><td>Tickets verfügbar</td></tr>
<tr><td>22. April 2026</td><td>Bern</td><td>Ausverkauft</td></tr>
<tr><td>30. April 2026</td><td>Basel</td><td>Tickets verfügbar</td></tr>
<tr><td>5. Mai 2026</td><td>Lausanne</td><td>Vorverkauf</td></tr>
</tbody>
</table>
</section>
<footer>
<p>&copy; 2026 Estelle's Comedy Show</p>
</footer>
<script>
// cursor laugh effect
document.addEventListener('mousemove', function(e) {
const span = document.createElement('span');
span.textContent = 'Ha Ha Ha';
span.style.position = 'fixed';
span.style.left = e.pageX + 'px';
span.style.top = e.pageY + 'px';
span.style.color = 'var(--accent-color)';
span.style.pointerEvents = 'none';
span.style.opacity = '1';
span.style.transition = 'transform 1s ease-out, opacity 1s ease-out';
const size = Math.random() * 10 + 14;
span.style.fontSize = size + 'px';
span.style.transform = `translate(-50%, -50%) rotate(${(Math.random()*40-20)}deg)`;
document.body.appendChild(span);
requestAnimationFrame(() => {
span.style.transform += ' translateY(-30px)';
span.style.opacity = '0';
});
setTimeout(() => document.body.removeChild(span), 1000);
});
</script>
</body> </body>
</html> </html>

BIN
estelle.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB