chore: public/css/welcome.css
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: #222;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #6ee1f5;
|
||||
padding: 10px 0 20px 0;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
animation: fadeIn 5s forwards;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #6ee1f5;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
color: #6ee1f5;
|
||||
font-size: 2em;
|
||||
font-family: Raleway, sans-serif;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
white-space: pre;
|
||||
}
|
||||
.reveal span {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
animation: fadeIn 2.4s forwards;
|
||||
}
|
||||
.reveal::before, .reveal::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: white;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
.reveal::before {
|
||||
left: 50%;
|
||||
animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
|
||||
}
|
||||
.reveal::after {
|
||||
right: 50%;
|
||||
animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes slideLeft {
|
||||
to {
|
||||
left: -6%;
|
||||
opacity: 1;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
@keyframes slideRight {
|
||||
to {
|
||||
right: -6%;
|
||||
opacity: 1;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user