This README provides an overview of the Byciclopter challenge, an interactive CSS project that simulates the choice between driving or flying to work through a card animation.
Byciclopter is an interactive CSS challenge inspired by 100 Days CSS, where users experience a visual representation of choosing transportation modes using CSS animations.
The objective of Byciclopter is to demonstrate creative CSS animation techniques by flipping a card between a bicycle on a street and a helicopter in the sky, symbolizing the choice between different modes of transport.
Explore the live demo of Byciclopter on CodePen to see the animation in action.
To run Byciclopter locally, follow these steps:
- Clone the repository:
git clone https://github.com/Yashi-Singh-1/Day-14-Byciclopter.git
- Open
index.html
in a web browser.
Hover over the card to see it flip between the bicycle (street scene) and helicopter (sky scene) sides, illustrating the decision-making process of choosing a mode of transport.
- index.html: HTML file containing the structure and content of the Byciclopter challenge.
- style.css: CSS file with styles and animations for the Byciclopter challenge.
- README.md: This file providing project information and instructions.
Contributions to Byciclopter are welcome! Follow these steps to contribute:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature-name
). - Make your changes.
- Commit your changes (
git commit -am 'Add feature: describe your feature or fix'
). - Push to the branch (
git push origin feature/your-feature-name
). - Create a new Pull Request.
- Byciclopter design and concept: 100 Days CSS
- Code implementation: Yashi-Singh-1