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.
104 lines
1.8 KiB
104 lines
1.8 KiB
body
|
|
{
|
|
--bgColor: #051c25;
|
|
--borderSize: 3px;
|
|
background: var(--bgColor);
|
|
font-size: 16px;
|
|
}
|
|
html, body
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
body
|
|
{
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
h1
|
|
{
|
|
position: absolute;
|
|
top:15%;
|
|
left:calc(40% - 2em);
|
|
color: #9fc3c3;
|
|
font-family: 'Eczar', serif;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: 3em;
|
|
}
|
|
.wrapper
|
|
{
|
|
position: absolute;
|
|
top:60vh;
|
|
left:calc(50% - 111px);
|
|
}
|
|
.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:0.6em;
|
|
} |