14 — Content Bands
📊 Chapter 14 — Content Bands
With navigation and the hero in place, this chapter builds three horizontal "bands" that sit between the hero and the About section: a simple trust-signal strip, a responsive services grid, and a high-contrast stats bar. All three lean on the same auto-fit / minmax() grid pattern from Chapter 9 — no media queries needed for any of them.
A simple trust signal between the hero and services. One Flexbox row with the "Trusted by" label on the left and logo names on the right. The logo names are rendered in the border colour (--clr-border, a light grey) rather than actual images — a common placeholder technique during build. They lighten to muted grey on hover, suggesting interactivity without being distracting.
.clients {
padding: 2.5rem 0;
border-top: 1px solid var(--clr-border);
border-bottom: 1px solid var(--clr-border);
}
.clients-inner {
display: flex;
align-items: center;
gap: 2.5rem;
flex-wrap: wrap;
}
.clients-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--clr-muted);
white-space: nowrap;
}
.clients-logos {
display: flex;
gap: 2rem;
flex-wrap: wrap;
align-items: center;
}
.client-logo {
font-weight: 800;
font-size: 1rem;
color: var(--clr-border); /* very light — placeholder look */
letter-spacing: -0.02em;
transition: color 0.2s;
}
.client-logo:hover { color: var(--clr-muted); }
<span> elements with <img> tags (SVG logos, filter: grayscale(1), opacity: 0.4) when you have real client logos. The CSS structure stays identical — you're just swapping text for images.The services section uses repeat(auto-fit, minmax(260px, 1fr)) — the same responsive grid pattern from Chapter 9. No media queries needed: the browser works out how many columns fit, moving from 1 to 2 to 3 columns automatically as the viewport grows. Each card has a hidden ::before pseudo-element — a 3px blue line at the top — that slides in from the left on hover using transform: scaleX(). This is the same performance-friendly animation technique from Chapter 10.
.services {
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--clr-bg-alt); /* slight off-white — visual break */
}
.services-header { margin-bottom: 3rem; }
/* ── Responsive auto-fit grid ────────────────────── */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
}
/* ── Card — with hidden top-border pseudo-element ─── */
.s-card {
background: #fff;
border: 1px solid var(--clr-border);
border-radius:var(--radius);
padding: 2rem;
position: relative; /* ::before is positioned relative to this */
overflow: hidden; /* clips ::before when scaleX(0) */
transition: transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
/* Top-edge reveal bar — hidden by default */
.s-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--clr-accent);
transform: scaleX(0); /* invisible: scaled to zero width */
transform-origin: left; /* grows from the left edge */
transition: transform 0.3s ease;
}
.s-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
border-color: rgba(79, 142, 247, 0.3);
}
.s-card:hover::before {
transform: scaleX(1); /* slides in on hover */
}
.s-icon {
width: 48px;
height: 48px;
border-radius: 10px;
background: rgba(79, 142, 247, 0.1);
display: flex;
align-items: center;
justify-content:center;
font-size: 1.4rem;
margin-bottom: 1.25rem;
}
.s-card h3 {
font-size: 1.05rem;
font-weight: 700;
color: var(--clr-dark);
margin-bottom:0.6rem;
}
.s-card p {
color: var(--clr-muted);
font-size: 0.9rem;
line-height: 1.65;
}
Brand Strategy
From positioning to visual identity. We help you own your place in the market.
UI / UX Design
Intuitive interfaces that guide users to the actions that matter most.
Web Development
Fast, accessible builds in React, Next.js or your stack of choice.
overflow: hidden on the card? The ::before pseudo-element starts at scaleX(0) — technically zero width, but it still occupies space at its full width at the top of the card. Without overflow: hidden, this invisible element could extend outside the card's border-radius corners. Clipping it inside the card keeps the animation clean.
The stats bar provides a strong visual contrast between the light services section above and the light about section below. Its dark navy background (--clr-navy) paired with the blue accent number creates a focused, high-impact moment. The grid uses the same auto-fit / minmax() pattern as the services — four stats on a wide screen, two-by-two on tablet, stacked on mobile with no media queries required.
.stats {
background: var(--clr-navy);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 2rem;
text-align: center;
}
.stat-num {
display: block;
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 800;
color: var(--clr-accent);
line-height: 1;
margin-bottom:0.4rem;
}
.stat-label {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.07em;
}
--clr-accent on --clr-navy meets WCAG AA contrast (4.5:1 for normal text). The values in this project pass — blue #4f8ef7 on navy #111827 gives a ratio of ~5.2:1. If you change the accent colour, verify contrast with a tool like WebAIM Contrast Checker.
::before checkmarks.