341 lines
16 KiB
HTML
341 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="de" data-bs-theme="light">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>BikerStreetScene e.V. – Startseite</title>
|
||
<meta name="description" content="BikerStreetScene e.V. – Motorradclub mit Herz: Verein, Förderverein, Rescue Biker & Herzensbiker. Werde Teil der Community." />
|
||
|
||
<!-- Bootstrap 5.3 (lokal gehostet) -->
|
||
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
|
||
<!-- Bootstrap Icons (lokal gehostet) -->
|
||
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.min.css" rel="stylesheet" />
|
||
<!-- Eigene Styles + Oswald/Inter Fonts (lokal gehostet) -->
|
||
<link href="assets/css/style.css" rel="stylesheet" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============ NAVIGATION ============ -->
|
||
<header>
|
||
<nav class="navbar navbar-expand-lg navbar-dark navbar-bss sticky-top py-2">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="index.html">Biker<span>Street</span>Scene</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Navigation umschalten">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="mainNav">
|
||
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-1">
|
||
<li class="nav-item"><a class="nav-link active" href="index.html">Home</a></li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="vereinDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Verein</a>
|
||
<ul class="dropdown-menu" aria-labelledby="vereinDropdown">
|
||
<li><a class="dropdown-item" href="verein.html">Der Verein</a></li>
|
||
<li><a class="dropdown-item" href="foerderverein.html">Förderverein</a></li>
|
||
<li><a class="dropdown-item" href="rescue-biker.html">Rescue Biker</a></li>
|
||
<li><a class="dropdown-item" href="herzensbiker.html">Herzensbiker</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item"><a class="nav-link" href="ueber-uns.html">Über uns</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="mitgliedschaft.html">Mitgliedschaft</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="news.html">News</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="events.html">Events</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="fotos.html">Fotos</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="kontakt.html">Kontakt</a></li>
|
||
<li class="nav-item"><a class="nav-link" href="mitglieder/login.html"><i class="bi bi-person-circle me-1"></i>Mitgliederbereich</a></li>
|
||
<li class="nav-item ms-lg-2 mt-2 mt-lg-0">
|
||
<!-- Ziel-URL später im Admin unter Einstellungen → shop_url konfigurierbar -->
|
||
<a class="btn btn-shop" href="#" target="_blank" rel="noopener">Shop <i class="bi bi-box-arrow-up-right ms-1"></i></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
|
||
<!-- ============ HERO ============ -->
|
||
<section class="hero">
|
||
<div class="container position-relative">
|
||
<span class="badge-club mb-3 d-inline-block">Motorradclub mit Herz</span>
|
||
<h1 class="mb-3">BikerStreetScene e. V.</h1>
|
||
<p class="lead mb-4">
|
||
Wir sind mehr als ein Motorradclub: Gemeinschaft, gemeinsame Ausfahrten
|
||
und soziales Engagement über Förderverein, Rescue Biker und
|
||
Herzensbiker. Platzhaltertext – finaler Wortlaut folgt über das CMS.
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-3">
|
||
<a href="mitgliedschaft.html" class="btn btn-orange btn-lg px-4">Jetzt Mitglied werden</a>
|
||
<a href="ueber-uns.html" class="btn btn-outline-light btn-hero btn-lg px-4">Verein entdecken</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ VEREIN TEASER ============ -->
|
||
<section class="py-5 py-lg-6 bg-white">
|
||
<div class="container py-4">
|
||
<p class="section-kicker">Unser Verein</p>
|
||
<h2 class="section-title">Drei Säulen, ein Verein</h2>
|
||
<p class="section-lead mb-5">
|
||
Platzhaltertext: kurze Beschreibung, wie Förderverein, Rescue Biker
|
||
und Herzensbiker zusammenwirken. Wird später über die Seiteninhalte
|
||
im CMS gepflegt.
|
||
</p>
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="card-verein p-4">
|
||
<div class="icon-wrap mb-3"><i class="bi bi-people-fill"></i></div>
|
||
<h3 class="h5 fw-bold">Förderverein</h3>
|
||
<p class="text-body-secondary mb-3">
|
||
Platzhaltertext zum Förderverein – Ziele, Projekte und wie man
|
||
unterstützen kann.
|
||
</p>
|
||
<a href="foerderverein.html" class="fw-semibold">Mehr erfahren <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card-verein p-4">
|
||
<div class="icon-wrap mb-3"><i class="bi bi-life-preserver"></i></div>
|
||
<h3 class="h5 fw-bold">Rescue Biker</h3>
|
||
<p class="text-body-secondary mb-3">
|
||
Platzhaltertext zu Rescue Biker – Einsatzbereich, Ausbildung
|
||
und Engagement der Gruppe.
|
||
</p>
|
||
<a href="rescue-biker.html" class="fw-semibold">Mehr erfahren <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card-verein p-4">
|
||
<div class="icon-wrap mb-3"><i class="bi bi-heart-fill"></i></div>
|
||
<h3 class="h5 fw-bold">Herzensbiker</h3>
|
||
<p class="text-body-secondary mb-3">
|
||
Platzhaltertext zu Herzensbiker – soziale Aktionen und
|
||
Herzensprojekte des Vereins.
|
||
</p>
|
||
<a href="herzensbiker.html" class="fw-semibold">Mehr erfahren <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ ÜBER UNS ============ -->
|
||
<section class="py-5 py-lg-6" style="background:#f7f6f4;">
|
||
<div class="container py-4">
|
||
<div class="row align-items-center g-5">
|
||
<div class="col-lg-6 order-lg-2">
|
||
<p class="section-kicker">Über uns</p>
|
||
<h2 class="section-title">Zusammenhalt auf und abseits der Straße</h2>
|
||
<p class="text-body-secondary mb-3">
|
||
Platzhaltertext: Entstehungsgeschichte, Werte und was
|
||
BikerStreetScene ausmacht. Wird über die Unterseite „Über uns“
|
||
im Admin gepflegt.
|
||
</p>
|
||
<p class="text-body-secondary mb-4">
|
||
Regelmäßige Ausfahrten, Treffen und Events – für Mitglieder
|
||
und alle, die reinschnuppern möchten.
|
||
</p>
|
||
<a href="ueber-uns.html" class="btn btn-orange">Zur Vereinsseite</a>
|
||
</div>
|
||
<div class="col-lg-6 order-lg-1">
|
||
<div class="ph-box">
|
||
<i class="bi bi-image"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ NEWS TEASER ============ -->
|
||
<section class="py-5 py-lg-6 bg-white">
|
||
<div class="container py-4">
|
||
<div class="d-flex flex-wrap justify-content-between align-items-end mb-4">
|
||
<div>
|
||
<p class="section-kicker">Aktuelles</p>
|
||
<h2 class="section-title mb-0">News aus dem Verein</h2>
|
||
</div>
|
||
<a href="news.html" class="fw-semibold">Alle News <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="card-news">
|
||
<div class="ph-box ph-square" style="aspect-ratio: 16/9;"><i class="bi bi-newspaper"></i></div>
|
||
<div class="card-body">
|
||
<span class="date-badge">Platzhalter-Datum</span>
|
||
<h3 class="h6 fw-bold mt-2">Platzhalter-Newstitel eins</h3>
|
||
<p class="text-body-secondary small mb-2">Kurzer Anrisstext als Platzhalter für die Newsmeldung.</p>
|
||
<a href="news.html" class="small fw-semibold">Weiterlesen <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card-news">
|
||
<div class="ph-box ph-square" style="aspect-ratio: 16/9;"><i class="bi bi-newspaper"></i></div>
|
||
<div class="card-body">
|
||
<span class="date-badge">Platzhalter-Datum</span>
|
||
<h3 class="h6 fw-bold mt-2">Platzhalter-Newstitel zwei</h3>
|
||
<p class="text-body-secondary small mb-2">Kurzer Anrisstext als Platzhalter für die Newsmeldung.</p>
|
||
<a href="news.html" class="small fw-semibold">Weiterlesen <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card-news">
|
||
<div class="ph-box ph-square" style="aspect-ratio: 16/9;"><i class="bi bi-newspaper"></i></div>
|
||
<div class="card-body">
|
||
<span class="date-badge">Platzhalter-Datum</span>
|
||
<h3 class="h6 fw-bold mt-2">Platzhalter-Newstitel drei</h3>
|
||
<p class="text-body-secondary small mb-2">Kurzer Anrisstext als Platzhalter für die Newsmeldung.</p>
|
||
<a href="news.html" class="small fw-semibold">Weiterlesen <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ EVENTS TEASER ============ -->
|
||
<section class="py-5 py-lg-6" style="background:#f7f6f4;">
|
||
<div class="container py-4">
|
||
<div class="row g-5">
|
||
<div class="col-lg-5">
|
||
<p class="section-kicker">Termine</p>
|
||
<h2 class="section-title">Nächste Events</h2>
|
||
<p class="section-lead mb-4">
|
||
Ausfahrten, Treffen und Aktionen – Platzhaltertext, Inhalte
|
||
folgen über den Bereich Events im CMS.
|
||
</p>
|
||
<a href="events.html" class="btn btn-outline-dark">Alle Events ansehen</a>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
<div class="bg-white rounded-3 p-4 p-md-5 shadow-sm">
|
||
<div class="event-row">
|
||
<div class="event-date"><div class="day">14</div><div class="month">Mai</div></div>
|
||
<div>
|
||
<h3 class="h6 fw-bold mb-1">Platzhalter-Event eins</h3>
|
||
<p class="text-body-secondary small mb-0"><i class="bi bi-geo-alt"></i> Ort (Platzhalter)</p>
|
||
</div>
|
||
</div>
|
||
<div class="event-row">
|
||
<div class="event-date"><div class="day">02</div><div class="month">Jun</div></div>
|
||
<div>
|
||
<h3 class="h6 fw-bold mb-1">Platzhalter-Event zwei</h3>
|
||
<p class="text-body-secondary small mb-0"><i class="bi bi-geo-alt"></i> Ort (Platzhalter)</p>
|
||
</div>
|
||
</div>
|
||
<div class="event-row">
|
||
<div class="event-date"><div class="day">21</div><div class="month">Jun</div></div>
|
||
<div>
|
||
<h3 class="h6 fw-bold mb-1">Platzhalter-Event drei</h3>
|
||
<p class="text-body-secondary small mb-0"><i class="bi bi-geo-alt"></i> Ort (Platzhalter)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FOTOS TEASER ============ -->
|
||
<section class="py-5 py-lg-6 bg-white">
|
||
<div class="container py-4">
|
||
<div class="d-flex flex-wrap justify-content-between align-items-end mb-4">
|
||
<div>
|
||
<p class="section-kicker">Impressionen</p>
|
||
<h2 class="section-title mb-0">Aus unseren Alben</h2>
|
||
</div>
|
||
<a href="fotos.html" class="fw-semibold">Alle Fotos <i class="bi bi-arrow-right"></i></a>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-6 col-md-3"><div class="ph-box ph-square"><i class="bi bi-image"></i></div></div>
|
||
<div class="col-6 col-md-3"><div class="ph-box ph-square"><i class="bi bi-image"></i></div></div>
|
||
<div class="col-6 col-md-3"><div class="ph-box ph-square"><i class="bi bi-image"></i></div></div>
|
||
<div class="col-6 col-md-3"><div class="ph-box ph-square"><i class="bi bi-image"></i></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ MITGLIEDSCHAFT CTA ============ -->
|
||
<section class="cta-mitglied">
|
||
<div class="container">
|
||
<div class="row align-items-center g-4">
|
||
<div class="col-lg-8">
|
||
<h2 class="section-title text-white mb-2">Werde Teil der BikerStreetScene-Familie</h2>
|
||
<p class="mb-0" style="color:#c9cad0;">
|
||
Platzhaltertext: Warum Mitgliedschaft, was den Verein ausmacht
|
||
und wie einfach der Antrag online geht.
|
||
</p>
|
||
</div>
|
||
<div class="col-lg-4 text-lg-end">
|
||
<a href="mitgliedschaft.html" class="btn btn-orange btn-lg px-4">Mitgliedsantrag stellen</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ============ FOOTER ============ -->
|
||
<footer class="footer-bss pt-5 pb-4">
|
||
<div class="container">
|
||
<div class="row g-4">
|
||
<div class="col-lg-4">
|
||
<h6 class="text-white">BikerStreetScene e.V.</h6>
|
||
<p class="small mb-1">Platzhalter-Straße 1</p>
|
||
<p class="small mb-1">12345 Platzhalterstadt</p>
|
||
<p class="small mb-3"><i class="bi bi-envelope me-1"></i><a href="mailto:info@bikerstreetscene.example">info@bikerstreetscene.example</a></p>
|
||
<div class="social-icons">
|
||
<a href="#" target="_blank" rel="noopener" aria-label="WhatsApp"><i class="bi bi-whatsapp"></i></a>
|
||
<a href="#" target="_blank" rel="noopener" aria-label="Instagram"><i class="bi bi-instagram"></i></a>
|
||
<a href="#" target="_blank" rel="noopener" aria-label="YouTube"><i class="bi bi-youtube"></i></a>
|
||
<a href="#" target="_blank" rel="noopener" aria-label="TikTok"><i class="bi bi-tiktok"></i></a>
|
||
<a href="#" target="_blank" rel="noopener" aria-label="Facebook"><i class="bi bi-facebook"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="col-6 col-lg-2">
|
||
<h6>Verein</h6>
|
||
<ul class="list-unstyled small">
|
||
<li class="mb-2"><a href="verein.html">Der Verein</a></li>
|
||
<li class="mb-2"><a href="foerderverein.html">Förderverein</a></li>
|
||
<li class="mb-2"><a href="rescue-biker.html">Rescue Biker</a></li>
|
||
<li class="mb-2"><a href="herzensbiker.html">Herzensbiker</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-lg-2">
|
||
<h6>Entdecken</h6>
|
||
<ul class="list-unstyled small">
|
||
<li class="mb-2"><a href="news.html">News</a></li>
|
||
<li class="mb-2"><a href="events.html">Events</a></li>
|
||
<li class="mb-2"><a href="fotos.html">Fotos</a></li>
|
||
<li class="mb-2"><a href="mitgliedschaft.html">Mitgliedschaft</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-lg-2">
|
||
<h6>Kontakt</h6>
|
||
<ul class="list-unstyled small">
|
||
<li class="mb-2"><a href="kontakt.html">Kontaktformular</a></li>
|
||
<li class="mb-2"><a href="mitglieder/login.html">Mitgliederbereich</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-lg-2">
|
||
<h6>Rechtliches</h6>
|
||
<ul class="list-unstyled small">
|
||
<li class="mb-2"><a href="impressum.html">Impressum</a></li>
|
||
<li class="mb-2"><a href="datenschutz.html">Datenschutz</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="copyright text-center text-md-start">
|
||
© <span id="year"></span> BikerStreetScene e.V. – Alle Rechte vorbehalten.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Bootstrap JS Bundle (lokal gehostet) -->
|
||
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
document.getElementById("year").textContent = new Date().getFullYear();
|
||
</script>
|
||
</body>
|
||
</html>
|