Animated Card with HTML & CSS - Tutorial

Learn how to recreate an animated card design from the Top Games section of popdog.com using only HTML and CSS in this comprehensive tutorial video. Follow along as the instructor guides you through the process, starting with the HTML structure and progressing to CSS styling and animations. Master techniques for styling the front and back of the card, creating hover effects, animating game names, and implementing fade-up transitions. Gain practical experience by working on a real-world design example, enhancing your web development skills in HTML and CSS. Includes helpful resources like a clip-path maker and UI Faces, as well as detailed timestamps for easy navigation through different sections of the tutorial.

- Introduction

- Overview

- HTML

- CSS basic setup

- styling the front

- front and background hover

- animating the game name

- the rank

- styling the back

- fixing the spacing

- fade-up and in for the back