koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/landing-page #4

Merged
koehleestell merged 5 commits from feature/landing-page into main 2026-03-26 12:05:33 +01:00
Conversation 0 Commits 5 Files Changed 4 +58 -149
2 changed files with 58 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a01d72a716 - Show all commits

59
index.html
View File

@ -7,72 +7,59 @@
<link rel="stylesheet" href="stylesheet.css" /> <link rel="stylesheet" href="stylesheet.css" />
</head> </head>
<body> <body>
<div class="page-wrapper"> <div class="page-wrapper">
<header class="header">
<header class="header" aria-label="Hauptnavigation"> <div class="header__brand">LOGO</div>
<div class="header__brand" aria-label="Firmenlogo Invité">LOGO</div> <nav class="nav">
<a class="nav__link" href="#">Event finden</a>
<nav class="nav" aria-label="Seitennavigation">
<a class="nav__link" href="#" role="link">Event finden</a>
</nav> </nav>
<button class="btn btn--outline" type="button">Login</button>
<button class="btn btn--outline header__login" aria-label="Zum Login-Bereich" type="button">Login</button>
</header> </header>
<main class="main-content"> <main class="main-content">
<section class="hero">
<section class="hero" aria-labelledby="hero-title">
<div class="hero__left"> <div class="hero__left">
<h1 class="hero__title" id="hero-title">Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?</h1> <h1 class="hero__title">Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?</h1>
<p class="hero__description"> <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>
Beschreibung: Erklärt das Konzept von Social Cooking und lädt Nutzer ein, Events zu erstellen oder zu suchen. <button class="btn btn--primary" type="button">Anmelden</button>
</p>
<button class="btn btn--primary" aria-label="Kostenlos Anmelden" type="button">Anmelden</button>
</div> </div>
<div class="hero__right"> <div class="hero__right">
<div class="image-card" aria-label="Visualisierung eines Cooking-Events"> <div class="image-card">
<div class="image-card__placeholder" aria-hidden="true"></div> <div class="image-card__placeholder"></div>
<div class="social-badge">
<div class="social-badge" aria-label="Anzeige der Teilnehmeranzahl"> <span class="social-badge__dot"></span>
<span class="social-badge__dot" title="Teilnehmer 1"></span> <span class="social-badge__dot"></span>
<span class="social-badge__dot" title="Teilnehmer 2"></span> <span class="social-badge__dot"></span>
<span class="social-badge__dot" title="Teilnehmer 3"></span>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="gallery" aria-label="Vorschau vergangener Events"> <section class="gallery">
<div class="gallery__controls"> <div class="gallery__controls">
<button class="arrow arrow--prev" type="button" aria-label="Vorheriges Bild anzeigen">&lt;</button> <button class="arrow">&lt;</button>
<button class="arrow arrow--next" type="button" aria-label="Nächstes Bild anzeigen">&gt;</button> <button class="arrow">&gt;</button>
</div> </div>
<div class="gallery__track"> <div class="gallery__track">
<article class="gallery__item" aria-label="Event Foto 1"> <article class="gallery__item">
<div class="placeholder"></div> <div class="placeholder"></div>
</article> </article>
<article class="gallery__item" aria-label="Event Foto 2"> <article class="gallery__item">
<div class="placeholder"></div> <div class="placeholder"></div>
</article> </article>
<article class="gallery__item" aria-label="Event Foto 3"> <article class="gallery__item">
<div class="placeholder"></div> <div class="placeholder"></div>
</article> </article>
</div> </div>
<div class="gallery__info"> <div class="gallery__info">
<div class="profile-badge" aria-label="Profilbild des Hosts"></div> <div class="profile-badge"></div>
<div class="gallery__handle" aria-label="Instagram Link zu social_cooking">@social_cooking</div> <div class="gallery__handle">@social_cooking</div>
</div> </div>
</section> </section>
</main> </main>
</div> </div>
<script src="javascript.js"></script>
</body> </body>
</html> </html>

148
stylesheet.css
View File

@ -1,148 +1,70 @@
/* GRUNDLEGENDE EINSTELLUNGEN */ * { box-sizing: border-box; }
* {
box-sizing: border-box; /* Sorgt dafür, dass Abstände die Boxen nicht breiter machen als gewollt */
}
:root { :root {
--black: #000000; --black: #000000;
--white: #ffffff; --white: #ffffff;
--max-width: 1440px; /* Die Standard-Desktop-Breite laut Figma */
} }
html, body { body {
margin: 0; margin: 0;
padding: 0; font-family: 'Inter', sans-serif;
background: var(--white); background: #f5f5f5; /* Light grey background to see the white page-wrapper */
color: var(--black);
font-family: Inter, Arial, sans-serif;
min-height: 100%;
} }
/* HAUPTRAHMEN: Hält den gesamten Inhalt mittig und begrenzt die Breite */
.page-wrapper { .page-wrapper {
max-width: var(--max-width); max-width: 1440px;
margin: 0 auto; /* Zentriert die ganze Seite im Browser */ margin: 0 auto;
padding: 24px;
background: var(--white); background: var(--white);
min-height: 1343px; /* Die exakte Höhe aus dem Figma-Entwurf */ padding: 40px;
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 */
border: 1px solid var(--black); border: 1px solid var(--black);
padding: 16px 24px;
margin-bottom: 24px;
} }
.header__brand { /* Layout logic */
font-weight: bold; .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
font-size: 1.2rem; .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); 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); 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 */ /* Creating the diagonal lines */
.btn:focus-visible, .image-card__placeholder::before, .image-card__placeholder::after,
.nav__link:focus-visible, .placeholder::before, .placeholder::after {
.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 {
content: ""; content: "";
position: absolute; 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 { .image-card__placeholder::before, .placeholder::before {
background-image: linear-gradient(135deg, 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%);
}
.image-card__placeholder::after, .placeholder::after {
background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%);
} }
/* 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 { .social-badge {
position: absolute; position: absolute;
bottom: 16px; bottom: 10px; right: 10px;
right: 16px;
display: flex;
gap: 6px;
padding: 8px;
border: 1px solid var(--black);
background: var(--white); 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); border: 1px solid var(--black);
padding: 24px; padding: 5px;
display: flex; gap: 5px;
} }
.gallery__track { .social-badge__dot { width: 12px; height: 12px; background: var(--black); border-radius: 50%; }
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;
}
.profile-badge { .profile-badge {
width: 72px; width: 60px; height: 60px;
height: 72px; border-radius: 50%;
border: 1px solid var(--black); border: 1px solid var(--black);
border-radius: 50%; /* Macht das Profilbild rund */ margin-top: 20px;
margin: 0 auto; /* Zentriert den Kreis */
}
.gallery__handle {
font-weight: 700;
} }