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
+23 -18
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,11 +90,8 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<div
class="brand-card-overlay"
aria-hidden="true"
></div>
<div class="brand-card-content">
<div class="brand-card-image-wrap">
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Natural Cosmetics</span
>
@@ -110,6 +100,14 @@
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.
@@ -123,6 +121,7 @@
>
</span>
</div>
</div>
</a>
<!-- LACUEOR (right half) -->
@@ -138,11 +137,8 @@
class="brand-card-top-accent"
aria-hidden="true"
></div>
<div
class="brand-card-overlay"
aria-hidden="true"
></div>
<div class="brand-card-content">
<div class="brand-card-image-wrap">
<div class="brand-card-header">
<span class="brand-card-eyebrow"
>Premium Organic Skin Care</span
>
@@ -151,6 +147,14 @@
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.
@@ -164,9 +168,10 @@
>
</span>
</div>
</a>
</div>
</a>
</div>
<!-- Banner image selector -->
<div class="banner-selector">
<label for="banner-picker">Banner:</label>
script.js
+9 -5
View File
@@ -37,14 +37,18 @@
/* ── Banner image selector ──────────────────────────────── */
var bannerPicker = document.getElementById("banner-picker");
var bannerImg = document.getElementById("brands-banner");
if (bannerPicker && bannerImg) {
var bannerImgs = document.querySelectorAll(".brand-card-image");
if (bannerPicker && bannerImgs.length) {
bannerPicker.addEventListener("change", function () {
var val = this.value;
bannerImg.style.opacity = "0";
bannerImgs.forEach(function (img) {
img.style.opacity = "0";
});
setTimeout(function () {
bannerImg.src = "asset/banner/" + val + ".png";
bannerImg.style.opacity = "1";
bannerImgs.forEach(function (img) {
img.src = "asset/banner/" + val + ".png";
img.style.opacity = "1";
});
}, 200);
});
}
style.css
+35 -81
View File
@@ -377,30 +377,30 @@ body::before {
}
.brands-grid {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 1200px;
margin: 0 auto;
min-height: 560px;
overflow: hidden;
}
/* Shared banner image behind both brand cards */
.brands-banner-img {
position: absolute;
inset: 0;
width: 100%;
.brand-card-image-wrap {
display: flex;
flex-direction: column;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
width: 100%;
}
.brands-grid:hover .brands-banner-img {
transform: scale(1.04);
.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 {
@@ -408,48 +408,26 @@ body::before {
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
min-height: 560px;
text-decoration: none;
cursor: pointer;
}
.brand-card--fine {
position: relative;
z-index: 1;
background: rgba(232, 224, 208, 0.82);
background: var(--fine-beige);
border-right: 1px solid var(--border);
}
.brand-card--lacueor {
position: relative;
z-index: 1;
background: rgba(26, 24, 20, 0.78);
background: var(--lacueor-dark);
}
.brand-card-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.brand-card--fine .brand-card-overlay {
background: linear-gradient(
to bottom,
rgba(232, 224, 208, 0.2) 0%,
rgba(232, 224, 208, 0.6) 50%,
rgba(232, 224, 208, 0.92) 100%
);
}
.brand-card--lacueor .brand-card-overlay {
background: linear-gradient(
to bottom,
rgba(14, 12, 10, 0.1) 0%,
rgba(14, 12, 10, 0.55) 50%,
rgba(14, 12, 10, 0.93) 100%
);
.brand-card-image {
display: block;
width: 100%;
height: auto;
flex-shrink: 0;
object-fit: cover;
transition: opacity 0.4s ease;
}
.brand-card-top-accent {
@@ -485,20 +463,12 @@ body::before {
opacity: 1;
}
.brand-card-content {
position: relative;
z-index: 2;
width: 100%;
padding: 48px 52px;
text-align: center;
}
.brand-card-eyebrow {
font-size: 8px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
margin-bottom: 18px;
margin-bottom: 14px;
display: block;
}
@@ -517,9 +487,7 @@ body::before {
min-width: 110px;
height: auto;
object-fit: contain;
margin: 0 auto 16px;
position: relative;
z-index: 2;
margin: 0 auto;
transition: opacity var(--transition);
}
@@ -536,24 +504,6 @@ body::before {
opacity: 1;
}
.brand-card-name {
font-family: var(--font-serif);
font-size: clamp(36px, 4vw, 58px);
font-weight: 300;
letter-spacing: 0.08em;
line-height: 1;
margin-bottom: 14px;
display: block;
}
.brand-card--fine .brand-card-name {
color: var(--charcoal);
}
.brand-card--lacueor .brand-card-name {
color: var(--cream);
}
.brand-card-tagline {
font-family: var(--font-serif);
font-size: 15px;
@@ -1036,8 +986,12 @@ footer {
border-bottom: 1px solid var(--border);
}
.brand-card {
min-height: 480px;
.brand-card-header {
padding: 24px 28px 16px;
}
.brand-card-footer {
padding: 16px 28px 32px;
}
.b2b-benefits {
@@ -1084,12 +1038,12 @@ footer {
padding: 0;
}
.brand-card-content {
padding: 36px 28px;
.brand-card-header {
padding: 20px 24px 14px;
}
.brands-grid {
min-height: 360px;
.brand-card-footer {
padding: 14px 24px 28px;
}
.banner-selector {