Arrow linked Locations

This pen's layout is flex-box based. It is mobile first meaning that a set of min-width (not MAX-width) media queries makes sure that it has the proper styles on bigger screens. The defaults look good on small screens.

The part that really caught my eyes here is the link-indicator animations. Upon hover, the accent "slash" becomes flat. Soon after a pair of pseudo-elements spins out to create an arrow focused pointing towards the link.

This idea was recreated from the wonderfully animal-friendly team over at Round Hill Pacific 💝🏆🚀