You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
2.7 KiB
153 lines
2.7 KiB
body
|
|
{
|
|
text-align: center;
|
|
background-color: #071c24;
|
|
}
|
|
.wrapper
|
|
{
|
|
position: absolute;
|
|
top:60vh;
|
|
left:calc(50% - 150px);
|
|
}
|
|
.bt
|
|
{
|
|
position: absolute;
|
|
border-bottom: 100px solid #1e252a;
|
|
border-left: 50px solid transparent;
|
|
border-right: 50px solid transparent;
|
|
border-radius: 0% 0% 50% 50%;
|
|
height: 0;
|
|
cursor: pointer;
|
|
width: 200px;
|
|
}
|
|
|
|
.base
|
|
{
|
|
z-index: 1;
|
|
}
|
|
.border
|
|
{
|
|
position: relative;
|
|
left:-5px;
|
|
top: -0.23em;
|
|
z-index: 0;
|
|
border-bottom: 108px solid #0F9C94;
|
|
border-left: 52px solid transparent;
|
|
border-right: 52px solid transparent;
|
|
border-radius: 0% 0% 50% 50%;
|
|
height: 0;
|
|
width: 206px;
|
|
}
|
|
|
|
.border2
|
|
{
|
|
position: relative;
|
|
top:calc(-108px + -1em);
|
|
left:calc(-5px + -1em);
|
|
z-index: -1;
|
|
border-bottom: calc(108px + 1.5em) solid #081620;
|
|
border-left: 60px solid transparent;
|
|
border-right: 60px solid transparent;
|
|
border-radius: 0% 0% 50% 50%;
|
|
height: 0;
|
|
width: calc(206px + 1em);
|
|
}
|
|
.border3
|
|
{
|
|
position: relative;
|
|
top:calc(-216px + -2.8em);
|
|
left:calc(-5px + -1.35em);
|
|
z-index: -2;
|
|
border-bottom: calc(108px + 2em) solid #7A6B43;
|
|
border-left: 66px solid transparent;
|
|
border-right: 66px solid transparent;
|
|
border-radius: 0% 0% 50% 50%;
|
|
height: 0;
|
|
width: calc(206px + 1em);
|
|
}
|
|
.bt_text
|
|
{
|
|
color: #9fc3c3;
|
|
position:relative;
|
|
font-family: 'Eczar', serif;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: 3em;
|
|
top:0.4em;
|
|
left:0em;
|
|
}
|
|
|
|
h1{
|
|
margin-top: 27vh;
|
|
color: #9fc3c3;
|
|
}
|
|
h3
|
|
{
|
|
color: #9fc3c3;
|
|
}
|
|
|
|
@keyframes spin3D {
|
|
from {
|
|
transform: rotate3d(.5,.5,.5, 360deg);
|
|
}
|
|
to{
|
|
transform: rotate3d(0deg);
|
|
}
|
|
}
|
|
.active
|
|
{
|
|
display:flex !important;
|
|
}
|
|
.spinner {
|
|
position: absolute;
|
|
top:38vh;
|
|
left:44.5vw;
|
|
display:none;
|
|
width: 200px;
|
|
height: 200px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
}
|
|
.leo-border-1 {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
padding: 3px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
background: rgb(63,249,220);
|
|
background: linear-gradient(0deg, rgba(63,249,220,0.1) 33%, rgba(63,249,220,1) 100%);
|
|
animation: spin3D 1.8s linear 0s infinite;
|
|
}
|
|
|
|
.leo-core-1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #37474faa;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.leo-border-2 {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
padding: 3px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
background: rgb(251, 91, 83);
|
|
background: linear-gradient(0deg, rgba(251, 91, 83, 0.1) 33%, rgba(251, 91, 83, 1) 100%);
|
|
animation: spin3D 2.2s linear 0s infinite;
|
|
}
|
|
|
|
.leo-core-2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #1d2630aa;
|
|
border-radius: 50%;
|
|
}
|