diff --git a/css/landingpage.css b/css/landingpage.css
index 61f4885..b5db748 100644
--- a/css/landingpage.css
+++ b/css/landingpage.css
@@ -19,11 +19,103 @@ body {
border: 1px solid var(--black);
}
-/* 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; }
+/* --- 1. Basic Layout Logic --- */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 24px;
+ border: 1px solid var(--black);
+ margin-bottom: 40px; /* Using your 40px margin from the first block */
+}
+/* Grouping container for 'Event finden' and 'Login' */
+.header__actions {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.hero {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 40px;
+ margin-bottom: 60px;
+}
+
+/* Container for the 3 photos */
+.gallery__track {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 20px;
+ margin-bottom: 30px; /* Space between photos and dots */
+}
+
+/* Container for the dots to keep them in the middle */
+.gallery__dots {
+ display: flex;
+ justify-content: center; /* This is the "magic" line that centers them */
+ gap: 12px; /* Space between the dots */
+ width: 100%;
+}
+
+/* The actual black dots */
+.dot {
+ width: 12px;
+ height: 12px;
+ background-color: #000; /* Solid black */
+ border-radius: 50%; /* Makes them round */
+ display: inline-block;
+}
+
+/* --- 2. Button & Link Styling --- */
+.btn {
+ border: 2px solid var(--black);
+ background: var(--white);
+ color: var(--black);
+ padding: 10px 18px;
+ 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;
+}
+
+.btn:hover {
+ background-color: #f0f0f0;
+}
+
+.nav__link {
+ color: var(--black); /* Fixes the purple link issue */
+}
+
+/* --- 3. The "X" Box Logic --- */
+.image-card__placeholder, .placeholder {
+ width: 100%;
+ height: 100%;
+ min-height: 250px;
+ position: relative;
+ border: 1px solid var(--black);
+ background: var(--white);
+}
+
+.image-card__placeholder::before, .image-card__placeholder::after,
+.placeholder::before, .placeholder::after {
+ content: "";
+ position: absolute;
+ top: 0; left: 0; right: 0; bottom: 0;
+}
+
+/* Drawing the diagonal lines for the wireframe look */
+.image-card__placeholder::before, .placeholder::before {
+ background: linear-gradient(to top left, transparent 49.5%, var(--black) 49.5%, var(--black) 50.5%, transparent 50.5%);
+}
+
+.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%);
+}
/* The "X" Box Logic - IMPORTANT */
.image-card__placeholder, .placeholder {
width: 100%;
@@ -52,12 +144,11 @@ body {
/* Badges and Buttons */
.social-badge {
- position: absolute;
- bottom: 10px; right: 10px;
- background: var(--white);
- border: 1px solid var(--black);
- padding: 5px;
- display: flex; gap: 5px;
+ display: flex;
+ justify-content: center; /* This centers the dots */
+ gap: 10px;
+ margin-top: 20px; /* This creates space between the photos and the dots */
+ /* REMOVE any line that says "position: absolute" or "bottom: 16px" */
}
.social-badge__dot { width: 12px; height: 12px; background: var(--black); border-radius: 50%; }
diff --git a/index.html b/index.html
index 2b8c444..1a1d2af 100644
--- a/index.html
+++ b/index.html
@@ -9,12 +9,15 @@
-