{event.title}
- -{event.date}
-{event.description}
- -
+ 
+
-
-
-
-
- Gallus Pub
-
diff --git a/Gallus_Pub_v1/src/pages/index.astro b/Gallus_Pub_v1/src/pages/index.astro
index 5fa03ef..2529120 100644
--- a/Gallus_Pub_v1/src/pages/index.astro
+++ b/Gallus_Pub_v1/src/pages/index.astro
@@ -8,10 +8,10 @@ import EventsGrid from '../components/EventsGrid.astro';
import Drinks from "../components/Drinks.astro";
const events = [
- { title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
- { title: 'Pub Quiz', date: 'Fr, 25. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
- { title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
- { title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
+ {image: '/images/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
+ {image: '/images/Logo.png', title: 'Pub Quiz', date: 'Fr, 25. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
+ {image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
+ {image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
];
---
diff --git a/Gallus_Pub_v1/styles/components/Drinks.css b/Gallus_Pub_v1/styles/components/Drinks.css
index 6915f0d..3709508 100644
--- a/Gallus_Pub_v1/styles/components/Drinks.css
+++ b/Gallus_Pub_v1/styles/components/Drinks.css
@@ -1,57 +1,6 @@
.Drinks {
- font-family: sans-serif;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-top: 2rem;
- text-align: center;
- background-color: #fff;
- color: #ceb39b;
- padding: 2rem;
- width: 100%;
-}
-
-.title {
- font-size: 1.5rem;
- margin-bottom: 1rem;
-}
-
-.card-link {
- border: 1px solid #000;
- padding: 0.5rem 1rem;
- margin-bottom: 2rem;
- color: #fff;
- background: linear-gradient(45deg, #ffa500, #ff7f00);
-}
-
-.monats-hit {
- margin-bottom: 1rem;
-}
-
-.mate-vodka {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-bottom: 1rem;
-}
-
-.circle {
- height: 6em;
- width: 6em;
- border: 2px solid #000;
- border-radius: 50%;
- margin: 1rem;
-}
-
-.circle-row {
- display: flex;
- justify-content: center;
- gap: 2rem;
- margin: 1rem 0;
-}
-
-.note {
- margin-top: 2rem;
- font-style: italic;
- text-align: center;
+ width: 100%;
+ max-width: 1600px;
+ margin: 0 auto;
+ padding: 2rem 0;
}
\ No newline at end of file
diff --git a/Gallus_Pub_v1/styles/components/EventsGrid.css b/Gallus_Pub_v1/styles/components/EventsGrid.css
index f3f6edf..6f56e97 100644
--- a/Gallus_Pub_v1/styles/components/EventsGrid.css
+++ b/Gallus_Pub_v1/styles/components/EventsGrid.css
@@ -1,32 +1,20 @@
-article {
- margin-bottom: 1em;
+.events-gird {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 30px;
+ padding: 2rem 0;
+ width: 100%;
}
-.events-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
- gap: 2rem;
- margin: 3rem 0;
+@media (min-width: 1600px) {
+ .events-gird {
+ justify-content: space-between;
+ }
}
-.event-card {
- background-color: #2a2a2a;
- padding: 1.5rem;
- border-radius: 8px;
- transition: transform 0.2s;
-}
-.event-card:hover {
- transform: translateY(-5px);
-}
-.event-card h3 {
- margin-bottom: 0.5rem;
- color: #ffa500;
-}
-.event-card .date {
- font-size: 0.9rem;
- color: #ccc;
- margin-bottom: 1rem;
-}
-.event-card .description {
- font-size: 1rem;
- color: #eee;
+
+@media (max-width: 1599px) {
+ .events-gird {
+ justify-content: space-around;
+ }
}
\ No newline at end of file
diff --git a/Gallus_Pub_v1/styles/components/HoverCard.css b/Gallus_Pub_v1/styles/components/HoverCard.css
new file mode 100644
index 0000000..57832b8
--- /dev/null
+++ b/Gallus_Pub_v1/styles/components/HoverCard.css
@@ -0,0 +1,112 @@
+.hover-card {
+ position: relative;
+ width: 350px;
+ height: 400px;
+ border-radius: 8px;
+ background-color: #213b28;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ transition: transform 0.3s ease;
+ overflow: hidden;
+ margin: 1rem;
+ display: flex;
+ flex-direction: column;
+}
+
+.hover-card:hover {
+ transform: translateY(-5px);
+}
+
+.card-title {
+ padding: 15px 15px 5px 15px;
+ margin: 0;
+ color: #ceb39b;
+ font-size: 1.5rem;
+ text-align: center;
+ order: -2;
+}
+
+.card_date {
+ padding: 0 15px 15px 15px;
+ margin: 0;
+ color: #ceb39b;
+ font-size: 1rem;
+ text-align: center;
+ font-style: italic;
+ order: -1;
+}
+
+.image-container {
+ flex-grow: 1;
+ position: relative;
+ overflow: hidden;
+}
+
+.card-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: opacity 0.3s ease;
+}
+
+.hover-text {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(33, 59, 40, 0.95);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.hover-text div {
+ color: #ceb39b;
+ text-align: center;
+ max-height: 100%;
+ width: 100%;
+ overflow-y: auto;
+ padding-right: 5px;
+}
+
+.hover-text div::-webkit-scrollbar {
+ width: 5px;
+}
+
+.hover-text div::-webkit-scrollbar-track {
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 10px;
+}
+
+.hover-text div::-webkit-scrollbar-thumb {
+ background: #ceb39b;
+ border-radius: 10px;
+}
+
+.hover-text div {
+ scrollbar-width: thin;
+ scrollbar-color: #ceb39b rgba(0, 0, 0, 0.1);
+}
+
+.hover-card:hover .hover-text {
+ opacity: 1;
+}
+
+.hover-card:hover .card-image {
+ opacity: 0.1;
+}
+
+.hover-text p {
+ margin: 0;
+ padding: 0;
+}
+
+@media (max-width: 768px) {
+ .hover-card {
+ width: 100%;
+ max-width: 350px;
+ }
+}
\ No newline at end of file
diff --git a/Gallus_Pub_v1/styles/index.css b/Gallus_Pub_v1/styles/index.css
index 3555b8a..dbfe7ed 100644
--- a/Gallus_Pub_v1/styles/index.css
+++ b/Gallus_Pub_v1/styles/index.css
@@ -14,7 +14,7 @@ body {
/* === Container für zentralen Content === */
.container {
- max-width: 1140px;
+ max-width: 1600px;
+ width: 90%;
margin: 0 auto;
- padding: 0 1rem;
}
\ No newline at end of file
{title}
+{title}
+{date}
+
+
-
-
+
+
diff --git a/Gallus_Pub_v1/src/components/Layout.astro b/Gallus_Pub_v1/src/components/Layout.astro
index 8f0c69f..df8d1ce 100644
--- a/Gallus_Pub_v1/src/components/Layout.astro
+++ b/Gallus_Pub_v1/src/components/Layout.astro
@@ -14,7 +14,6 @@ import Footer from "./Footer.astro";
{description}
-