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

Update landing page hero and butter background for Invité

Browse Source
This commit is contained in:
Estelle Köhler 2026-03-29 14:56:15 +02:00
parent d9847a907b
commit a290ec5f88
2 changed files with 15 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/landingpage.css
View File

@ -8,7 +8,7 @@
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: #f5f5f5; /* Light grey background to see the white page-wrapper */
background: #FFFDE3; /* butter background color from stylesheet */
}
.page-wrapper {

33
index.html
View File

@ -1,42 +1,39 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Cooking Wireframe</title>
<link rel="stylesheet" href="css/landingpage.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-dU7ZrF1pFq5kVnPzlV9+04YhARzNjCX5Q5P1shgMpuN4s5I8mI8QD4981h7kYtV7sSgNldR0z5pZW5bS2ZpY3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Invité | Events entdecken</title>
<link rel="stylesheet" href="css/landingpage.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-dU7ZrF1pFq5kVnPzlV9+04YhARzNjCX5Q5P1shgMpuN4s5I8mI8QD4981h7kYtV7sSgNldR0z5pZW5bS2ZpY3Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="page-wrapper">
<!-- Header: uses .header, .header__brand, .header__actions, .btn, and .nav__link to match the Invité top bar style -->
<header class="header">
<div class="header__brand">Invité</div>
<div class="header__actions">
<a class="nav__link" href="#">Event finden</a>
<button class="btn btn--outline" type="button">Login</button>
<button class="btn" type="button">Event erstellen</button>
</div>
</header>
<main class="main-content">
<!-- Hero: uses .hero, .btn, .image-card, and .image-card__placeholder for a polished first impression -->
<section class="hero">
<div class="hero__left">
<h1 class="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.</p>
<button class="btn btn--primary" type="button">Anmelden</button>
<h1>Events entdecken, Plätze sichern, Genuss teilen.</h1>
<p>Finde kulinarische Erlebnisse in deiner Nähe oder erstelle dein eigenes Event – alles in einer warmen, einladenden Invité-Atmosphäre.</p>
<button class="btn" type="button">Anmelden</button>
</div>
<div class="hero__right">
<div class="image-card">
<div class="image-card__placeholder"></div>
<div class="social-badge">
<span class="social-badge__dot"></span>
<span class="social-badge__dot"></span>
<span class="social-badge__dot"></span>
</div>
</div>
</div>
</section>
<!-- Main Content: uses .gallery, .gallery__track, .gallery__item, .placeholder, and .gallery__info to present event cards and overview content -->
<section class="gallery">
<div class="gallery__track">
<article class="gallery__item">
@ -57,7 +54,7 @@
</div>
<div class="gallery__info">
<div class="gallery__handle"><i class="fab fa-instagram gallery__icon" aria-hidden="true"></i><span class="gallery__at">@</span><span class="gallery__brand">Invité</span></div>
<div class="gallery__handle"><i class="fas fa-location-dot gallery__icon" aria-hidden="true"></i><span>Invité Events</span></div>
</div>
</section>
</main>
@ -65,7 +62,5 @@
<footer class="footer">
<a href="#" class="footer__link">Impressum</a>
</footer>
</div>
<script src="js/landingpage.js"></script>
</body>
</html>