diff --git a/assets/Plate icon.png b/assets/Plate icon.png
new file mode 100644
index 0000000..7152cc5
Binary files /dev/null and b/assets/Plate icon.png differ
diff --git a/assets/add-event icon.png b/assets/add-event icon.png
new file mode 100644
index 0000000..cb06b43
Binary files /dev/null and b/assets/add-event icon.png differ
diff --git a/assets/instagram.png b/assets/instagram.png
new file mode 100644
index 0000000..193e5f6
Binary files /dev/null and b/assets/instagram.png differ
diff --git a/assets/register icon.png b/assets/register icon.png
new file mode 100644
index 0000000..513e376
Binary files /dev/null and b/assets/register icon.png differ
diff --git a/assets/vecteezy_instagram-social-media-icon-symbol-element-vector-illustration_8385736.jpg b/assets/vecteezy_instagram-social-media-icon-symbol-element-vector-illustration_8385736.jpg
deleted file mode 100644
index e53859c..0000000
Binary files a/assets/vecteezy_instagram-social-media-icon-symbol-element-vector-illustration_8385736.jpg and /dev/null differ
diff --git a/css/landingpage.css b/css/landingpage.css
index 7a67ed6..c9b179a 100644
--- a/css/landingpage.css
+++ b/css/landingpage.css
@@ -1,3 +1,22 @@
+/* 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 {
@@ -49,7 +68,7 @@ body {
.header__actions {
display: flex;
align-items: center;
- gap: 16px;
+ gap: 6px;
}
.top-nav-wrap {
@@ -165,7 +184,7 @@ body {
align-items: center;
gap: 16px;
padding: 28px 20px;
- background: #ffffff;
+ background: #6B6B05;
border-radius: 28px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
@@ -201,6 +220,46 @@ body {
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;
@@ -292,55 +351,32 @@ body {
height: 48px;
display: grid;
place-items: center;
- border-radius: 999px;
- background: rgba(255, 255, 255, 0.55);
- backdrop-filter: blur(12px);
- border: 1px solid rgba(255, 255, 255, 0.55);
- color: #221c1a;
+ border-radius: 0;
+ background: none;
+ backdrop-filter: none;
+ border: none;
+ color: #ffffff;
cursor: pointer;
- transition: transform 0.2s ease, background-color 0.2s ease;
+ 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.05);
- background: rgba(255, 255, 255, 0.8);
+ transform: translateY(-50%) scale(1.15);
+ color: #e5e1b7;
}
.gallery__arrow--prev {
- left: 0;
+ left: 12px;
}
.gallery__arrow--next {
- right: 0;
+ right: 12px;
}
-/* Container for the dots to keep them in the middle */
-
-.gallery__center-arrow {
- display: flex;
- justify-content: center;
- align-items: center;
- margin-bottom: 24px;
-}
-
-.gallery__arrow--center {
- width: 48px;
- height: 48px;
- display: grid;
- place-items: center;
- border-radius: 999px;
- background: rgba(255, 255, 255, 0.55);
- backdrop-filter: blur(12px);
- border: 1px solid rgba(255, 255, 255, 0.55);
- color: #221c1a;
- cursor: pointer;
- box-shadow: 0 2px 8px rgba(102, 52, 13, 0.08);
- transition: transform 0.2s ease, background-color 0.2s ease;
-}
-
-.gallery__arrow--center:hover {
- background: rgba(255, 255, 255, 0.8);
- transform: scale(1.05);
+/* Center arrow removed – using side arrows only */
}
@media (max-width: 900px) {
diff --git a/index.html b/index.html
index faf704c..8dbd71c 100644
--- a/index.html
+++ b/index.html
@@ -43,20 +43,20 @@
So funktioniert's
-
-
- 1
- Anmelden
+
+ 1
+ 
+ Anmelden
-
-
- 2
- Event erstellen
+
+ 2
+ 
+ Event erstellen
-
-
- 3
- Gemeinsam essen
+
+ 3
+ 
+ Gemeinsam essen
-
-
diff --git a/js/index-carousel.js b/js/index-carousel.js
index aba54e1..42128fc 100644
--- a/js/index-carousel.js
+++ b/js/index-carousel.js
@@ -1,7 +1,6 @@
const carouselTrack = document.querySelector('.gallery__track');
const prevArrow = document.querySelector('.gallery__arrow--prev');
const nextArrow = document.querySelector('.gallery__arrow--next');
-const centerArrow = document.querySelector('.gallery__arrow--center');
if (carouselTrack) {
const items = Array.from(carouselTrack.querySelectorAll('.gallery__item'));
@@ -36,7 +35,6 @@ if (carouselTrack) {
if (nextArrow) nextArrow.addEventListener('click', showNext);
if (prevArrow) prevArrow.addEventListener('click', showPrev);
- if (centerArrow) centerArrow.addEventListener('click', showNext);
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') {
- 
+ 
+