Skip to content

Commit 662a44e

Browse files
KASRA10KASRA10
committed
Complete UI (CSS) And Add JQuery Year.
1 parent ec321a7 commit 662a44e

File tree

3 files changed

+397
-20
lines changed

3 files changed

+397
-20
lines changed

‎Mini Digital Clock/css/style.css‎

Lines changed: 352 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
:root {
2-
--primary-color: ##1b264c;
2+
--primary-color: #1b264c;
33
--secondary-color: #fafafa;
4+
--js-word-specialColor: #ffd100;
5+
--shadow-color: rgba(27, 38, 76, 0.1);
6+
--border-radius: 25px;
7+
--transition: all 0.3s ease;
48
}
59

610
/* Reset CSS */
@@ -10,8 +14,14 @@ html {
1014

1115
body {
1216
background-color: var(--secondary-color);
13-
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
17+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
18+
color: var(--primary-color);
1419
text-transform: capitalize;
20+
min-height: 100vh;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
padding: 20px;
1525
}
1626

1727
* {
@@ -22,10 +32,6 @@ body {
2232
box-sizing: border-box;
2333
}
2434

25-
img {
26-
width: 100%;
27-
}
28-
2935
ul {
3036
list-style-type: none;
3137
}
@@ -34,11 +40,347 @@ a {
3440
text-decoration: none;
3541
}
3642

43+
/* Main container with flexbox */
3744
.container {
38-
width: 80%;
45+
width: 100%;
3946
height: fit-content;
40-
padding: 15px;
47+
padding: 30px;
4148
margin: 0 auto;
42-
border-radius: 25px;
49+
border-radius: var(--border-radius);
50+
background: white;
51+
box-shadow: 0 10px 30px var(--shadow-color);
52+
display: flex;
53+
flex-direction: column;
54+
align-items: center;
55+
gap: 30px;
56+
transition: var(--transition);
57+
}
58+
59+
.container:hover {
60+
box-shadow: 0 15px 40px rgba(27, 38, 76, 0.15);
61+
}
62+
63+
/* Header section */
64+
.container.header {
65+
width: 100%;
66+
text-align: center;
67+
padding: 0;
68+
}
69+
70+
.title {
71+
font-size: 2.5rem;
72+
font-weight: 700;
73+
background: linear-gradient(135deg, var(--primary-color) 0%, #2c3e50 100%);
74+
-webkit-background-clip: text;
75+
-webkit-text-fill-color: transparent;
76+
background-clip: text;
77+
margin-bottom: 10px;
78+
}
79+
80+
span#js-word {
81+
color: var(--js-word-specialColor);
82+
font-weight: 800;
83+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
84+
}
85+
86+
/* Clock body - ALL IN ONE ROW */
87+
.container.body {
88+
width: 100%;
89+
display: flex;
90+
flex-flow: row nowrap;
91+
justify-content: center;
92+
align-items: center;
93+
flex-wrap: nowrap; /* Prevents wrapping to new line */
94+
padding: 25px;
95+
background: linear-gradient(145deg, #f0f0f0, #ffffff);
96+
border-radius: 20px;
97+
box-shadow: inset 5px 5px 10px #e0e0e0, inset -5px -5px 10px #ffffff;
98+
}
99+
100+
/* Time elements in single row */
101+
.hours,
102+
.minutes,
103+
.seconds,
104+
.separator,
105+
.period {
106+
display: flex;
107+
align-items: center;
108+
justify-content: center;
109+
}
110+
111+
.hours,
112+
.minutes,
113+
.seconds {
114+
font-size: 4.5rem;
115+
font-weight: 800;
116+
font-family: "Courier New", monospace;
117+
color: var(--primary-color);
118+
background: white;
119+
padding: 25px 30px;
120+
border-radius: 15px;
121+
min-width: 140px;
122+
text-align: center;
123+
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
124+
transition: var(--transition);
125+
}
126+
127+
.separator {
128+
font-size: 4rem;
129+
font-weight: 800;
130+
color: var(--primary-color);
131+
margin: 0 10px;
132+
height: 100%;
133+
display: flex;
134+
align-items: center;
135+
padding: 0 5px;
136+
}
137+
138+
.period {
139+
font-size: 3.5rem;
140+
font-weight: 800;
141+
background: var(--primary-color);
142+
color: white;
143+
padding: 25px 30px;
144+
border-radius: 15px;
145+
min-width: 160px;
146+
margin-left: 15px;
147+
text-align: center;
148+
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
149+
}
150+
151+
/* Hover effects */
152+
.hours:hover,
153+
.minutes:hover,
154+
.seconds:hover,
155+
.period:hover {
156+
transform: translateY(-5px);
157+
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.15);
158+
}
159+
160+
/* Calendar with flexbox */
161+
.calender {
162+
width: 100%;
163+
display: flex;
164+
justify-content: center;
165+
align-items: center;
166+
gap: 20px;
167+
padding: 25px;
168+
background: var(--primary-color);
169+
border-radius: 20px;
170+
color: white;
171+
}
172+
173+
.day,
174+
.month,
175+
.day-number,
176+
.year {
177+
font-size: 2rem;
178+
font-weight: 600;
179+
padding: 15px 25px;
180+
background: rgba(255, 255, 255, 0.1);
181+
border-radius: 15px;
182+
backdrop-filter: blur(10px);
183+
text-align: center;
184+
min-width: 140px;
185+
transition: var(--transition);
186+
}
187+
188+
.day-number {
189+
background: rgba(255, 255, 255, 0.1);
190+
color: var(--secondary-color);
191+
font-weight: 800;
192+
}
193+
194+
/* Footer */
195+
.footer {
196+
width: 100%;
197+
text-align: center;
198+
padding: 20px;
199+
font-size: 1.1rem;
200+
color: #666;
201+
border-top: 2px solid #f0f0f0;
202+
}
203+
204+
#copy-right {
205+
color: var(--primary-color);
206+
font-weight: 600;
207+
}
208+
209+
/* Wrapper - if needed for additional content */
210+
.wrapper {
211+
width: 100%;
212+
display: flex;
213+
justify-content: center;
214+
align-items: center;
215+
}
216+
217+
/* Responsive Design */
218+
@media (max-width: 1024px) {
219+
.container {
220+
max-width: 90%;
221+
}
222+
223+
.container.body {
224+
padding: 20px;
225+
}
226+
227+
.hours,
228+
.minutes,
229+
.seconds {
230+
font-size: 3.5rem;
231+
padding: 20px 25px;
232+
min-width: 110px;
233+
}
234+
235+
.separator {
236+
font-size: 3rem;
237+
}
238+
239+
.period {
240+
font-size: 3rem;
241+
padding: 20px 25px;
242+
min-width: 140px;
243+
}
244+
}
245+
246+
@media (max-width: 768px) {
247+
body {
248+
padding: 10px;
249+
}
250+
251+
.container {
252+
padding: 20px;
253+
gap: 20px;
254+
}
255+
256+
.title {
257+
font-size: 1.8rem;
258+
}
259+
260+
.container.body {
261+
flex-flow: column nowrap;
262+
padding: 15px;
263+
gap: 5px;
264+
}
265+
266+
.hours,
267+
.minutes,
268+
.seconds {
269+
font-size: 2.2rem;
270+
padding: 15px;
271+
min-width: 70px;
272+
}
273+
274+
.separator {
275+
font-size: 2rem;
276+
margin: 0 5px;
277+
}
278+
279+
.period {
280+
font-size: 2rem;
281+
padding: 15px;
282+
min-width: 100px;
283+
margin-left: 10px;
284+
}
285+
286+
.calender {
287+
flex-flow: column nowrap;
288+
gap: 10px;
289+
padding: 20px;
290+
}
291+
292+
.day,
293+
.month,
294+
.day-number,
295+
.year {
296+
font-size: 1.2rem;
297+
min-width: 100px;
298+
padding: 10px 15px;
299+
}
300+
}
301+
302+
@media (max-width: 480px) {
303+
.container {
304+
padding: 15px;
305+
gap: 15px;
306+
}
307+
308+
.title {
309+
font-size: 1.5rem;
310+
}
311+
312+
.container.body {
313+
padding: 10px;
314+
}
315+
316+
.hours,
317+
.minutes,
318+
.seconds {
319+
font-size: 1.8rem;
320+
padding: 12px;
321+
min-width: 55px;
322+
}
323+
324+
.separator {
325+
font-size: 1.6rem;
326+
margin: 0 3px;
327+
}
328+
329+
.period {
330+
font-size: 1.6rem;
331+
padding: 12px;
332+
min-width: 80px;
333+
margin-left: 5px;
334+
}
335+
336+
.day,
337+
.month,
338+
.day-number,
339+
.year {
340+
font-size: 1rem;
341+
min-width: 80px;
342+
padding: 8px 12px;
343+
}
344+
345+
.footer {
346+
font-size: 0.9rem;
347+
padding: 15px;
348+
}
349+
}
350+
351+
/* For very small screens, make time wrap but only if absolutely necessary */
352+
@media (max-width: 360px) {
353+
.container.body {
354+
flex-wrap: wrap;
355+
justify-content: space-around;
356+
}
357+
358+
.period {
359+
margin-left: 0;
360+
margin-top: 10px;
361+
}
362+
}
363+
364+
/* Animation for clock update */
365+
@keyframes pulse {
366+
0% {
367+
transform: scale(1);
368+
}
369+
50% {
370+
transform: scale(1.05);
371+
}
372+
100% {
373+
transform: scale(1);
374+
}
375+
}
376+
377+
.seconds {
378+
animation: pulse 1s ease-in-out;
379+
}
380+
381+
/* Glow effect for active time unit */
382+
.hours:active,
383+
.minutes:active,
384+
.seconds:active {
385+
background: linear-gradient(145deg, #ffffff, #f0f0f0);
43386
}
44-
/* End Reset CSS */

0 commit comments

Comments
 (0)