first version with the components: EventGird, welcome and events
This commit is contained in:
Selina Erci
26
Gallus_Pub_v1/src/components/EventsGrid.astro
Normal file
26
Gallus_Pub_v1/src/components/EventsGrid.astro
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
// src/components/EventsGrid.astro
|
||||
interface Event {
|
||||
title: string;
|
||||
date: Date;
|
||||
description: string;
|
||||
}
|
||||
const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] };
|
||||
---
|
||||
|
||||
<section class="events-gird container">
|
||||
|
||||
{events.map((event: Event) => (
|
||||
|
||||
<article class="event-card">
|
||||
|
||||
<h3>{event.title}</h3>
|
||||
|
||||
<p class="date">{event.date}</p>
|
||||
<p class="description">{event.description}</p>
|
||||
|
||||
</article>
|
||||
|
||||
))}
|
||||
|
||||
</section>
|
||||
@ -1,17 +1,9 @@
|
||||
---
|
||||
// src/components/Footer.astro
|
||||
---
|
||||
|
||||
---
|
||||
<!-- components/Footer.astro -->
|
||||
<footer>
|
||||
<p>© 2024 Meine Webseite. Alle Rechte vorbehalten.</p>
|
||||
<footer class="footer">
|
||||
<p>
|
||||
© {new Date().getFullYear()} Gallus Pub. Alle Rechte vorbehalten.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,71 +1,37 @@
|
||||
<!-- components/Header.astro -->
|
||||
<header>
|
||||
<div class="header-container">
|
||||
<div class="logo-container">
|
||||
<a href="/">
|
||||
<img src="/images/Logo.png" alt="Logo" class="logo">
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Startseite</a></li>
|
||||
<li><a href="/contact">Kontakt</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
---
|
||||
// src/components/Header.astro
|
||||
const { url } = Astro;
|
||||
---
|
||||
|
||||
<style>
|
||||
header {
|
||||
background-color: #3C2A26;
|
||||
color: #ffffff;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
</style>
|
||||
<header class="header">
|
||||
|
||||
<div>
|
||||
|
||||
<img src="/Gallus_Pub_v1/public/images/Logo.png" alt="Gallus Pub Logo" />
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Hauptnavigation: immer Home, About, Contact -->
|
||||
<nav class="nav-main">
|
||||
|
||||
<div class="dropdown">
|
||||
|
||||
<a href="/" class="dropdbtn">Home</a>
|
||||
|
||||
<div class="dropdown-content">
|
||||
|
||||
<a href="/events">Events</a>
|
||||
<a href="/gallery">Gallery</a>
|
||||
<a href="/openings">Openings</a>
|
||||
<a href="/drinks">Drinks</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<a href="/about">About</a>
|
||||
<a href="/contact">Contact</a>
|
||||
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
20
Gallus_Pub_v1/src/components/Hero.astro
Normal file
20
Gallus_Pub_v1/src/components/Hero.astro
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
// src/components/Hero.astro
|
||||
---
|
||||
|
||||
<section class="hero container">
|
||||
|
||||
<div class="hero-overlay">
|
||||
|
||||
<div class="hero-content">
|
||||
|
||||
<h1>Dein Irish Pub</h1>
|
||||
|
||||
<p>Dein Irish Pub</p>
|
||||
|
||||
<a href="#" class="button">Aktuelles ↓</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -1,91 +1,21 @@
|
||||
---
|
||||
// HoverCard.astro
|
||||
// Diese Komponente nimmt ein Bild, einen Titel und einen Text entgegen und zeigt sie als Hover-Karte an
|
||||
|
||||
// Definieren der Props, die die Komponente akzeptiert
|
||||
interface Props {
|
||||
imageSrc: string; // Pfad zum Bild
|
||||
title: string; // Titel der Karte
|
||||
text: string; // Text, der beim Hover angezeigt wird
|
||||
altText?: string; // Alternative Textbeschreibung für das Bild (optional)
|
||||
}
|
||||
|
||||
// Extrahieren der Props
|
||||
const {imageSrc, title, text, altText = ""} = Astro.props;
|
||||
// src/components/HoverCard.astro
|
||||
const { title, description, image, link } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="hover-card">
|
||||
<h3 class="card-title">{title}</h3>
|
||||
<div class="image-container">
|
||||
<img src={imageSrc} alt={altText || title} class="card-image"/>
|
||||
</div>
|
||||
<div class="hover-text">
|
||||
<p>{text}</p>
|
||||
</div>
|
||||
</div>
|
||||
<article class="hover-card">
|
||||
|
||||
<style>
|
||||
.hover-card {
|
||||
position: relative;
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background-color: #213b28; /* Grüner Hintergrund, der gleiche wie in Ihrer Website */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
<a href={link}>
|
||||
|
||||
.hover-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
<img src={image} alt={title} />
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
padding-top: 100%; /* Macht das Bild quadratisch */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
<div class="info">
|
||||
|
||||
.card-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* Damit wird das Bild ohne Verzerrung angepasst */
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
<h3>{title}</h3>
|
||||
|
||||
.card-title {
|
||||
padding: 15px;
|
||||
margin: 0;
|
||||
color: #ceb39b; /* Gleiche Textfarbe wie in Ihrer Website */
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
}
|
||||
<p>{description}</p>
|
||||
|
||||
.hover-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(33, 59, 40, 0.9); /* Leicht transparente Version des grünen Hintergrunds */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
color: #ceb39b;
|
||||
}
|
||||
|
||||
.hover-card:hover .hover-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover-card:hover .card-image {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</article>
|
||||
|
||||
34
Gallus_Pub_v1/src/components/Layout.astro
Normal file
34
Gallus_Pub_v1/src/components/Layout.astro
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
// src/components/Layout.astro
|
||||
import Header from "./Header.astro";
|
||||
import Footer from "./Footer.astro";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Gallus Pub</title>
|
||||
<link rel="stylesheet" href="/styles/index.css" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<Header />
|
||||
|
||||
<main class="container">
|
||||
|
||||
<slot />
|
||||
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
56
Gallus_Pub_v1/src/components/Welcome.astro
Normal file
56
Gallus_Pub_v1/src/components/Welcome.astro
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
// src/components/Welcome.astro
|
||||
---
|
||||
|
||||
<section class="welcome container">
|
||||
|
||||
<div class="welcome-text">
|
||||
|
||||
<h2>Herzlich willkommen im Gallus Pub!</h2>
|
||||
|
||||
<p>
|
||||
Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung
|
||||
oder alt, Rocker, Elf, Nerd, Meerjungfrau oder einfach nur du
|
||||
selbst. Unsere Türen stehen offen für alle, die Spass haben wollen
|
||||
und gute Gesellschaft suchen!
|
||||
</p>
|
||||
|
||||
<p><b>Unsere Highlights:</b></p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<b>Karaoke:</b> Von Mittwoch bis Samstag kannst du deine
|
||||
Stimme auf zwei Stockwerken zum Besten geben. Keine Sorge, es geht
|
||||
nicht darum, perfekt zu sein, sondern einfach Spass zu haben! Du singst
|
||||
gerne, aber lieber für dich? Dann kannst du den 2. OG auch privat
|
||||
mieten.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<b>Pub Quiz:</b> Jeden Freitag ab 20:00 Uhr testet ihr
|
||||
euer Wissen in verschiedenen Runden. Jede Woche gibt es ein neues
|
||||
Thema und einen neuen Champion.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<b>Getränke:</b> Geniesst frisches Guinness, Smithwicks,
|
||||
Gallus Old Style Ale und unsere leckeren Cocktails. Für Whisky-Liebhaber
|
||||
haben wir erlesene Sorten aus Schottland und Irland im Angebot.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Wir freuen uns darauf, euch bald bei uns begrüssen zu können! Lasst
|
||||
uns gemeinsam unvergessliche Abende feiern. - Sabrina & Raphael
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="welcome-image">
|
||||
|
||||
<img src="/Gallus_Pub_v1/public/images/Background.png" alt="Welcome backgrount image" />
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
11
Gallus_Pub_v1/src/pages/About.astro
Normal file
11
Gallus_Pub_v1/src/pages/About.astro
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<h1>About</h1>
|
||||
|
||||
<p>Hier findest du alle aktuellen und kommenden About im Gallus Pub.</p>
|
||||
|
||||
</Layout>
|
||||
11
Gallus_Pub_v1/src/pages/Contact.astro
Normal file
11
Gallus_Pub_v1/src/pages/Contact.astro
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<h1>Contact</h1>
|
||||
|
||||
<p>Hier findest du alle aktuellen und kommenden Contact im Gallus Pub.</p>
|
||||
|
||||
</Layout>
|
||||
11
Gallus_Pub_v1/src/pages/Drinks.astro
Normal file
11
Gallus_Pub_v1/src/pages/Drinks.astro
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<h1>Drinks</h1>
|
||||
|
||||
<p>Hier findest du alle aktuellen und kommenden Drinks im Gallus Pub.</p>
|
||||
|
||||
</Layout>
|
||||
11
Gallus_Pub_v1/src/pages/Gallery.astro
Normal file
11
Gallus_Pub_v1/src/pages/Gallery.astro
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<h1>Gallery</h1>
|
||||
|
||||
<p>Hier findest du alle aktuellen und kommenden Gallery im Gallus Pub.</p>
|
||||
|
||||
</Layout>
|
||||
11
Gallus_Pub_v1/src/pages/Openings.astro
Normal file
11
Gallus_Pub_v1/src/pages/Openings.astro
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
import Layout from "../components/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
<h1>Openings</h1>
|
||||
|
||||
<p>Hier findest du alle aktuellen und kommenden Openings im Gallus Pub.</p>
|
||||
|
||||
</Layout>
|
||||
@ -1,40 +1,22 @@
|
||||
---
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import HoverCard from '../components/HoverCard.astro';
|
||||
import '../../styles/index.css'
|
||||
// src/pages/index.astro
|
||||
import Layout from "../components/Layout.astro";
|
||||
import Hero from "../components/Hero.astro";
|
||||
import Welcome from "../components/Welcome.astro";
|
||||
import EventsGrid from '../components/EventsGrid.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' }
|
||||
];
|
||||
---
|
||||
|
||||
<html lang="de">
|
||||
<body>
|
||||
<Header />
|
||||
<Layout>
|
||||
|
||||
<main>
|
||||
<h1>Willkommen auf meiner Webseite</h1>
|
||||
<p>Dies ist der Hauptinhalt der Seite.</p>
|
||||
<Hero />
|
||||
<Welcome />
|
||||
<EventsGrid events={events} />
|
||||
|
||||
<div class="content-container">
|
||||
<h2>Abschnitt mit besserem Kontrast</h2>
|
||||
<p>Dieser Text ist durch den halbtransparenten Hintergrund besser lesbar.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="height: 100vh; margin: 2rem 0;">
|
||||
<h2>Abschnitt 1</h2>
|
||||
<p>Inhalt zum Scrollen...</p>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<h2>Abschnitt 2</h2>
|
||||
<p>Mehr Inhalt zum Scrollen...</p>
|
||||
</div>
|
||||
<HoverCard
|
||||
imageSrc="images/Logo.png"
|
||||
title="Whisky-Tasting"
|
||||
text="Jeden ersten Mittwoch im Monat bieten wir ein exklusives Whisky-Tasting an. Erfahren Sie mehr über die verschiedenen Aromen und Geschmacksrichtungen."
|
||||
/>
|
||||
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
</Layout>
|
||||
|
||||
@ -1,92 +1,216 @@
|
||||
/* === Global Reset === */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
font-family: 'Georgia', serif;
|
||||
background-color: #1f1414;
|
||||
color: #f5f5f5;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
/* === Container für zentralen Content === */
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
/* === Header & Nav === */
|
||||
.header {
|
||||
background-color: #0e0c0c;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 1.5rem;
|
||||
.nav-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 377px;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
.nav-main a,
|
||||
.dropdbtn {
|
||||
margin: 0 1rem;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
color: #ddd;
|
||||
.nav-main a:hover,
|
||||
.dropdbtn:hover {
|
||||
color: #ffa500;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* Dropdown für Home */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
transition: transform 0.3s ease;
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #0e0c0c;
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
.dropdown-content a {
|
||||
color: #f5f5f5;
|
||||
padding: 0.5rem 1rem;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
padding: 6rem 1rem 2rem;
|
||||
background-image: url('../public/images/background.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
color: #fff;
|
||||
.dropdown-content a:hover {
|
||||
background-color: #1f1a1a;
|
||||
color: #ffa500;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
margin: 2rem 0;
|
||||
color: #333;
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
margin-top: auto;
|
||||
/* === Hero === */
|
||||
.hero {
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 4rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
margin: 0.5rem 0 1rem 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 2rem;
|
||||
padding: 0.8rem 2rem;
|
||||
background: linear-gradient(45deg, #ffa500, #ff7f00);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* === Welcome === */
|
||||
.welcome {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background-color: #1f3a2d;
|
||||
padding: 3rem 0;
|
||||
margin-bottom: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
order: 1;
|
||||
flex: 2 1 400px;
|
||||
padding: 0 1.6rem 0 2rem;
|
||||
color: #fff3e0;
|
||||
}
|
||||
|
||||
.welcome-text h2 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #e8c6a7;
|
||||
}
|
||||
|
||||
.welcome-text ul {
|
||||
margin: 1rem 0;
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
|
||||
.welcome-image {
|
||||
order: 2;
|
||||
flex: 1 1 300px;
|
||||
}
|
||||
|
||||
.welcome-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* === Events Grid === */
|
||||
.events-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 2rem;
|
||||
margin: 3rem 0;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* === Footer === */
|
||||
.footer {
|
||||
text-align: center;
|
||||
padding: 1.5rem 0;
|
||||
background-color: #0e0c0c;
|
||||
color: #aaa;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
Reference in New Issue
Block a user