One of the best ways to learn is to find fun designs on existing websites and to try and recreate them, so with that in mind, we're taking the animated card design from the Top Games section over at https://popdog.com/ and seeing if we can recreate it with only HTML and CSS! /// LINKS Clip-path maker: https://bennettfeely.com/clippy/ UI Faces: https://uifaces.co/ /// Timestamps 00:00 - Introduction 01:17 - Overview 02:18 - HTML 13:57 - CSS basic setup 15:35 - styling the front 28:24 - front and background hover 38:15 - animating the game name 42:43 - the rank 46:33 - styling the back 1:00:14 - fixing the spacing 1:05:31 - fade-up and in for the back #css #transitions #animations -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK --- Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: null 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://code.visualstudio.com/ --- I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell --- And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!