Pure CSS masonry layout w/ Flexbox
This is another example of a CSS card layout with animations, designed using CSS and HTML. The cards are given focus animations, flipping animations and pulse animations in a hover events. The images are added into the form with their URLs. The font family for the body is set as 'Open Sans', sans-serif. The color palette for the form is set as $black = #000, $red = #e74c3c, $green = #26a65b, $grey = #6c7a89, $purple= #8e44ad, $blue = #1e8bc3, $white= #ecf0f1 and $darkred = #cf000f. The flipping panel is given a style of backface-visibility as hidden to hide the backface of the panel, a transform-style of preserve-3d, a transition of .25s, and a transform style of transform rotateY(180deg). The pulse animated panel is given a style set of transform-style as preserve-3d, perspective of 1000, transition of transform .25s ease 0s and a hover transformation style of transform scale(1.02).