241 lines
10 KiB
HTML
Executable file
241 lines
10 KiB
HTML
Executable file
<!DOCTYPE html>
|
||
<html lang="de" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Café Bach – Queere Begegnungsstätte</title>
|
||
<link rel="stylesheet" href="./cafe-bach-ci.css">
|
||
</head>
|
||
<body>
|
||
<a class="sr-only" href="#main">Zum Inhalt springen</a>
|
||
|
||
<header class="site-header">
|
||
<div class="container site-header__inner">
|
||
<div class="brand" aria-label="Café Bach">
|
||
<span class="brand__name">CAFÉ</span>
|
||
<span class="brand__script">Bach</span>
|
||
</div>
|
||
<nav class="nav" aria-label="Hauptnavigation">
|
||
<a href="#angebote" aria-current="page">Angebote</a>
|
||
<a href="#veranstaltungen">Veranstaltungen</a>
|
||
<a href="#ueber">Über das Café Bach</a>
|
||
<a href="#kontakt">Kontakt</a>
|
||
<a href="#spenden">Unterstützen</a>
|
||
</nav>
|
||
<button class="theme-toggle" type="button" data-theme-toggle aria-label="Zu Dark Mode wechseln">Theme</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main">
|
||
<section class="section">
|
||
<div class="container hero">
|
||
<article class="hero__content">
|
||
<p class="eyebrow">Queere Begegnungsstätte der Aidshilfe Köln</p>
|
||
<h1>Café Bach</h1>
|
||
<p>Das Café Bach ist ein sicherer, empowernder Ort für queere Menschen, HIV-positive Menschen und alle, die sich mit der LGBTIQ*-Community verbunden fühlen.</p>
|
||
<p>In den flexibel nutzbaren Seminarräumen finden regelmäßig vielfältige Angebote statt. Dabei stehen Sichtbarkeit, Solidarität, Vielfalt und Teilhabe im Mittelpunkt.</p>
|
||
<div class="actions">
|
||
<a class="btn btn-primary" href="#veranstaltungen">Kommende Events</a>
|
||
<a class="btn btn-secondary" href="#kontakt">Kontakt</a>
|
||
</div>
|
||
</article>
|
||
|
||
<aside class="hero__aside">
|
||
<div class="panel">
|
||
<span class="badge">Ort</span>
|
||
<h2>Offen, sicher, solidarisch</h2>
|
||
<p>Ein Ort für Begegnung, Selbsthilfe, Kultur und Community in Köln.</p>
|
||
</div>
|
||
<div class="panel">
|
||
<span class="badge">Online</span>
|
||
<ul class="contact-list">
|
||
<li><a href="https://www.facebook.com/cafebach.koeln" target="_blank" rel="noopener noreferrer">Facebook</a></li>
|
||
<li><a href="https://www.instagram.com/cafebach.koeln/" target="_blank" rel="noopener noreferrer">Instagram</a></li>
|
||
<li><a href="https://www.youtube.com/channel/UC247MGqcw32QtuSveHSvBkw" target="_blank" rel="noopener noreferrer">YouTube</a></li>
|
||
<li><a href="https://www.paypal.com/donate/?hosted_button_id=XYJL4ACGHDDFN" target="_blank" rel="noopener noreferrer">Spenden via PayPal</a></li>
|
||
</ul>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="angebote">
|
||
<div class="container">
|
||
<p class="eyebrow">Angebote</p>
|
||
<h2>Was im Café Bach stattfindet</h2>
|
||
<div class="grid-3">
|
||
<article class="card">
|
||
<h3>Selbsthilfe und Austausch</h3>
|
||
<p>Queere Selbsthilfegruppen schaffen Raum für Austausch, Unterstützung und gegenseitige Stärkung.</p>
|
||
</article>
|
||
<article class="card">
|
||
<h3>Kreative und politische Formate</h3>
|
||
<p>Kreative Workshops, Empowerment-Formate, Infoveranstaltungen und Lesungen gehören regelmäßig zum Programm.</p>
|
||
</article>
|
||
<article class="card">
|
||
<h3>Gemeinschaft und Kultur</h3>
|
||
<p>Auch gesellige Formate wie gemeinsame Community-Abende oder das Eurovision Song Contest-Schauen finden hier ihren Platz.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="veranstaltungen">
|
||
<div class="container grid-2">
|
||
<article class="card">
|
||
<p class="eyebrow">Kommende Events</p>
|
||
<h2>Auswahl aus dem Programm</h2>
|
||
<ul class="list-plain">
|
||
<li><strong>11. Juni, 19:00</strong><br>Kleiner Freitag im Café Bach</li>
|
||
<li><strong>17. Juni, 18:00–20:00</strong><br>SHALK – Selbsthilfe queerer suchtkranker Menschen</li>
|
||
<li><strong>18. Juni, 17:00–19:00</strong><br>Frauentreff für Frauen mit HIV</li>
|
||
<li><strong>20. Juni</strong><br>Podium Schwulenbewegung der 80ger neue Medien</li>
|
||
<li><strong>20. Juni, 18:00</strong><br>Talk: Pimpernel Reunion 2026</li>
|
||
<li><strong>24. Juni, 18:00–21:00</strong><br>Kultur und Medien Treff</li>
|
||
<li><strong>30. Juni, 19:00</strong><br>High & Happy? – Info und Diskussionsabend für die Community</li>
|
||
</ul>
|
||
</article>
|
||
|
||
<article class="card">
|
||
<p class="eyebrow">Tabellarische Ansicht</p>
|
||
<h2>Veranstaltungsübersicht</h2>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Datum</th>
|
||
<th>Format</th>
|
||
<th>Ort</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>11. Juni</td>
|
||
<td>Kleiner Freitag im Café Bach</td>
|
||
<td>Café Bach, Köln</td>
|
||
</tr>
|
||
<tr>
|
||
<td>17. Juni</td>
|
||
<td>SHALK</td>
|
||
<td>Café Bach, Köln</td>
|
||
</tr>
|
||
<tr>
|
||
<td>18. Juni</td>
|
||
<td>Frauentreff für Frauen mit HIV</td>
|
||
<td>Café Bach, Köln</td>
|
||
</tr>
|
||
<tr>
|
||
<td>20. Juni</td>
|
||
<td>Talk: Pimpernel Reunion 2026</td>
|
||
<td>Café Bach, Köln</td>
|
||
</tr>
|
||
<tr>
|
||
<td>30. Juni</td>
|
||
<td>High & Happy?</td>
|
||
<td>Café Bach, Köln</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="ueber">
|
||
<div class="container grid-2">
|
||
<article class="card">
|
||
<p class="eyebrow">Über das Haus</p>
|
||
<h2>Ein Raum für Teilhabe</h2>
|
||
<p>Das Café Bach versteht sich als sicherer und empowernder Ort für queere Menschen und für Menschen mit HIV. Die Ausrichtung ist offen, solidarisch und communitybezogen.</p>
|
||
<p>Die Räume sind flexibel nutzbar und geben Selbsthilfe, Kultur, Bildung und Begegnung einen festen Platz.</p>
|
||
</article>
|
||
<article class="card">
|
||
<p class="eyebrow">Benennung</p>
|
||
<h2>Dirk Bach</h2>
|
||
<p>Die Seite verweist auch auf den Bezug zu Dirk Bach. In dieser Vorlage bleibt der Bereich bewusst textlich reduziert und kann später mit eigener redaktioneller Fassung ergänzt werden.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="kontakt">
|
||
<div class="container grid-2">
|
||
<article class="card">
|
||
<p class="eyebrow">Kontakt</p>
|
||
<h2>So erreicht man das Café Bach</h2>
|
||
<ul class="contact-list">
|
||
<li><strong>Café Bach</strong></li>
|
||
<li>Pipinstraße 7</li>
|
||
<li>Eingang via KVB Heumarkt</li>
|
||
<li>50667 Köln</li>
|
||
<li><a href="https://www.aidshilfe-koeln.de/impressum/" target="_blank" rel="noopener noreferrer">Impressum</a></li>
|
||
</ul>
|
||
</article>
|
||
<article class="card">
|
||
<p class="eyebrow">Kontaktformular</p>
|
||
<h2>Unverbindliche Anfrage</h2>
|
||
<form class="form-grid">
|
||
<div>
|
||
<label for="name">Name</label>
|
||
<input id="name" name="name" type="text" placeholder="Vor- und Nachname">
|
||
</div>
|
||
<div>
|
||
<label for="email">E-Mail</label>
|
||
<input id="email" name="email" type="email" placeholder="name@beispiel.de">
|
||
</div>
|
||
<div>
|
||
<label for="betreff">Betreff</label>
|
||
<input id="betreff" name="betreff" type="text" placeholder="Worum geht es?">
|
||
</div>
|
||
<div>
|
||
<label for="nachricht">Nachricht</label>
|
||
<textarea id="nachricht" name="nachricht" placeholder="Deine Nachricht an das Café Bach"></textarea>
|
||
</div>
|
||
<div>
|
||
<button class="btn btn-primary" type="submit">Nachricht senden</button>
|
||
</div>
|
||
</form>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="spenden">
|
||
<div class="container">
|
||
<article class="card">
|
||
<p class="eyebrow">Unterstützung</p>
|
||
<h2>Ohne Unterstützung kein Café Bach</h2>
|
||
<p>Die Café-Bach-Seite macht deutlich, dass die Begegnungsstätte auf Unterstützung angewiesen ist. In der echten Website kann dieser Bereich später noch um Förderpartner, Logos oder zusätzliche Spendeninfos ergänzt werden.</p>
|
||
<div class="actions">
|
||
<a class="btn btn-primary" href="https://www.paypal.com/donate/?hosted_button_id=XYJL4ACGHDDFN" target="_blank" rel="noopener noreferrer">Jetzt unterstützen</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<p>Café Bach • Queere Begegnungsstätte der Aidshilfe Köln</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
(function () {
|
||
const root = document.documentElement;
|
||
const toggle = document.querySelector('[data-theme-toggle]');
|
||
let theme = root.getAttribute('data-theme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||
|
||
function applyTheme(mode) {
|
||
root.setAttribute('data-theme', mode);
|
||
toggle.textContent = mode === 'dark' ? 'Light' : 'Dark';
|
||
toggle.setAttribute('aria-label', mode === 'dark' ? 'Zu Light Mode wechseln' : 'Zu Dark Mode wechseln');
|
||
}
|
||
|
||
applyTheme(theme);
|
||
toggle.addEventListener('click', function () {
|
||
theme = theme === 'dark' ? 'light' : 'dark';
|
||
applyTheme(theme);
|
||
});
|
||
}());
|
||
</script>
|
||
</body>
|
||
</html>
|