https://github.com/withaarzoo/falling-man-button

https://github.com/withaarzoo/falling-man-button

Last synced: about 10 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/withaarzoo/falling-man-button
• Owner: withaarzoo
• Created: 2023-03-01T15:08:45.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-03-01T15:23:26.000Z (over 1 year ago)
• Last Synced: 2023-12-30T18:51:52.515Z (11 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Falling Man Button

This is a simple web page that shows a button which, when clicked, triggers an animation that makes a man fall out of a door. The door is placed on the button.

## Technologies Used

The project uses the following technologies:

- HTML

- CSS

- JS

- SVG

## How to Use

To use this project, simply open the `index.html` file in a web browser.

When the page loads, you will see a button with the text "Logout". Click on this button to trigger the animation. The animation will make a man fall out of a door that is placed on the button.

## Code Description

The `index.html` file contains the HTML code for the web page. It includes a `div` element with the class `background`, which is used to create the background for the page. Inside this `div` element, there is a `button` element with the classes `logoutButton` and `logoutButton--dark`. This is the button that triggers the animation.

The button includes two SVG elements:

* The first SVG element, with the class `doorway`, is used to create the door that the man falls out of. It contains two `path` elements that define the shape of the door and the "bang" that appears when the man hits the ground.

* The second SVG element, with the class `figure`, is used to create the man that falls out of the door. It contains a `circle` element that defines the head of the man and several `path` elements that define the body, arms, and legs of the man.

The `style.css` file contains the CSS code for the web page. It is used to style the button and the SVG elements.

## Preview