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 d9fba14

Browse files
Day 02
1 parent fcc1de7 commit d9fba14

File tree

4 files changed

+59
-1
lines changed

4 files changed

+59
-1
lines changed
31.2 KB
Loading[フレーム]
935 KB
Binary file not shown.

‎Day 02 - CSS + JS Clock/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</head>
1010
<body>
1111
<div class="container">
12-
<h1>Tick -Tock</h1>
12+
<h1>Tick -Tock</h1>
1313
<div class="clock">
1414
<div class="clock-face">
1515
<div class="hand hour-hand"></div>

‎Day 02 - CSS + JS Clock/style.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&family=Quicksand:wght@300;400;500;600;700&display=swap");
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
text-align: center;
8+
}
9+
10+
body {
11+
background: #018ded url('assets/bg_img.jpg')
12+
no-repeat;
13+
background-size: cover;
14+
font-family: "Oxygen", sans-serif;
15+
min-height: 92vh;
16+
display: flex;
17+
flex: 1;
18+
align-items: center;
19+
justify-content: center;
20+
}
21+
22+
h1 {
23+
font-size: 5rem;
24+
font-weight: 900;
25+
margin-bottom: 3rem;
26+
color: #b10093;
27+
}
28+
29+
.clock {
30+
width: 18rem;
31+
height: 18rem;
32+
border: 20px solid white;
33+
border-radius: 50%;
34+
position: relative;
35+
padding: 2rem;
36+
margin-left: 2rem;
37+
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
38+
inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
39+
}
40+
41+
.clock-face {
42+
position: relative;
43+
width: 100%;
44+
height: 100%;
45+
transform: translateY(-3px); /* account for the height of the clock hands */
46+
}
47+
48+
.hand {
49+
width: 50%;
50+
height: 6px;
51+
background-color: black;
52+
position: absolute;
53+
top: 50%;
54+
transform-origin: 100%;
55+
transform: rotate(90deg);
56+
/* transition: all 0.05s; */
57+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
58+
}

0 commit comments

Comments
(0)

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