body {
font-family
:
'Montserrat'
,
sans-serif
;
margin
:
0
;
padding
:
0
;
height
:
100
vh;
overflow
:
hidden
;
background
: linear-gradient(
135
deg,
#3498db
,
#8e44ad
);
}
#preloader {
position
:
fixed
;
width
:
100%
;
height
:
100%
;
background
:
#fda56b
;
display
: flex;
align-items:
center
;
justify-
content
:
center
;
z-index
:
9999
;
}
#loader {
border
:
8px
solid
#f3f3f3
;
border-top
:
8px
solid
#3498db
;
border-radius:
50%
;
width
:
50px
;
height
:
50px
;
animation: spin
1
s linear infinite;
}
@keyframes spin {
0%
{
transform: rotate(
0
deg);
}
100%
{
transform: rotate(
360
deg);
}
}
#splash {
height
:
100
vh;
display
: flex;
align-items: flex-end;
}
.curtain {
width
:
100%
;
height
:
100%
;
position
:
absolute
;
bottom
:
0
;
overflow
:
hidden
;
animation: curtainAnimation
4
s ease-out forwards, gradientAnimation
3
s ease-out forwards;
}
.splash-content {
text-align
:
center
;
padding
:
20px
;
color
:
#fff
;
position
:
relative
;
z-index
:
2
;
}
.splash-content i {
font-size
:
2em
;
}
.additional-splash-effects {
position
:
absolute
;
bottom
:
0
;
width
:
100%
;
height
:
100%
;
background
: linear-gradient(
135
deg,
#ff6b6b
,
#8e44ad
,
#3498db
,
#e74c3c
);
animation: backgroundAnimation
20
s infinite alternate;
z-index
:
1
;
}
#content {
text-align
:
center
;
position
:
relative
;
}
.card {
background-color
:
#dbca34
;
padding
:
20px
;
border-radius:
10px
;
box-shadow:
0
0
20px
rgba(
0
,
0
,
0
,
0.1
);
margin
:
20px
;
color
:
rgb
(
255
,
0
,
0
);
width
:
300px
;
animation: cardAnimation
1.5
s ease-out;
}
.card i {
margin-right
:
5px
;
}
.animated-emoji {
font-size
:
2em
;
margin-top
:
10px
;
animation: bounce
1
s infinite;
}
.animated-title {
animation: fadeInDown
1.5
s ease-out;
}
.animated-subtitle {
animation: fadeInUp
1.5
s ease-out;
}
@keyframes curtainAnimation {
0%
{
transform: translateY(
100%
);
}
100%
{
transform: translateY(
0
);
}
}
@keyframes gradientAnimation {
0%
{
opacity:
0
;
}
100%
{
opacity:
1
;
}
}
@keyframes backgroundAnimation {
0%
{
background-position
:
0%
50%
;
}
100%
{
background-position
:
100%
50%
;
}
}
@keyframes cardAnimation {
0%
{
opacity:
0
;
transform: translateY(
20px
);
}
100%
{
opacity:
1
;
transform: translateY(
0
);
}
}
@keyframes bounce {
0%
,
20%
,
50%
,
80%
,
100%
{
transform: translateY(
0
);
}
40%
{
transform: translateY(
-20px
);
}
60%
{
transform: translateY(
-10px
);
}
}
@keyframes fadeInDown {
0%
{
opacity:
0
;
transform: translateY(
-20px
);
}
100%
{
opacity:
1
;
transform: translateY(
0
);
}
}
@keyframes fadeInUp {
0%
{
opacity:
0
;
transform: translateY(
20px
);
}
100%
{
opacity:
1
;
transform: translateY(
0
);
}
}