Magic: The Gathering card replica in HMTL and CSS

License

All mana, tap, images and card symbols are copyright and owned by Wizards of the coast.

Goal

I wanted to practice and improve my CSS skills so I decided to replicate a Magic: The Gathering card in pure HTML and CSS. Specifically, the card I chose is Oath of Nissa from the expansion Oath of the Gatewatch released in January 22, 2016. Why? Because artistically is one of my favourites!

Please click on the link for information about it from the official source.

Tools used

• Brackets: text editor
• Gulp: task-automation
• Keyrune for the expansion font
• Mana font
• Gimp: image editing

Original

Result