Kitchen Sink 5 — Structure and effects
Gradient overlaid on an image, 420px min height, waves bottom divider flipped, text shadow on the heading, fade + slide entrance animations.
Equal-height columns, gutter 1
Row with zero gutter, white card with a preset5 shadow, navy left column with its own padding and left-only radius. The section behind uses CSS parallax, a polka-dot pattern and a diagonal-pills mask.
Column with a cover background image; this text sits in a translucent white box.
Gutter 4, red column.
Dotted column border.
Gradient column.
Hover lift column.
Specialty section — sidebar column on the left, nested rows on the right.
Inner row A1
Inner row A2
Inner row A3
Inner row B2 next to an image.
Section with an MP4 video background
Bounce
animation_style bounce from top.
Flip
animation_style flip from left.
Fold
animation_style fold from right.
Roll
animation_style roll looping.
Rotate -4deg, scale 90%, sepia 60%, multiply blend.
Skew 6deg, hue rotate 180deg, 85% opacity, blur on hover.
Translated 20px/-20px, border and shadow change on hover.
Sticky bar — sticks to the top with a 20px offset until the end of this section, turns red and gains a shadow while stuck (z-index 50).
Filler paragraph one so the sticky element has something to scroll past. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Filler paragraph two. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Filler paragraph three. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Filler paragraph four. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Filler paragraph five. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row with 300px min height, hidden overflow and two absolutely positioned modules (badge top-right, label bottom-left) plus one with a negative margin.
Absolute label
Whole-module link (new tab), custom CSS on main element, :before and :after, custom ID and two classes.
Scroll effects: vertical motion, fade in, rotate.
Hidden on tablet only (disabled_on=”off|on|off”).
Desktop only (hidden phone + tablet).
Section with a custom 900px width, 20px radius, 2px navy border, preset6 shadow and inner shadow. Row at 100% width.
Full-bleed row with an image column on the left (empty column, 360px min height) and padded text on the right.