From 352a1c0b54dd811ca819690d03d4dc8a58cfd119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Estelle=20K=C3=B6hler?= <estellekoehler37@gmail.com>
Date: Fri, 27 Mar 2026 15:03:06 +0100
Subject: [PATCH] Update Instagram button and improve visual styling

---
 landing-page.html | 29 ++++++++++++----------
 stylesheet.css    | 61 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 13 deletions(-)
diff --git a/landing-page.html b/landing-page.html
index 37e5dbb..a95ec56 100644
--- a/landing-page.html
+++ b/landing-page.html
@@ -4,16 +4,15 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Social Cooking Wireframe</title>
-  <link rel="stylesheet" href="stylesheet.css" />
-</head>
+  <link rel="stylesheet" href="stylesheet.css" />  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-dU7ZrF1pFq5kVnPzlV9+04YhARzNjCX5Q5P1shgMpuN4s5I8mI8QD4981h7kYtV7sSgNldR0z5pZW5bS2ZpY3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head>
 <body>
   <div class="page-wrapper">
     <header class="header">
-      <div class="header__brand">LOGO</div>
-      <nav class="nav">
+      <div class="header__brand">Invité</div>
+      <div class="header__actions">
         <a class="nav__link" href="#">Event finden</a>
-      </nav>
-      <button class="btn btn--outline" type="button">Login</button>
+        <button class="btn btn--outline" type="button">Login</button>
+      </div>
     </header>
 
     <main class="main-content">
@@ -37,11 +36,6 @@
       </section>
 
       <section class="gallery">
-        <div class="gallery__controls">
-          <button class="arrow">&lt;</button>
-          <button class="arrow">&gt;</button>
-        </div>
-
         <div class="gallery__track">
           <article class="gallery__item">
             <div class="placeholder"></div>
@@ -54,12 +48,21 @@
           </article>
         </div>
 
+        <div class="gallery__dots">
+          <span class="dot"></span>
+          <span class="dot"></span>
+          <span class="dot"></span>
+        </div>
+
         <div class="gallery__info">
-          <div class="profile-badge"></div>
-          <div class="gallery__handle">@social_cooking</div>
+          <div class="gallery__handle"><i class="fab fa-instagram gallery__icon" aria-hidden="true"></i><span class="gallery__at">@</span><span class="gallery__brand">Invité</span></div>
         </div>
       </section>
     </main>
+
+    <footer class="footer">
+      <a href="#" class="footer__link">Impressum</a>
+    </footer>
   </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/stylesheet.css b/stylesheet.css
index b5db748..81aa0b7 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -29,6 +29,20 @@ body {
   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;
@@ -158,4 +172,51 @@ body {
   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;
 }
\ No newline at end of file
