Brutalist Text-Only — Playground

{CF} CodeFronts Back to CSS Hero Sections Brutalist Text-Only Pure CSS

Edit any tab — preview updates live

.hs-bru {
  width: 100%;
  min-height: clamp(220px, 28vh, 100vh);
  padding: clamp(20px, 4vh, 60px) clamp(20px, 5vw, 50px);
  background: #f0ebe0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  font-family: 'Courier New', monospace;
  color: #0a0a0a;
}
.hs-bru-row {
  display: flex; justify-content: space-between;
  font-size: clamp(9px, 1.3vw, 12px);
  letter-spacing: 0.12em; text-transform: uppercase;
  border-top: 2px solid #0a0a0a; border-bottom: 2px solid #0a0a0a;
  padding: 4px 0;
}
.hs-bru-h {
  margin: clamp(8px, 2vh, 24px) 0;
  font-size: clamp(34px, 9vw, 110px);
  font-weight: 900; line-height: 0.9;
  letter-spacing: -0.04em;
  text-shadow: 6px 6px 0 #ff5733;
  text-transform: uppercase;
}
.hs-bru-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  font-size: clamp(9px, 1.3vw, 12px);
  letter-spacing: 0.08em;
}
.hs-bru-grid span {
  border: 1.5px solid #0a0a0a;
  padding: 6px 10px;
  text-align: center;
}
.hs-bru-cta {
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  color: #0a0a0a; text-decoration: none; align-self: flex-start;
  border: 2px solid #0a0a0a; padding: 8px 16px;
  background: #ff5733; color: #fff;
  transition: transform 0.1s, box-shadow 0.1s;
  box-shadow: 4px 4px 0 #0a0a0a;
}
.hs-bru-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0a0a0a; color: #fff; }

Live preview Ready