Playing Cards Layout

A responsive playing-card layout built with HTML and CSS, demonstrating flexbox positioning, symmetry, and reusable utility classes.

Live Demo

https://heisray04.github.io/playing-cards/

Features

• Five responsive playing cards
• Symmetrical pip placement
• Utility class for rotated bottom values
• Flexible card layout with wrapping
• Mobile-friendly design
• Clean visual hierarchy

Technologies Used

• HTML5
• CSS3
• Flexbox
• CSS Transforms
• Media Queries

What I Learned

• Building symmetrical layouts with Flexbox
• Positioning elements using auto margins
• Using transforms for rotation and alignment
• Creating reusable utility classes
• Designing responsive card components

Status

Completed ✔

Author

Created by Raymond (Heisray04)