Who’s up for a game of Quidditch? This fun animation features Harry on his broom, chasing that elusive Golden Snitch. See the Pen Single div Harry Potter character icons by Alvaro Montoro Harry Potter by Christina Stephan CSS Grid is used to create the spot-on layout.

Here we have characters representing the various Hogwarts houses – including Harry and Draco Malfoy. It takes a lot of creativity to make something as unique as these character icons in one simple container. When you think about it, there’s a special kind of magic to a single-div snippet. See the Pen CSS Animation:Marauder’s Map by Olivia Ng Single div Harry Potter character icons by Alvaro Montoro

And this being such a magical place, you can even use your device’s microphone to open the map. More than just static text and images, this Marauder’s Map also tracks the movements of Harry and Professor Snape. The term “living document” has an entirely different meaning in the wizarding world. So, ready your wands and prepare for a journey into Hogwarts!ĬSS Animation:Marauder’s Map by Olivia Ng Today, we’ll show you 8 of the most spell-binding code snippets. Everything from character art to complex animations is being showcased. Some are all-too-happy to pay homage to their favorite characters and scenes with a touch of CSS and JavaScript magic. Therefore, it’s no wonder that this wizarding world has captured the imaginations of web developers as well. Not to mention a massive line of collectibles and amusement attractions. The ensuing movies grossed billions of dollars.

The books have been translated into dozens of languages. What started as a series of novels quickly turned into a global phenomenon. Few pop culture icons can match the sheer reach of Harry Potter.

Css harry potter font