-
Notifications
You must be signed in to change notification settings - Fork 6
/
PushOwl.html
86 lines (84 loc) · 1.61 KB
/
PushOwl.html
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
<div a>
<div f></div>
<div b>
<div c><div g></div></div>
</div>
<div d>
<div e><div h></div></div>
</div>
</div>
<style>
body {
background: #191919;
}
[a] {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
[f] {
background: #e08027;
height: 70;
width: 70;
position: absolute;
transform: translate(0px, 15px) rotate(45deg);
}
[b] {
background-color: #e08027;
height: 115px;
width: 115px;
border-radius: 0 50% 50% 50%;
display: flex;
align-items: center;
justify-content: center;
transform: translate(15px, -24px);
}
[c] {
height: 90;
width: 90;
background: #191919;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
[g] {
position: absolute;
width: 12px;
height: 7px;
border-radius: 60px 60px 0px 0px;
border: 8px solid #e08027;
border-bottom: 0;
transform: translate(-2px, -2px);
}
[d] {
background-color: #e08027;
border: 10px solid #191919;
height: 115px;
width: 115px;
border-radius: 50% 0 50% 50%;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-5px, -24px);
}
[e] {
height: 90;
width: 90;
background: #191919;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
[h] {
position: absolute;
width: 12px;
height: 7px;
border-radius: 60px 60px 0px 0px;
border: 8px solid #e08027;
border-bottom: 0;
transform: translate(0px, -2px);
}
</style>