Fix: single banner as grid background, no duplicated images
- Banner is now a single CSS background-image on .brands-grid spanning both card columns (left half on FI-NE, right on LACUEOR) - Cards only have header (above) + spacer + footer (below) with semi-transparent solid backgrounds for readability - Dropdown changes the grid's background-image directly - Removed per-card <img> elements (was showing image twice) - Cleaned up orphaned CSS classes
This commit is contained in:
Oliver
+45
-59
@@ -75,7 +75,7 @@
|
|||||||
experience.
|
experience.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="brands-grid" role="list">
|
<div class="brands-grid" role="list" id="brands-grid">
|
||||||
|
|
||||||
<!-- FI-NE (left half) -->
|
<!-- FI-NE (left half) -->
|
||||||
<a
|
<a
|
||||||
@@ -90,37 +90,30 @@
|
|||||||
class="brand-card-top-accent"
|
class="brand-card-top-accent"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
></div>
|
></div>
|
||||||
<div class="brand-card-image-wrap">
|
<div class="brand-card-header">
|
||||||
<div class="brand-card-header">
|
<span class="brand-card-eyebrow"
|
||||||
<span class="brand-card-eyebrow"
|
>Premium Natural Cosmetics</span
|
||||||
>Premium Natural Cosmetics</span
|
>
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="brand-card-logo"
|
|
||||||
src="asset/Fine.svg"
|
|
||||||
alt="[fi-ne] brand logo"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<img
|
<img
|
||||||
class="brand-card-image"
|
class="brand-card-logo"
|
||||||
src="asset/banner/1.png"
|
src="asset/Fine.svg"
|
||||||
alt="Brand banner"
|
alt="[fi-ne] brand logo"
|
||||||
style="object-position: left;"
|
|
||||||
/>
|
/>
|
||||||
<div class="brand-card-footer">
|
</div>
|
||||||
<span class="brand-card-tagline">
|
<div class="brand-card-spacer" aria-hidden="true"></div>
|
||||||
Clean. Unisex. Uncompromisingly effective.<br />
|
<div class="brand-card-footer">
|
||||||
Made in Germany.
|
<span class="brand-card-tagline">
|
||||||
</span>
|
Clean. Unisex. Uncompromisingly effective.<br />
|
||||||
<span class="brand-card-cta">
|
Made in Germany.
|
||||||
finecosmetic.de
|
</span>
|
||||||
<span
|
<span class="brand-card-cta">
|
||||||
class="brand-card-cta-arrow"
|
finecosmetic.de
|
||||||
aria-hidden="true"
|
<span
|
||||||
>→</span
|
class="brand-card-cta-arrow"
|
||||||
>
|
aria-hidden="true"
|
||||||
</span>
|
>→</span
|
||||||
</div>
|
>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
@@ -137,37 +130,30 @@
|
|||||||
class="brand-card-top-accent"
|
class="brand-card-top-accent"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
></div>
|
></div>
|
||||||
<div class="brand-card-image-wrap">
|
<div class="brand-card-header">
|
||||||
<div class="brand-card-header">
|
<span class="brand-card-eyebrow"
|
||||||
<span class="brand-card-eyebrow"
|
>Premium Organic Skin Care</span
|
||||||
>Premium Organic Skin Care</span
|
>
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="brand-card-logo"
|
|
||||||
src="asset/Lacueor.svg"
|
|
||||||
alt="LACUEOR brand logo"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<img
|
<img
|
||||||
class="brand-card-image"
|
class="brand-card-logo"
|
||||||
src="asset/banner/1.png"
|
src="asset/Lacueor.svg"
|
||||||
alt="Brand banner"
|
alt="LACUEOR brand logo"
|
||||||
style="object-position: right;"
|
|
||||||
/>
|
/>
|
||||||
<div class="brand-card-footer">
|
</div>
|
||||||
<span class="brand-card-tagline">
|
<div class="brand-card-spacer" aria-hidden="true"></div>
|
||||||
From the quantum realm to your skin.<br />
|
<div class="brand-card-footer">
|
||||||
Made in Berlin & Brandenburg with love.
|
<span class="brand-card-tagline">
|
||||||
</span>
|
From the quantum realm to your skin.<br />
|
||||||
<span class="brand-card-cta">
|
Made in Berlin & Brandenburg with love.
|
||||||
lacueor.com
|
</span>
|
||||||
<span
|
<span class="brand-card-cta">
|
||||||
class="brand-card-cta-arrow"
|
lacueor.com
|
||||||
aria-hidden="true"
|
<span
|
||||||
>→</span
|
class="brand-card-cta-arrow"
|
||||||
>
|
aria-hidden="true"
|
||||||
</span>
|
>→</span
|
||||||
</div>
|
>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|||||||
@@ -37,19 +37,12 @@
|
|||||||
|
|
||||||
/* ── Banner image selector ──────────────────────────────── */
|
/* ── Banner image selector ──────────────────────────────── */
|
||||||
var bannerPicker = document.getElementById("banner-picker");
|
var bannerPicker = document.getElementById("banner-picker");
|
||||||
var bannerImgs = document.querySelectorAll(".brand-card-image");
|
var brandsGrid = document.getElementById("brands-grid");
|
||||||
if (bannerPicker && bannerImgs.length) {
|
if (bannerPicker && brandsGrid) {
|
||||||
bannerPicker.addEventListener("change", function () {
|
bannerPicker.addEventListener("change", function () {
|
||||||
var val = this.value;
|
var val = this.value;
|
||||||
bannerImgs.forEach(function (img) {
|
brandsGrid.style.backgroundImage =
|
||||||
img.style.opacity = "0";
|
"url(asset/banner/" + val + ".png)";
|
||||||
});
|
|
||||||
setTimeout(function () {
|
|
||||||
bannerImgs.forEach(function (img) {
|
|
||||||
img.src = "asset/banner/" + val + ".png";
|
|
||||||
img.style.opacity = "1";
|
|
||||||
});
|
|
||||||
}, 200);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -382,25 +382,11 @@ body::before {
|
|||||||
gap: 0;
|
gap: 0;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
background-image: url("asset/banner/1.png");
|
||||||
|
background-size: cover;
|
||||||
.brand-card-image-wrap {
|
background-position: center;
|
||||||
display: flex;
|
background-repeat: no-repeat;
|
||||||
flex-direction: column;
|
transition: background-image 0.4s ease;
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-card-header {
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 32px 52px 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-card-footer {
|
|
||||||
flex-shrink: 0;
|
|
||||||
padding: 20px 52px 40px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-card {
|
.brand-card {
|
||||||
@@ -413,21 +399,48 @@ body::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.brand-card--fine {
|
.brand-card--fine {
|
||||||
background: var(--fine-beige);
|
|
||||||
border-right: 1px solid var(--border);
|
border-right: 1px solid var(--border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-card--lacueor {
|
.brand-card--lacueor {
|
||||||
|
/* inherits background from grid */
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-card-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 32px 52px 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-card--fine .brand-card-header {
|
||||||
|
background: var(--fine-beige);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-card--lacueor .brand-card-header {
|
||||||
|
background: var(--lacueor-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-card-spacer {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 280px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-card-footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 20px 52px 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-card--fine .brand-card-footer {
|
||||||
|
background: var(--fine-beige);
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-card--lacueor .brand-card-footer {
|
||||||
background: var(--lacueor-dark);
|
background: var(--lacueor-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-card-image {
|
.brand-card-image {
|
||||||
display: block;
|
display: none;
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
flex-shrink: 0;
|
|
||||||
object-fit: cover;
|
|
||||||
transition: opacity 0.4s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-card-top-accent {
|
.brand-card-top-accent {
|
||||||
|
|||||||
Reference in New Issue
Block a user