Hugging Face's logo

Spaces:
Adityadn
/
KUEID14H
Running

App Files Community
Adityadn commited on
Commit
77c24bf
·
verified ·
1 Parent(s): 3b50e0c

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +141 -141
style.css CHANGED
@@ -1,141 +1,141 @@
1
- /* Global Styles */
2
- html,
3
- body {
4
- margin: 0;
5
- padding: 0;
6
- width: 100%;
7
- height: 100%;
8
- overflow-x: hidden;
9
- box-sizing: border-box;
10
- }
11
-
12
- body {
13
- /* Background gradient hijau ketupat */
14
- background: linear-gradient(135deg, #228b22, #32cd32);
15
- font-family: "Arial", sans-serif;
16
- font-size: 1rem;
17
- }
18
-
19
- /* Styling untuk kartu ucapan yang sudah ada */
20
- .card {
21
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
22
- border: none;
23
- }
24
-
25
- /* --- Animasi Bintang --- */
26
- @keyframes twinkle {
27
- 0%,
28
- 100% {
29
- opacity: 0.8;
30
- transform: scale(1);
31
- }
32
- 50% {
33
- opacity: 1;
34
- transform: scale(1.2);
35
- }
36
- }
37
-
38
- /* Style untuk bintang */
39
- .star {
40
- position: absolute;
41
- background: #fff;
42
- border-radius: 50%;
43
- width: 2px;
44
- height: 2px;
45
- animation: twinkle 2s infinite ease-in-out;
46
- }
47
-
48
- /* --- Elemen Ketupat --- */
49
- .eid-ketupat {
50
- position: absolute;
51
- z-index: 2;
52
- width: 80px;
53
- height: 80px;
54
- background: #32cd32; /* Warna hijau */
55
- /* Bentuk diamond menggunakan clip-path */
56
- clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
57
- border: 2px solid #006400; /* Warna dark green */
58
- border-radius: 5px;
59
- animation: swing 3s ease-in-out infinite;
60
- }
61
-
62
- /* --- Elemen Lentera --- */
63
- .eid-lantern {
64
- position: absolute;
65
- z-index: 2;
66
- width: 50px;
67
- height: 70px;
68
- background: #ffcc00;
69
- border: 2px solid #ff9900;
70
- border-radius: 10px;
71
- box-shadow: 0 0 10px rgba(255, 204, 0, 0.9);
72
- animation: swing 2.5s ease-in-out infinite, blink 1.5s ease-in-out infinite;
73
- }
74
-
75
- /* Keyframes untuk efek ayunan (swing) */
76
- @keyframes swing {
77
- 0% {
78
- transform: translateY(0) rotate(0deg);
79
- }
80
- 25% {
81
- transform: translateY(-5px) rotate(5deg);
82
- }
83
- 50% {
84
- transform: translateY(0) rotate(0deg);
85
- }
86
- 75% {
87
- transform: translateY(5px) rotate(-5deg);
88
- }
89
- 100% {
90
- transform: translateY(0) rotate(0deg);
91
- }
92
- }
93
-
94
- /* Keyframes untuk efek kedip (blink) pada lentera */
95
- @keyframes blink {
96
- 0%,
97
- 100% {
98
- opacity: 1;
99
- }
100
- 50% {
101
- opacity: 0.5;
102
- }
103
- }
104
-
105
- /* Style untuk Three.js canvas (jika ada) */
106
- #threeCanvas,
107
- #tunnelCanvas {
108
- position: fixed;
109
- top: 0;
110
- left: 0;
111
- width: 100vw;
112
- height: 100vh;
113
- z-index: -1;
114
- display: block;
115
- }
116
-
117
- /* Video Background */
118
- #background-video {
119
- position: fixed;
120
- right: 0;
121
- bottom: 0;
122
- min-width: 100%;
123
- min-height: 100%;
124
- width: auto;
125
- height: auto;
126
- z-index: -1;
127
- object-fit: cover;
128
- filter: opacity(0.99);
129
- }
130
-
131
- .child-container {
132
- text-align: center;
133
- margin: 0 auto;
134
- }
135
-
136
- .img-fluid {
137
- margin: 5px;
138
- width: 250px;
139
- height: auto;
140
- object-fit: cover;
141
- }
 
1
+ /* Global Styles */
2
+ html,
3
+ body {
4
+ margin: 0;
5
+ padding: 0;
6
+ width: 100%;
7
+ height: 100%;
8
+ overflow-x: hidden;
9
+ box-sizing: border-box;
10
+ }
11
+
12
+ body {
13
+ /* Background gradient hijau ketupat */
14
+ background: linear-gradient(135deg, #175344, #1e604d);
15
+ font-family: "Arial", sans-serif;
16
+ font-size: 1rem;
17
+ }
18
+
19
+ /* Styling untuk kartu ucapan yang sudah ada */
20
+ .card {
21
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
22
+ border: none;
23
+ }
24
+
25
+ /* --- Animasi Bintang --- */
26
+ @keyframes twinkle {
27
+ 0%,
28
+ 100% {
29
+ opacity: 0.8;
30
+ transform: scale(1);
31
+ }
32
+ 50% {
33
+ opacity: 1;
34
+ transform: scale(1.2);
35
+ }
36
+ }
37
+
38
+ /* Style untuk bintang */
39
+ .star {
40
+ position: absolute;
41
+ background: #fff;
42
+ border-radius: 50%;
43
+ width: 2px;
44
+ height: 2px;
45
+ animation: twinkle 2s infinite ease-in-out;
46
+ }
47
+
48
+ /* --- Elemen Ketupat --- */
49
+ .eid-ketupat {
50
+ position: absolute;
51
+ z-index: 2;
52
+ width: 80px;
53
+ height: 80px;
54
+ background: #32cd32; /* Warna hijau */
55
+ /* Bentuk diamond menggunakan clip-path */
56
+ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
57
+ border: 2px solid #006400; /* Warna dark green */
58
+ border-radius: 5px;
59
+ animation: swing 3s ease-in-out infinite;
60
+ }
61
+
62
+ /* --- Elemen Lentera --- */
63
+ .eid-lantern {
64
+ position: absolute;
65
+ z-index: 2;
66
+ width: 50px;
67
+ height: 70px;
68
+ background: #ffcc00;
69
+ border: 2px solid #ff9900;
70
+ border-radius: 10px;
71
+ box-shadow: 0 0 10px rgba(255, 204, 0, 0.9);
72
+ animation: swing 2.5s ease-in-out infinite, blink 1.5s ease-in-out infinite;
73
+ }
74
+
75
+ /* Keyframes untuk efek ayunan (swing) */
76
+ @keyframes swing {
77
+ 0% {
78
+ transform: translateY(0) rotate(0deg);
79
+ }
80
+ 25% {
81
+ transform: translateY(-5px) rotate(5deg);
82
+ }
83
+ 50% {
84
+ transform: translateY(0) rotate(0deg);
85
+ }
86
+ 75% {
87
+ transform: translateY(5px) rotate(-5deg);
88
+ }
89
+ 100% {
90
+ transform: translateY(0) rotate(0deg);
91
+ }
92
+ }
93
+
94
+ /* Keyframes untuk efek kedip (blink) pada lentera */
95
+ @keyframes blink {
96
+ 0%,
97
+ 100% {
98
+ opacity: 1;
99
+ }
100
+ 50% {
101
+ opacity: 0.5;
102
+ }
103
+ }
104
+
105
+ /* Style untuk Three.js canvas (jika ada) */
106
+ #threeCanvas,
107
+ #tunnelCanvas {
108
+ position: fixed;
109
+ top: 0;
110
+ left: 0;
111
+ width: 100vw;
112
+ height: 100vh;
113
+ z-index: -1;
114
+ display: block;
115
+ }
116
+
117
+ /* Video Background */
118
+ #background-video {
119
+ position: fixed;
120
+ right: 0;
121
+ bottom: 0;
122
+ min-width: 100%;
123
+ min-height: 100%;
124
+ width: auto;
125
+ height: auto;
126
+ z-index: -1;
127
+ object-fit: cover;
128
+ filter: opacity(0.99);
129
+ }
130
+
131
+ .child-container {
132
+ text-align: center;
133
+ margin: 0 auto;
134
+ }
135
+
136
+ .img-fluid {
137
+ margin: 5px;
138
+ width: 250px;
139
+ height: auto;
140
+ object-fit: cover;
141
+ }