104 lines
1.9 KiB
CSS
104 lines
1.9 KiB
CSS
|
body {
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
height: 100%;
|
||
|
|
font-family: 'Open Sans Condensed', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
main {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
height: calc(100vh - 2em);
|
||
|
|
padding: 1em 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
#backdrop {
|
||
|
|
font-size:60vh;
|
||
|
|
position: absolute;
|
||
|
|
z-index: -100;
|
||
|
|
color: rgb(54, 193, 82);
|
||
|
|
opacity: 0.1;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%) scale(0);
|
||
|
|
text-transform: uppercase;
|
||
|
|
|
||
|
|
animation-name: init_me2;
|
||
|
|
animation-duration: 0.75s;
|
||
|
|
animation-timing-function:cubic-bezier(0,1.46,.9,.96);
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
#me {
|
||
|
|
max-height: 60vh;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: rgb(54, 193, 82);
|
||
|
|
|
||
|
|
animation-name: init_me;
|
||
|
|
animation-delay: 0.5s;
|
||
|
|
animation-duration: 0.75s;
|
||
|
|
animation-timing-function:cubic-bezier(0,1.46,.9,.96);
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
|
||
|
|
transform: scale(0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2 {
|
||
|
|
animation-name: init_me;
|
||
|
|
animation-delay: 0.5s;
|
||
|
|
animation-duration: 0.75s;
|
||
|
|
animation-timing-function:cubic-bezier(0,1.46,.9,.96);
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
|
||
|
|
transform: scale(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 { font-size: 1.6em; }
|
||
|
|
h1 span { color: rgb(54, 193, 82); font-weight: bold; text-transform: uppercase;}
|
||
|
|
h2 { font-size: 1.4em; }
|
||
|
|
h2 span { color: rgb(54, 193, 82); font-weight: bold;}
|
||
|
|
|
||
|
|
#links {
|
||
|
|
width: 50%;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
animation-name: init_me;
|
||
|
|
animation-delay: 1.25s;
|
||
|
|
animation-duration: 0.25s;
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
|
||
|
|
transform: scale(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
#links a {
|
||
|
|
color: inherit;
|
||
|
|
|
||
|
|
margin: 0.25em;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
flex: 1 0 calc(100%/5 - 0.5em);
|
||
|
|
}
|
||
|
|
|
||
|
|
#links svg {
|
||
|
|
color: rgb(54, 193, 82);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes init_me {
|
||
|
|
0% { transform: scale(0); }
|
||
|
|
100% { transform: scale(1); }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes init_me2 {
|
||
|
|
0% { transform: translate(-50%, -50%) scale(0); }
|
||
|
|
100% { transform: translate(-50%, -50%) scale(1); }
|
||
|
|
}
|