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

Remove overlays, put text above/below banner image

Browse Source 
- Removed gradient overlays from brand cards
- Removed shared background banner approach
- Each card now has its own banner <img> showing the relevant half
  (object-position: left for FI-NE, right for LACUEOR)
- Logo + eyebrow sit above the image, tagline + CTA below
- Dropdown now updates both card images simultaneously
- Cleaned up orphaned CSS (.brand-card-overlay, .brand-card-name, .brands-banner-img)
- Responsive padding for header/footer sections
This commit is contained in:
Oliver
2026-07-01 20:32:44 +00:00
parent b1cce5ef5e
commit ba2097c2d6
3 changed files with 105 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+61 -56
View File
@@ -76,13 +76,6 @@
</p>
<div class="brands-grid" role="list">
<!-- 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
@@ -97,31 +90,37 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<div
class="brand-card-overlay"
aria-hidden="true"
></div>
<div class="brand-card-content">
<span class="brand-card-eyebrow"
>Premium Natural Cosmetics</span
>
<img
class="brand-card-logo"
src="asset/Fine.svg"
alt="[fi-ne] brand logo"
/>
<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
<div class="brand-card-image-wrap">
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Natural Cosmetics</span
>
</span>
<img
class="brand-card-logo"
src="asset/Fine.svg"
alt="[fi-ne] brand logo"
/>
</div>
<img
class="brand-card-image"
src="asset/banner/1.png"
alt="Brand banner"
style="object-position: left;"
/>
<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>
</a>
@@ -138,35 +137,41 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<div
class="brand-card-overlay"
aria-hidden="true"
></div>
<div class="brand-card-content">
<span class="brand-card-eyebrow"
>Premium Organic Skin Care</span
>
<img
class="brand-card-logo"
src="asset/Lacueor.svg"
alt="LACUEOR brand logo"
/>
<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
<div class="brand-card-image-wrap">
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Organic Skin Care</span
>
</span>
<img
class="brand-card-logo"
src="asset/Lacueor.svg"
alt="LACUEOR brand logo"
/>
</div>
<img
class="brand-card-image"
src="asset/banner/1.png"
alt="Brand banner"
style="object-position: right;"
/>
<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>
</a>
</div>
</div>
<!-- Banner image selector -->
<div class="banner-selector">
<label for="banner-picker">Banner:</label>