clean up branch css-main

css/landingpage.css

@@ -1,10 +1,32 @@
+/* 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 {
   --black: #000000;
   --white: #ffffff;
+  --button-green: #6b6b05;
+  --button-green-dark: #514c04;
 }
 
+
 .page-wrapper {
   max-width: 1440px;
   margin: 0 auto;
@@ -23,46 +45,366 @@
   margin-bottom: 40px; /* Using your 40px margin from the first block */
 }
 
+.header__brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 700;
+  font-size: 1.2rem;
+}
+
+.brand__logo {
+  height: 34px;
+  width: auto;
+  object-fit: contain;
+}
+
 /* Grouping container for 'Event finden' and 'Login' */
 .header__actions {
   display: flex;
   align-items: center;
-  gap: 16px; 
+    gap: 6px;
+}
+
+.top-nav-wrap {
+  background: #FFFDE3;
+  padding: 18px 0;
+}
+
+.top-nav {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 30px;
+  box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 58px;
+  padding: 12px 24px;
+  width: 100%;
+  max-width: none;
+  box-sizing: border-box;
+  margin: 0 0 40px;
+}
+
+.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: #221c1a;
+  line-height: 1.3;
+  text-decoration: none;
+  padding: 8px 20px;
+  border: 2px solid #e5e1b7;
+  border-radius: 20px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.nav-link:hover,
+.nav-link.active,
+.nav-link:focus-visible {
+  background: #6b6b05;
+  color: #ffffff;
+  border-color: #6b6b05;
+}
+
+.nav-link--login {
+  background: #6b6b05;
+  color: #ffffff;
+  border-color: #6b6b05;
+}
+
+.nav-link--login:hover,
+.nav-link--login:focus-visible {
+  background: #ffffff;
+  color: #6b6b05;
+  border-color: #6b6b05;
+}
+
+.main-content {
+  width: min(100% - 4rem, 1120px);
+  margin: 0 auto;
+  padding: 0 20px;
 }
 
 .hero { 
   display: grid; 
   grid-template-columns: 1fr 1fr; 
-  gap: 40px; 
-  margin-bottom: 60px; 
+  gap: 50px; 
+  margin-bottom: 80px; 
+  align-items: center;
+  padding: 40px 0;
 }
 
-/* Container for the 3 photos */
-.gallery__track {
+.how-it-works {
+  margin-bottom: 70px;
+}
+
+.how-it-works__header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.how-it-works__header h2 {
+  font-size: 2rem;
+  margin: 0;
+  color: #221c1a;
+}
+
+.how-it-works__steps {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(180px, 1fr));
   gap: 20px;
-  margin-bottom: 30px; /* Space between photos and dots */
 }
 
+.how-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 28px 20px;
+  background: #6B6B05;
+  border-radius: 28px;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
+}
+
+.how-step__icon {
+  width: 64px;
+  height: 64px;
+  display: grid;
+  place-items: center;
+  background: var(--button-green);
+  color: var(--white);
+  border-radius: 50%;
+  font-size: 1.4rem;
+}
+
+.how-step__number {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  background: #f4efd7;
+  color: #221c1a;
+  border-radius: 50%;
+  font-weight: 700;
+}
+
+.how-step__label {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  font-weight: 600;
+  color: #221c1a;
+  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;
+  }
+}
+
+.hero__left {
+  max-width: 520px;
+}
+
+.hero__left p {
+  margin: 24px 0 32px;
+  line-height: 1.8;
+}
+
+.hero__right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-card {
+  width: 100%;
+  max-width: 396px;
+  overflow: hidden;
+  border-radius: 30px;
+}
+
+.hero-image {
+  width: 100%;
+  max-width: 396px;
+  max-height: 464px;
+  height: auto;
+  border-radius: 30px;
+  object-fit: cover;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
+}
+
+@media (max-width: 900px) {
+  .hero {
+    grid-template-columns: 1fr;
+    padding: 30px 0;
+  }
+
+  .hero__right {
+    order: -1;
+  }
+
+  .hero-image {
+    min-height: 320px;
+  }
+}
+
+/* Carousel gallery */
+.gallery__carousel {
+  position: relative;
+}
+
+.gallery__track {
+  display: flex;
+  gap: 20px;
+  overflow: hidden;
+  margin-bottom: 30px; /* Space between photos and dots */
+  scroll-behavior: smooth;
+}
+
+.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 --- */
 .btn {
-  border: 2px solid var(--black);
-  background: var(--white);
-  color: var(--black);
-  padding: 10px 18px;
+  border: none;
+  background: var(--button-green);
+  color: var(--white);
+  padding: 12px 22px;
   font-weight: 700;
   cursor: pointer;
   text-decoration: none; /* Keeps the link from having an underline */
   display: inline-flex;
   align-items: center;
-  font-size: 0.9rem;
-  transition: background-color 0.2s ease;
+  justify-content: center;
+  border-radius: 999px;
+  font-size: 0.95rem;
+  transition: background-color 0.2s ease, transform 0.2s ease;
 }
 
 .btn:hover {
-  background-color: #f0f0f0;
+  background-color: var(--button-green-dark);
+  transform: translateY(-1px);
 }
 
 .nav__link {
@@ -136,4 +478,51 @@
   border-radius: 50%;
   border: 1px solid var(--black);
   margin-top: 20px;
+}
+
+.gallery__info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.gallery__handle {
+  display: flex;
+  align-items: center;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--black);
+  gap: 6px;
+}
+
+.gallery__icon {
+  font-size: 1.15rem;
+  color: #DD541A;
+}
+
+.gallery__at {
+  font-size: 1.1rem;
+  color: #222;
+}
+
+.gallery__brand {
+  font-family: 'Inter', sans-serif;
+  color: #DD541A;
+}
+
+/* Footer */
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 24px;
+  border: none;
+  margin-top: 40px;
+}
+
+.footer__link {
+  color: var(--black);
+  text-decoration: underline;
+  font-size: 0.8rem;
+  font-weight: 400;
 }

index.html

@@ -4,66 +4,121 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Social Cooking Wireframe</title>
-  
-  <!-- Stylesheet für diese Seite-->
   <link rel="stylesheet" href="css/landingpage.css" />
-  <!-- Globales Stylesheet -->
-  <link rel="stylesheet" href="css/stylesheet_global.css">
-
 </head>
 <body>
-
-
-<!-- Top Navigation mit Seitenlinks -->
-<header class="top-nav-wrap">
-    <div class="top-nav">
-        <a class="brand" href="index.html" aria-label="Zur Startseite">
-            <img src="assets/invite-logo.svg" alt="Invite Logo">
-        </a>
-        <nav class="top-nav-links" aria-label="Hauptnavigation">
-            <a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
-            <a class="nav-link" href="event_create.html">Event erstellen</a>
-            <a class="profile-pill" href="login.html" aria-label="Profil">M</a>
-        </nav>
-    </div>
+  <div class="page-wrapper">
+    <header class="header">
+  <div class="header__brand">LOGO</div>
+  
+  <div class="header__actions">
+    <nav class="nav">
+      <a class="nav__link btn btn--outline" href="event_overview.html">Event finden</a>
+    </nav>
+    <a class="btn btn--outline" href="login.html">Login</a>
+  </div>
 </header>
 
     <main class="main-content">
+      <!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
       <section class="hero">
         <div class="hero__left">
-          <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>
-          <a class="btn btn--primary" href="signup.html">Anmelden</a>
+          <h1>Dein Platz am Tisch wartet schon.</h1>
+          <p>Egal, ob du leidenschaftlich gerne den Kochlöffel schwingst oder dich einfach auf ein hausgemachtes Essen in guter Gesellschaft freust: Bei Invité bringst du Menschen zusammen. Finde Events, die zu deinem Geschmack passen, und geniesse unkomplizierte Begegnungen ohne Networking-Zwang.</p>
+          <a class="btn" href="login.html">Anmelden</a>
         </div>
 
         <div class="hero__right">
           <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>
+            <img class="hero-image" src="assets/Startpage ingredients.jpg" alt="Startpage Ingredients" />
           </div>
         </div>
       </section>
 
-<section class="gallery">
-  <div class="gallery__track">
-    <article class="gallery__item"><div class="placeholder"></div></article>
-    <article class="gallery__item"><div class="placeholder"></div></article>
-    <article class="gallery__item"><div class="placeholder"></div></article>
-  </div>
+      <section class="how-it-works">
+        <div class="how-it-works__header">
+          <h2>So funktioniert's</h2>
+        </div>
+        <div class="how-it-works__steps">
+          <article class="how-step how-step--numbered">
+            <span class="how-step__corner-number how-step__corner-number--brown">1</span>
+            <img src="assets/register icon.png" alt="Register" class="how-step__png how-step__png--brown" />
+            <p class="how-step__label how-step__label--brown how-step__label--big">Anmelden</p>
+          </article>
+          <article class="how-step how-step--numbered">
+            <span class="how-step__corner-number how-step__corner-number--brown">2</span>
+            <img src="assets/add-event icon.png" alt="Event erstellen" class="how-step__png how-step__png--brown" />
+            <p class="how-step__label how-step__label--brown how-step__label--big">Event erstellen</p>
+          </article>
+          <article class="how-step how-step--numbered">
+            <span class="how-step__corner-number how-step__corner-number--brown">3</span>
+            <img src="assets/Plate icon.png" alt="Gemeinsam essen" class="how-step__png how-step__png--brown" />
+            <p class="how-step__label how-step__label--brown how-step__label--big">Gemeinsam essen</p>
+          </article>
+        </div>
+      </section>
 
-  <div class="gallery__dots">
-    <span class="dot"></span>
-    <span class="dot"></span>
-    <span class="dot"></span>
-  </div>
-</section>
+      <!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
+      <section class="gallery">
+        <div class="gallery__carousel">
+          <button type="button" class="gallery__arrow gallery__arrow--prev" aria-label="Vorheriges Bild">
+            <i class="fas fa-chevron-left"></i>
+          </button>
 
+          <div class="gallery__track">
+            <article class="gallery__item">
+              <img src="assets/Red checkered social eating.jpg" alt="Red checkered social eating">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Pasta and many forks.jpg" alt="Pasta and many forks">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Zoomed in asian eating.jpg" alt="Zoomed in asian eating">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Burger eating together.jpg" alt="Burger eating together">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Cake cutting figs.jpg" alt="Cake cutting figs">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Cooking woman at home.jpg" alt="Cooking woman at home">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Eating and laughing girls.jpg" alt="Eating and laughing girls">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Pasta in cheese.jpg" alt="Pasta in cheese">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Salad roommates.jpg" alt="Salad roommates">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Sharing food table.jpg" alt="Sharing food table">
+            </article>
+            <article class="gallery__item">
+              <img src="assets/Spicy food zoomed.jpg" alt="Spicy food zoomed">
+            </article>
+          </div>
+
+          <button type="button" class="gallery__arrow gallery__arrow--next" aria-label="Nächstes Bild">
+            <i class="fas fa-chevron-right"></i>
+          </button>
+        </div>
+
+
+        <div class="gallery__info">
+          <div class="gallery__handle" style="display: flex; align-items: center; gap: 16px;">
+            <img src="assets/instagram.png" alt="Instagram" class="gallery__icon--instagram" />
+            <img src="assets/invite-logo.svg" alt="Invité Logo" class="gallery__icon--invite" />
+          </div>
+        </div>
+      </section>
     </main>
-  </div>
-  <script src="js/landingpage.js"></script>
+
+    <script src="js/index-carousel.js"></script>
+    <footer class="footer">
+      <a href="#" class="footer__link">Impressum</a>
+    </footer>
 </body>
 </html>

js/index-carousel.js

@@ -0,0 +1,52 @@
+const carouselTrack = document.querySelector('.gallery__track');
+const prevArrow = document.querySelector('.gallery__arrow--prev');
+const nextArrow = document.querySelector('.gallery__arrow--next');
+
+if (carouselTrack) {
+  const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
+  const getItemsPerPage = () => (window.matchMedia('(max-width: 900px)').matches ? 1 : 3);
+  let itemsPerPage = getItemsPerPage();
+  const pageCount = Math.ceil(items.length / itemsPerPage);
+  let activePage = 0;
+
+  function scrollToPage(page) {
+    activePage = page;
+    const pageWidth = carouselTrack.clientWidth;
+    carouselTrack.scrollTo({ left: pageWidth * page, behavior: 'smooth' });
+  }
+
+  function showNext() {
+    activePage = (activePage + 1) % pageCount;
+    scrollToPage(activePage);
+  }
+
+  function showPrev() {
+    activePage = (activePage - 1 + pageCount) % pageCount;
+    scrollToPage(activePage);
+  }
+
+  function refreshCarousel() {
+    const responsiveItemsPerPage = getItemsPerPage();
+    if (responsiveItemsPerPage !== itemsPerPage) {
+      itemsPerPage = responsiveItemsPerPage;
+      window.location.reload();
+    }
+  }
+
+  if (nextArrow) nextArrow.addEventListener('click', showNext);
+  if (prevArrow) prevArrow.addEventListener('click', showPrev);
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'ArrowRight') {
+      showNext();
+    }
+    if (event.key === 'ArrowLeft') {
+      showPrev();
+    }
+  });
+
+  window.addEventListener('resize', () => {
+    refreshCarousel();
+    scrollToPage(activePage);
+  });
+}

login.html

@@ -61,4 +61,4 @@
     </div>  <!-- Schliesst main-content -->
     <script src="js/login.js"></script>
 </body>
-</html>
+</html>

signup.html

@@ -93,4 +93,4 @@
     </div>
     <script src="js/signup.js"></script>
 </body>
-</html>
+</html>