From 221aa90649c7026458c8a4fe34bfed33e729fd81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estelle=20K=C3=B6hler?= Date: Sun, 12 Apr 2026 13:43:36 +0200 Subject: [PATCH] Refactor hero section, update how-it-works cards, add Instagram invite + footer to all pages --- assets/icon_eating-svgrepo-com.svg | 40 ++++++++++++ assets/icon_table-dinner-svgrepo-com.svg | 82 ++++++++++++++++++++++++ css/index.css | 59 +++++++++++++---- css/stylesheet_global.css | 73 +++++++++++++++++++++ datenschutz.html | 6 ++ event_create.html | 6 ++ event_detail.html | 6 ++ event_overview.html | 6 ++ impressum.html | 6 ++ index.html | 52 ++++++++++----- js/navigation.js | 16 ++++- login.html | 6 ++ signup.html | 6 ++ 13 files changed, 336 insertions(+), 28 deletions(-) create mode 100644 assets/icon_eating-svgrepo-com.svg create mode 100644 assets/icon_table-dinner-svgrepo-com.svg diff --git a/assets/icon_eating-svgrepo-com.svg b/assets/icon_eating-svgrepo-com.svg new file mode 100644 index 0000000..36662df --- /dev/null +++ b/assets/icon_eating-svgrepo-com.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/icon_table-dinner-svgrepo-com.svg b/assets/icon_table-dinner-svgrepo-com.svg new file mode 100644 index 0000000..dc9565d --- /dev/null +++ b/assets/icon_table-dinner-svgrepo-com.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/index.css b/css/index.css index ea5bc3b..91f06d0 100644 --- a/css/index.css +++ b/css/index.css @@ -48,15 +48,18 @@ .hero { display: grid; grid-template-columns: 1fr 1fr; - gap: 50px; - margin-bottom: 80px; + gap: 55px; + margin-bottom: 88px; align-items: center; - padding: 40px 0; + padding: 44px 0; +} + +.hero__left .badge { + margin-bottom: var(--space-3); } .hero__left h1 { - white-space: nowrap; - font-size: 2.4rem; + font-size: 2.64rem; color: var(--black); } @@ -65,6 +68,12 @@ line-height: 1.8; } +.hero__buttons { + display: flex; + gap: var(--space-3); + flex-wrap: wrap; +} + .hero__right { display: flex; align-items: center; @@ -73,15 +82,15 @@ .image-card { width: 100%; - max-width: 396px; + max-width: 436px; overflow: hidden; border-radius: var(--radius-lg); } .hero-image { width: 100%; - max-width: 396px; - max-height: 464px; + max-width: 436px; + max-height: 510px; height: auto; border-radius: var(--radius-lg); object-fit: cover; @@ -131,7 +140,7 @@ display: flex; flex-direction: column; align-items: center; - gap: 16px; + gap: 12px; padding: 28px 20px; background: var(--white); border-radius: 28px; @@ -154,6 +163,12 @@ color: var(--brown); } +.how-step__icon { + font-size: 2.4rem; + color: var(--brown); + margin-top: 12px; +} + .how-step__png { width: 192px; height: 192px; @@ -166,9 +181,9 @@ .how-step__label { margin: 0; - font-size: 1rem; + font-size: 0.95rem; line-height: 1.6; - font-weight: 600; + font-weight: 400; color: var(--black); text-align: center; } @@ -182,6 +197,28 @@ font-weight: 700; } +.how-step__footer-pill { + margin-bottom: 4px; +} + +.how-step__footer-badges { + display: flex; + gap: var(--space-2); + justify-content: center; +} + +.how-step__footer-banner { + width: 100%; + padding: 10px 16px; + background: var(--butter); + border-radius: var(--radius-sm); + text-align: center; + font-family: 'Bagel Fat One', sans-serif; + font-size: 0.85rem; + letter-spacing: 0.12rem; + color: var(--brown); +} + @media (max-width: 900px) { .how-it-works__steps { grid-template-columns: 1fr; diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index e1ef140..e56c40b 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -172,6 +172,22 @@ p { } +/* Badge */ +.badge { + display: inline-block; + padding: 0.25rem 0.75rem; + background-color: var(--olive-light); + color: var(--olive-dark); + font-family: 'Jost', sans-serif; + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.08rem; + text-transform: uppercase; + border-radius: var(--radius-pill); + line-height: 1.4; +} + + /* Buttons */ .button { display: inline-block; @@ -184,12 +200,24 @@ p { font-size: 1.25rem; color: var(--butter-light); cursor: pointer; + text-decoration: none; } .button:hover { background-color: var(--olive-dark); } +.button--outline { + background-color: transparent; + color: var(--olive); + border: 2px solid var(--olive); +} + +.button--outline:hover { + background-color: var(--olive-light); + color: var(--black); +} + .button-small { background: var(--olive); @@ -254,6 +282,51 @@ p { display: none; } +/* Card Footer */ +.card-footer { + margin-top: auto; + padding-top: var(--space-3); + width: 100%; +} + +/* Text Muted */ +.text-muted { + color: #888; + font-size: 0.8rem; + font-weight: 400; + line-height: 1.4; +} + +/* Instagram Invite */ +.instagram-invite { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-top: var(--space-7); +} + +.instagram-invite__link { + display: flex; + align-items: center; + gap: 16px; + text-decoration: none; +} + +.instagram-invite__icon { + height: 32px; + width: 32px; + object-fit: contain; + border-radius: 8px; + filter: brightness(0) saturate(100%) invert(27%) sepia(81%) saturate(749%) hue-rotate(24deg) brightness(90%) contrast(90%); +} + +.instagram-invite__logo { + height: 56px; + width: 56px; + object-fit: contain; +} + /* Footer */ .footer { display: flex; diff --git a/datenschutz.html b/datenschutz.html index aef1b6c..39eae82 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -86,6 +86,12 @@

+
+ + Instagram + + +