https://github.com/withaarzoo/animated-clock

This project is a simple animated clock created using HTML and CSS. It displays an analog clock with rotating hour, minute, and second hands.
https://github.com/withaarzoo/animated-clock

codewithaarzoo css html htmlcss-project

Last synced: 4 days ago
JSON representation

This project is a simple animated clock created using HTML and CSS. It displays an analog clock with rotating hour, minute, and second hands.

• Host: GitHub
• URL: https://github.com/withaarzoo/animated-clock
• Owner: withaarzoo
• Created: 2024-02-20T16:27:07.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-21T05:28:10.000Z (11 months ago)
• Last Synced: 2024-11-15T19:37:54.175Z (2 months ago)
• Topics: codewithaarzoo, css, html, htmlcss-project
• Language: CSS
• Homepage:
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Animated Clock

This project is a simple animated clock created using HTML and CSS. It displays an analog clock with rotating hour, minute, and second hands .

## Preview

![preview](https://github.com/withaarzoo/Animated-Clock/assets/59678435/b7a94667-e10c-4d6a-bf8e-b9f4bedddaf7)

## Features

- Displays an analog clock with rotating hands to indicate the current time.

- The hour hand completes one rotation every 12 hours, the minute hand completes one rotation every hour, and the second hand completes one rotation every minute.

- The clock face has a stylish design with a gradient background and subtle shadow effects.

## Technologies Used

- HTML

- CSS

## How to Use

1. Clone this repository to your local machine using `git clone`.

2. Open the `index.html` file in a web browser.

3. Observe the animated clock showing the current time.

## Code Overview

### HTML Structure

The HTML file (`index.html`) contains the basic structure of the web page with a `div` element representing the clock face. Inside this `div`, there are `p` elements for the clock indices and `div` elements for the hour, minute, and second hands.

### CSS Styling

The CSS file (`style.css`) provides the styles for the clock and its components. It sets the position, size, and appearance of the clock face and hands. Keyframe animations (`@keyframes`) are used to rotate the hands continuously, simulating the passage of time.

## Credits

This project was created by [Aarzoo](https://twitter.com/withaarzoo) and is licensed under the [MIT License](LICENSE). Feel free to use and modify this code for your projects. If you found it helpful, consider giving it a star on GitHub.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.