A little curiosity. A whole city.
Room for every idea.
Flexbox, Grid and a few deliberately advanced layout experiments.
Flex container and items
Main-axis alignment uses justify-content; cross-axis alignment uses align-items. Flex items can grow, shrink and set a basis.
Grid tracks, items and named areas
Grid uses rows and columns. Named areas place content; gap separates tracks. Preserve reading order when changing visual order.
3D transforms
Perspective controls depth. A checkbox triggers the flip without hover. The cube and carousel are static geometry demonstrations.
Vertical navigation, sticky and pagination
Sticky stays within its scrolling container. Pagination links navigate to real separate pages.
Scroll inside this box to see the navigation stay near its top.
More sample content below.
Responsive float grid and framework comparison
A percentage float grid demonstrates older responsive layouts. Frameworks provide premade classes; this project stays plain CSS.
Compare this hand-written layout with the framework and template chapters in the teacher checklist. No framework is required or loaded.