Skip to content

Byciclopter: Which side of the card do you want to use? Either drive or fly to work in the morning?

Notifications You must be signed in to change notification settings

Yashi-Singh-1/Day-14-Byciclopter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

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

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