Demo

Check out the live demo: GitHub Pages Demo

CSS Tricks Card Carousel

This project demonstrates a card carousel with a progress bar and circular progress indicators for each card. The card carousel includes a visual representation of progress, styled using pure CSS and SVG.

Features

• Card Carousel: Four interactive cards are displayed with titles and progress indicators.
• Progress Bar: Each card features a horizontal progress bar that is visually animated.
• Circular Progress: Each card also has a circular SVG progress indicator that displays a percentage.
• Responsive Design: The layout adapts to different screen sizes and devices.

Installation

1. Open the index.html file in your browser to view the card carousel.

Usage

• Each card in the carousel displays a title, a horizontal progress bar, and a circular progress indicator.
• The progress values and animations can be customized through CSS and JavaScript.

Files Included

• index.html: The main HTML file containing the structure of the card carousel.
• css/style.css: The CSS file that provides styles for the cards, progress bars, and animations.
• js/script.js: The JavaScript file to control the dynamic aspects of the carousel (if needed).

Author

Created by MDJAmin. Check out more projects on GitHub.