@import
url
(
* {
margin
:
0
;
padding
:
0
;
box-sizing: border-box;
}
body {
background
:
#2a452b
;
display
: flex;
align-items:
center
;
justify-
content
:
center
;
height
:
100
vh;
font-family
:
'Poppins'
,
sans-serif
;
}
.box {
position
:
relative
;
cursor
:
pointer
;
transition:
all
0.9
s;
font-size
:
17px
;
}
.box
1
{
position
:
absolute
;
top
:
0
;
transform: translateX(
-60px
);
padding
:
10px
;
opacity:
0
;
pointer-events:
none
;
transition:
all
0.7
s;
border-radius:
5px
40px
5px
;
border
:
2px
solid
#fff
;
box-shadow: rgba(
241
,
245
,
241
,
0.25
)
0px
30px
60px
-12px
inset
,
rgba(
242
,
238
,
238
,
0.3
)
0px
18px
36px
-18px
inset
;
}
.box
2
{
background
:
green
;
border-radius:
5px
40px
5px
;
padding
:
10px
;
border
:
1px
solid
rgb
(
221
,
228
,
232
);
}
.box:hover .box
1
{
top
:
-150px
;
opacity:
1
;
visibility
:
visible
;
pointer-events:
auto
;
}
.layer {
width
:
55px
;
height
:
55px
;
transition: transform
0.9
s;
}
.icon:hover .layer {
transform: rotate(
-25
deg) skew(
10
deg);
}
.layer span {
position
:
absolute
;
top
:
0
;
left
:
0
;
height
:
100%
;
width
:
100%
;
border
:
1px
solid
#8fc681
;
border-radius:
10px
;
transition:
all
0.9
s;
}
.layer span,
.text
11
{
color
:
rgb
(
163
,
213
,
163
);
border-color
:
#a4c9a3
;
font-size
:
30px
;
font-weight
:
900
;
}
.icon:hover.layer span {
box-shadow:
-1px
1px
3px
#2fbc2f
;
}
.
icon
.text
11
{
position
:
absolute
;
left
:
50%
;
opacity:
0
;
font-weight
:
500
;
transform: translateX(
-50%
);
transition:
bottom
0.8
s ease, opacity
0.8
s ease;
}
.icon:hover .text
11
{
bottom
:
-55px
;
opacity:
1
;
}
.icon:hover .layer span:nth-child(
1
) {
opacity:
0.2
;
}
.icon:hover .layer span:nth-child(
2
) {
opacity:
0.4
;
transform: translate(
4px
,
-4px
);
}
.icon:hover .layer span:nth-child(
3
) {
opacity:
0.6
;
transform: translate(
8px
,
-8px
);
}
.icon:hover .layer span:nth-child(
4
) {
opacity:
0.8
;
transform: translate(
12px
,
-12px
);
}
.icon:hover .layer span:nth-child(
5
) {
opacity:
1
;
transform: translate(
17px
,
-17px
);
}
.layer span.fab {
font-size
:
30px
;
line-height
:
64px
;
text-align
:
center
;
fill:
#1da1f2
;
background
:
#000
;
}
.box
3
{
display
: flex;
gap:
6px
;
}
.img {
width
:
70px
;
height
:
50px
;
font-size
:
25px
;
font-weight
:
700
;
border
:
2px
solid
#204410
;
border-radius:
10px
;
display
: flex;
align-items:
center
;
justify-
content
:
center
;
background
:
#fff
;
}
.name {
font-size
:
17px
;
font-weight
:
700
;
color
:
rgb
(
120
,
222
,
87
);
}
h
1
,
h
3
{
text-align
:
center
;
color
: aliceblue;
}
.details {
display
: flex;
align-items: flex-start;
justify-
content
:
center
;
flex-
direction
: column;
gap:
0
;
color
:
#fff
;
}
.about {
color
:
#ccc
;
padding-top
:
5px
;
}
.follow
1
{
color
: aliceblue;
align-self:
center
;
position
:
absolute
;
bottom
:
15
vh;
}
.follow
2
{
display
: flex;
justify-
content
:
center
;
flex-
direction
: column;
gap:
2
vh;
}
.followtext {
color
: aliceblue;
font-size
:
30px
;
text-align
:
center
;
}
.icons_box {
display
: flex;
flex-wrap: wrap;
justify-
content
:
center
;
gap:
10
vh;
}
i {
color
: aliceblue;
font-size
:
30px
;
transition:
0.3
s ease;
}
i:hover {
color
:
rgb
(
191
,
232
,
200
);
scale:
1.5
;
}