daysofcode/2019/20/day-22/day-22.css at master · w3dotdev/daysofcode · GitHub

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
.social {
  height: 10rem;
  margin: -5.5rem 0 0 -4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 8rem;
}

.social-item {
  align-items: center;
  border-radius: 4px;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  transform-origin: 90% 92%;
  transition: 0.3s;
  width: 100%;
}

.social-item:hover ~ .social-item { transform: rotate(120deg); }

.social-item:last-of-type:after {
  background: #eee;
  border-radius: 50%;
  content: "";
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  position: absolute;
  left: 90%;
  top: 92%;
  width: 0.5rem;
}

.social-link { color: #fff; display: block; text-decoration: none; }

.social-icon { fill: #fff; display: block; margin: 0.5rem auto; }

.facebook { background: #3b5998; transform: rotate(-20deg); }
.github { background: #4183c4; transform: rotate(-10deg); }
.twitter { background: #00a0d1; transform: rotate(0deg); }
.linkedin { background: #0e76a8; transform: rotate(10deg); }