oliver/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: single banner as grid background, no duplicated images

Browse Source 
- 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
2026-07-01 20:44:08 +00:00
parent ba2097c2d6
commit d4690d9f54
3 changed files with 88 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+45 -59
View File
@@ -75,7 +75,7 @@
experience.
</p>
<div class="brands-grid" role="list">
<div class="brands-grid" role="list" id="brands-grid">
<!-- FI-NE (left half) -->
<a
@@ -90,37 +90,30 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<div class="brand-card-image-wrap">
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Natural Cosmetics</span
>
<img
class="brand-card-logo"
src="asset/Fine.svg"
alt="[fi-ne] brand logo"
/>
</div>
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Natural Cosmetics</span
>
<img
class="brand-card-image"
src="asset/banner/1.png"
alt="Brand banner"
style="object-position: left;"
class="brand-card-logo"
src="asset/Fine.svg"
alt="[fi-ne] brand logo"
/>
<div class="brand-card-footer">
<span class="brand-card-tagline">
Clean. Unisex. Uncompromisingly effective.<br />
Made in Germany.
</span>
<span class="brand-card-cta">
finecosmetic.de
<span
class="brand-card-cta-arrow"
aria-hidden="true"
>&#8594;</span
>
</span>
</div>
</div>
<div class="brand-card-spacer" aria-hidden="true"></div>
<div class="brand-card-footer">
<span class="brand-card-tagline">
Clean. Unisex. Uncompromisingly effective.<br />
Made in Germany.
</span>
<span class="brand-card-cta">
finecosmetic.de
<span
class="brand-card-cta-arrow"
aria-hidden="true"
>&#8594;</span
>
</span>
</div>
</a>
@@ -137,37 +130,30 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<div class="brand-card-image-wrap">
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Organic Skin Care</span
>
<img
class="brand-card-logo"
src="asset/Lacueor.svg"
alt="LACUEOR brand logo"
/>
</div>
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Organic Skin Care</span
>
<img
class="brand-card-image"
src="asset/banner/1.png"
alt="Brand banner"
style="object-position: right;"
class="brand-card-logo"
src="asset/Lacueor.svg"
alt="LACUEOR brand logo"
/>
<div class="brand-card-footer">
<span class="brand-card-tagline">
From the quantum realm to your skin.<br />
Made in Berlin &amp; Brandenburg with love.
</span>
<span class="brand-card-cta">
lacueor.com
<span
class="brand-card-cta-arrow"
aria-hidden="true"
>&#8594;</span
>
</span>
</div>
</div>
<div class="brand-card-spacer" aria-hidden="true"></div>
<div class="brand-card-footer">
<span class="brand-card-tagline">
From the quantum realm to your skin.<br />
Made in Berlin &amp; Brandenburg with love.
</span>
<span class="brand-card-cta">
lacueor.com
<span
class="brand-card-cta-arrow"
aria-hidden="true"
>&#8594;</span
>
</span>
</div>
</a>
script.js
+4 -11
View File
@@ -37,19 +37,12 @@
/* ── Banner image selector ──────────────────────────────── */
var bannerPicker = document.getElementById("banner-picker");
var bannerImgs = document.querySelectorAll(".brand-card-image");
if (bannerPicker && bannerImgs.length) {
var brandsGrid = document.getElementById("brands-grid");
if (bannerPicker && brandsGrid) {
bannerPicker.addEventListener("change", function () {
var val = this.value;
bannerImgs.forEach(function (img) {
img.style.opacity = "0";
});
setTimeout(function () {
bannerImgs.forEach(function (img) {
img.src = "asset/banner/" + val + ".png";
img.style.opacity = "1";
});
}, 200);
brandsGrid.style.backgroundImage =
"url(asset/banner/" + val + ".png)";
});
}
})();
style.css
+39 -26
View File
@@ -382,25 +382,11 @@ body::before {
gap: 0;
max-width: 1200px;
margin: 0 auto;
}
.brand-card-image-wrap {
display: flex;
flex-direction: column;
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;
background-image: url("asset/banner/1.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.4s ease;
}
.brand-card {
@@ -413,21 +399,48 @@ body::before {
}
.brand-card--fine {
background: var(--fine-beige);
border-right: 1px solid var(--border);
}
.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);
}
.brand-card-image {
display: block;
width: 100%;
height: auto;
flex-shrink: 0;
object-fit: cover;
transition: opacity 0.4s ease;
display: none;
}
.brand-card-top-accent {