Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e7efe75

Browse files
author
Ritam Chakraborty
committed
Add styles
1 parent f0572fa commit e7efe75

File tree

2 files changed

+84
-2
lines changed

2 files changed

+84
-2
lines changed

‎projects/digital-clock-app/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
<h1 id="hour">15</h1>
1616
<p>HOURS</p>
1717
</div>
18-
<div>:</div>
18+
<h2>:</h2>
1919
<div>
2020
<h1 id="minute">59</h1>
2121
<p>MINS</p>
2222
</div>
23-
<div>:</div>
23+
<h2>:</h2>
2424
<div>
2525
<h1 id="second">39</h1>
2626
<p>SEC</p>

‎projects/digital-clock-app/style.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
2+
3+
* {
4+
margin: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background-image: linear-gradient(0deg, blue 0%, violet 100%);
10+
background-repeat: no-repeat;
11+
height: 100vh;
12+
height: 100svh;
13+
font-family: 'Poppins', sans-serif;
14+
display: grid;
15+
place-items: center;
16+
color: #FAFAFA
17+
}
18+
19+
main {
20+
position: relative;
21+
width: min(70vw, 30rem);
22+
height: 10rem;
23+
}
24+
25+
.square {
26+
position: absolute;
27+
height: 8rem;
28+
width: 8rem;
29+
background-color: tomato;
30+
border-radius: 0.5rem;
31+
top: -2.5rem;
32+
left: -2.5rem;
33+
}
34+
35+
.circle {
36+
position: absolute;
37+
height: 8rem;
38+
width: 8rem;
39+
border-radius: 50%;
40+
background-color: skyblue;
41+
right: -1rem;
42+
bottom: -2.5rem;
43+
}
44+
45+
.clock {
46+
text-align: center;
47+
position: absolute;
48+
display: flex;
49+
justify-content: center;
50+
gap: 5%;
51+
align-items: center;
52+
background-color: rgba(255, 255, 255, 0.3);
53+
backdrop-filter: blur(15px);
54+
border-radius: 0.5rem;
55+
height: 100%;
56+
width: 100%;
57+
}
58+
59+
.clock div {
60+
min-width: 3.5rem
61+
}
62+
63+
h1 {
64+
font-size: 3rem;
65+
margin: -0.5rem;
66+
}
67+
68+
h2 {
69+
font-size: 2.5rem;
70+
margin-top: -1.5rem;
71+
}
72+
73+
@media screen and (min-width: 45rem) {
74+
h1 {
75+
font-size: 4rem;
76+
margin: -1rem;
77+
}
78+
79+
h2 {
80+
font-size: 3.5rem;
81+
}
82+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /