Banner-Slider: Beispiel-Anzeige Breadcrumb Solutions
Zweite Slide als echte Sponsoren-Anzeige (Hero-Foto + Wortmarken-Logo, self-hosted). Komponente erweitert um cta_secondary (Outline-Button) und logo_light (weiße Logo-Platte für dunkle Firmenlogos). CTAs verlinken extern (target=_blank, rel=sponsored) auf Lösungen + Über uns. Mit zwei Slides aktiviert der Slider Auto-Rotation und Indikatoren. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KDQZ6FuchNUh2bxSW9PeNv
This commit is contained in:
@@ -1021,6 +1021,13 @@
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
/* CTA-Reihe: Primär- + optionaler Outline-Sekundär-Button nebeneinander. */
|
||||
.ad-banner__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ad-banner__logo {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -1031,6 +1038,14 @@
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
/* Helle Platte für dunkle Firmenlogos (Wortmarken). Überschreibt auch die
|
||||
dunkle Logo-Box der Foto-Variante (gleiche Spezifität, später im File). */
|
||||
.ad-banner__logo.ad-banner__logo--light {
|
||||
background: #fff;
|
||||
border-color: rgb(255 255 255 / 0.55);
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.ad-banner__logo img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
@@ -2238,27 +2253,29 @@
|
||||
.department-choice__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.35rem;
|
||||
height: 100%;
|
||||
padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
|
||||
padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
}
|
||||
|
||||
.department-choice__kicker {
|
||||
font-size: var(--fs-400);
|
||||
.department-choice__heading {
|
||||
font-size: var(--fs-700);
|
||||
line-height: var(--lh-heading);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.department-choice__subtitle {
|
||||
font-size: var(--fs-500);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
.department-choice__heading {
|
||||
font-size: var(--fs-650);
|
||||
line-height: var(--lh-heading);
|
||||
}
|
||||
|
||||
.department-choice__text {
|
||||
margin-top: 0.65rem;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
@@ -2283,7 +2300,7 @@
|
||||
}
|
||||
|
||||
.fee-table__title {
|
||||
font-size: var(--fs-600);
|
||||
font-size: var(--fs-650);
|
||||
line-height: var(--lh-heading);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -2324,40 +2341,34 @@
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.fee-table-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.fee-table-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
}
|
||||
}
|
||||
|
||||
/* === membership (Mitglied werden) === */
|
||||
.membership-info__inner {
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.membership-info__inner p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.membership-signup__inner {
|
||||
max-width: 820px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* Zentrierter, ruhiger Sektions-Kopf (einheitlich mit instagram/partners) */
|
||||
.membership-signup__head {
|
||||
max-width: 60ch;
|
||||
margin: 0 auto 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.membership-signup__intro {
|
||||
max-width: 65ch;
|
||||
margin: 1rem 0 2rem;
|
||||
margin-top: 1rem;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
/* Fußball-Sektion: Beitragstabelle hat Abstand zum Formular */
|
||||
/* Beitragstabelle und Formular mittig, schlanke Spaltenbreite für Lesbarkeit */
|
||||
.membership-signup .fee-table {
|
||||
max-width: 560px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.membership-signup .form {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.membership-signup .fee-table + .form {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
@@ -2365,7 +2376,7 @@
|
||||
.membership-notes {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin: 0 0 2rem;
|
||||
margin: 0 0 2.5rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@@ -2377,7 +2388,7 @@
|
||||
}
|
||||
|
||||
.membership-notes__title {
|
||||
font-size: var(--fs-600);
|
||||
font-size: var(--fs-650);
|
||||
line-height: var(--lh-heading);
|
||||
margin-bottom: 0.4rem;
|
||||
padding-top: 0.75rem;
|
||||
@@ -2385,7 +2396,7 @@
|
||||
}
|
||||
|
||||
.membership-download {
|
||||
margin-top: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.membership-download__btn {
|
||||
|
||||
BIN
public/assets/img/banners/breadcrumb-hero-1600.jpg
Normal file
BIN
public/assets/img/banners/breadcrumb-hero-1600.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
16
public/assets/img/banners/breadcrumb-solutions.svg
Normal file
16
public/assets/img/banners/breadcrumb-solutions.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="158.045" height="22.127" viewBox="0 0 158.045 22.127">
|
||||
<g id="bc_logo" transform="translate(985 302)">
|
||||
<g id="Ebene_1" data-name="Ebene 1" transform="translate(-985 -302)">
|
||||
<path id="Pfad_495" data-name="Pfad 495" d="M.042.17h4.2V8.1C4.859,7.112,6.1,6.117,8.56,6.117c4.1,0,6.144,3.447,6.144,7.67,0,4.626-2.239,8.383-6.618,8.383-2.26,0-3.27-.791-3.92-1.794a11.724,11.724,0,0,1-.148,1.476H0c0-1.413.042-3.277.042-4.9ZM10.481,13.9c0-2.55-.946-4.407-3.221-4.407-2.43,0-3.249,1.6-3.249,4.661,0,2.825.784,4.682,3.213,4.682C9.393,18.836,10.481,16.887,10.481,13.9Z" transform="translate(0 -0.05)" fill="#1a1a1a"/>
|
||||
<path id="Pfad_496" data-name="Pfad 496" d="M24.982,13.531c0-1.935,0-3.4-.042-4.591h4.082a26.839,26.839,0,0,1,.113,2.7A4.832,4.832,0,0,1,33.959,8.63V12.7c-3.122-.064-4.8.862-4.8,4.81v6.829H24.982Z" transform="translate(-7.326 -2.535)" fill="#1a1a1a"/>
|
||||
<path id="Pfad_497" data-name="Pfad 497" d="M43.842,17.538c0,1.907.869,3.835,3.058,3.835a2.465,2.465,0,0,0,2.663-1.709h4.146c-.629,2.119-2.352,4.979-6.921,4.979-5.014,0-7.147-3.616-7.147-7.875,0-4.428,2.253-8.178,7.317-8.178,5.24,0,6.942,3.771,6.942,7.663a12.628,12.628,0,0,1-.049,1.285Zm5.94-2.627c-.042-1.773-.749-3.277-2.825-3.277s-2.825,1.589-2.994,3.277Z" transform="translate(-11.644 -2.523)" fill="#1a1a1a"/>
|
||||
<path id="Pfad_498" data-name="Pfad 498" d="M75.981,20.33a35.8,35.8,0,0,0,.212,3.983H72.329a8.8,8.8,0,0,1-.219-1.653c-.593,1.038-1.8,1.97-4.287,1.97-3.75,0-5.233-2.415-5.233-4.774,0-3.213,2.458-5.1,7.3-5.1h2.041v-1.01c0-1.165-.388-2.2-2.3-2.2-1.8,0-2.2.826-2.38,1.949H63.226c.2-2.613,1.8-4.944,6.5-4.944,3.927,0,6.257,1.49,6.257,5.212Zm-4.026-2.987H70.168c-2.648,0-3.425.918-3.425,2.225a1.945,1.945,0,0,0,2.2,2.013c2.592,0,3.016-1.773,3.016-3.863Z" transform="translate(-18.386 -2.512)" fill="#1a1a1a"/>
|
||||
<path id="Pfad_499" data-name="Pfad 499" d="M100.3.17V17.593c0,1.561,0,3.051.042,4.238H96.308c-.071-.445-.155-1.285-.169-1.7-.706,1.264-1.992,2.02-4.351,2.02-3.906,0-6.208-3.157-6.208-7.938S88.158,6.1,92.431,6.1c2.246,0,3.355.784,3.694,1.448V.17ZM89.86,14.118c0,2.952,1.095,4.7,3.22,4.7,2.825,0,3.221-2.182,3.221-4.711,0-2.9-.487-4.619-3.107-4.619C91.053,9.493,89.86,11.145,89.86,14.118Z" transform="translate(-25.139 -0.05)" fill="#1a1a1a"/>
|
||||
<path id="Pfad_500" data-name="Pfad 500" d="M125.715,19.979c-.706,2.726-2.458,4.859-5.918,4.859-3.976,0-6.356-2.825-6.356-7.769,0-4.153,2.168-7.839,6.54-7.839a5.429,5.429,0,0,1,5.756,4.944h-2.013a3.722,3.722,0,0,0-3.821-3.263c-2.945,0-4.471,2.528-4.471,6.095,0,3.68,1.547,6.137,4.386,6.137,2.119,0,3.256-1.172,3.913-3.164Z" transform="translate(-33.323 -2.711)" fill="#1a1a1a"/>
|
||||
<path id="Pfad_501" data-name="Pfad 501" d="M135.42,14V9.525h1.914c0,.565.056,1.582.056,3.206A5.375,5.375,0,0,1,142.454,9.2v2.034c-3.242.17-5.05,2.246-5.05,5.7V24.5h-1.949Z" transform="translate(-39.78 -2.702)" fill="#1a1a1a"/>
|
||||
<path id="Pfad_502" data-name="Pfad 502" d="M160.175,20.356c0,1.582,0,3.574.042,4.287h-1.879a21.19,21.19,0,0,1-.106-2.507c-.643,1.681-2.168,2.825-4.612,2.825-2.232,0-4.781-.953-4.781-5.318V9.67h1.935v9.541c0,2.083.643,3.976,3.3,3.976,2.776,0,4.139-1.674,4.139-5.516v-8h1.963Z" transform="translate(-43.722 -2.841)" fill="#1a1a1a"/>
|
||||
<path id="Pfad_503" data-name="Pfad 503" d="M171.412,13.711c0-1.787,0-3.2-.042-4.181h1.9c.042.445.1,1.716.078,2.4A4.576,4.576,0,0,1,177.691,9.2a3.948,3.948,0,0,1,4.1,2.769A4.944,4.944,0,0,1,186.448,9.2c2.288,0,4.576,1.264,4.576,5.318V24.5H189.09V14.791c0-1.928-.657-3.814-3.136-3.814-2.627,0-3.771,2.119-3.771,4.8V24.5H180.29V14.77c0-2.055-.706-3.793-3.058-3.793-2.514,0-3.87,2.119-3.87,5.12v8.4h-1.935Z" transform="translate(-50.34 -2.7)" fill="#1a1a1a"/>
|
||||
<path id="Pfad_504" data-name="Pfad 504" d="M205.721,0h1.949V9.139A5,5,0,0,1,212.494,6.5c3.6,0,5.975,2.938,5.975,7.444s-2.119,8.178-6.356,8.178c-2.415,0-3.736-.982-4.428-2.465,0,.784-.042,1.624-.085,2.119h-1.9c.035-1.328.042-2.9.042-4.7Zm10.714,14c0-3.475-1.561-5.749-4.294-5.749-3.369,0-4.577,2.232-4.577,6,0,3.531.989,6.13,4.442,6.13C214.874,20.382,216.435,17.854,216.435,14Z" transform="translate(-60.424)" fill="#1a1a1a"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.1 KiB |
Reference in New Issue
Block a user