Emma's Schatzkiste — statische Website, fünf Seiten
Umsetzung des Design-Handoffs als statisches HTML ohne Build-Schritt, nach dem Hausmuster der übrigen ASX-Websites. Seiten - index.html Startseite (blaue Welt) - hilfe-verein.html Hilfe Verein (gelbe Welt) - shop.html Platzhalter, Online-Shop bewusst nicht gebaut - impressum.html § 5 DDG - datenschutz.html Art. 13 DSGVO Design - Farbe lebt in Flächen und Display-Typo, nie im Fließtext — dadurch laufen alle drei Markenfarben, ohne die Hierarchie zu brechen. - Ein gesättigtes Vollflächen-Band pro Seite gegen die Blässe der reinen Pastellfassung. - Alle fünf Seiten bestehen WCAG AA im Kontrast. Mobil - Header unter 640px zweizeilig, Navigation als Viererraster, alle Touch-Ziele >= 44px (WCAG 2.5.5), Footer-Links >= 24px (2.5.8). - Geprüft bei 320/375/390/640/768/1024/1440/1920 px. Datenschutz - Keine Cookies, kein Storage, keine Skripte, null Fremdanfragen. Deshalb bewusst kein Einwilligungsbanner. - Fredoka und Nunito selbst gehostet statt über Google Fonts (LG München I, 3 O 17493/20). Bilder - Drei Pexels-Fotos, Lizenz geprüft, heruntergeladen und selbst gehostet. - Bewusst keine Kinderfotos: Pexels gibt kein Model Release. Offen: drei Angaben in den Rechtstexten, Foto Opa Martin, zwei Audiodateien. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Andrej StevanovskiandClaude Opus 5 committed
commit
92a6faaf54
31 files changed
+5880
No files matched your search
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hilfe Verein — Hilfe. Herz. Hoffnung. | Emma's Schatzkiste</title>
|
||||
<meta name="description" content="Soziale Hilfe vor der Haustür in Rottenburg a.d. Laaber. Der Hilfe Verein ist im Aufbau: Geldspenden, ehrenamtlich mithelfen, weitersagen — jede Hand zählt." />
|
||||
<meta name="theme-color" content="#FDF4DC" />
|
||||
<link rel="icon" href="assets/logo-verein.png" />
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
|
||||
</head>
|
||||
<body class="page-verein">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
<header class="hdr">
|
||||
<div class="wrap hdr__in">
|
||||
<a class="hdr__brand" href="index.html">
|
||||
<img src="assets/logo-shop.png" alt="" />
|
||||
Emma's Schatzkiste
|
||||
</a>
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a href="index.html">Start</a>
|
||||
<a href="shop.html">Shop</a>
|
||||
<a href="hilfe-verein.html" aria-current="page">Hilfe Verein</a>
|
||||
<a href="#kontakt">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="inhalt">
|
||||
|
||||
<section class="hero hero--verein">
|
||||
<div class="hero__media" style="background-image:url('assets/hero-verein.jpg'); background-position:72% 40%" role="img" aria-label="Kinder spielen gemeinsam"></div>
|
||||
<span class="hero__scrim" aria-hidden="true"></span>
|
||||
<div class="wrap hero__in">
|
||||
<div class="hero__col">
|
||||
<span class="pill-eyebrow">Hilfe. Herz. Hoffnung.</span>
|
||||
<h1 class="hl">
|
||||
<span class="c-sun">Helfen,</span>
|
||||
<span class="c-coral">teilen,</span>
|
||||
<span class="c-sky">zusammenhalten!</span>
|
||||
</h1>
|
||||
<p class="hero__sub">Soziale Hilfe vor der Haustür. Der Verein ist gerade im Aufbau — und jede Hand zählt.</p>
|
||||
<div class="hero__actions">
|
||||
<a class="btn btn--primary btn--l" href="#helfen">
|
||||
So kannst du helfen
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</a>
|
||||
<a class="btn btn--secondary btn--l" href="#kontakt">Kontakt</a>
|
||||
</div>
|
||||
<div class="trusts">
|
||||
<div class="trust">
|
||||
<span class="trust__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 15 6 6"/><path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"/></svg></span>
|
||||
<span><b>Im Aufbau</b><span>wir fangen gerade an</span></span>
|
||||
</div>
|
||||
<div class="trust">
|
||||
<span class="trust__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></span>
|
||||
<span><b>Rottenburg a.d. Laaber</b><span>für Familien hier</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="hero__mark" src="assets/logo-verein.png" alt="Emma's Schatzkiste Hilfe Verein" />
|
||||
</section>
|
||||
|
||||
<section class="wrap section">
|
||||
<div class="sh">
|
||||
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>
|
||||
<h2>Unser Lied</h2>
|
||||
</div>
|
||||
<div class="song">
|
||||
<div class="song__top">
|
||||
<h3>Lied vom Hilfe Verein</h3>
|
||||
<span class="badge">Audio folgt</span>
|
||||
</div>
|
||||
<div class="song__row">
|
||||
<button class="iconbtn" type="button" disabled aria-label="Abspielen — Audio folgt">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"/></svg>
|
||||
</button>
|
||||
<div class="song__meter">
|
||||
<div class="song__track"></div>
|
||||
<span class="song__time">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="song__note">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="field field--solid-sun" id="helfen">
|
||||
<div class="wrap">
|
||||
<div class="sh">
|
||||
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 15 6 6"/><path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"/></svg></span>
|
||||
<h2>Wir brauchen Hilfe</h2>
|
||||
</div>
|
||||
<p class="lede" style="margin-bottom:var(--space-8)">Ein Verein im Aufbau braucht beides: Mittel, um wirklich helfen zu können, und Menschen, die mit anpacken. Finanziell und menschlich — in jeder Form.</p>
|
||||
<div class="tiles">
|
||||
<div class="tile tile--rose">
|
||||
<h3>Geldspenden</h3>
|
||||
<p>Jeder Betrag hilft — für Ware, Miete und Familien, die gerade nichts übrig haben.</p>
|
||||
<a class="btn btn--primary" href="mailto:emmas.schatzkiste.hilft@gmail.com?subject=Spende%20Hilfe%20Verein">Spenden</a>
|
||||
</div>
|
||||
<div class="tile tile--cool">
|
||||
<h3>Ehrenamtlich mithelfen</h3>
|
||||
<p>Sortieren, verkaufen, aufbauen, mitdenken — regelmäßig oder ab und zu.</p>
|
||||
<a class="btn btn--secondary" href="tel:015751479212">Anrufen</a>
|
||||
</div>
|
||||
<div class="tile tile--warm">
|
||||
<h3>Weitersagen</h3>
|
||||
<p>Reichweite kostet nichts: erzähl von uns und bring Familien vorbei.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrap section--tight">
|
||||
<div class="band band--cool">
|
||||
<div class="band__copy">
|
||||
<span class="label">Der Second-Hand-Laden</span>
|
||||
<h2>Wo alles angefangen hat.</h2>
|
||||
<p>Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche bekommen bei uns Spielsachen, die ein zweites Leben verdient haben.</p>
|
||||
<p>Die Sachen sind preiswert, sehr gut erhalten und von guter Qualität. Und wir suchen mit, bis du findest, was du brauchst.</p>
|
||||
<a class="btn btn--secondary btn--l" href="index.html">Mehr über den Laden</a>
|
||||
</div>
|
||||
<img src="assets/logo-shop.png" alt="Emma's Schatzkiste — Baby & Kind Second Hand" style="max-width:360px" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrap section" id="kontakt">
|
||||
<div class="sh">
|
||||
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg></span>
|
||||
<h2>Schreib uns</h2>
|
||||
</div>
|
||||
<div class="contacts">
|
||||
<div class="contact">
|
||||
<span class="label">Adresse</span>
|
||||
<p>84056 Rottenburg a.d. Laaber</p>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<span class="label">Telefon</span>
|
||||
<p><a href="tel:015751479212">0157 51479212</a></p>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<span class="label">E-Mail</span>
|
||||
<p><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="ftr">
|
||||
<div class="wrap">
|
||||
<div class="ftr__cols">
|
||||
<div class="ftr__col">
|
||||
<h3>Laden</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Unser Laden</a></li>
|
||||
<li><span>Öffnungszeiten folgen</span></li>
|
||||
<li><a href="tel:015751479212">Ware abgeben</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Hilfe Verein</h3>
|
||||
<ul>
|
||||
<li><a href="#helfen">Spenden</a></li>
|
||||
<li><a href="#helfen">Mithelfen</a></li>
|
||||
<li><a href="#helfen">Weitersagen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Über</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Über uns</a></li>
|
||||
<li><a href="#kontakt">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user