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

Replace per-card product images with shared banner + dropdown selector

Browse Source 
- Removed individual Fine.webp / Lacuoer.jpg from brand cards
- Added shared banner image (asset/banner/1.png) spanning both cards
- Added dropdown selector (Banner 1–9) to switch the displayed image
- Made card backgrounds semi-transparent so the banner shows through
- Added hover zoom effect on the shared banner
- Preserved all brand links, overlays, and content layouts
This commit is contained in:
Oliver
2026-07-01 20:25:15 +00:00
parent c1fe2aa583
commit b1cce5ef5e
3 changed files with 117 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+26 -12
View File
@@ -76,7 +76,15 @@
</p>
<div class="brands-grid" role="list">
<!-- FI-NE -->
<!-- Shared banner image spanning both cards -->
<img
class="brands-banner-img"
id="brands-banner"
src="asset/banner/1.png"
alt="Brand banner"
/>
<!-- FI-NE (left half) -->
<a
class="brand-card brand-card--fine"
href="https://finecosmetic.de"
@@ -89,11 +97,6 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<img
class="brand-card-image"
src="asset/Fine.webp"
alt="[fi-ne] Deodorant Cream Vetiver Geranium product"
/>
<div
class="brand-card-overlay"
aria-hidden="true"
@@ -122,7 +125,7 @@
</div>
</a>
<!-- LACUEOR -->
<!-- LACUEOR (right half) -->
<a
class="brand-card brand-card--lacueor"
href="https://lacueor.com"
@@ -135,11 +138,6 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<img
class="brand-card-image"
src="asset/Lacuoer.jpg"
alt="LACUEOR Staub luxury skincare product on crystal"
/>
<div
class="brand-card-overlay"
aria-hidden="true"
@@ -169,6 +167,22 @@
</a>
</div>
<!-- Banner image selector -->
<div class="banner-selector">
<label for="banner-picker">Banner:</label>
<select id="banner-picker">
<option value="1" selected>Banner 1</option>
<option value="2">Banner 2</option>
<option value="3">Banner 3</option>
<option value="4">Banner 4</option>
<option value="5">Banner 5</option>
<option value="6">Banner 6</option>
<option value="7">Banner 7</option>
<option value="8">Banner 8</option>
<option value="9">Banner 9</option>
</select>
</div>
<p class="brands-notice">
Looking for consumer
products?&nbsp;&nbsp;&#8212;&nbsp;&nbsp; Visit&nbsp;<a