{"id":20503587,"url":"https://github.com/withaarzoo/animated-clock","last_synced_at":"2025-10-05T18:28:30.594Z","repository":{"id":223518284,"uuid":"760622814","full_name":"withaarzoo/Animated-Clock","owner":"withaarzoo","description":"This project is a simple animated clock created using HTML and CSS. It displays an analog clock with rotating hour, minute, and second hands.","archived":false,"fork":false,"pushed_at":"2024-02-21T05:28:10.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T07:35:13.803Z","etag":null,"topics":["codewithaarzoo","css","html","htmlcss-project"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/withaarzoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-20T16:27:07.000Z","updated_at":"2024-02-20T16:30:40.000Z","dependencies_parsed_at":"2024-11-15T19:32:46.457Z","dependency_job_id":"dff1b89d-56fe-4972-befc-284f1516ad45","html_url":"https://github.com/withaarzoo/Animated-Clock","commit_stats":null,"previous_names":["withaarzoo/animated-clock"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/withaarzoo%2FAnimated-Clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/withaarzoo","download_url":"https://codeload.github.com/withaarzoo/Animated-Clock/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242100293,"owners_count":20071691,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codewithaarzoo","css","html","htmlcss-project"],"created_at":"2024-11-15T19:32:30.838Z","updated_at":"2025-10-05T18:28:25.556Z","avatar_url":"https://github.com/withaarzoo.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animated Clock\n\nThis project is a simple animated clock created using HTML and CSS. It displays an analog clock with rotating hour, minute, and second hands .\n\n## Preview\n![preview](https://github.com/withaarzoo/Animated-Clock/assets/59678435/b7a94667-e10c-4d6a-bf8e-b9f4bedddaf7)\n\n## Features\n\n- Displays an analog clock with rotating hands to indicate the current time.\n- 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.\n- The clock face has a stylish design with a gradient background and subtle shadow effects.\n\n## Technologies Used\n\n- HTML\n- CSS\n\n## How to Use\n\n1. Clone this repository to your local machine using `git clone`.\n2. Open the `index.html` file in a web browser.\n3. Observe the animated clock showing the current time.\n\n## Code Overview\n\n### HTML Structure\n\nThe 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.\n\n### CSS Styling\n\nThe 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.\n\n## Credits\n\nThis 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.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fanimated-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithaarzoo%2Fanimated-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithaarzoo%2Fanimated-clock/lists"}