From a01d72a71680479cbb471b071589c195bf6edb39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Estelle=20K=C3=B6hler?= <estellekoehler37@gmail.com>
Date: Thu, 26 Mar 2026 11:38:35 +0100
Subject: [PATCH] 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 @@
   <link rel="stylesheet" href="stylesheet.css" />
 </head>
 <body>
-
   <div class="page-wrapper">
-
-    <header class="header" aria-label="Hauptnavigation">
-      <div class="header__brand" aria-label="Firmenlogo Invité">LOGO</div>
-      
-      <nav class="nav" aria-label="Seitennavigation">
-        <a class="nav__link" href="#" role="link">Event finden</a>
+    <header class="header">
+      <div class="header__brand">LOGO</div>
+      <nav class="nav">
+        <a class="nav__link" href="#">Event finden</a>
       </nav>
-
-      <button class="btn btn--outline header__login" aria-label="Zum Login-Bereich" type="button">Login</button>
+      <button class="btn btn--outline" type="button">Login</button>
     </header>
 
     <main class="main-content">
-
-      <section class="hero" aria-labelledby="hero-title">
-        
+      <section class="hero">
         <div class="hero__left">
-          <h1 class="hero__title" id="hero-title">Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?</h1>
-          <p class="hero__description">
-            Beschreibung: Erklärt das Konzept von Social Cooking und lädt Nutzer ein, Events zu erstellen oder zu suchen.
-          </p>
-          <button class="btn btn--primary" aria-label="Kostenlos Anmelden" type="button">Anmelden</button>
+          <h1 class="hero__title">Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?</h1>
+          <p class="hero__description">Dein Ort um neue Leute kennen zu lernen! Erstelle eigene Events und lade Gäste zu dir nach Hause ein.</p>
+          <button class="btn btn--primary" type="button">Anmelden</button>
         </div>
 
         <div class="hero__right">
-          <div class="image-card" aria-label="Visualisierung eines Cooking-Events">
-            <div class="image-card__placeholder" aria-hidden="true"></div>
-            
-            <div class="social-badge" aria-label="Anzeige der Teilnehmeranzahl">
-              <span class="social-badge__dot" title="Teilnehmer 1"></span>
-              <span class="social-badge__dot" title="Teilnehmer 2"></span>
-              <span class="social-badge__dot" title="Teilnehmer 3"></span>
+          <div class="image-card">
+            <div class="image-card__placeholder"></div>
+            <div class="social-badge">
+              <span class="social-badge__dot"></span>
+              <span class="social-badge__dot"></span>
+              <span class="social-badge__dot"></span>
             </div>
           </div>
         </div>
       </section>
 
-      <section class="gallery" aria-label="Vorschau vergangener Events">
-        
+      <section class="gallery">
         <div class="gallery__controls">
-          <button class="arrow arrow--prev" type="button" aria-label="Vorheriges Bild anzeigen">&lt;</button>
-          <button class="arrow arrow--next" type="button" aria-label="Nächstes Bild anzeigen">&gt;</button>
+          <button class="arrow">&lt;</button>
+          <button class="arrow">&gt;</button>
         </div>
 
         <div class="gallery__track">
-          <article class="gallery__item" aria-label="Event Foto 1">
+          <article class="gallery__item">
             <div class="placeholder"></div>
           </article>
-          <article class="gallery__item" aria-label="Event Foto 2">
+          <article class="gallery__item">
             <div class="placeholder"></div>
           </article>
-          <article class="gallery__item" aria-label="Event Foto 3">
+          <article class="gallery__item">
             <div class="placeholder"></div>
           </article>
         </div>
 
         <div class="gallery__info">
-          <div class="profile-badge" aria-label="Profilbild des Hosts"></div>
-          <div class="gallery__handle" aria-label="Instagram Link zu social_cooking">@social_cooking</div>
+          <div class="profile-badge"></div>
+          <div class="gallery__handle">@social_cooking</div>
         </div>
       </section>
-
     </main>
   </div>
-
-  <script src="javascript.js"></script>
 </body>
 </html>
\ 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
