This commit is contained in:
Estelle Köhler 2026-04-23 16:02:36 +02:00
commit e277c7f7d4
4 changed files with 60 additions and 11 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 493 KiB

View File

@ -33,6 +33,40 @@
padding: var(--space-4) 0 var(--space-7);
}
.submission-success-title-row {
display: flex;
align-items: center;
gap: var(--space-5);
width: 100%;
}
.submission-success-title-row h2 {
margin-bottom: 0;
}
.submission-success-icon {
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--brown);
font-size: 3rem;
line-height: 1;
transform: translateY(0.4rem);
}
.submission-success-image {
object-position: 42% center;
}
.submission-success .intro-card--image {
width: min(100%, 40rem);
aspect-ratio: 4 / 5;
align-self: center;
justify-self: center;
}
.step--active {
display: block;
}
@ -62,6 +96,7 @@ fieldset {
.step-copy {
gap: var(--space-4);
align-content: start;
}
.step-fields {
@ -96,7 +131,7 @@ fieldset {
}
.intro-card--image {
width: 100%;
width: 60%;
padding: 0;
border: 0;
overflow: hidden;
@ -294,7 +329,8 @@ textarea:focus {
.submission-success-actions {
display: flex;
justify-content: center;
justify-content: flex-start;
width: 100%;
}
.flow-footer {

View File

@ -12,6 +12,9 @@
<!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet_global.css">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
@ -55,7 +58,7 @@
<div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
<img
class="intro-image"
src="assets/eventcreate_foodtable.jpg"
src="assets/eventcreate_foodtable-new.jpg"
alt="Ein gedeckter Tisch mit gemeinsamem Essen"
/>
</div>
@ -409,25 +412,35 @@
<section
id="submissionSuccess"
class="submission-success"
class="submission-success layout-wide"
aria-labelledby="success-title"
aria-live="polite"
hidden
>
<div class="step-layout">
<div class="step-layout step-layout--intro hero startseite">
<div class="step-copy">
<p class="badge">Event erstellt</p>
<h2 id="success-title">Dein Event ist ready.</h2>
<div class="submission-success-title-row">
<h2 id="success-title">Dein Event ist ready</h2>
<span class="submission-success-icon" aria-hidden="true">
<i class="fa-solid fa-champagne-glasses"></i>
</span>
</div>
<p class="step-text">
Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste.
Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.
</p>
<div class="submission-success-actions">
<a class="button-primary button--intro" href="my_profil.html">Weiter zu deinem Profil</a>
</div>
</div>
<div class="review-card review-card--success">
<div class="submission-success-actions">
<a class="button-primary" href="my_profil.html">Weiter zu deinem Profil</a>
</div>
<div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zum erstellten Event">
<img
class="intro-image submission-success-image"
src="assets/eventcreate_foodtable with friends.jpg"
alt="Gemeinsames Essen an einem gedeckten Tisch"
>
</div>
</div>
</section>