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 ddbad68

Browse files
Refactored day 28 code
1 parent 84fe7b1 commit ddbad68

File tree

3 files changed

+51
-54
lines changed

3 files changed

+51
-54
lines changed

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

Lines changed: 4 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@
66
</head>
77
<body>
88

9-
9+
<!-- CSS -->
10+
<link href="style.min.css" rel="stylesheet">
11+
12+
<!-- Our Clock Here -->
1013
<div class="clock">
1114
<div class="clock-face">
1215
<div class="hand hour-hand"></div>
@@ -15,59 +18,6 @@
1518
</div>
1619
</div>
1720

18-
19-
<style>
20-
html {
21-
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
22-
background-size:cover;
23-
font-family:'helvetica neue';
24-
text-align: center;
25-
font-size: 10px;
26-
}
27-
28-
body {
29-
font-size: 2rem;
30-
display:flex;
31-
flex:1;
32-
min-height: 100vh;
33-
align-items: center;
34-
}
35-
36-
.clock {
37-
width: 30rem;
38-
height: 30rem;
39-
border:20px solid white;
40-
border-radius:50%;
41-
margin:50px auto;
42-
position: relative;
43-
padding:2rem;
44-
box-shadow:
45-
0 0 0 4px rgba(0,0,0,0.1),
46-
inset 0 0 0 3px #EFEFEF,
47-
inset 0 0 10px black,
48-
0 0 10px rgba(0,0,0,0.2);
49-
}
50-
51-
.clock-face {
52-
position: relative;
53-
width: 100%;
54-
height: 100%;
55-
transform: translateY(-3px); /* account for the height of the clock hands */
56-
}
57-
58-
.hand {
59-
width:50%;
60-
height:6px;
61-
background:black;
62-
position: absolute;
63-
top:50%;
64-
transform-origin: 100%;
65-
transform: rotate(90deg);
66-
transition: all 0.05s;
67-
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
68-
}
69-
</style>
70-
7121
<script>
7222

7323
/************************************************************************************************
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
Style related to this page
3+
*/
4+
5+
html {
6+
background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
7+
background-size: cover;
8+
font-family: 'helvetica neue';
9+
text-align: center;
10+
font-size: 10px;
11+
}
12+
body {
13+
font-size: 2rem;
14+
display: flex;
15+
flex: 1;
16+
min-height: 100vh;
17+
align-items: center;
18+
}
19+
.clock {
20+
width: 30rem;
21+
height: 30rem;
22+
border: 20px solid white;
23+
border-radius: 50%;
24+
margin: 50px auto;
25+
position: relative;
26+
padding: 2rem;
27+
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
28+
}
29+
.clock-face {
30+
position: relative;
31+
width: 100%;
32+
height: 100%;
33+
transform: translateY(-3px);
34+
/* account for the height of the clock hands */
35+
}
36+
.hand {
37+
width: 50%;
38+
height: 6px;
39+
background: black;
40+
position: absolute;
41+
top: 50%;
42+
transform-origin: 100%;
43+
transform: rotate(90deg);
44+
transition: all 0.05s;
45+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
46+
}

‎Challenges/Day 02 - JS CSS Clock/style.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

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