└── Digital Clock
├── index.html
└── style.css
/Digital Clock/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Digital Clock
8 |
9 |
10 |
11 |
18 |
42 |
43 |
--------------------------------------------------------------------------------
/Digital Clock/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | font-family: 'Poppins', sans-serif;
5 | }
6 | html,body{
7 | display: grid;
8 | height: 100%;
9 | place-items: center;
10 | background: #350ec4af;
11 | }
12 | .wrapper{
13 | height: 100px;
14 | width: 360px;
15 | position: relative;
16 | background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
17 | border-radius: 10px;
18 | cursor: default;
19 | animation: animate 1.5s linear infinite;
20 | }
21 | .wrapper .display,
22 | .wrapper span{
23 | position: absolute;
24 | top: 50%;
25 | left: 50%;
26 | transform: translate(-50%, -50%);
27 | }
28 | .wrapper .display{
29 | z-index: 999;
30 | height: 85px;
31 | width: 345px;
32 | background: #1b1b1b;
33 | border-radius: 6px;
34 | text-align: center;
35 | }
36 | .display #time{
37 | line-height: 85px;
38 | color: #fff;
39 | font-size: 50px;
40 | font-weight: 600;
41 | letter-spacing: 1px;
42 | background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
43 | -webkit-background-clip: text;
44 | -webkit-text-fill-color: transparent;
45 | animation: animate 1.5s linear infinite;
46 | }
47 | @keyframes animate {
48 | 100%{
49 | filter: hue-rotate(360deg);
50 | }
51 | }
52 | .wrapper span{
53 | height: 100%;
54 | width: 100%;
55 | border-radius: 10px;
56 | background: inherit;
57 | }
58 | .wrapper span:first-child{
59 | filter: blur(7px);
60 | }
61 | .wrapper span:last-child{
62 | filter: blur(20px);
63 | }
--------------------------------------------------------------------------------