Skip to content

Commit 89d4891

Browse files
devrutu143devrutu143
authored
Create style.css
1 parent 9bc963f commit 89d4891

1 file changed

Lines changed: 253 additions & 0 deletions

File tree

‎style.css‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
/* Unchanged from previous version */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
7+
}
8+
9+
body {
10+
background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
11+
color: #333;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
min-height: 100vh;
16+
padding: 20px;
17+
}
18+
19+
.container {
20+
max-width: 100%;
21+
width: 400px;
22+
background: rgba(255, 255, 255, 0.95);
23+
border-radius: 20px;
24+
padding: 30px;
25+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
26+
animation: fade-in 1s ease-out;
27+
}
28+
29+
header h1 {
30+
text-align: center;
31+
color: #6a1b9a;
32+
margin-bottom: 20px;
33+
}
34+
35+
#welcome-note {
36+
text-align: center;
37+
font-size: 1.2em;
38+
margin-bottom: 15px;
39+
}
40+
41+
.input-field {
42+
width: 100%;
43+
padding: 10px;
44+
margin-bottom: 10px;
45+
border: 1px solid #ddd;
46+
border-radius: 8px;
47+
transition: border-color 0.3s;
48+
}
49+
50+
.input-field:focus {
51+
border-color: #6a1b9a;
52+
}
53+
54+
.btn {
55+
width: 100%;
56+
padding: 12px;
57+
background: #6a1b9a;
58+
color: white;
59+
border: none;
60+
border-radius: 8px;
61+
cursor: pointer;
62+
margin: 10px 0;
63+
transition: background 0.3s, transform 0.2s;
64+
}
65+
66+
.btn:hover {
67+
background: #4a148c;
68+
transform: scale(1.05);
69+
}
70+
71+
.game-btn {
72+
background: #ab47bc;
73+
}
74+
75+
.game-btn:hover {
76+
background: #8e24aa;
77+
}
78+
79+
.hidden {
80+
display: none;
81+
}
82+
83+
.game-container {
84+
text-align: center;
85+
}
86+
87+
#board {
88+
display: grid;
89+
grid-template-columns: repeat(3, 1fr);
90+
gap: 5px;
91+
margin: 20px auto;
92+
width: 300px;
93+
}
94+
95+
.cell {
96+
background: #f3e5f5;
97+
height: 100px;
98+
display: flex;
99+
align-items: center;
100+
justify-content: center;
101+
font-size: 3em;
102+
cursor: pointer;
103+
transition: background 0.3s;
104+
}
105+
106+
.cell:hover {
107+
background: #e1bee7;
108+
}
109+
110+
.choices-container {
111+
display: flex;
112+
flex-wrap: wrap;
113+
justify-content: center;
114+
align-items: center;
115+
gap: 10px;
116+
}
117+
118+
.choice {
119+
padding: 15px 30px;
120+
margin: 10px;
121+
background: #ce93d8;
122+
border: none;
123+
border-radius: 8px;
124+
cursor: pointer;
125+
transition: transform 0.3s ease;
126+
}
127+
128+
.choice.bounce {
129+
animation: bounce 0.3s ease;
130+
}
131+
132+
#vs-graphic {
133+
font-size: 2em;
134+
color: #ffca28;
135+
animation: scale-vs 0.5s ease;
136+
}
137+
138+
#memory-board {
139+
display: grid;
140+
grid-template-columns: repeat(4, 1fr);
141+
gap: 10px;
142+
margin: 20px auto;
143+
width: 300px;
144+
}
145+
146+
.card {
147+
background: #ba68c8;
148+
height: 75px;
149+
display: flex;
150+
align-items: center;
151+
justify-content: center;
152+
font-size: 2em;
153+
cursor: pointer;
154+
transition: transform 0.3s;
155+
transform-style: preserve-3d;
156+
}
157+
158+
.card.flipped {
159+
transform: rotateY(180deg);
160+
background: #fff;
161+
}
162+
163+
.card.matched {
164+
background: #7b1fa2;
165+
color: white;
166+
}
167+
168+
#leaderboard {
169+
list-style: none;
170+
}
171+
172+
#leaderboard li {
173+
background: #f3e5f5;
174+
padding: 10px;
175+
margin: 5px 0;
176+
border-radius: 8px;
177+
}
178+
179+
.quote {
180+
text-align: center;
181+
font-style: italic;
182+
color: #6a1b9a;
183+
margin-top: 20px;
184+
animation: fade-in 1.5s ease-out;
185+
}
186+
187+
.quote::after {
188+
content: '~Rutu';
189+
display: block;
190+
font-size: 0.9em;
191+
margin-top: 10px;
192+
color: #ab47bc;
193+
}
194+
195+
#thinking-loader {
196+
display: inline-block;
197+
margin-left: 10px;
198+
animation: spin 1s linear infinite;
199+
}
200+
201+
@keyframes fade-in {
202+
from { opacity: 0; }
203+
to { opacity: 1; }
204+
}
205+
206+
@keyframes slide-in {
207+
from { transform: translateX(-50px); opacity: 0; }
208+
to { transform: translateX(0); opacity: 1; }
209+
}
210+
211+
@keyframes bounce {
212+
0% { transform: scale(1); }
213+
50% { transform: scale(1.2); }
214+
100% { transform: scale(1); }
215+
}
216+
217+
@keyframes scale-vs {
218+
0% { transform: scale(0); }
219+
50% { transform: scale(1.3); }
220+
100% { transform: scale(1); }
221+
}
222+
223+
@keyframes spin {
224+
from { transform: rotate(0deg); }
225+
to { transform: rotate(360deg); }
226+
}
227+
228+
.fade-in {
229+
animation: fade-in 1s ease-out;
230+
}
231+
232+
.slide-in {
233+
animation: slide-in 0.8s ease-out;
234+
}
235+
236+
footer {
237+
text-align: center;
238+
margin-top: 30px;
239+
font-size: 0.9em;
240+
color: #555;
241+
}
242+
243+
@media (max-width: 480px) {
244+
#board, #memory-board {
245+
width: 100%;
246+
}
247+
.cell {
248+
height: 80px;
249+
}
250+
.card {
251+
height: 60px;
252+
}
253+
}

0 commit comments

Comments
 (0)