Skip to content

Commit 57fe504

Browse files
devrutu143devrutu143
authored
Create style.css
1 parent 1afe079 commit 57fe504

1 file changed

Lines changed: 358 additions & 0 deletions

File tree

‎style.css‎

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Arial', sans-serif;
6+
}
7+
8+
body {
9+
overflow: hidden;
10+
}
11+
12+
/* First Dashboard */
13+
.dashboard {
14+
height: 100vh;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
19+
transition: opacity 1s ease-in-out;
20+
}
21+
22+
.input-box {
23+
background: rgba(255, 255, 255, 0.9);
24+
padding: 30px;
25+
border-radius: 15px;
26+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
27+
text-align: center;
28+
animation: slideIn 1s ease-out;
29+
max-width: 400px;
30+
width: 90%;
31+
position: relative;
32+
z-index: 10;
33+
}
34+
35+
@keyframes slideIn {
36+
from {
37+
transform: translateY(-50px);
38+
opacity: 0;
39+
}
40+
to {
41+
transform: translateY(0);
42+
opacity: 1;
43+
}
44+
}
45+
46+
.input-box h2 {
47+
color: #ff6f91;
48+
margin-bottom: 20px;
49+
animation: fadeIn 1.5s ease;
50+
}
51+
52+
@keyframes fadeIn {
53+
from { opacity: 0; }
54+
to { opacity: 1; }
55+
}
56+
57+
#name-input {
58+
padding: 10px;
59+
width: 100%;
60+
margin-bottom: 15px;
61+
border: 2px solid #ff6f91;
62+
border-radius: 8px;
63+
font-size: 16px;
64+
transition: border-color 0.3s ease;
65+
pointer-events: auto;
66+
z-index: 11;
67+
}
68+
69+
#name-input:focus {
70+
outline: none;
71+
border-color: #ff3d6b;
72+
}
73+
74+
#next-btn {
75+
padding: 10px 20px;
76+
background: #ff6f91;
77+
color: white;
78+
border: none;
79+
border-radius: 8px;
80+
cursor: pointer;
81+
font-size: 16px;
82+
transition: transform 0.3s ease, background 0.3s ease;
83+
z-index: 11;
84+
}
85+
86+
#next-btn:disabled {
87+
background: #ccc;
88+
cursor: not-allowed;
89+
}
90+
91+
#next-btn:not(:disabled):hover {
92+
transform: scale(1.1);
93+
background: #ff3d6b;
94+
}
95+
96+
#error-msg {
97+
color: #ff3d6b;
98+
margin-top: 10px;
99+
height: 20px;
100+
animation: shake 0.5s ease;
101+
z-index: 11;
102+
}
103+
104+
@keyframes shake {
105+
0%, 100% { transform: translateX(0); }
106+
25% { transform: translateX(-5px); }
107+
50% { transform: translateX(5px); }
108+
75% { transform: translateX(-5px); }
109+
}
110+
111+
/* Second Dashboard */
112+
.second-dashboard {
113+
display: none;
114+
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
115+
flex-direction: column;
116+
text-align: center;
117+
color: white;
118+
}
119+
120+
.greeting-container {
121+
margin-bottom: 20px;
122+
}
123+
124+
#greeting-part1, #greeting-part2 {
125+
font-size: 36px;
126+
}
127+
128+
.flicker {
129+
padding: 10px 20px;
130+
background: #ff6f91;
131+
color: white;
132+
border: none;
133+
border-radius: 8px;
134+
cursor: pointer;
135+
font-size: 16px;
136+
animation: flicker 2s infinite ease-in-out;
137+
z-index: 11;
138+
}
139+
140+
@keyframes flicker {
141+
0%, 100% { opacity: 1; }
142+
50% { opacity: 0.5; }
143+
}
144+
145+
/* Third Dashboard */
146+
.third-dashboard {
147+
display: none;
148+
background: linear-gradient(135deg, #fad0c4, #ff9a9e);
149+
flex-direction: column;
150+
text-align: center;
151+
color: white;
152+
}
153+
154+
#third-greeting {
155+
font-size: 36px;
156+
margin-bottom: 20px;
157+
}
158+
159+
.option-container {
160+
display: flex;
161+
justify-content: center;
162+
gap: 20px;
163+
}
164+
165+
.option-btn {
166+
padding: 15px 30px;
167+
background: #ff6f91;
168+
color: white;
169+
border: none;
170+
border-radius: 8px;
171+
cursor: pointer;
172+
font-size: 18px;
173+
transition: transform 0.3s ease, background 0.3s ease;
174+
z-index: 11;
175+
}
176+
177+
.option-btn:hover {
178+
transform: scale(1.1);
179+
background: #ff3d6b;
180+
}
181+
182+
/* Fourth Dashboard */
183+
.fourth-dashboard {
184+
display: none;
185+
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
186+
flex-direction: column;
187+
text-align: center;
188+
color: white;
189+
}
190+
191+
#fourth-greeting {
192+
font-size: 36px;
193+
margin-bottom: 20px;
194+
}
195+
196+
/* Fifth Dashboard */
197+
.fifth-dashboard {
198+
display: none;
199+
background: linear-gradient(135deg, #fad0c4, #ff9a9e);
200+
flex-direction: column;
201+
text-align: center;
202+
color: white;
203+
}
204+
205+
#fifth-greeting {
206+
font-size: 36px;
207+
margin-bottom: 20px;
208+
}
209+
210+
/* Sixth Dashboard */
211+
.sixth-dashboard {
212+
display: none;
213+
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
214+
flex-direction: column;
215+
text-align: center;
216+
color: white;
217+
}
218+
219+
.gift-container {
220+
display: flex;
221+
justify-content: center;
222+
gap: 20px;
223+
margin-bottom: 20px;
224+
}
225+
226+
.gift-box {
227+
width: 100px;
228+
height: 100px;
229+
background: #ff6f91;
230+
display: flex;
231+
justify-content: center;
232+
align-items: center;
233+
font-size: 40px;
234+
border-radius: 10px;
235+
cursor: pointer;
236+
transition: transform 0.3s ease;
237+
z-index: 11;
238+
}
239+
240+
.gift-box:hover {
241+
transform: scale(1.1);
242+
}
243+
244+
@keyframes flip-forward {
245+
from { transform: rotateY(180deg); }
246+
to { transform: rotateY(0deg); }
247+
}
248+
249+
#choose-text {
250+
font-size: 24px;
251+
margin-bottom: 20px;
252+
}
253+
254+
#result-text {
255+
font-size: 24px;
256+
animation: fadeIn 1s ease;
257+
}
258+
259+
/* Seventh Dashboard */
260+
.seventh-dashboard {
261+
display: none;
262+
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
263+
flex-direction: column;
264+
text-align: center;
265+
color: white;
266+
}
267+
268+
#seventh-greeting {
269+
font-size: 36px;
270+
margin-bottom: 20px;
271+
}
272+
273+
/* Eighth Dashboard */
274+
.eighth-dashboard {
275+
display: none;
276+
background: linear-gradient(135deg, #fad0c4, #ff9a9e);
277+
flex-direction: column;
278+
text-align: center;
279+
color: white;
280+
}
281+
282+
#eighth-greeting {
283+
font-size: 36px;
284+
margin-bottom: 20px;
285+
}
286+
287+
/* Ninth Dashboard */
288+
.ninth-dashboard {
289+
display: none;
290+
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
291+
flex-direction: column;
292+
text-align: center;
293+
color: white;
294+
}
295+
296+
#ninth-greeting {
297+
font-size: 36px;
298+
margin-bottom: 20px;
299+
}
300+
301+
#end-text {
302+
font-size: 24px;
303+
animation: pulse 1.5s infinite ease-in-out;
304+
}
305+
306+
@keyframes pulse {
307+
0% { transform: scale(1); }
308+
50% { transform: scale(1.2); }
309+
100% { transform: scale(1); }
310+
}
311+
312+
/* Typewriter Effect */
313+
.typewriter {
314+
overflow: hidden;
315+
white-space: nowrap;
316+
animation: typing 3s steps(40, end) forwards;
317+
}
318+
319+
@keyframes typing {
320+
from { width: 0; }
321+
to { width: 100%; }
322+
}
323+
324+
@keyframes disappear {
325+
to { opacity: 0; transform: scale(0.8); }
326+
}
327+
328+
@keyframes reappear {
329+
from { opacity: 0; transform: scale(0.8); }
330+
to { opacity: 1; transform: scale(1); }
331+
}
332+
333+
/* Responsive Design */
334+
@media (max-width: 600px) {
335+
.input-box {
336+
padding: 20px;
337+
width: 95%;
338+
}
339+
340+
#greeting-part1, #greeting-part2, #third-greeting, #fourth-greeting, #fifth-greeting, #seventh-greeting, #eighth-greeting, #ninth-greeting {
341+
font-size: 24px;
342+
}
343+
344+
.option-btn {
345+
padding: 10px 20px;
346+
font-size: 16px;
347+
}
348+
349+
.gift-box {
350+
width: 80px;
351+
height: 80px;
352+
font-size: 30px;
353+
}
354+
355+
#choose-text, #result-text, #end-text {
356+
font-size: 18px;
357+
}
358+
}

0 commit comments

Comments
 (0)