-
Notifications
You must be signed in to change notification settings - Fork 105
/
Tsiangana_thin-cougar-23.html
131 lines (124 loc) · 3.9 KB
/
Tsiangana_thin-cougar-23.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<div class="tooltip-container">
<span class="tooltip">Discover</span>
<span class="text">
<div class="borde-back">
<div class="icon">
<svg
viewBox="0 0 16 16"
class="bi bi-discord"
height="23"
width="23"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"
></path>
</svg>
</div>
</div>
</span>
</div>
<style>
/* From Uiverse.io by Tsiangana - Tags: tooltip, gradient, hover, space, modern */
/* This is an example, feel free to delete this code */
.tooltip-container {
position: relative;
background-color: #ff3cac;
background-image: linear-gradient(
225deg,
#ff3cac 0%,
#784ba0 50%,
#2b86c5 100%
);
cursor: pointer;
transition: all 0.2s;
font-size: 17px;
/*padding: 0.7em 1.8em;*/
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
fill: #fff;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.tooltip-container .borde-back {
width: 60px;
height: 60px;
background-color: #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: none;
}
.tooltip-container .icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
background-color: #ff3cac;
background-image: linear-gradient(
225deg,
#ff3cac 0%,
#784ba0 50%,
#2b86c5 100%
);
cursor: pointer;
}
.tooltip {
position: absolute;
top: -2;
left: -45px; /* Altere a posição inicial para a esquerda, fora da tela */
transform: translateX(
-32%
); /* Usando translateX para controlar a transição da esquerda para a direita */
width: 160px;
height: 52px;
opacity: 0;
pointer-events: none;
transition: all 0.6s;
border-radius: 50px;
background-color: #ff3cac;
background-image: linear-gradient(
225deg,
#ff3cac 0%,
#784ba0 50%,
#2b86c5 100%
);
display: flex;
align-items: center;
justify-content: right;
padding-right: 16px;
color: #fff;
font-size: 18px;
font-family: sans-serif;
font-weight: 800px;
}
.tooltip::before {
position: absolute;
content: "";
height: 0.6em;
width: 0.6em;
right: -0.2em; /* Mude para a direita */
top: 50%; /* Altere o topo para o meio da tooltip */
transform: translateY(-50%) rotate(45deg); /* Use translateY para centralizar verticalmente */
background: var(--background);
}
.tooltip-container:hover .tooltip {
left: 100%; /* Altere para a posição desejada (a direita) */
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: -10;
}
.tooltip-container:hover {
transform: translateX(-50px);
transition: 0.5s linear;
}
</style>