Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?
-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.
- ++ Beschreibung: Erklärt das Konzept von Social Cooking und lädt Nutzer ein, Events zu erstellen oder zu suchen. +
+
-
+
+
+
+
diff --git a/stylesheet.css b/stylesheet.css
index d700709..021ba4a 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -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 {
--black: #000000;
--white: #ffffff;
- --max-width: 1440px;
+ --max-width: 1440px; /* Die Standard-Desktop-Breite laut Figma */
}
html, body {
@@ -18,19 +18,21 @@ html, body {
min-height: 100%;
}
+/* HAUPTRAHMEN: Hält den gesamten Inhalt mittig und begrenzt die Breite */
.page-wrapper {
max-width: var(--max-width);
- margin: 0 auto;
+ margin: 0 auto; /* Zentriert die ganze Seite im Browser */
padding: 24px;
background: var(--white);
- min-height: 1343px;
- border: 2px solid var(--black);
+ min-height: 1343px; /* Die exakte Höhe aus dem Figma-Entwurf */
+ border: 2px solid var(--black); /* Äußerer schwarzer Rahmen */
}
+/* NAVIGATION / HEADER: Der obere Balken mit Logo und Links */
.header {
- display: flex;
+ display: flex; /* Ordnet Logo und Button nebeneinander an */
align-items: center;
- justify-content: space-between;
+ justify-content: space-between; /* Logo links, Login rechts */
border: 1px solid var(--black);
padding: 16px 24px;
margin-bottom: 24px;
@@ -41,18 +43,9 @@ html, body {
font-size: 1.2rem;
border: 1px solid var(--black);
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 {
border: 2px solid var(--black);
background: var(--white);
@@ -60,17 +53,9 @@ html, body {
padding: 10px 18px;
font-weight: 700;
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,
.nav__link:focus-visible,
.arrow:focus-visible {
@@ -78,15 +63,10 @@ html, body {
outline-offset: 3px;
}
-.main-content {
- display: grid;
- grid-template-rows: auto auto;
- gap: 32px;
-}
-
+/* HERO-BEREICH: Die große Sektion unter dem Header */
.hero {
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;
align-items: center;
padding: 24px;
@@ -96,57 +76,27 @@ html, body {
.hero__title {
font-size: 2rem;
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::after {
+.image-card__placeholder::after,
+.placeholder::before,
+.placeholder::after {
content: "";
position: absolute;
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%);
}
-
-.image-card__placeholder::after {
+.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 */
.social-badge {
position: absolute;
bottom: 16px;
@@ -162,82 +112,37 @@ html, body {
width: 16px;
height: 16px;
background: var(--black);
- border-radius: 50%;
+ border-radius: 50%; /* Macht das Quadrat zum Kreis */
}
+/* GALERIE: Bereich für die drei Bild-Platzhalter */
.gallery {
border: 1px solid var(--black);
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 {
display: grid;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(3, 1fr); /* Erzeugt 3 Spalten nebeneinander */
gap: 16px;
}
-.gallery__item {
- 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%);
-}
-
+/* UNTERER GALERIE-BEREICH: Profilbild und Social Media Handle */
.gallery__info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
- position: relative;
}
.profile-badge {
width: 72px;
height: 72px;
border: 1px solid var(--black);
- border-radius: 50%;
- background: var(--white);
- margin: 0 auto;
+ border-radius: 50%; /* Macht das Profilbild rund */
+ margin: 0 auto; /* Zentriert den Kreis */
}
.gallery__handle {
font-weight: 700;
-}
+}
\ No newline at end of file
-
-
-
-
+
+
-
+
-
+
-
+
-
-
@social_cooking
+
+ @social_cooking