From ce749915eda58e5fd6928329f05a153f86bf701b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estelle=20K=C3=B6hler?= Date: Thu, 26 Mar 2026 08:54:18 +0100 Subject: [PATCH 1/4] feat: initial landing page wireframe --- index.html | 66 +++++++++++++- javascript.js | 36 ++++++++ stylesheet.css | 243 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 340 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index d01f779..c1c8b9a 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,67 @@ - + - - - Document + + + Social Cooking Wireframe + - +
+
+
LOGO
+ + +
+ +
+
+
+

Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?

+

Dein Ort um neue Leute kennen zu lernen! Erstelle eigene Events und lade Gäste zu dir nach Hause ein, oder suche nach passenden Events in deiner Umgebung.

+ +
+ +
+
+ + +
+
+
+ +
+
+ + +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
@social_cooking
+
+
+
+
+ + \ No newline at end of file diff --git a/javascript.js b/javascript.js index e69de29..c70097e 100644 --- a/javascript.js +++ b/javascript.js @@ -0,0 +1,36 @@ +const prevBtn = document.querySelector('.arrow--prev'); +const nextBtn = document.querySelector('.arrow--next'); +const items = Array.from(document.querySelectorAll('.gallery__item')); +let activeIndex = 0; + +function updateGallery() { + items.forEach((item, i) => { + item.style.opacity = i === activeIndex ? '1' : '0.35'; + item.style.transform = i === activeIndex ? 'scale(1)' : 'scale(0.95)'; + }); +} + +function showNext() { + activeIndex = (activeIndex + 1) % items.length; + updateGallery(); +} + +function showPrev() { + activeIndex = (activeIndex - 1 + items.length) % items.length; + updateGallery(); +} + +nextBtn.addEventListener('click', showNext); +prevBtn.addEventListener('click', showPrev); + +// keyboard support +document.addEventListener('keydown', (event) => { + if (event.key === 'ArrowRight') { + showNext(); + } + if (event.key === 'ArrowLeft') { + showPrev(); + } +}); + +updateGallery(); \ No newline at end of file diff --git a/stylesheet.css b/stylesheet.css index e69de29..d700709 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -0,0 +1,243 @@ +/* Wireframe Stile (schwarz/weiß) */ +* { + box-sizing: border-box; +} + +:root { + --black: #000000; + --white: #ffffff; + --max-width: 1440px; +} + +html, body { + margin: 0; + padding: 0; + background: var(--white); + color: var(--black); + font-family: Inter, Arial, sans-serif; + min-height: 100%; +} + +.page-wrapper { + max-width: var(--max-width); + margin: 0 auto; + padding: 24px; + background: var(--white); + min-height: 1343px; + border: 2px solid var(--black); +} + +.header { + display: flex; + align-items: center; + justify-content: space-between; + border: 1px solid var(--black); + padding: 16px 24px; + margin-bottom: 24px; +} + +.header__brand { + font-weight: bold; + font-size: 1.2rem; + border: 1px solid var(--black); + padding: 8px 12px; + background: var(--white); +} + +.nav__link { + color: var(--black); + text-decoration: none; + font-weight: 600; + border: 1px solid var(--black); + padding: 8px 12px; + background: var(--white); +} + +.btn { + border: 2px solid var(--black); + background: var(--white); + color: var(--black); + padding: 10px 18px; + font-weight: 700; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.btn--primary { + background: var(--white); +} + +.btn--outline { + background: var(--white); +} + +.btn:focus-visible, +.nav__link:focus-visible, +.arrow:focus-visible { + outline: 3px solid var(--black); + outline-offset: 3px; +} + +.main-content { + display: grid; + grid-template-rows: auto auto; + gap: 32px; +} + +.hero { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px; + align-items: center; + padding: 24px; + border: 1px solid var(--black); +} + +.hero__title { + font-size: 2rem; + line-height: 1.25; + margin: 0 0 16px; +} + +.hero__description { + margin: 0 0 20px; + line-height: 1.5; +} + +.hero__left { + display: flex; + flex-direction: column; + gap: 12px; +} + +.hero__right { + display: flex; + justify-content: center; + align-items: center; +} + +.image-card { + position: relative; + width: 100%; + max-width: 620px; + height: 400px; + border: 1px solid var(--black); +} + +.image-card__placeholder { + width: 100%; + height: 100%; + background: var(--white); + position: relative; +} + +.image-card__placeholder::before, +.image-card__placeholder::after { + content: ""; + position: absolute; + inset: 0; + border: 1px solid var(--black); +} + +.image-card__placeholder::before { + background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); +} + +.image-card__placeholder::after { + background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); +} + +.social-badge { + position: absolute; + bottom: 16px; + right: 16px; + display: flex; + gap: 6px; + padding: 8px; + border: 1px solid var(--black); + background: var(--white); +} + +.social-badge__dot { + width: 16px; + height: 16px; + background: var(--black); + border-radius: 50%; +} + +.gallery { + border: 1px solid var(--black); + padding: 24px; +} + +.gallery__controls { + display: flex; + justify-content: space-between; + margin-bottom: 16px; +} + +.arrow { + border: 2px solid var(--black); + background: var(--white); + color: var(--black); + padding: 8px 16px; + font-size: 1.2rem; + cursor: pointer; +} + +.gallery__track { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px; +} + +.gallery__item { + border: 1px solid var(--black); + min-height: 240px; + display: flex; + justify-content: center; + align-items: center; + padding: 8px; + position: relative; + background: var(--white); +} + +.placeholder { + width: 100%; + height: 100%; + position: relative; + border: 1px solid var(--black); +} + +.placeholder::before, +.placeholder::after { + content: ""; + position: absolute; + inset: 0; + background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); +} + +.placeholder::after { + background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); +} + +.gallery__info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 20px; + position: relative; +} + +.profile-badge { + width: 72px; + height: 72px; + border: 1px solid var(--black); + border-radius: 50%; + background: var(--white); + margin: 0 auto; +} + +.gallery__handle { + font-weight: 700; +} -- 2.30.2 From 7977792071413f34e560f4b890f73bcf8ba40e84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estelle=20K=C3=B6hler?= Date: Thu, 26 Mar 2026 11:08:20 +0100 Subject: [PATCH 2/4] docs: add human-readable comments to HTML and CSS for the team --- index.html | 45 +++++++++------ stylesheet.css | 153 ++++++++++--------------------------------------- 2 files changed, 57 insertions(+), 141 deletions(-) diff --git a/index.html b/index.html index c1c8b9a..aad51c4 100644 --- a/index.html +++ b/index.html @@ -7,58 +7,69 @@ +
+
-
LOGO
+
LOGO
+ - + +
+
+

Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?

-

Dein Ort um neue Leute kennen zu lernen! Erstelle eigene Events und lade Gäste zu dir nach Hause ein, oder suche nach passenden Events in deiner Umgebung.

- +

+ Beschreibung: Erklärt das Konzept von Social Cooking und lädt Nutzer ein, Events zu erstellen oder zu suchen. +

+
-
+
-
-
+
+
- - + +
-
+
-
+
-
+
-
-
@social_cooking
+
+
@social_cooking
+
diff --git a/stylesheet.css b/stylesheet.css index d700709..021ba4a 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,12 +1,12 @@ -/* Wireframe Stile (schwarz/weiß) */ +/* GRUNDLEGENDE EINSTELLUNGEN */ * { - box-sizing: border-box; + box-sizing: border-box; /* Sorgt dafür, dass Abstände die Boxen nicht breiter machen als gewollt */ } :root { --black: #000000; --white: #ffffff; - --max-width: 1440px; + --max-width: 1440px; /* Die Standard-Desktop-Breite laut Figma */ } html, body { @@ -18,19 +18,21 @@ html, body { min-height: 100%; } +/* HAUPTRAHMEN: Hält den gesamten Inhalt mittig und begrenzt die Breite */ .page-wrapper { max-width: var(--max-width); - margin: 0 auto; + margin: 0 auto; /* Zentriert die ganze Seite im Browser */ padding: 24px; background: var(--white); - min-height: 1343px; - border: 2px solid var(--black); + min-height: 1343px; /* Die exakte Höhe aus dem Figma-Entwurf */ + border: 2px solid var(--black); /* Äußerer schwarzer Rahmen */ } +/* NAVIGATION / HEADER: Der obere Balken mit Logo und Links */ .header { - display: flex; + display: flex; /* Ordnet Logo und Button nebeneinander an */ align-items: center; - justify-content: space-between; + justify-content: space-between; /* Logo links, Login rechts */ border: 1px solid var(--black); padding: 16px 24px; margin-bottom: 24px; @@ -41,18 +43,9 @@ html, body { font-size: 1.2rem; border: 1px solid var(--black); padding: 8px 12px; - background: var(--white); -} - -.nav__link { - color: var(--black); - text-decoration: none; - font-weight: 600; - border: 1px solid var(--black); - padding: 8px 12px; - background: var(--white); } +/* BUTTONS: Einheitlicher Stil für alle Schaltflächen */ .btn { border: 2px solid var(--black); background: var(--white); @@ -60,17 +53,9 @@ html, body { padding: 10px 18px; font-weight: 700; cursor: pointer; - transition: background-color 0.2s ease; -} - -.btn--primary { - background: var(--white); -} - -.btn--outline { - background: var(--white); } +/* BARRIEREFREIHEIT: Markiert Elemente deutlich, wenn man sie mit der Tastatur (Tab) ansteuert */ .btn:focus-visible, .nav__link:focus-visible, .arrow:focus-visible { @@ -78,15 +63,10 @@ html, body { outline-offset: 3px; } -.main-content { - display: grid; - grid-template-rows: auto auto; - gap: 32px; -} - +/* HERO-BEREICH: Die große Sektion unter dem Header */ .hero { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 1fr; /* Teilt den Bereich in zwei gleich große Spalten (Text links, Bild rechts) */ gap: 24px; align-items: center; padding: 24px; @@ -96,57 +76,27 @@ html, body { .hero__title { font-size: 2rem; line-height: 1.25; - margin: 0 0 16px; -} - -.hero__description { - margin: 0 0 20px; - line-height: 1.5; -} - -.hero__left { - display: flex; - flex-direction: column; - gap: 12px; -} - -.hero__right { - display: flex; - justify-content: center; - align-items: center; -} - -.image-card { - position: relative; - width: 100%; - max-width: 620px; - height: 400px; - border: 1px solid var(--black); -} - -.image-card__placeholder { - width: 100%; - height: 100%; - background: var(--white); - position: relative; } +/* BILD-PLATZHALTER: Erzeugt das "X" in der Mitte der Boxen */ .image-card__placeholder::before, -.image-card__placeholder::after { +.image-card__placeholder::after, +.placeholder::before, +.placeholder::after { content: ""; position: absolute; inset: 0; - border: 1px solid var(--black); } -.image-card__placeholder::before { +/* Diese Linien zeichnen das "X" per Farbverlauf (Gradient) */ +.image-card__placeholder::before, .placeholder::before { background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); } - -.image-card__placeholder::after { +.image-card__placeholder::after, .placeholder::after { background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); } +/* SOCIAL BADGE: Das kleine Fenster mit den Teilnehmer-Punkten über dem Bild */ .social-badge { position: absolute; bottom: 16px; @@ -162,82 +112,37 @@ html, body { width: 16px; height: 16px; background: var(--black); - border-radius: 50%; + border-radius: 50%; /* Macht das Quadrat zum Kreis */ } +/* GALERIE: Bereich für die drei Bild-Platzhalter */ .gallery { border: 1px solid var(--black); padding: 24px; } -.gallery__controls { - display: flex; - justify-content: space-between; - margin-bottom: 16px; -} - -.arrow { - border: 2px solid var(--black); - background: var(--white); - color: var(--black); - padding: 8px 16px; - font-size: 1.2rem; - cursor: pointer; -} - .gallery__track { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(3, 1fr); /* Erzeugt 3 Spalten nebeneinander */ gap: 16px; } -.gallery__item { - border: 1px solid var(--black); - min-height: 240px; - display: flex; - justify-content: center; - align-items: center; - padding: 8px; - position: relative; - background: var(--white); -} - -.placeholder { - width: 100%; - height: 100%; - position: relative; - border: 1px solid var(--black); -} - -.placeholder::before, -.placeholder::after { - content: ""; - position: absolute; - inset: 0; - background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); -} - -.placeholder::after { - background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); -} - +/* UNTERER GALERIE-BEREICH: Profilbild und Social Media Handle */ .gallery__info { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; - position: relative; } .profile-badge { width: 72px; height: 72px; border: 1px solid var(--black); - border-radius: 50%; - background: var(--white); - margin: 0 auto; + border-radius: 50%; /* Macht das Profilbild rund */ + margin: 0 auto; /* Zentriert den Kreis */ } .gallery__handle { font-weight: 700; -} +} \ No newline at end of file -- 2.30.2 From a01d72a71680479cbb471b071589c195bf6edb39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estelle=20K=C3=B6hler?= Date: Thu, 26 Mar 2026 11:38:35 +0100 Subject: [PATCH 3/4] Landing page X fixed --- index.html | 59 ++++++++------------ stylesheet.css | 148 ++++++++++++------------------------------------- 2 files changed, 58 insertions(+), 149 deletions(-) diff --git a/index.html b/index.html index aad51c4..37e5dbb 100644 --- a/index.html +++ b/index.html @@ -7,72 +7,59 @@ -
- -
-
LOGO
- -
- - \ No newline at end of file diff --git a/stylesheet.css b/stylesheet.css index 021ba4a..61f4885 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,148 +1,70 @@ -/* GRUNDLEGENDE EINSTELLUNGEN */ -* { - box-sizing: border-box; /* Sorgt dafür, dass Abstände die Boxen nicht breiter machen als gewollt */ -} +* { box-sizing: border-box; } :root { --black: #000000; --white: #ffffff; - --max-width: 1440px; /* Die Standard-Desktop-Breite laut Figma */ } -html, body { +body { margin: 0; - padding: 0; - background: var(--white); - color: var(--black); - font-family: Inter, Arial, sans-serif; - min-height: 100%; + font-family: 'Inter', sans-serif; + background: #f5f5f5; /* Light grey background to see the white page-wrapper */ } -/* HAUPTRAHMEN: Hält den gesamten Inhalt mittig und begrenzt die Breite */ .page-wrapper { - max-width: var(--max-width); - margin: 0 auto; /* Zentriert die ganze Seite im Browser */ - padding: 24px; + max-width: 1440px; + margin: 0 auto; background: var(--white); - min-height: 1343px; /* Die exakte Höhe aus dem Figma-Entwurf */ - border: 2px solid var(--black); /* Äußerer schwarzer Rahmen */ -} - -/* NAVIGATION / HEADER: Der obere Balken mit Logo und Links */ -.header { - display: flex; /* Ordnet Logo und Button nebeneinander an */ - align-items: center; - justify-content: space-between; /* Logo links, Login rechts */ + padding: 40px; border: 1px solid var(--black); - padding: 16px 24px; - margin-bottom: 24px; } -.header__brand { - font-weight: bold; - font-size: 1.2rem; +/* Layout logic */ +.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } +.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px; } +.gallery__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } + +/* The "X" Box Logic - IMPORTANT */ +.image-card__placeholder, .placeholder { + width: 100%; + height: 100%; + min-height: 250px; /* Ensures the box has height */ + position: relative; /* REQUIRED for the X lines to stay inside */ border: 1px solid var(--black); - padding: 8px 12px; -} - -/* BUTTONS: Einheitlicher Stil für alle Schaltflächen */ -.btn { - border: 2px solid var(--black); background: var(--white); - color: var(--black); - padding: 10px 18px; - font-weight: 700; - cursor: pointer; } -/* BARRIEREFREIHEIT: Markiert Elemente deutlich, wenn man sie mit der Tastatur (Tab) ansteuert */ -.btn:focus-visible, -.nav__link:focus-visible, -.arrow:focus-visible { - outline: 3px solid var(--black); - outline-offset: 3px; -} - -/* HERO-BEREICH: Die große Sektion unter dem Header */ -.hero { - display: grid; - grid-template-columns: 1fr 1fr; /* Teilt den Bereich in zwei gleich große Spalten (Text links, Bild rechts) */ - gap: 24px; - align-items: center; - padding: 24px; - border: 1px solid var(--black); -} - -.hero__title { - font-size: 2rem; - line-height: 1.25; -} - -/* BILD-PLATZHALTER: Erzeugt das "X" in der Mitte der Boxen */ -.image-card__placeholder::before, -.image-card__placeholder::after, -.placeholder::before, -.placeholder::after { +/* Creating the diagonal lines */ +.image-card__placeholder::before, .image-card__placeholder::after, +.placeholder::before, .placeholder::after { content: ""; position: absolute; - inset: 0; + top: 0; left: 0; right: 0; bottom: 0; } -/* Diese Linien zeichnen das "X" per Farbverlauf (Gradient) */ .image-card__placeholder::before, .placeholder::before { - background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); -} -.image-card__placeholder::after, .placeholder::after { - background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); + background: linear-gradient(to top left, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%); } -/* SOCIAL BADGE: Das kleine Fenster mit den Teilnehmer-Punkten über dem Bild */ +.image-card__placeholder::after, .placeholder::after { + background: linear-gradient(to top right, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%); +} + +/* Badges and Buttons */ .social-badge { position: absolute; - bottom: 16px; - right: 16px; - display: flex; - gap: 6px; - padding: 8px; - border: 1px solid var(--black); + bottom: 10px; right: 10px; background: var(--white); -} - -.social-badge__dot { - width: 16px; - height: 16px; - background: var(--black); - border-radius: 50%; /* Macht das Quadrat zum Kreis */ -} - -/* GALERIE: Bereich für die drei Bild-Platzhalter */ -.gallery { border: 1px solid var(--black); - padding: 24px; + padding: 5px; + display: flex; gap: 5px; } -.gallery__track { - display: grid; - grid-template-columns: repeat(3, 1fr); /* Erzeugt 3 Spalten nebeneinander */ - gap: 16px; -} - -/* UNTERER GALERIE-BEREICH: Profilbild und Social Media Handle */ -.gallery__info { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 20px; -} +.social-badge__dot { width: 12px; height: 12px; background: var(--black); border-radius: 50%; } .profile-badge { - width: 72px; - height: 72px; + width: 60px; height: 60px; + border-radius: 50%; border: 1px solid var(--black); - border-radius: 50%; /* Macht das Profilbild rund */ - margin: 0 auto; /* Zentriert den Kreis */ -} - -.gallery__handle { - font-weight: 700; + margin-top: 20px; } \ No newline at end of file -- 2.30.2 From dc8164f89883d01d87a4b9c6edae6a6de8eddab0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Estelle=20K=C3=B6hler?= Date: Thu, 26 Mar 2026 11:44:20 +0100 Subject: [PATCH 4/4] Rename index.html to landing-page.html to avoid main branch conflict --- index.html => landing-page.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename index.html => landing-page.html (100%) diff --git a/index.html b/landing-page.html similarity index 100% rename from index.html rename to landing-page.html -- 2.30.2