An interactive flip card web app for ice breaker activities in training and classroom sessions.
Ice Breaker is a simple, engaging web app designed for trainers and educators. Learners tap colorful cards to reveal random questions that spark conversation and build rapport in group settings. No accounts, no setup — just open and go.
- 9 flip cards in a 3x3 grid with colorful gradient fronts, icons, and labels
- Smooth 3D flip animation using CSS transforms
- 20 random ice breaker questions with no-repeat logic until the pool is exhausted
- Reset button to flip all cards back and start a new round
- Responsive design — works on desktop, tablet, and mobile
- Accessible — keyboard navigable (Enter/Space), ARIA labels, focus indicators
- Dark mode UI with modern styling
- Zero dependencies — pure HTML, CSS, and JavaScript
| Category | Technology |
|---|---|
| Markup | HTML5 (semantic elements, ARIA attributes) |
| Styling | CSS3 (3D transforms, CSS Grid, custom properties, clamp()) |
| Logic | Vanilla JavaScript (ES6+, no frameworks or libraries) |
| Deployment | GitHub Pages |
┌─────────────────────────────────────┐
│ index.html │
│ ┌───────────┐ ┌───────────────┐ │
│ │ style.css │ │ app.js │ │
│ │ │ │ │ │
│ │ • Grid │ │ • Card init │ │
│ │ • 3D flip │ │ • Flip logic │ │
│ │ • Themes │ │ • Question │ │
│ │ • Responsive │ pool mgmt │ │
│ └───────────┘ │ • Reset │ │
│ └───────────────┘ │
└─────────────────────────────────────┘
ice-breaker/
├── index.html # Main HTML page
├── style.css # All styles (grid, cards, animations, responsive)
├── app.js # Card logic, question pool, flip/reset handlers
├── screenshot.png # App screenshot for README
└── README.md # Project documentation
- A modern web browser (Chrome, Firefox, Safari, Edge)
# Clone the repo
git clone https://github.com/alfredang/ice-breaker.git
cd ice-breaker
# Open in browser
open index.htmlOr visit the live site: https://alfredang.github.io/ice-breaker
- Click or tap any card to flip it and reveal a random ice breaker question
- Share your answer with the group
- Keep flipping cards to discover more questions
- Hit Reset Cards to start a new round
Questions are drawn without repeats until all 20 have been used, then the pool resets automatically.
This project is deployed on GitHub Pages directly from the main branch. No build step required.
To deploy your own fork:
- Fork this repository
- Go to Settings → Pages
- Set source to Deploy from a branch →
main→/ (root) - Your site will be live at
https://<your-username>.github.io/ice-breaker
Contributions are welcome!
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Developed by Tertiary Infotech Academy Pte Ltd
If you found this useful, give it a ⭐ on GitHub!