Veranstaltungen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Veranstaltungen</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
color: #333;
}
h1 {
text-align: center;
color: #4CAF50;
font-size: 48px;
margin-top: 30px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 30px;
font-weight: bold;
color: #333;
margin: 20px 0;
text-transform: uppercase;
letter-spacing: 1px;
}
.upcoming-events, .past-events {
margin: 20px auto;
width: 90%;
max-width: 1200px;
}
.event-card {
display: flex;
align-items: center;
background-color: white;
margin-bottom: 20px;
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.event-card img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 8px;
margin-right: 20px;
}
.event-card .event-info {
display: flex;
flex-direction: column;
}
.event-card .event-info .event-date {
font-size: 18px;
color: #555;
margin-bottom: 10px;
}
.event-card .event-info .event-name {
font-size: 22px;
font-weight: bold;
color: #333;
text-decoration: none;
transition: color 0.3s;
}
.event-card .event-info .event-name:hover {
color: #4CAF50;
}
@media (max-width: 768px) {
.event-card {
flex-direction: column;
align-items: flex-start;
}
.event-card img {
width: 80px;
height: 80px;
}
h1 {
font-size: 36px;
}
}
</style>
</head>
<body>
<h1>Veranstaltungen</h1>
<div class="upcoming-events">
<div class="section-title">Kommende Veranstaltungen</div>
<div class="event-card">
<img src="bild1.jpg" alt="Neujahrsparty">
<div class="event-info">
<div class="event-date">01. Januar 2025</div>
<a href="#" class="event-name">Neujahrsparty</a>
</div>
</div>
<div class="event-card">
<img src="bild2.jpg" alt="Valentinstag-Gala">
<div class="event-info">
<div class="event-date">14. Februar 2025</div>
<a href="#" class="event-name">Valentinstag-Gala</a>
</div>
</div>
<div class="event-card">
<img src="bild3.jpg" alt="Frühlingsfest">
<div class="event-info">
<div class="event-date">25. März 2025</div>
<a href="#" class="event-name">Frühlingsfest</a>
</div>
</div>
</div>
<div class="past-events">
<div class="section-title">Vergangene Veranstaltungen</div>
<div class="event-card">
<img src="bild4.jpg" alt="Weihnachtsmarkt">
<div class="event-info">
<div class="event-date">10. Dezember 2024</div>
<a href="#" class="event-name">Weihnachtsmarkt</a>
</div>
</div>
<div class="event-card">
<img src="bild5.jpg" alt="Herbstmesse">
<div class="event-info">
<div class="event-date">05. November 2024</div>
<a href="#" class="event-name">Herbstmesse</a>
</div>
</div>
<div class="event-card">
<img src="bild6.jpg" alt="Oktoberfest">
<div class="event-info">
<div class="event-date">20. Oktober 2024</div>
<a href="#" class="event-name">Oktoberfest</a>
</div>
</div>
</div>
</body>
</html>
