Skip to content

Commit 8aaeecd

Browse files
TarawallyTarawally
committed
feat css: implement premium glassmorphism design
1 parent 26a472c commit 8aaeecd

File tree

1 file changed

+236
-0
lines changed

1 file changed

+236
-0
lines changed

‎Sprint-3/quote-generator/style.css‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,237 @@
11
/** Write your CSS in here **/
2+
3+
:root {
4+
--primary-color: #6366f1;
5+
--secondary-color: #a855f7;
6+
--accent-color: #ec4899;
7+
--text-color: #1f2937;
8+
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
9+
--glass-bg: rgba(255, 255, 255, 0.95);
10+
--glass-border: rgba(255, 255, 255, 0.3);
11+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
12+
0 4px 6px -2px rgba(0, 0, 0, 0.05);
13+
--transition-speed: 0.3s;
14+
}
15+
16+
* {
17+
box-sizing: border-box;
18+
margin: 0;
19+
padding: 0;
20+
}
21+
22+
body {
23+
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
24+
Helvetica, Arial, sans-serif;
25+
background: var(--bg-gradient);
26+
min-height: 100vh;
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
color: var(--text-color);
31+
padding: 1rem;
32+
}
33+
34+
.container {
35+
background: var(--glass-bg);
36+
backdrop-filter: blur(10px);
37+
-webkit-backdrop-filter: blur(10px);
38+
border: 1px solid var(--glass-border);
39+
border-radius: 1.5rem;
40+
padding: 3rem;
41+
width: 100%;
42+
max-width: 600px;
43+
box-shadow: var(--shadow-lg);
44+
text-align: center;
45+
transition: transform var(--transition-speed) ease;
46+
}
47+
48+
.container:hover {
49+
transform: translateY(-5px);
50+
}
51+
52+
h1 {
53+
font-size: 2.5rem;
54+
font-weight: 800;
55+
margin-bottom: 2rem;
56+
background: linear-gradient(
57+
to right,
58+
var(--primary-color),
59+
var(--accent-color)
60+
);
61+
-webkit-background-clip: text;
62+
background-clip: text;
63+
color: transparent;
64+
letter-spacing: -0.025em;
65+
}
66+
67+
#quote {
68+
font-size: 1.5rem;
69+
line-height: 1.6;
70+
font-weight: 500;
71+
margin-bottom: 1.5rem;
72+
color: #374151;
73+
font-style: italic;
74+
position: relative;
75+
padding: 0 1rem;
76+
}
77+
78+
#quote::before,
79+
#quote::after {
80+
content: '"';
81+
font-size: 3rem;
82+
color: var(--primary-color);
83+
opacity: 0.2;
84+
position: absolute;
85+
line-height: 1;
86+
}
87+
88+
#quote::before {
89+
top: -1rem;
90+
left: -0.5rem;
91+
}
92+
93+
#quote::after {
94+
bottom: -1.5rem;
95+
right: -0.5rem;
96+
}
97+
98+
#author {
99+
font-size: 1.1rem;
100+
color: #6b7280;
101+
font-weight: 600;
102+
margin-bottom: 2.5rem;
103+
display: flex;
104+
align-items: center;
105+
justify-content: center;
106+
gap: 0.5rem;
107+
}
108+
109+
#author::before {
110+
content: "";
111+
display: block;
112+
width: 30px;
113+
height: 2px;
114+
background: linear-gradient(
115+
to right,
116+
var(--primary-color),
117+
var(--secondary-color)
118+
);
119+
}
120+
121+
.controls {
122+
display: flex;
123+
flex-direction: column;
124+
gap: 1.5rem;
125+
align-items: center;
126+
}
127+
128+
button {
129+
background: linear-gradient(
130+
to right,
131+
var(--primary-color),
132+
var(--secondary-color)
133+
);
134+
color: white;
135+
border: none;
136+
padding: 1rem 2rem;
137+
font-size: 1.1rem;
138+
font-weight: 600;
139+
border-radius: 9999px;
140+
cursor: pointer;
141+
transition: all var(--transition-speed) ease;
142+
box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.4);
143+
}
144+
145+
button:hover {
146+
transform: translateY(-2px);
147+
box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.5);
148+
filter: brightness(1.1);
149+
}
150+
151+
button:active {
152+
transform: translateY(0);
153+
}
154+
155+
/* Auto-play Switch */
156+
.auto-play-container {
157+
display: flex;
158+
align-items: center;
159+
gap: 1rem;
160+
background: rgba(0, 0, 0, 0.05);
161+
padding: 0.75rem 1.5rem;
162+
border-radius: 1rem;
163+
}
164+
165+
.switch-label {
166+
font-weight: 600;
167+
font-size: 0.9rem;
168+
color: #4b5563;
169+
}
170+
171+
.switch {
172+
position: relative;
173+
display: inline-block;
174+
width: 50px;
175+
height: 26px;
176+
}
177+
178+
.switch input {
179+
opacity: 0;
180+
width: 0;
181+
height: 0;
182+
}
183+
184+
.slider {
185+
position: absolute;
186+
cursor: pointer;
187+
top: 0;
188+
left: 0;
189+
right: 0;
190+
bottom: 0;
191+
background-color: #ccc;
192+
transition: 0.4s;
193+
border-radius: 34px;
194+
}
195+
196+
.slider:before {
197+
position: absolute;
198+
content: "";
199+
height: 20px;
200+
width: 20px;
201+
left: 3px;
202+
bottom: 3px;
203+
background-color: white;
204+
transition: 0.4s;
205+
border-radius: 50%;
206+
}
207+
208+
input:checked + .slider {
209+
background: linear-gradient(
210+
to right,
211+
var(--primary-color),
212+
var(--secondary-color)
213+
);
214+
}
215+
216+
input:focus + .slider {
217+
box-shadow: 0 0 1px var(--primary-color);
218+
}
219+
220+
input:checked + .slider:before {
221+
transform: translateX(24px);
222+
}
223+
224+
.status-indicator {
225+
font-size: 0.8rem;
226+
font-weight: 700;
227+
color: var(--accent-color);
228+
opacity: 0;
229+
transform: translateY(10px);
230+
transition: all 0.3s ease;
231+
height: 1.2em;
232+
}
233+
234+
.status-indicator.active {
235+
opacity: 1;
236+
transform: translateY(0);
237+
}

0 commit comments

Comments
 (0)