<style>
body {
background
:
#0F2027
;
background
: -webkit-linear-gradient(to
right
,
#2C5364
,
#203A43
,
#0F2027
);
background
: linear-gradient(to
right
,
#2C5364
,
#203A43
,
#0F2027
);
}
.ring {
position
:
absolute
;
border-radius:
50%
;
background
:
#1f4037
;
background
: -webkit-linear-gradient(
to
right
,
#99f2c8
,
#366b5c
);
background
: linear-gradient(
to
right
,
#99f2c8
,
#366b5c
);
}
.rings {
position
:
absolute
;
height
:
250px
;
width
:
470px
;
top
:
50%
;
left
:
50%
;
transform: translate(
-50%
,
-50%
);
}
.ring
1
{
height
:
180px
;
width
:
180px
;
top
:
-50px
;
left
:
-60px
;
}
.ring
2
{
height
:
200px
;
width
:
200px
;
bottom
:
-90px
;
right
:
-90px
;
opacity:
0.8
;
}
.container {
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform: translate(
-50%
,
-50%
);
}
.card {
position
:
relative
;
height
:
300px
;
width
:
450px
;
border-radius:
25px
;
background
: rgba(
255
,
255
,
255
,
0.25
);
border
:
2px
solid
rgba(
255
,
255
,
255
,
0.1
);
box-shadow:
0
0
80px
rgba(
0
,
0
,
0
,
0.2
);
overflow
:
hidden
;
}
.logo img,
.head,
.name,
.back {
position
:
absolute
;
}
.logo img {
top
:
35px
;
right
:
40px
;
width
:
80px
;
}
.head,
.name {
color
: rgba(
255
,
255
,
255
,
0.8
);
letter-spacing
:
2px
;
text-shadow
:
0
0
2px
rgba(
0
,
0
,
0
,
0.6
);
}
.head {
left
:
40px
;
bottom
:
65px
;
font-size
:
24px
;
}
.name {
font-size
:
12px
;
left
:
40px
;
bottom
:
35px
;
}
.back {
height
:
500px
;
width
:
500px
;
border-radius:
50%
;
background
:
transparent
;
border
:
50px
solid
rgba(
255
,
255
,
255
,
0.1
);
bottom
:
-250px
;
right
:
-250px
;
box-sizing: border-box;
}
.back::after {
content
:
""
;
position
:
absolute
;
height
:
600px
;
width
:
600px
;
border-radius:
50%
;
background
:
transparent
;
border
:
30px
solid
rgba(
255
,
255
,
255
,
0.1
);
bottom
:
-80px
;
right
:
-110px
;
box-sizing: border-box;
}
</style>