Just a demo. Every section says which layout technique it uses. There are no real kittens for sale, and the form doesn't send anything.
Layout demo with HTML and CSS
Kittens grow up, and not always into what you expected. Scroll down to meet them. Each section on the way shows one way to build a responsive layout, no framework needed.
Meet the kittens
Technique
Fluid layout. clamp() scales text and spacing with the screen, and aspect-ratio keeps space free for the drawing, so nothing jumps while the page loads.
01. Sticky section
Keep scrolling. The heading stays where it is and the cards pile up on top of each other.
Technique
position: sticky. The heading sticks inside its column. Each card sticks a bit lower than the one before, so they stack like a deck of cards.
Big eyes, tiny paws, no responsibilities. Fair enough.
Spoiler: kittens turn into cats. The paws get bigger and the patience gets shorter.
Pick a kitten in the gallery and find out who it grows into.
02. Grid gallery
Point at a kitten, tab to it or tap it to see the grown-up version. Tap again to go back.
Technique
CSS Grid. On phones, repeat(auto-fit, minmax(9.5rem, 1fr)) fits in as many tiles as there's room for. From 768px it's a four-column grid, and the first tile takes up two rows and two columns.
Ginger kitten
Black kitten
White kitten
Grey kitten
Tabby kitten
03. Flexbox card row
Eight cats with eight different characters. Some descriptions are longer on purpose, so you can see the buttons still line up.
Technique
Flexbox. The cards wrap with flex-wrap: wrap and keep one width (flex: 0 1 15rem). justify-content: center keeps a short last row in the middle. Inside each card, margin-top: auto pushes the button to the bottom.
GingerPlayful
Sweet ginger kitten, playful and energetic.
GreyCalm
Calm and affectionate, loves naps in the sun.
TabbyCurious
Curious and adventurous, great for active homes.
WhiteQuiet
Quiet and observant, enjoys gentle petting.
BlackSociable
Sociable and friendly, good with other pets.
CreamShy
Gentle and a bit shy at first. One treat is usually enough, and after that you have a friend who follows you everywhere.
ChocolateChatty
Chatty and bold, follows you from room to room.
Blue-greyRelaxed
Relaxed lap cat, happiest next to a warm radiator.
04. Two-column split
Technique
Two-column split. A grid with two columns, minmax(0, 1.15fr) minmax(0, 1fr). Below 768px it becomes one column, and the order in the HTML stays the same.
Share adorable kitten stories, let you preview how they grow, and make it fun to explore different personalities - all with a sprinkle of Halloween vibes and cobweb flair.
The human behind it
Founder, cat enthusiast, and the human behind this cozy gallery. Iva loves building playful web experiences, teaching languages, and matching people with the purrfect kitten.
When not coding or cuddling whiskered friends, Iva explores new coffee spots and dreams up fresh features for this site.
05. Form grid
Tell us what you like and we'll find the purrfect match. It's a demo, so nothing leaves your browser.
Technique
Form grid. Two columns from 768px. Fields that need the full width get grid-column: 1 / -1. The checks are the browser's own, and screen readers hear the error messages too.