FilesExpand file tree

 main

/

style.css

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

107 lines (89 loc) · 1.57 KB

 main

/

style.css

Copy path

Top

File metadata and controls

• Code
• Blame

107 lines (89 loc) · 1.57 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

body {

margin: 0;

padding: 0;

font-family: 'Courier New', Courier, monospace;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background-color: salmon;

}

img {

position: absolute;

top: 60px;

left: 50%;

transform: translateX(-50%);

width: 70px;

z-index: 2;

}

.clock {

width: 350px;

height: 350px;

background-color: lightgray;

border-radius: 100%;

border: 5px solid darkgrey;

box-shadow: 1px 1px 4px rgba(0,0,0,.7);

position: relative;

}

.numbers div {

position: absolute;

font-size: 27px;

font-weight: bold;

color: lightgoldenrodyellow;

text-shadow: 1px 1px 2px rgba(0,0,0,.7);

}

.twelve {

top: 6px;

left: 50%;

transform: translateX(-50%);

}

.three {

right: 6px;

top: 50%;

transform: translateY(-50%);

}

.six {

bottom: 6px;

left: 50%;

transform: translateX(-50%);

}

.nine {

left: 6px;

top: 50%;

transform: translateY(-50%);

}

.arrows {

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

}

.arrows::before {

content: "";

width: 25px;

height: 25px;

background-color: darkgreen;

border-radius: 50%;

box-shadow: 1px 1px 2px rgba(0,0,0,.7);

z-index: 4;

}

.arrows div {

width: 7px;

height: 120px;

background-color: white;

position: absolute;

bottom: 50%;

box-shadow: 1px 1px 2px rgba(0,0,0,.7);

border-radius: 50% 50% 0 0;

transform-origin: bottom center;

z-index: 3;

}

.arrows .hour {

height: 80px;

transform: rotate(30deg);

}

.arrows .second {

background-color: goldenrod;

transform: rotate(250deg);

}