-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (111 loc) · 2.74 KB
/
index.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<head>
<script src="https://kit.fontawesome.com/f83c13f8d3.js" crossorigin="anonymous"></script>
<title>SocialMedia michel929</title>
<link rel="shortcut icon" type="image/x-icon" href="https://michel929.de/assets/images/logo/logo.png">
</head>
<style>
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
transition: all 0.35s;
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
top: 90%;
left: -110%;
}
.social-btns .btn .fa {
transform: scale(0.8);
}
.social-btns .btn.facebook:before {
background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
color: #3b5998;
}
.social-btns .btn.twitter:before {
background-color: #3cf;
}
.social-btns .btn.twitter .fa {
color: #3cf;
}
.social-btns .btn.twitch:before {
background-color: #6441a5;
}
.social-btns .btn.twitch .fa {
color: #6441a5;
}
.social-btns .btn.youtube:before {
background-color: #FF0000;
}
.social-btns .btn.youtube .fa {
color: #FF0000;
}
.social-btns .btn.discord:before {
background-color: #5865F2;
}
.social-btns .btn.discord .fa {
color: #5865F2;
}
.social-btns .btn.insta:before {
background-color: #E1306C;
}
.social-btns .btn.insta .fa {
color: #E1306C;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
top: -10%;
left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
color: #fff;
transform: scale(1);
}
.social-btns {
height: 90px;
margin: auto;
font-size: 0;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.social-btns .btn {
display: inline-block;
background-color: #fff;
width: 90px;
height: 90px;
line-height: 90px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
border-radius: 28%;
box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
opacity: 0.99;
}
.social-btns .btn:before {
content: '';
width: 120%;
height: 120%;
position: absolute;
transform: rotate(45deg);
}
.social-btns .btn .fa {
font-size: 38px;
/* Wenn du das siehst bist du TOT!!!!! ZEUGEN SIND ZZZZ UND STEFFEN*/
margin-top: 25px;
}
</style>
<div class="social-btns">
<a class="btn twitch" href="https://twitch.tv/michel_929"><i class="fa fa-brands fa-twitch"></i></a>
<a class="btn discord" href="https://discord.com/invite/eC7Jcg7Nzt"><i class="fa fa-brands fa-discord"></i></a>
<a class="btn insta" href="https://instagram.com/michel_929"><i class="fa fa-instagram"></i></a>
<a class="btn youtube" href="https://www.youtube.com/channel/UCE_VX3RPueYjN_UvEztIllg"><i class="fa fa-youtube"></i></a>
<a class="btn twitter" href="https://twitter.com/michel_9299"><i class="fa fa-twitter"></i></a>
<a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
</div>