├── img1.png ├── img2.png ├── index.html ├── readme.md └── style.css /img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navaneethakrishnan2004/clock/3d1593cc62ce83d67e1e578d3d8d7a1eed355720/img1.png -------------------------------------------------------------------------------- /img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Navaneethakrishnan2004/clock/3d1593cc62ce83d67e1e578d3d8d7a1eed355720/img2.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Clock 10 | 11 | 12 | 13 |
14 |
15 | 16 |

Analog Clock

17 |
18 | 19 |

Digital Clock

20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Clock - Digital & Analog Clock :clock3: 2 | 3 | ## About the Project 4 | This project combines two clocks - Digital Clock &Analog Clock 5 | 6 | Digital Clock -> This clock includes Date (Day, Month, Year), Time (Hours, Minutes, Seconds) and Period (AM/PM). The clock is in 24 hours format. 7 | 8 | Analog Clock -> It is a circular faced clock with the numbers one to twelve and three hands, shorter one to measure hours , longer one to measure minutes and red one for seconds. 9 | 10 | ## Tech Stacks Used 11 | 12 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 13 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 14 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 15 | 16 | 17 | ## How to use Project 18 | 19 | 20 | - Download or clone the repository 21 | 22 | ``` 23 | git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git 24 | ``` 25 | 26 | - Go to the directory 27 | - Run the index.html file 28 | - Click on the Analog Clock image, analog clock will appear. 29 | - or Click on the Digital Clock image, digital clock will appear. 30 | 31 | ## Screenshots 32 | 33 | Initially, the UI looks like: 34 | 35 | 36 | 37 | After clicking on Analog Clock image, move to analog clock page: 38 | 39 | 40 | 41 | After clicking on Digital Clock image, move to digital clock page: 42 | 43 | 44 | 45 | ## Live Demo 46 | 47 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: rgb(234, 236, 201); 9 | } 10 | 11 | .container { 12 | display: flex; 13 | justify-content: center; 14 | margin-top: 100px; 15 | gap: 100px; 16 | } 17 | 18 | .analog, 19 | .digital { 20 | width: 350px; 21 | height: 350px; 22 | transition: transform 0.8s ease; 23 | } 24 | 25 | img { 26 | height: 100%; 27 | width: 100%; 28 | } 29 | 30 | h1 { 31 | text-align: center; 32 | margin-top: 10px; 33 | color: rgb(0, 0, 165); 34 | } 35 | 36 | .analog:hover, 37 | .digital:hover { 38 | transform: scale(1.08); 39 | } 40 | 41 | --------------------------------------------------------------------------------