https://github.com/yashi-singh-1/day-14-byciclopter

Byciclopter: Which side of the card do you want to use? Either drive or fly to work in the morning?
https://github.com/yashi-singh-1/day-14-byciclopter

css css-animations css3 front-end front-end-development front-enddevelopment frontend frontend-development frontenddevelopment html html5 web-design

Last synced: 4 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-14-byciclopter
• Owner: Yashi-Singh-1
• Created: 2024-06-23T19:15:02.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-23T19:17:39.000Z (5 months ago)
• Last Synced: 2024-06-23T20:29:01.262Z (5 months ago)
• Topics: css, css-animations, css3, front-end, front-end-development, front-enddevelopment, frontend, frontend-development, frontenddevelopment, html, html5, web-design
• Language: CSS
• Homepage:
• Size: 2.93 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
  
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:

  


    
Clone the repository:

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

    

    
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:

  


    
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.

  


  
Credits

  


    
Byciclopter design and concept: 100 Days CSS



    
Code implementation: Yashi-Singh-1