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 +57 -141
2 changed files with 57 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7977792071 - Show all commits

45
index.html
View File

@ -7,58 +7,69 @@
<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" aria-label="Hauptnavigation"> <header class="header" aria-label="Hauptnavigation">
<div class="header__brand" aria-label="Logo Platzhalter">LOGO</div> <div class="header__brand" aria-label="Firmenlogo Invité">LOGO</div>
<nav class="nav" aria-label="Seitennavigation"> <nav class="nav" aria-label="Seitennavigation">
<a class="nav__link" href="#" role="link">Event finden</a> <a class="nav__link" href="#" role="link">Event finden</a>
</nav> </nav>
<button class="btn btn--outline header__login" aria-label="Login" 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" aria-labelledby="hero-title"> <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" id="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, oder suche nach passenden Events in deiner Umgebung.</p> <p class="hero__description">
<button class="btn btn--primary" aria-label="Anmelden" type="button">Anmelden</button> Beschreibung: Erklärt das Konzept von Social Cooking und lädt Nutzer ein, Events zu erstellen oder zu suchen.
</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="Hero Bild Platzhalter"> <div class="image-card" aria-label="Visualisierung eines Cooking-Events">
<div class="image-card__placeholder" aria-hidden="true"></div> <div class="image-card__placeholder" aria-hidden="true"></div>
<div class="social-badge" aria-label="Social Badge mit Teilnehmern">
<span class="social-badge__dot"></span> <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" title="Teilnehmer 3"></span>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section class="gallery" aria-label="Galerie mit Platzhaltern"> <section class="gallery" aria-label="Vorschau vergangener Events">
<div class="gallery__controls"> <div class="gallery__controls">
<button class="arrow arrow--prev" type="button" aria-label="Vorheriges Bild">&lt;</button> <button class="arrow arrow--prev" type="button" aria-label="Vorheriges Bild anzeigen">&lt;</button>
<button class="arrow arrow--next" type="button" aria-label="Nächstes Bild">&gt;</button> <button class="arrow arrow--next" type="button" aria-label="Nächstes Bild anzeigen">&gt;</button>
</div> </div>
<div class="gallery__track"> <div class="gallery__track">
<article class="gallery__item" data-index="0" aria-label="Galerie Element 1"> <article class="gallery__item" aria-label="Event Foto 1">
<div class="placeholder"></div> <div class="placeholder"></div>
</article> </article>
<article class="gallery__item" data-index="1" aria-label="Galerie Element 2"> <article class="gallery__item" aria-label="Event Foto 2">
<div class="placeholder"></div> <div class="placeholder"></div>
</article> </article>
<article class="gallery__item" data-index="2" aria-label="Galerie Element 3"> <article class="gallery__item" aria-label="Event Foto 3">
<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="Profil Badge"></div> <div class="profile-badge" aria-label="Profilbild des Hosts"></div>
<div class="gallery__handle" aria-label="Instagram Handle">@social_cooking</div> <div class="gallery__handle" aria-label="Instagram Link zu social_cooking">@social_cooking</div>
</div> </div>
</section> </section>
</main> </main>
</div> </div>

151
stylesheet.css
View File

@ -1,12 +1,12 @@
/* Wireframe Stile (schwarz/weiß) */ /* 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; --max-width: 1440px; /* Die Standard-Desktop-Breite laut Figma */
} }
html, body { html, body {
@ -18,19 +18,21 @@ html, body {
min-height: 100%; 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: var(--max-width);
margin: 0 auto; margin: 0 auto; /* Zentriert die ganze Seite im Browser */
padding: 24px; padding: 24px;
background: var(--white); background: var(--white);
min-height: 1343px; min-height: 1343px; /* Die exakte Höhe aus dem Figma-Entwurf */
border: 2px solid var(--black); border: 2px solid var(--black); /* Äußerer schwarzer Rahmen */
} }
/* NAVIGATION / HEADER: Der obere Balken mit Logo und Links */
.header { .header {
display: flex; display: flex; /* Ordnet Logo und Button nebeneinander an */
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between; /* Logo links, Login rechts */
border: 1px solid var(--black); border: 1px solid var(--black);
padding: 16px 24px; padding: 16px 24px;
margin-bottom: 24px; margin-bottom: 24px;
@ -41,18 +43,9 @@ html, body {
font-size: 1.2rem; font-size: 1.2rem;
border: 1px solid var(--black); border: 1px solid var(--black);
padding: 8px 12px; padding: 8px 12px;
background: var(--white);
}
.nav__link {
color: var(--black);
text-decoration: none;
font-weight: 600;
border: 1px solid var(--black);
padding: 8px 12px;
background: var(--white);
} }
/* BUTTONS: Einheitlicher Stil für alle Schaltflächen */
.btn { .btn {
border: 2px solid var(--black); border: 2px solid var(--black);
background: var(--white); background: var(--white);
@ -60,17 +53,9 @@ html, body {
padding: 10px 18px; padding: 10px 18px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease;
}
.btn--primary {
background: var(--white);
}
.btn--outline {
background: var(--white);
} }
/* BARRIEREFREIHEIT: Markiert Elemente deutlich, wenn man sie mit der Tastatur (Tab) ansteuert */
.btn:focus-visible, .btn:focus-visible,
.nav__link:focus-visible, .nav__link:focus-visible,
.arrow:focus-visible { .arrow:focus-visible {
@ -78,15 +63,10 @@ html, body {
outline-offset: 3px; outline-offset: 3px;
} }
.main-content { /* HERO-BEREICH: Die große Sektion unter dem Header */
display: grid;
grid-template-rows: auto auto;
gap: 32px;
}
.hero { .hero {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; /* Teilt den Bereich in zwei gleich große Spalten (Text links, Bild rechts) */
gap: 24px; gap: 24px;
align-items: center; align-items: center;
padding: 24px; padding: 24px;
@ -96,57 +76,27 @@ html, body {
.hero__title { .hero__title {
font-size: 2rem; font-size: 2rem;
line-height: 1.25; line-height: 1.25;
margin: 0 0 16px;
}
.hero__description {
margin: 0 0 20px;
line-height: 1.5;
}
.hero__left {
display: flex;
flex-direction: column;
gap: 12px;
}
.hero__right {
display: flex;
justify-content: center;
align-items: center;
}
.image-card {
position: relative;
width: 100%;
max-width: 620px;
height: 400px;
border: 1px solid var(--black);
}
.image-card__placeholder {
width: 100%;
height: 100%;
background: var(--white);
position: relative;
} }
/* BILD-PLATZHALTER: Erzeugt das "X" in der Mitte der Boxen */
.image-card__placeholder::before, .image-card__placeholder::before,
.image-card__placeholder::after { .image-card__placeholder::after,
.placeholder::before,
.placeholder::after {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
border: 1px solid var(--black);
} }
.image-card__placeholder::before { /* Diese Linien zeichnen das "X" per Farbverlauf (Gradient) */
.image-card__placeholder::before, .placeholder::before {
background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%);
} }
.image-card__placeholder::after, .placeholder::after {
.image-card__placeholder::after {
background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%); 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 */
.social-badge { .social-badge {
position: absolute; position: absolute;
bottom: 16px; bottom: 16px;
@ -162,80 +112,35 @@ html, body {
width: 16px; width: 16px;
height: 16px; height: 16px;
background: var(--black); background: var(--black);
border-radius: 50%; border-radius: 50%; /* Macht das Quadrat zum Kreis */
} }
/* GALERIE: Bereich für die drei Bild-Platzhalter */
.gallery { .gallery {
border: 1px solid var(--black); border: 1px solid var(--black);
padding: 24px; padding: 24px;
} }
.gallery__controls {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
}
.arrow {
border: 2px solid var(--black);
background: var(--white);
color: var(--black);
padding: 8px 16px;
font-size: 1.2rem;
cursor: pointer;
}
.gallery__track { .gallery__track {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); /* Erzeugt 3 Spalten nebeneinander */
gap: 16px; gap: 16px;
} }
.gallery__item { /* UNTERER GALERIE-BEREICH: Profilbild und Social Media Handle */
border: 1px solid var(--black);
min-height: 240px;
display: flex;
justify-content: center;
align-items: center;
padding: 8px;
position: relative;
background: var(--white);
}
.placeholder {
width: 100%;
height: 100%;
position: relative;
border: 1px solid var(--black);
}
.placeholder::before,
.placeholder::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(135deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%);
}
.placeholder::after {
background-image: linear-gradient(225deg, transparent 49%, var(--black) 49%, var(--black) 51%, transparent 51%);
}
.gallery__info { .gallery__info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
position: relative;
} }
.profile-badge { .profile-badge {
width: 72px; width: 72px;
height: 72px; height: 72px;
border: 1px solid var(--black); border: 1px solid var(--black);
border-radius: 50%; border-radius: 50%; /* Macht das Profilbild rund */
background: var(--white); margin: 0 auto; /* Zentriert den Kreis */
margin: 0 auto;
} }
.gallery__handle { .gallery__handle {