Skip to content

Commit f51dc16

Browse files
camillavastacamillavasta
committed
first commit
0 parents  commit f51dc16

2 files changed

Lines changed: 148 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-BR">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Relógio</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
11+
</head>
12+
<body>
13+
<div class="clock">
14+
<div class="hand seconds"></div>
15+
<div class="hand minutes"></div>
16+
<div class="hand hours"></div>
17+
18+
<div class="number number-1">1</div>
19+
<div class="number number-2">2</div>
20+
<div class="number number-3">3</div>
21+
<div class="number number-4">4</div>
22+
<div class="number number-5">5</div>
23+
<div class="number number-6">6</div>
24+
<div class="number number-7">7</div>
25+
<div class="number number-8">8</div>
26+
<div class="number number-9">9</div>
27+
<div class="number number-10">10</div>
28+
<div class="number number-11">11</div>
29+
<div class="number number-12">12</div>
30+
</div>
31+
</body>
32+
</html>

‎style.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
font-family: 'Poppins', sans-serif;
6+
}
7+
8+
body {
9+
background-image: linear-gradient(to right, #F2668B, #026873, #011F26);
10+
height: 100vh;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
}
15+
16+
.clock {
17+
width: 500px;
18+
height: 500px;
19+
background-color: rgba(255, 255, 255, 0.8);
20+
border-radius: 50%;
21+
border: 1px solid black;
22+
position: relative;
23+
}
24+
25+
.clock .number {
26+
--rotation: 0;
27+
28+
position: absolute;
29+
width: 100%;
30+
height: 100%;
31+
text-align: center;
32+
transform: rotate(var(--rotation));
33+
font-size: 1.8rem;
34+
font-weight: 500;
35+
padding: 10px;
36+
}
37+
38+
.clock .number.number-1 {
39+
--rotation: 30deg;
40+
}
41+
42+
.clock .number.number-2 {
43+
--rotation: 60deg;
44+
}
45+
46+
.clock .number.number-3 {
47+
--rotation: 90deg;
48+
}
49+
50+
.clock .number.number-4 {
51+
--rotation: 120deg;
52+
}
53+
54+
.clock .number.number-5 {
55+
--rotation: 150deg;
56+
}
57+
58+
.clock .number.number-6 {
59+
--rotation: 180deg;
60+
}
61+
62+
.clock .number.number-7 {
63+
--rotation: 210deg;
64+
}
65+
66+
.clock .number.number-8 {
67+
--rotation: 240deg;
68+
}
69+
70+
.clock .number.number-9 {
71+
--rotation: 270deg;
72+
}
73+
74+
.clock .number.number-10 {
75+
--rotation: 300deg;
76+
}
77+
78+
.clock .number.number-11 {
79+
--rotation: 330deg;
80+
}
81+
82+
.clock .number.number-12 {
83+
--rotation: 360deg;
84+
}
85+
86+
/* Ponteiros */
87+
88+
.clock .hand {
89+
--rotation: 0;
90+
91+
position: absolute;
92+
bottom: 50%;
93+
left: 50%;
94+
background-color: black;
95+
transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
96+
transform-origin: bottom;
97+
z-index: 10;
98+
border-top-left-radius: 10px;
99+
border-top-right-radius: 10px;
100+
}
101+
102+
.clock .hand.hours {
103+
width: 8px;
104+
height: 30%;
105+
z-index: 1;
106+
}
107+
.clock .hand.minutes {
108+
width: 5px;
109+
height: 38%;
110+
background-color: #011F26;
111+
}
112+
.clock .hand.seconds {
113+
width: 5px;
114+
height: 40%;
115+
background-color: red;
116+
}

0 commit comments

Comments
 (0)