Add initial HTML structure for BikerStreetScene e.V. homepage with navigation, hero section, and various teasers
This commit is contained in:
parent
602669449c
commit
239a0d4fc1
336
assets/css/style.css
Normal file
336
assets/css/style.css
Normal file
@ -0,0 +1,336 @@
|
||||
/* =========================================================
|
||||
BikerStreetScene e.V. – Startseite
|
||||
Eigene Styles, ergänzend zu Bootstrap 5.3 (self-hosted)
|
||||
========================================================= */
|
||||
|
||||
/* --- Fonts (lokal, kein Google Fonts CDN) --- */
|
||||
@font-face {
|
||||
font-family: "Oswald";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("../vendor/fonts/oswald/oswald-latin-400-normal.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Oswald";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("../vendor/fonts/oswald/oswald-latin-500-normal.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Oswald";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("../vendor/fonts/oswald/oswald-latin-600-normal.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Oswald";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("../vendor/fonts/oswald/oswald-latin-700-normal.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("../vendor/fonts/inter/inter-latin-400-normal.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("../vendor/fonts/inter/inter-latin-500-normal.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("../vendor/fonts/inter/inter-latin-600-normal.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("../vendor/fonts/inter/inter-latin-700-normal.woff2") format("woff2");
|
||||
}
|
||||
|
||||
/* --- Brand-Farben --- */
|
||||
:root {
|
||||
--bss-dark: #15161a;
|
||||
--bss-dark-2: #1e2025;
|
||||
--bss-orange: #e8531d;
|
||||
--bss-orange-dark: #c9430f;
|
||||
--bss-light: #f4f3f0;
|
||||
--bss-gray: #8b8d94;
|
||||
|
||||
--bs-body-font-family: "Inter", system-ui, sans-serif;
|
||||
--bs-body-color: #2b2b2e;
|
||||
--bs-link-color: var(--bss-orange);
|
||||
--bs-link-hover-color: var(--bss-orange-dark);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.font-heading {
|
||||
font-family: "Oswald", system-ui, sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.text-orange { color: var(--bss-orange); }
|
||||
.bg-orange { background-color: var(--bss-orange); }
|
||||
.bg-bss-dark { background-color: var(--bss-dark); }
|
||||
|
||||
.btn-orange {
|
||||
background-color: var(--bss-orange);
|
||||
border-color: var(--bss-orange);
|
||||
color: #fff;
|
||||
font-family: "Oswald", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-orange:hover,
|
||||
.btn-orange:focus {
|
||||
background-color: var(--bss-orange-dark);
|
||||
border-color: var(--bss-orange-dark);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-outline-light.btn-hero {
|
||||
font-family: "Oswald", sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- Navbar --- */
|
||||
.navbar-bss {
|
||||
background-color: var(--bss-dark);
|
||||
}
|
||||
.navbar-bss .navbar-brand {
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.25rem;
|
||||
color: #fff;
|
||||
}
|
||||
.navbar-bss .navbar-brand span {
|
||||
color: var(--bss-orange);
|
||||
}
|
||||
.navbar-bss .nav-link {
|
||||
color: #e6e6e6;
|
||||
font-weight: 500;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.navbar-bss .nav-link:hover,
|
||||
.navbar-bss .nav-link:focus,
|
||||
.navbar-bss .nav-link.active {
|
||||
color: var(--bss-orange);
|
||||
}
|
||||
.navbar-bss .btn-shop {
|
||||
border: 1px solid var(--bss-orange);
|
||||
color: var(--bss-orange);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
padding: 0.35rem 0.9rem;
|
||||
}
|
||||
.navbar-bss .btn-shop:hover {
|
||||
background-color: var(--bss-orange);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* --- Hero --- */
|
||||
.hero {
|
||||
position: relative;
|
||||
background: radial-gradient(ellipse at 30% 20%, #2a2c33 0%, var(--bss-dark) 60%);
|
||||
color: #fff;
|
||||
padding: 7.5rem 0 6rem;
|
||||
overflow: hidden;
|
||||
border-bottom: 4px solid var(--bss-orange);
|
||||
}
|
||||
.hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: repeating-linear-gradient(
|
||||
100deg,
|
||||
rgba(255, 255, 255, 0.03) 0px,
|
||||
rgba(255, 255, 255, 0.03) 1px,
|
||||
transparent 1px,
|
||||
transparent 90px
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: clamp(2.4rem, 5vw, 4rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
}
|
||||
.hero .lead {
|
||||
color: #c9cad0;
|
||||
max-width: 42rem;
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
.hero .badge-club {
|
||||
font-family: "Oswald", sans-serif;
|
||||
letter-spacing: 0.15em;
|
||||
font-size: 0.75rem;
|
||||
color: var(--bss-orange);
|
||||
border: 1px solid var(--bss-orange);
|
||||
padding: 0.35rem 0.8rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* --- Sections --- */
|
||||
.section-title {
|
||||
font-size: 1.9rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.section-kicker {
|
||||
font-family: "Oswald", sans-serif;
|
||||
color: var(--bss-orange);
|
||||
letter-spacing: 0.15em;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
.section-lead {
|
||||
color: var(--bss-gray);
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
/* --- Verein-Karten --- */
|
||||
.card-verein {
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 14px rgba(20, 20, 25, 0.07);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
height: 100%;
|
||||
}
|
||||
.card-verein:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 24px rgba(20, 20, 25, 0.14);
|
||||
}
|
||||
.card-verein .icon-wrap {
|
||||
width: 3.25rem;
|
||||
height: 3.25rem;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--bss-dark);
|
||||
color: var(--bss-orange);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
/* --- Platzhalter-Bild-Boxen (statt echter Fotos) --- */
|
||||
.ph-box {
|
||||
border-radius: 0.5rem;
|
||||
background: linear-gradient(135deg, var(--bss-dark) 0%, #33353c 100%);
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.25rem;
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
.ph-box.ph-square { aspect-ratio: 1 / 1; }
|
||||
|
||||
/* --- News / Events Karten --- */
|
||||
.card-news {
|
||||
border: 1px solid #eceae7;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
.card-news .card-body { padding: 1.25rem; }
|
||||
.card-news .date-badge {
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--bss-orange);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.event-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eceae7;
|
||||
}
|
||||
.event-row:last-child { border-bottom: none; }
|
||||
.event-date {
|
||||
flex: 0 0 4.25rem;
|
||||
text-align: center;
|
||||
background: var(--bss-dark);
|
||||
color: #fff;
|
||||
border-radius: 0.4rem;
|
||||
padding: 0.5rem 0.25rem;
|
||||
font-family: "Oswald", sans-serif;
|
||||
}
|
||||
.event-date .day { font-size: 1.4rem; font-weight: 700; line-height: 1; }
|
||||
.event-date .month { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bss-orange); }
|
||||
|
||||
/* --- Mitgliedschaft CTA --- */
|
||||
.cta-mitglied {
|
||||
background: var(--bss-dark);
|
||||
color: #fff;
|
||||
padding: 3.5rem 0;
|
||||
}
|
||||
|
||||
/* --- Footer --- */
|
||||
.footer-bss {
|
||||
background: #0e0f12;
|
||||
color: #b7b8bd;
|
||||
}
|
||||
.footer-bss h6 {
|
||||
color: #fff;
|
||||
font-family: "Oswald", sans-serif;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.footer-bss a {
|
||||
color: #b7b8bd;
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer-bss a:hover { color: var(--bss-orange); }
|
||||
.footer-bss .social-icons a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333540;
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.footer-bss .social-icons a:hover {
|
||||
background: var(--bss-orange);
|
||||
border-color: var(--bss-orange);
|
||||
color: #fff;
|
||||
}
|
||||
.footer-bss .copyright {
|
||||
border-top: 1px solid #24262c;
|
||||
padding-top: 1rem;
|
||||
margin-top: 2rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
5
assets/vendor/bootstrap-icons/bootstrap-icons.min.css
vendored
Normal file
5
assets/vendor/bootstrap-icons/bootstrap-icons.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/vendor/bootstrap-icons/fonts/bootstrap-icons.woff
vendored
Normal file
BIN
assets/vendor/bootstrap-icons/fonts/bootstrap-icons.woff
vendored
Normal file
Binary file not shown.
BIN
assets/vendor/bootstrap-icons/fonts/bootstrap-icons.woff2
vendored
Normal file
BIN
assets/vendor/bootstrap-icons/fonts/bootstrap-icons.woff2
vendored
Normal file
Binary file not shown.
5
assets/vendor/bootstrap/css/bootstrap.min.css
vendored
Normal file
5
assets/vendor/bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
assets/vendor/bootstrap/js/bootstrap.bundle.min.js
vendored
Normal file
6
assets/vendor/bootstrap/js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/vendor/fonts/inter/inter-latin-400-normal.woff2
vendored
Normal file
BIN
assets/vendor/fonts/inter/inter-latin-400-normal.woff2
vendored
Normal file
Binary file not shown.
BIN
assets/vendor/fonts/inter/inter-latin-500-normal.woff2
vendored
Normal file
BIN
assets/vendor/fonts/inter/inter-latin-500-normal.woff2
vendored
Normal file
Binary file not shown.
BIN
assets/vendor/fonts/inter/inter-latin-600-normal.woff2
vendored
Normal file
BIN
assets/vendor/fonts/inter/inter-latin-600-normal.woff2
vendored
Normal file
Binary file not shown.
BIN
assets/vendor/fonts/inter/inter-latin-700-normal.woff2
vendored
Normal file
BIN
assets/vendor/fonts/inter/inter-latin-700-normal.woff2
vendored
Normal file
Binary file not shown.
BIN
assets/vendor/fonts/oswald/oswald-latin-400-normal.woff2
vendored
Normal file
BIN
assets/vendor/fonts/oswald/oswald-latin-400-normal.woff2
vendored
Normal file
Binary file not shown.
BIN
assets/vendor/fonts/oswald/oswald-latin-500-normal.woff2
vendored
Normal file
BIN
assets/vendor/fonts/oswald/oswald-latin-500-normal.woff2
vendored
Normal file
Binary file not shown.
BIN
assets/vendor/fonts/oswald/oswald-latin-600-normal.woff2
vendored
Normal file
BIN
assets/vendor/fonts/oswald/oswald-latin-600-normal.woff2
vendored
Normal file
Binary file not shown.
BIN
assets/vendor/fonts/oswald/oswald-latin-700-normal.woff2
vendored
Normal file
BIN
assets/vendor/fonts/oswald/oswald-latin-700-normal.woff2
vendored
Normal file
Binary file not shown.
340
index.html
Normal file
340
index.html
Normal file
@ -0,0 +1,340 @@
|
||||
<!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>
|
||||
Loading…
x
Reference in New Issue
Block a user