Field Notes
A compact notebook for sketches, observations, and trail plans.
- Weather-resistant cover
- 120 recycled pages
What this page combines
semantic HTML
flex: 1 1 14rem
Flexbox wrapping
border-box
rem + %
min/max sizing
hover + active
first/nth-child
relative + absolute
z-index
special card patterns
The default card remains complete without hover. The featured badge is anchored to its relative card, while structural pseudo-classes and interaction states add visual emphasis without hiding content.
Canvas Pack
The featured everyday pack with space for work and short trips.
- Padded laptop sleeve
- 24-litre capacity
Travel Mug
A double-wall mug that keeps a drink warm during the morning commute.
- 350 ml capacity
- Leak-resistant lid
Why these choices?
border-box keeps padding inside each card. flex: 1 1 14rem gives every card a 14rem starting size, lets it grow into spare space, and lets it shrink until its minimum size; wrapping forms a new row when needed. The card establishes the badge’s containing block, and a small z-index keeps the badge above the image.