FilesExpand file tree

dpgcode

/

style.css

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

85 lines (76 loc) · 1.64 KB

dpgcode

/

style.css

Copy path

Top

File metadata and controls

• Code
• Blame

85 lines (76 loc) · 1.64 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

*{

padding: 0;

margin: 0;

box-sizing: border-box;

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}

body{

background: linear-gradient(50deg, rgb(82, 50, 243), rgb(130, 238, 216));

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.clock{

width: 350px;

height: 350px;

background-color: rgba(255, 255, 255, 0.8);

border-radius: 50%;

box-shadow: 2px 2px 20px rgba(135, 134, 134, 0.8);

position: relative;

}

.clock::after{

content: '';

position: absolute;

width: 15px;

height: 15px;

background-color: black;

top: 48.5%;

left: 50%;

transform: translate(-50%);

z-index: 4;

border-radius: 50%;

}

.number{

position: absolute;

width: 100%;

height: 100%;

top: 0%;

text-align: center;

font-size: 1.5rem;

}

.number1{ transform: rotate(30deg); }

.number2{ transform: rotate(60deg); }

.number3{ transform: rotate(90deg); }

.number4{ transform: rotate(120deg); }

.number5{ transform: rotate(150deg); }

.number6{ transform: rotate(180deg); }

.number7{ transform: rotate(210deg); }

.number8{ transform: rotate(240deg); }

.number9{ transform: rotate(270deg); }

.number10{ transform: rotate(300deg); }

.number11{ transform: rotate(330deg); }

.hand{

position: absolute;

background-color: black;

bottom: 50%;

left: 50%;

border-radius: 5px;

transform: translate(-50%);

transform-origin: bottom;

z-index: 2;

}

.second{

width: 2px;

height: 45%;

background-color: red;

z-index: 3;

}

.minute{

width: 5px;

height: 40%;

}

.hour{

width: 7px;

height: 30%;

}