Update landing page layout, add how-it-works section, and refine hero image styling
This commit is contained in:
Estelle Köhler
parent
a290ec5f88
commit
e27b942175
BIN
assets/Startpage ingredients.jpg
Normal file
BIN
assets/Startpage ingredients.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
@ -3,6 +3,8 @@
|
||||
:root {
|
||||
--black: #000000;
|
||||
--white: #ffffff;
|
||||
--button-green: #6b6b05;
|
||||
--button-green-dark: #514c04;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -50,11 +52,206 @@ body {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.top-nav-wrap {
|
||||
background: #FFFDE3;
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 58px;
|
||||
padding: 12px 24px;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 40px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 104px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #221c1a;
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
padding: 8px 20px;
|
||||
border: 2px solid #e5e1b7;
|
||||
border-radius: 20px;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active,
|
||||
.nav-link:focus-visible {
|
||||
background: #6b6b05;
|
||||
color: #ffffff;
|
||||
border-color: #6b6b05;
|
||||
}
|
||||
|
||||
.nav-link--login {
|
||||
background: #6b6b05;
|
||||
color: #ffffff;
|
||||
border-color: #6b6b05;
|
||||
}
|
||||
|
||||
.nav-link--login:hover,
|
||||
.nav-link--login:focus-visible {
|
||||
background: #ffffff;
|
||||
color: #6b6b05;
|
||||
border-color: #6b6b05;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: min(100% - 4rem, 1120px);
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px;
|
||||
margin-bottom: 60px;
|
||||
gap: 50px;
|
||||
margin-bottom: 80px;
|
||||
align-items: center;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.how-it-works {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.how-it-works__header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.how-it-works__header h2 {
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
color: #221c1a;
|
||||
}
|
||||
|
||||
.how-it-works__steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.how-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 28px 20px;
|
||||
background: #ffffff;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.how-step__icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--button-green);
|
||||
color: var(--white);
|
||||
border-radius: 50%;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.how-step__number {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #f4efd7;
|
||||
color: #221c1a;
|
||||
border-radius: 50%;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.how-step__label {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
font-weight: 600;
|
||||
color: #221c1a;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.how-it-works__steps {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.hero__left {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.hero__left p {
|
||||
margin: 24px 0 32px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.hero__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-card {
|
||||
width: 100%;
|
||||
max-width: 396px;
|
||||
overflow: hidden;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
max-width: 396px;
|
||||
max-height: 464px;
|
||||
height: auto;
|
||||
border-radius: 30px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.hero__right {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
min-height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Container for the 3 photos */
|
||||
@ -84,21 +281,24 @@ body {
|
||||
|
||||
/* --- 2. Button & Link Styling --- */
|
||||
.btn {
|
||||
border: 2px solid var(--black);
|
||||
background: var(--white);
|
||||
color: var(--black);
|
||||
padding: 10px 18px;
|
||||
border: none;
|
||||
background: var(--button-green);
|
||||
color: var(--white);
|
||||
padding: 12px 22px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
text-decoration: none; /* Keeps the link from having an underline */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
transition: background-color 0.2s ease;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
font-size: 0.95rem;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #f0f0f0;
|
||||
background-color: var(--button-green-dark);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav__link {
|
||||
|
||||
46
index.html
46
index.html
@ -8,31 +8,59 @@
|
||||
<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>
|
||||
<!-- 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" type="button">Event erstellen</button>
|
||||
<!-- Header: matches event detail/create with invite logo and pill navigation links -->
|
||||
<header class="top-nav-wrap">
|
||||
<div class="top-nav">
|
||||
<a class="brand" href="index.html" aria-label="Zur Startseite">
|
||||
<img src="assets/invite-logo.svg" alt="Invité">
|
||||
</a>
|
||||
|
||||
<nav class="top-nav-links" aria-label="Hauptnavigation">
|
||||
<a class="nav-link" href="event_create.html">Event erstellen</a>
|
||||
<a class="nav-link nav-link--login" href="login.html">Login</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<!-- Hero: uses .hero, .btn, .image-card, and .image-card__placeholder for a polished first impression -->
|
||||
<!-- Hero: uses .hero, .btn, .image-card, and .hero-image for a polished first impression -->
|
||||
<section class="hero">
|
||||
<div class="hero__left">
|
||||
<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>
|
||||
<a class="btn" href="login.html">Anmelden</a>
|
||||
</div>
|
||||
|
||||
<div class="hero__right">
|
||||
<div class="image-card">
|
||||
<div class="image-card__placeholder"></div>
|
||||
<img class="hero-image" src="assets/Startpage ingredients.jpg" alt="Startpage Ingredients" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="how-it-works">
|
||||
<div class="how-it-works__header">
|
||||
<h2>So funktioniert's</h2>
|
||||
</div>
|
||||
<div class="how-it-works__steps">
|
||||
<article class="how-step">
|
||||
<div class="how-step__icon"><i class="fas fa-user-plus" aria-hidden="true"></i></div>
|
||||
<div class="how-step__number">1</div>
|
||||
<p class="how-step__label">Anmelden</p>
|
||||
</article>
|
||||
<article class="how-step">
|
||||
<div class="how-step__icon"><i class="fas fa-calendar-plus" aria-hidden="true"></i></div>
|
||||
<div class="how-step__number">2</div>
|
||||
<p class="how-step__label">Event erstellen</p>
|
||||
</article>
|
||||
<article class="how-step">
|
||||
<div class="how-step__icon"><i class="fas fa-utensils" aria-hidden="true"></i></div>
|
||||
<div class="how-step__number">3</div>
|
||||
<p class="how-step__label">Gemeinsam essen</p>
|
||||
</article>
|
||||
</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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user