This features section HTML CSS tutorial shows you how to build a bold neo-brutalist layout with a large display heading, a description, and a two-column card grid. Each card gets a different background color using the :nth-child selector, so the four cards cycle through yellow, white, red, and black. The cards use a dark border and an offset box-shadow to give them that neo-brutalist feel, and the Anton font adds to the heavy typographic style.
Final output:
Built for
people who
ship things.
Four core capabilities. All of them battle-tested in production. None of them are AI-powered roadmaps or gamification streaks.
Zero Fluff
Task Engine
Create, assign, and ship tasks in under 5 seconds. No mandatory fields, no onboarding tours, no enterprise nonsense.
Real-Time
Sync
Changes propagate in under 50ms across every client. Works offline, reconciles automatically when reconnected.
Keyboard-
First
Every action reachable by keyboard shortcut. Power users never need to touch a mouse during a sprint.
Audit Log
for Everything
Immutable, append-only history on every object. Know exactly who changed what, when, and why.
Steps for Features Section HTML CSS:
1. First, link the Anton and Space Mono fonts from Google Fonts in the head.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">Let’s start with a section element with the class what-it-does-section. Inside it, add a .section-container div with a .what-it-does-header and a .what-it-does-cards-wrapper div.
<section class="what-it-does-section">
<div class="section-container">
<div class="what-it-does-header"></div>
<div class="what-it-does-cards-wrapper"></div>
</div>
</section>Then reset margins, define the Anton font and near-black color as CSS variables on :root, and set Space Mono as the font family. Give the section a warm off-white background and use clamp() on the padding so it scales with the screen. Center .section-container with the margin inline property set to auto and a max-width.
* {
margin: 0;
box-sizing: border-box;
}
:root {
--heading-font: "Anton", sans-serif;
--black: hsl(0, 0%, 4%);
}
body {
font-family: "Space Mono", monospace;
}
.what-it-does-section {
padding: clamp(2.5rem, calc(1rem + 4.44vw), 5rem) clamp(1.5rem, calc(1rem + 4vw), 6rem);
background-color: hsl(60, 20%, 95%);
color: var(--black);
}
.what-it-does-section .section-container {
max-width: 80rem;
margin-inline: auto;
}2. Fill in .what-it-does-header with a .what-it-does-header-left div containing the label and heading, and a .what-it-does-header-right div containing the description paragraph.
<div class="what-it-does-header">
<div class="what-it-does-header-left">
<span class="section-label">What it does</span>
<h2>Built for <br> people who <br> ship things.</h2>
</div>
<div class="what-it-does-header-right">
<p>Four core capabilities. All of them battle-tested in production. None of them are AI-powered roadmaps or gamification streaks.</p>
</div>
</div>Use flexbox with the justify content property set to space-between on .what-it-does-header so the heading and description sit at opposite ends. On desktop, set the align self property to end on the right side so the description aligns to the bottom of the heading.
.what-it-does-section .what-it-does-header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem 4rem;
}Output:
Built for
people who
ship things.
Four core capabilities. All of them battle-tested in production. None of them are AI-powered roadmaps or gamification streaks.
3. Style the section label with a small bold uppercase font and a dark border so it reads like a tag or badge. Then style the heading with the Anton font and use clamp() on the font size so it scales smoothly between screen sizes. Set the line height property to 1 and uppercase text to give it that bold condensed feel.
.what-it-does-section .section-label {
font-weight: 700;
font-size: .75rem;
line-height: 1.3;
letter-spacing: 1.12px;
text-transform: uppercase;
padding: .25rem .375rem;
border: 2px solid var(--black);
}
.what-it-does-section .what-it-does-header-left h2 {
margin-top: 1rem;
font-family: var(--heading-font);
font-size: clamp(2.5rem, calc(1rem + 6vw), 5rem);
line-height: 1;
text-transform: uppercase;
}Style the description with a smaller font size and a muted gray color since it’s supporting content rather than the main focus. Cap the width so it doesn’t stretch too wide on large screens.
.what-it-does-section .what-it-does-header-right {
max-width: 20rem;
}
@media screen and (min-width: 576px) {
.what-it-does-section .what-it-does-header-right {
align-self: end;
justify-self: end;
}
}
.what-it-does-section .what-it-does-header-right p {
font-size: .875rem;
line-height: 1.5;
color: hsl(0, 0%, 33%);
}Output:
Built for
people who
ship things.
Four core capabilities. All of them battle-tested in production. None of them are AI-powered roadmaps or gamification streaks.
4. Fill in .what-it-does-cards-wrapper with four .what-it-does-card divs. Each card has a number span, a heading, and a description paragraph.
<div class="what-it-does-cards-wrapper">
<div class="what-it-does-card">
<span>01</span>
<h3>Zero Fluff <br>
Task Engine</h3>
<p>Create, assign, and ship tasks in under 5 seconds. No mandatory
fields, no onboarding tours, no enterprise nonsense.</p>
</div>
<div class="what-it-does-card">
<span>02</span>
<h3>Real-Time <br>
Sync </h3>
<p>Changes propagate in under 50ms across every client. Works
offline, reconciles automatically when reconnected.</p>
</div>
<div class="what-it-does-card">
<span>03</span>
<h3>Keyboard-<br>
First</h3>
<p>Every action reachable by keyboard shortcut. Power users never
need to touch a mouse during a sprint.</p>
</div>
<div class="what-it-does-card">
<span>04</span>
<h3>Audit Log <br>
for Everything</h3>
<p>Immutable, append-only history on every object. Know exactly
who changed what, when, and why.</p>
</div>
</div>Use a two-column grid on .what-it-does-cards-wrapper. On mobile, collapse to a single column. Use clamp() on the padding inside each card so it scales with the screen. Add a dark border and a bottom-right box-shadow on each card to give them a neo-brutalist feel.
.what-it-does-section .what-it-does-cards-wrapper {
margin-top: 3.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media screen and (max-width: 768px) {
.what-it-does-section .what-it-does-cards-wrapper {
grid-template-columns: 1fr;
margin-top: 2rem;
}
}
.what-it-does-section .what-it-does-card {
padding: clamp(1rem, calc(1rem + 1.11vw), 2rem);
background-color: hsl(54, 100%, 50%);
border: 3px solid var(--black);
box-shadow: 6px 6px 0px 0px var(--black);
}Output:
Built for
people who
ship things.
Four core capabilities. All of them battle-tested in production. None of them are AI-powered roadmaps or gamification streaks.
Zero Fluff
Task Engine
Create, assign, and ship tasks in under 5 seconds. No mandatory fields, no onboarding tours, no enterprise nonsense.
Real-Time
Sync
Changes propagate in under 50ms across every client. Works offline, reconciles automatically when reconnected.
Keyboard-
First
Every action reachable by keyboard shortcut. Power users never need to touch a mouse during a sprint.
Audit Log
for Everything
Immutable, append-only history on every object. Know exactly who changed what, when, and why.
5. Each card gets a different background color using :nth-child. The first card is yellow by default, so it’s already covered. The second card is white, the third is red with light text, and the fourth is near-black with light text. For the red and dark cards, also set the description paragraph color to a semi-transparent white so it feels softer than fully white text.
.what-it-does-section .what-it-does-card:nth-child(2) {
background-color: hsl(0, 0%, 100%);
}
.what-it-does-section .what-it-does-card:nth-child(3) {
background-color: hsl(0, 100%, 60%);
color: hsl(0, 0%, 100%);
}
.what-it-does-section .what-it-does-card:nth-child(3) p {
color: hsla(0, 0%, 100%, 0.8);
}
.what-it-does-section .what-it-does-card:nth-child(4) {
background-color: var(--black);
color: hsl(0, 0%, 100%);
}
.what-it-does-section .what-it-does-card:nth-child(4) p {
color: hsla(0, 0%, 100%, 0.8);
}Output:
Built for
people who
ship things.
Four core capabilities. All of them battle-tested in production. None of them are AI-powered roadmaps or gamification streaks.
Zero Fluff
Task Engine
Create, assign, and ship tasks in under 5 seconds. No mandatory fields, no onboarding tours, no enterprise nonsense.
Real-Time
Sync
Changes propagate in under 50ms across every client. Works offline, reconciles automatically when reconnected.
Keyboard-
First
Every action reachable by keyboard shortcut. Power users never need to touch a mouse during a sprint.
Audit Log
for Everything
Immutable, append-only history on every object. Know exactly who changed what, when, and why.
6. Style the number span, heading, and description inside each card. Use the Anton font on the heading and clamp() on the font size so it scales smoothly. Add some top and bottom margin using the margin block property to space the heading away from the number above and the description below.
.what-it-does-section .what-it-does-card span {
font-weight: 700;
font-size: .75rem;
line-height: 1.3;
letter-spacing: 1.2px;
}
.what-it-does-section .what-it-does-card h3 {
font-family: var(--heading-font);
font-size: clamp(1.75rem, calc(1rem + 3vw), 3rem);
line-height: 1.25;
text-transform: uppercase;
margin-block: 1.5rem 1.125rem;
}
.what-it-does-section .what-it-does-card p {
font-size: .875rem;
line-height: 1.6;
color: hsl(0, 0%, 20%);
}Output:
Built for
people who
ship things.
Four core capabilities. All of them battle-tested in production. None of them are AI-powered roadmaps or gamification streaks.
Zero Fluff
Task Engine
Create, assign, and ship tasks in under 5 seconds. No mandatory fields, no onboarding tours, no enterprise nonsense.
Real-Time
Sync
Changes propagate in under 50ms across every client. Works offline, reconciles automatically when reconnected.
Keyboard-
First
Every action reachable by keyboard shortcut. Power users never need to touch a mouse during a sprint.
Audit Log
for Everything
Immutable, append-only history on every object. Know exactly who changed what, when, and why.
Final Output Code for Features Section HTML CSS:
Head
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">HTML
<section class="what-it-does-section">
<div class="section-container">
<div class="what-it-does-header">
<div class="what-it-does-header-left">
<span class="section-label">What it does</span>
<h2>Built for <br>
people who <br>
ship things.</h2>
</div>
<div class="what-it-does-header-right">
<p>Four core capabilities. All of them
battle-tested in production. None of
them are AI-powered roadmaps or
gamification streaks.</p>
</div>
</div>
<div class="what-it-does-cards-wrapper">
<div class="what-it-does-card">
<span>01</span>
<h3>Zero Fluff <br>
Task Engine</h3>
<p>Create, assign, and ship tasks in under 5 seconds. No mandatory
fields, no onboarding tours, no enterprise nonsense.</p>
</div>
<div class="what-it-does-card">
<span>02</span>
<h3>Real-Time <br>
Sync </h3>
<p>Changes propagate in under 50ms across every client. Works
offline, reconciles automatically when reconnected.</p>
</div>
<div class="what-it-does-card">
<span>03</span>
<h3>Keyboard-<br>
First</h3>
<p>Every action reachable by keyboard shortcut. Power users never
need to touch a mouse during a sprint.</p>
</div>
<div class="what-it-does-card">
<span>04</span>
<h3>Audit Log <br>
for Everything</h3>
<p>Immutable, append-only history on every object. Know exactly
who changed what, when, and why.</p>
</div>
</div>
</div>
</section>CSS
* {
margin: 0;
box-sizing: border-box;
}
:root {
--heading-font: "Anton", sans-serif;
--black: hsl(0, 0%, 4%);
}
body {
font-family: "Space Mono", monospace;
}
.what-it-does-section {
padding: clamp(2.5rem, calc(1rem + 4.44vw), 5rem) clamp(1.5rem, calc(1rem + 4vw), 6rem);
background-color: hsl(60, 20%, 95%);
color: var(--black);
}
.what-it-does-section .section-container {
max-width: 80rem;
margin-inline: auto;
}
.what-it-does-section .what-it-does-header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem 4rem;
}
.what-it-does-section .section-label {
font-weight: 700;
font-size: .75rem;
line-height: 1.3;
letter-spacing: 1.12px;
text-transform: uppercase;
padding: .25rem .375rem;
border: 2px solid var(--black);
}
.what-it-does-section .what-it-does-header-left h2 {
margin-top: 1rem;
font-family: var(--heading-font);
font-size: clamp(2.5rem, calc(1rem + 6vw), 5rem);
line-height: 1;
text-transform: uppercase;
}
.what-it-does-section .what-it-does-header-right {
max-width: 20rem;
}
@media screen and (min-width: 576px) {
.what-it-does-section .what-it-does-header-right {
align-self: end;
justify-self: end;
}
}
.what-it-does-section .what-it-does-header-right p {
font-size: .875rem;
line-height: 1.5;
color: hsl(0, 0%, 33%);
}
.what-it-does-section .what-it-does-cards-wrapper {
margin-top: 3.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
@media screen and (max-width: 768px) {
.what-it-does-section .what-it-does-cards-wrapper {
grid-template-columns: 1fr;
margin-top: 2rem;
}
}
.what-it-does-section .what-it-does-card {
padding: clamp(1rem, calc(1rem + 1.11vw), 2rem);
background-color: hsl(54, 100%, 50%);
border: 3px solid var(--black);
box-shadow: 6px 6px 0px 0px var(--black);
}
.what-it-does-section .what-it-does-card:nth-child(2) {
background-color: hsl(0, 0%, 100%);
}
.what-it-does-section .what-it-does-card:nth-child(3) {
background-color: hsl(0, 100%, 60%);
color: hsl(0, 0%, 100%);
}
.what-it-does-section .what-it-does-card:nth-child(3) p {
color: hsla(0, 0%, 100%, 0.8);
}
.what-it-does-section .what-it-does-card:nth-child(4) {
background-color: var(--black);
color: hsl(0, 0%, 100%);
}
.what-it-does-section .what-it-does-card:nth-child(4) p {
color: hsla(0, 0%, 100%, 0.8);
}
.what-it-does-section .what-it-does-card span {
font-weight: 700;
font-size: .75rem;
line-height: 1.3;
letter-spacing: 1.2px;
}
.what-it-does-section .what-it-does-card h3 {
font-family: var(--heading-font);
font-size: clamp(1.75rem, calc(1rem + 3vw), 3rem);
line-height: 1.25;
text-transform: uppercase;
margin-block: 1.5rem 1.125rem;
}
.what-it-does-section .what-it-does-card p {
font-size: .875rem;
line-height: 1.6;
color: hsl(0, 0%, 20%);
}If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.
