* {
margin
:
0
;
padding
:
0
;
box-sizing: border-box;
}
body {
background
:
rgb
(
0
,
0
,
0
);
display
: flex;
justify-
content
:
center
;
top
:
10px
;
margin-top
:
5em
;
font-family
:
'Big Shoulders Display'
,
cursive
;
}
h
1
{
color
:
rgb
(
240
,
147
,
8
);
animation: todown
5
s;
text-transform
:
uppercase
;
}
.container {
width
:
50.5em
;
height
:
30em
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform: translate(
-50%
,
-50%
);
display
: flex;
}
.img
0
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
margin-right
:
3em
;
background-image
:
url
(
background-
size
: cover;
background-position
:
left
;
animation: shrink
1
s;
}
.img
0:
:after,
.img
0:
:before {
content
:
''
;
position
:
absolute
;
z-index
:
-1
;
width
:
100%
;
height
:
100%
;
}
.img
0:
:after {
background
:
rgb
(
255
,
255
,
255
);
transform: rotate(
5
deg);
}
.img
0:
:before {
background
:
rgb
(
50
,
205
,
50
);
transform: rotate(
-5
deg);
}
.img
1
{
width
:
100%
;
height
:
100%
;
position
:
relative
;
left
:
3em
;
margin-right
:
3em
;
background-image
:
url
(
background-
size
: cover;
background-position
:
center
;
}
.img
1:
:after,
.img
1:
:before {
content
:
''
;
position
:
absolute
;
z-index
:
-1
;
width
:
100%
;
height
:
100%
;
}
.img
1:
:after {
background
:
rgb
(
255
,
255
,
255
);
transform: rotate(
3
deg);
}
.img
1:
:before {
background
:
rgb
(
50
,
205
,
50
);
transform: rotate(
-3
deg);
}
.img
2
{
width
:
100%
;
height
:
100%
;
position
:
relative
;
left
:
10em
;
background-image
:
url
(
background-
size
: cover;
background-position
:
right
;
animation: shrink
1
s;
}
.img
2:
:after,
.img
2:
:before {
content
:
''
;
position
:
absolute
;
z-index
:
-1
;
width
:
100%
;
height
:
100%
;
}
.img
2:
:after {
background
: rgba(
255
,
255
,
255
,
0.829
);
transform: rotate(
7
deg);
}
.img
2:
:before {
background
: rgba(
50
,
205
,
50
,
0.836
);
transform: rotate(
-7
deg);
}
@keyframes todown {
0%
{
opacity:
0
;
transform: translateY(
-150px
);
}
60%
{
opacity:
0.6
;
transform: translateY(
1.2em
);
transform: scale(
0.5
,
0.5
);
color
:
rgb
(
0
,
0
,
255
);
}
100%
{
opacity:
1
;
transform: translateY(
0
);
}
}
@keyframes shrink {
0%
{
transform: scale(
0
,
0
);
}
50%
{
transform: scale(
0.5
,
0.5
);
}
100%
{
transform: scale(
1
,
1
);
}
}