Byciclopter Challenge

Content Overview

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.

Table of Contents

• Introduction
• Objective
• Demo / Preview
• Installation
• Usage
• Project Structure
• Contributing
• Credits

Introduction

Byciclopter is an interactive CSS challenge inspired by 100 Days CSS, where users experience a visual representation of choosing transportation modes using CSS animations.

Objective

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.

Demo / Preview

Explore the live demo of Byciclopter on CodePen to see the animation in action.

Installation

To run Byciclopter locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/Yashi-Singh-1/Day-14-Byciclopter.git

2. Open index.html in a web browser.

Usage

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.

Project Structure

• 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.

Contributing

Contributions to Byciclopter are welcome! Follow these steps to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature-name).
3. Make your changes.
4. Commit your changes (git commit -am 'Add feature: describe your feature or fix').
5. Push to the branch (git push origin feature/your-feature-name).
6. Create a new Pull Request.

Credits

• Byciclopter design and concept: 100 Days CSS
• Code implementation: Yashi-Singh-1