diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..2ba986f
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Launch Chrome against localhost",
+ "url": "http://localhost:8080",
+ "webRoot": "${workspaceFolder}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/assets/Burger eating together.jpg b/assets/Burger eating together.jpg
new file mode 100644
index 0000000..13536d7
Binary files /dev/null and b/assets/Burger eating together.jpg differ
diff --git a/assets/Cake cutting figs.jpg b/assets/Cake cutting figs.jpg
new file mode 100644
index 0000000..918d384
Binary files /dev/null and b/assets/Cake cutting figs.jpg differ
diff --git a/assets/Cooking woman at home.jpg b/assets/Cooking woman at home.jpg
new file mode 100644
index 0000000..7c352e8
Binary files /dev/null and b/assets/Cooking woman at home.jpg differ
diff --git a/assets/Eating and laughing girls.jpg b/assets/Eating and laughing girls.jpg
new file mode 100644
index 0000000..5fb4520
Binary files /dev/null and b/assets/Eating and laughing girls.jpg differ
diff --git a/assets/Pasta and many forks.jpg b/assets/Pasta and many forks.jpg
new file mode 100644
index 0000000..e795f02
Binary files /dev/null and b/assets/Pasta and many forks.jpg differ
diff --git a/assets/Pasta in cheese.jpg b/assets/Pasta in cheese.jpg
new file mode 100644
index 0000000..60d64d9
Binary files /dev/null and b/assets/Pasta in cheese.jpg differ
diff --git a/assets/Plate icon.png b/assets/Plate icon.png
new file mode 100644
index 0000000..7152cc5
Binary files /dev/null and b/assets/Plate icon.png differ
diff --git a/assets/Red checkered social eating.jpg b/assets/Red checkered social eating.jpg
new file mode 100644
index 0000000..e7b06b6
Binary files /dev/null and b/assets/Red checkered social eating.jpg differ
diff --git a/assets/Salad roommates.jpg b/assets/Salad roommates.jpg
new file mode 100644
index 0000000..77c1ee3
Binary files /dev/null and b/assets/Salad roommates.jpg differ
diff --git a/assets/Sharing food table.jpg b/assets/Sharing food table.jpg
new file mode 100644
index 0000000..181665a
Binary files /dev/null and b/assets/Sharing food table.jpg differ
diff --git a/assets/Spicy food zoomed.jpg b/assets/Spicy food zoomed.jpg
new file mode 100644
index 0000000..0426e15
Binary files /dev/null and b/assets/Spicy food zoomed.jpg differ
diff --git a/assets/Zoomed in asian eating.jpg b/assets/Zoomed in asian eating.jpg
new file mode 100644
index 0000000..6fe4517
Binary files /dev/null and b/assets/Zoomed in asian eating.jpg differ
diff --git a/assets/add-event icon.png b/assets/add-event icon.png
new file mode 100644
index 0000000..cb06b43
Binary files /dev/null and b/assets/add-event icon.png differ
diff --git a/assets/instagram.png b/assets/instagram.png
new file mode 100644
index 0000000..193e5f6
Binary files /dev/null and b/assets/instagram.png differ
diff --git a/assets/register icon.png b/assets/register icon.png
new file mode 100644
index 0000000..513e376
Binary files /dev/null and b/assets/register icon.png differ
diff --git a/css/event_create.css b/css/event_create.css
index e118a3e..9bccef6 100644
--- a/css/event_create.css
+++ b/css/event_create.css
@@ -1,35 +1,4 @@
:root {
- --color-bg: #f7f7f2;
- --color-surface: #ffffff;
- --color-surface-soft: #f0eee7;
- --color-text: #1f1f1f;
- --color-text-secondary: #303030;
- --color-muted: #6b6b6b;
- --color-border: #d8d8d2;
- --color-border-strong: #202020;
- --color-primary: #222222;
- --color-primary-hover: #111111;
- --color-focus: #2f6fed;
- --color-error: #b42318;
- --color-progress-bg: #ddddda;
- --color-divider: #ecece7;
-
- --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
-
- --radius-sm: 0.875rem;
- --radius-md: 1.25rem;
- --radius-lg: 1.5rem;
- --radius-pill: 999px;
-
- --space-1: 0.25rem;
- --space-2: 0.5rem;
- --space-3: 0.75rem;
- --space-4: 1rem;
- --space-5: 1.5rem;
- --space-6: 2rem;
- --space-7: 3rem;
- --space-8: 4rem;
-
--max-width: 1120px;
--content-width: 760px;
--header-height: 4.5rem;
diff --git a/css/event_overview.css b/css/event_overview.css
index 89b022d..30901c9 100644
--- a/css/event_overview.css
+++ b/css/event_overview.css
@@ -1,41 +1,3 @@
-:root {
- --black: #221c1a;
- --white: #fff;
- --gray-bg: #f4f4f4;
- --border: 1px solid #221c1a;
- --olive: #6b6b05;
- --tomato: #d44b24;
- --olive-light: #e5e1b7;
- --cream: #f3efcf;
- --butter: #fffde3;
- --brown: #66340D;
-
- /* Spacing Scale */
- --space-1: 8px;
- --space-2: 12px;
- --space-3: 16px;
- --space-4: 20px;
- --space-5: 24px;
- --space-6: 32px;
-
- /* Radius Scale */
- --radius-pill: 999px;
- --radius-md: 20px;
- --radius-lg: 30px;
-
- /* Letter Spacing Scale */
- --ls-none: 0;
- --ls-ui: 0.03em;
- --ls-label: 0.045em;
-}
-
-body {
- font-family: "Jost", sans-serif;
- margin: 0;
- padding: 0;
- background: var(--butter);
-}
-
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
/* ---------------------------------------------------------
@@ -101,95 +63,6 @@ body {
line-height: 1.15;
}
-/* ---------------------------------------------------------
- Top Navigation
---------------------------------------------------------- */
-.top-nav-wrap {
- background: var(--butter);
- padding: 6px 12px;
-}
-
-.top-nav {
- background: rgba(255, 255, 255, 0.95);
- border-radius: var(--radius-lg);
- box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
- display: flex;
- justify-content: space-between;
- align-items: center;
- min-height: 58px;
- padding: 3px 9px 3px var(--space-5);
- max-width: none;
- width: 100%;
- box-sizing: border-box;
- margin: 0 auto;
-}
-
-.brand {
- display: inline-flex;
- align-items: center;
- height: 50px;
- text-decoration: none;
-}
-
-.brand img {
- width: auto;
- height: 100%;
- max-width: 104px;
- display: block;
-}
-
-.top-nav-links {
- display: flex;
- align-items: center;
- gap: 16px;
-
-}
-
-.nav-link {
- color: var(--black);
- line-height: 1.3;
- text-decoration: none;
- padding: var(--space-1) var(--space-4);
- border-radius: var(--radius-md);
- border-width: 2px;
- border-color: var(--olive-light);
- border-style: solid;
- border-radius: 20px
-}
-
-.nav-link:hover,
-.nav-link.active,
-.nav-link:focus-visible {
- background: var(--olive);
- color: var(--white);
- border-color: var(--olive);
-}
-
-.login-pill {
- background: var(--olive);
- border-radius: var(--radius-md);
- color: var(--butter);
- line-height: 1.3;
- padding: var(--space-1) var(--space-4);
- text-decoration: none;
-}
-
-.profile-pill {
- width: 38px;
- height: 38px;
- border-radius: 19px;
- background: var(--tomato);
- color: var(--butter);
- font-size: 17px;
- font-weight: 500;
- letter-spacing: var(--ls-ui);
- line-height: 1.3;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- text-decoration: none;
-}
-
/* ---------------------------------------------------------
Overview Header + Filters
--------------------------------------------------------- */
diff --git a/css/landingpage.css b/css/landingpage.css
index 85e9719..c9b179a 100644
--- a/css/landingpage.css
+++ b/css/landingpage.css
@@ -1,3 +1,22 @@
+/* Instagram and Invite logo in gallery info area */
+.gallery__icon--instagram {
+ height: 32px;
+ width: 32px;
+ object-fit: contain;
+ border-radius: 8px;
+ background: none;
+ /* Olive green filter for PNG: #6b6b05 */
+ filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%);
+}
+
+.gallery__icon--invite {
+ height: 56px;
+ width: 56px;
+ object-fit: contain;
+ margin-left: 0;
+ transform: translate(-4%, -1%);
+ position: relative;
+}
* { box-sizing: border-box; }
:root {
@@ -49,7 +68,7 @@ body {
.header__actions {
display: flex;
align-items: center;
- gap: 16px;
+ gap: 6px;
}
.top-nav-wrap {
@@ -165,7 +184,7 @@ body {
align-items: center;
gap: 16px;
padding: 28px 20px;
- background: #ffffff;
+ background: #6B6B05;
border-radius: 28px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
@@ -201,6 +220,46 @@ body {
text-align: center;
}
+.how-step__icon--brown {
+ background: #66340d;
+}
+
+.how-step__label--brown {
+ color: #FFFDE3;
+}
+
+.how-step__label--big {
+ font-size: 1.25rem;
+ font-weight: 700;
+}
+
+.how-step--numbered {
+ position: relative;
+}
+
+.how-step__corner-number {
+ position: absolute;
+ top: 12px;
+ left: 16px;
+ font-size: 2.2rem;
+ font-weight: 700;
+}
+
+.how-step__corner-number--brown {
+ color: #FFFDE3;
+}
+
+.how-step__png {
+ width: 192px;
+ height: 192px;
+ object-fit: contain;
+}
+
+.how-step__png--brown {
+ filter: brightness(0) saturate(100%) invert(99%) sepia(6%) saturate(1200%) hue-rotate(10deg) brightness(104%) contrast(97%);
+}
+}
+
@media (max-width: 900px) {
.how-it-works__steps {
grid-template-columns: 1fr;
@@ -254,29 +313,81 @@ body {
}
}
-/* Container for the 3 photos */
+/* Carousel gallery */
+.gallery__carousel {
+ position: relative;
+}
+
.gallery__track {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 20px;
- margin-bottom: 30px; /* Space between photos and dots */
-}
-
-/* Container for the dots to keep them in the middle */
-.gallery__dots {
display: flex;
- justify-content: center; /* This is the "magic" line that centers them */
- gap: 12px; /* Space between the dots */
- width: 100%;
+ gap: 20px;
+ overflow: hidden;
+ margin-bottom: 30px; /* Space between photos and dots */
+ scroll-behavior: smooth;
}
-/* The actual black dots */
-.dot {
- width: 12px;
- height: 12px;
- background-color: #000; /* Solid black */
- border-radius: 50%; /* Makes them round */
- display: inline-block;
+.gallery__item {
+ flex: 0 0 calc((100% - 40px) / 3);
+ min-width: calc((100% - 40px) / 3);
+ border-radius: 24px;
+ overflow: hidden;
+ background: #fff;
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
+ aspect-ratio: 2 / 3;
+}
+
+.gallery__item img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ object-fit: cover;
+}
+
+.gallery__arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 48px;
+ height: 48px;
+ display: grid;
+ place-items: center;
+ border-radius: 0;
+ background: none;
+ backdrop-filter: none;
+ border: none;
+ color: #ffffff;
+ cursor: pointer;
+ font-size: 1.6rem;
+ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+ transition: transform 0.2s ease, color 0.2s ease;
+ z-index: 2;
+}
+
+.gallery__arrow:hover {
+ transform: translateY(-50%) scale(1.15);
+ color: #e5e1b7;
+}
+
+.gallery__arrow--prev {
+ left: 12px;
+}
+
+.gallery__arrow--next {
+ right: 12px;
+}
+
+/* Center arrow removed – using side arrows only */
+}
+
+@media (max-width: 900px) {
+ .gallery__track {
+ gap: 16px;
+ }
+
+ .gallery__item {
+ flex: 0 0 100%;
+ min-width: 100%;
+ }
}
/* --- 2. Button & Link Styling --- */
diff --git a/css/stylesheet.css b/css/stylesheet.css
deleted file mode 100644
index 42df5d5..0000000
--- a/css/stylesheet.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/* Font Import */
-
-@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap');
-
-
-/* Reset / Normalize */
-*,
-*::before,
-*::after {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-/* Colors + Main Font */
-:root {
- --primary-color: #D44B24;
- --primary-color-dark: #D44B24;
- --secondary-color: #6B6B05;
- --secondary-color-dark: #5C5C05;
- --white: #ffffff;
- --black: #221C1A;
- --brown: #66340d;
-
- --font-main: 'Jost', sans-serif;
- --font-size-base: 16px;
-}
-
-/* Base Styles */
-body {
- font-family: var(--font-main);
- font-size: 1.125em;
- line-height: 1.5;
- color: var(--black);
- background-color: #FFFDE3;
-}
-
-img {
- max-width: 100%;
- display: block;
-}
-
-/* Typography */
-
-h1, h2 {
- font-family: 'Bagel Fat One';
- margin-bottom: 0.5em;
-}
-
-p {
- font-family: 'Jost', sans-serif;
- margin-bottom: 1em;
-}
-
-/* Layout */
-.container {
- width: 90%;
- max-width: 1200px;
- margin: 0 auto;
-}
-
-/* Components */
-.button {
- display: inline-block;
- padding: 0.5em 1.25em;
- background-color: var(--secondary-color);
- font-family: 'Jost', sans-serif;
- font-size: 1em;
- color: #FFFDE3;
- border: none;
- border-radius: 2em;
- cursor: pointer;
-
-}
-
-.button:hover {
- background-color: var(--secondary-color-dark);
-}
-
-/* Navigation */
-.nav {
- display: flex;
- gap: 1rem;
-}
-
-/* Utilities */
-.text-center {
- text-align: left;
-}
-
-.hidden {
- display: none;
-}
-
-/* Media Queries (Responsive) */
-@media (max-width: 768px) {
- .container {
- width: 95%;
- }
-
- .nav {
- flex-direction: column;
- }
-}
\ No newline at end of file
diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css
new file mode 100644
index 0000000..5b2120b
--- /dev/null
+++ b/css/stylesheet_global.css
@@ -0,0 +1,210 @@
+/* Font Import */
+
+@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap');
+
+
+/* Reset / Normalize */
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* Colors + Main Font */
+:root {
+ --tomato: #D44B24;
+ --tomato-dark: #D44B24;
+ --olive: #6B6B05;
+ --olive-dark: #5C5C05;
+ --olive-light: #E5E1B7;
+ --butter: #FFFBD1;
+ --butter-light: #FFFDE3;
+ --white: #ffffff;
+ --black: #221C1A;
+ --brown: #66340d;
+
+ --font-main: 'Jost', sans-serif;
+ --font-size-base: 16px;
+
+/* Spacing Scale */
+ --space-1: 8px;
+ --space-2: 12px;
+ --space-3: 16px;
+ --space-4: 20px;
+ --space-5: 24px;
+ --space-6: 32px;
+
+/* Radius Scale */
+ --radius-pill: 999px;
+ --radius-md: 20px;
+ --radius-lg: 30px;
+
+/* Letter Spacing Scale */
+ --ls-none: 0;
+ --ls-ui: 0.03em;
+ --ls-label: 0.045em;
+}
+
+/* Base Styles */
+body {
+ font-family: var(--font-main);
+ font-size: 1.125em;
+ line-height: 1.5;
+ color: var(--black);
+ background-color: var(--butter);
+}
+
+img {
+ max-width: 100%;
+ display: block;
+}
+
+/* Typography */
+
+h1, h2 {
+ font-family: 'Bagel Fat One';
+ margin-bottom: 0.5em;
+}
+
+p {
+ font-family: 'Jost', sans-serif;
+ margin-bottom: 1em;
+}
+
+/* Layout */
+.container {
+ width: 90%;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+/* Top Navigation */
+.top-nav-wrap {
+ background: var(--butter);
+ padding: 6px 12px;
+}
+
+.top-nav {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: var(--radius-lg);
+ box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ min-height: 58px;
+ padding: 3px 9px 3px var(--space-5);
+ max-width: none;
+ width: 100%;
+ box-sizing: border-box;
+ margin: 0 auto;
+}
+
+.brand {
+ display: inline-flex;
+ align-items: center;
+ height: 50px;
+ text-decoration: none;
+}
+
+.brand img {
+ width: auto;
+ height: 100%;
+ max-width: 104px;
+ display: block;
+}
+
+.top-nav-links {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+}
+
+.nav-link {
+ color: var(--black);
+ line-height: 1.3;
+ text-decoration: none;
+ padding: var(--space-1) var(--space-4);
+ border-radius: var(--radius-md);
+ border-width: 2px;
+ border-color: none;
+ border-radius: 20px
+}
+
+.nav-link:hover,
+.nav-link:focus-visible {
+ background: var(--olive-light);
+ color: var(--black);
+}
+
+.login-pill {
+ background: var(--olive);
+ border-radius: var(--radius-md);
+ color: var(--butter);
+ line-height: 1.3;
+ padding: var(--space-1) var(--space-4);
+ text-decoration: none;
+}
+
+.profile-pill {
+ width: 38px;
+ height: 38px;
+ border-radius: 19px;
+ background: var(--tomato);
+ color: var(--butter);
+ font-size: 17px;
+ font-weight: 500;
+ letter-spacing: var(--ls-ui);
+ line-height: 1.3;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+}
+
+/* Components */
+.button {
+ display: inline-block;
+ padding: 0.5em 1.25em;
+ background-color: var(--olive-color);
+ font-family: 'Jost', sans-serif;
+ font-size: 1em;
+ color: var(--butter-light);
+ border: none;
+ border-radius: 2em;
+ cursor: pointer;
+
+}
+
+.button:hover {
+ background-color: var(--olive-dark);
+}
+
+/* Navigation */
+.nav {
+ display: flex;
+ gap: 1rem;
+}
+
+/* Utilities */
+.text-center {
+ text-align: left;
+}
+
+.hidden {
+ display: none;
+}
+
+/* Media Queries (Responsive) */
+@media (max-width: 768px) {
+ .container {
+ width: 95%;
+ }
+
+ .nav {
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/event_create.html b/event_create.html
index 0730088..54b635b 100644
--- a/event_create.html
+++ b/event_create.html
@@ -4,19 +4,27 @@
Event erstellen | Invité
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+