TNTHNGVDYNND
A personal playground for recapping and experimenting with pure HTML & CSS — no frameworks, no build tools, just the basics done well.
Pseudo-Elements
The card corners use ::before (gradient tab) and
::after (dark overlay) — zero extra HTML needed.
Each card's tab position shifts via :nth-child() selectors.
Tab: Top-Left
::before positioned at top
Tab: Bottom-Left
::before positioned at bottom
Tab: Top-Left
::before positioned at top
CSS Grid & Responsive
auto-fit + minmax() = responsive grid
with zero media queries. clamp() handles fluid font sizes.
auto-fit
Fills available columns
minmax()
Defines column constraints
clamp()
Fluid typography sizing
Filters & Transitions
Images start as grayscale(100%) and transition to full color on hover.
The gradient tab scales up simultaneously — two animations, one hover.
grayscale()
Hover to reveal color
transition
0.5s ease timing
scale()
Tab grows on hover
Background Watermark
A massive <span> with position: absolute,
z-index: -1, and clamp() sizing.
It sits behind content as a subtle branding element.
position: absolute
Removed from flow
z-index: -1
Behind all content
aria-hidden
Skipped by screen readers
CSS Variables
Colors, spacing, and transitions live in :root as custom properties.
One change propagates everywhere — easy theming and maintenance.
--bg-primary
#171717
--accent-start
#f2709c
--accent-end
#ff9472
--text-muted
#a3a3a3
--card-bg
#232526
--text-primary
#ffffff
Container Queries
Unlike media queries (viewport-based), container queries let components respond to their own container size. Resize the browser to see.
Small Container
Stacked layout when narrow
Medium Container
Side-by-side when wider
Large Container
Full detail view
