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 { body {
margin: 0; margin: 0;
font-family: 'Inter', sans-serif; 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 { .page-wrapper {

25
index.html
View File

@ -3,40 +3,37 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Cooking Wireframe</title> <title>Invité | Events entdecken</title>
<link rel="stylesheet" href="css/landingpage.css" /> <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" /> <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> </head>
<body> <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"> <header class="header">
<div class="header__brand">Invité</div> <div class="header__brand">Invité</div>
<div class="header__actions"> <div class="header__actions">
<a class="nav__link" href="#">Event finden</a> <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> </div>
</header> </header>
<main class="main-content"> <main class="main-content">
<!-- Hero: uses .hero, .btn, .image-card, and .image-card__placeholder for a polished first impression -->
<section class="hero"> <section class="hero">
<div class="hero__left"> <div class="hero__left">
<h1 class="hero__title">Zu Tisch mit Fremden – bereit für die nächste kulinarische Begegnung?</h1> <h1>Events entdecken, Plätze sichern, Genuss teilen.</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> <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 btn--primary" type="button">Anmelden</button> <button class="btn" type="button">Anmelden</button>
</div> </div>
<div class="hero__right"> <div class="hero__right">
<div class="image-card"> <div class="image-card">
<div class="image-card__placeholder"></div> <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>
</div> </div>
</section> </section>
<!-- Main Content: uses .gallery, .gallery__track, .gallery__item, .placeholder, and .gallery__info to present event cards and overview content -->
<section class="gallery"> <section class="gallery">
<div class="gallery__track"> <div class="gallery__track">
<article class="gallery__item"> <article class="gallery__item">
@ -57,7 +54,7 @@
</div> </div>
<div class="gallery__info"> <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> </div>
</section> </section>
</main> </main>
@ -65,7 +62,5 @@
<footer class="footer"> <footer class="footer">
<a href="#" class="footer__link">Impressum</a> <a href="#" class="footer__link">Impressum</a>
</footer> </footer>
</div>
<script src="js/landingpage.js"></script>
</body> </body>
</html> </html>