@import url('https://fonts.googleapis.com/css?family=Roboto:700');
:root {
--color-main: #004880;
}
html, body, .wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
* {
box-sizing: border-box;
}
.composition {
position: relative;
width: 750px;
height: 400px;
background-color: var(--color-main);
background-image: linear-gradient(to left, #072e61, #004880);
overflow: hidden;
}
.layer-0 {
position: absolute;
z-index: 10;
}
.layer-1 {
position: absolute;
z-index: 15;
}
.layer-2 {
position: absolute;
z-index: 20;
}
.shelf {
position: absolute;
top: 150px;
left: 250px;
}
.shelf__side_left {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 60px;
background-color: #cdfffa;
transform: skewY(-25deg);
}
.shelf__side_front {
position: absolute;
top: 137px;
left: 0;
width: 70px;
height: 60px;
background-color: #9dfbf3;
background-image: linear-gradient(160deg, #84fff2, #2f7fb2);
border: 1px solid rgba(47, 127, 178, 0.5);
transform: skewY(30deg);
}
.shelf__side_bottom {
position: absolute;
top: 43px;
left: 36px;
width: 500px;
height: 73px;
background-color: #7adbd5;
transform: skewY(-25deg) skewX(44deg);
}
.shelf__side_right {
position: absolute;
top: 42px;
left: 70px;
width: 500px;
height: 60px;
background-color: #0b2f6c;
background-image: linear-gradient(0deg, #0b2f6c, #16598b);
transform: skewY(-25deg);
}
.shelf__handle_top {
position: absolute;
top: 144px;
left: 17px;
width: 30px;
height: 7px;
background-color: #5ac8d3;
transform: skewY(30deg) skewX(-50deg)
}
.shelf__handle_front {
position: absolute;
top: 149px;
left: 13px;
width: 30px;
height: 10px;
background-color: #71e7e4;
border: 1px solid rgba(47, 127, 178, 0.5);
transform: skewY(30deg);
}
.shelf__handle_right {
position: absolute;
top: 155px;
left: 43px;
width: 6px;
height: 10px;
background-color: #287caa;
transform: skewY(-30deg);
}
.shadow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 150px;
height: 100%;
background-image: linear-gradient(to right, rgba(1, 20, 61, 0), rgba(1, 20, 61, 0.8) 65%, rgba(1, 20, 61, 1));
}
.case {
position: absolute;
transform: translateY(0);
transition: .3s transform ease-in;
}
.case:hover {
transform: translateY(-5px);
}
.case_1 {
top: -85px;
right: -470px;
}
.case_2 {
top: -82px;
right: -463px;
}
.case_3 {
top: -79px;
right: -456px;
}
.case_4 {
top: -76px;
right: -449px;
}
.case_5 {
top: -73px;
right: -442px;
}
.case_6 {
top: -70px;
right: -435px;
}
.case_7 {
top: -67px;
right: -428px;
}
.case_8 {
top: -63px;
right: -421px;
}
.case_9 {
top: -59px;
right: -414px;
}
.case_10 {
top: -56px;
right: -407px;
}
.case_11 {
top: -53px;
right: -400px;
}
.case_12 {
top: -49px;
right: -393px;
}
.case_13 {
top: -46px;
right: -386px;
}
.case_14 {
top: -43px;
right: -379px;
}
.case_15 {
top: -39px;
right: -372px;
}
.case_16 {
top: -36px;
right: -365px;
}
.case_17 {
top: -33px;
right: -358px;
}
.case_18 {
top: -29px;
right: -351px;
}
.case_19 {
top: -26px;
right: -344px;
}
.case_20 {
top: -23px;
right: -337px;
}
.case_21 {
top: -19px;
right: -330px;
}
.case_22 {
top: -16px;
right: -323px;
}
.case_23 {
top: -13px;
right: -316px;
}
.case_24 {
top: -9px;
right: -309px;
}
.case_25 {
top: -6px;
right: -302px;
}
.case_26 {
top: -3px;
right: -295px;
}
.case_27 {
top: 1px;
right: -288px;
}
.case_28 {
top: 4px;
right: -281px;
}
.case_29 {
top: 7px;
right: -274px;
}
.case_30 {
top: 11px;
right: -267px;
}
.case_31 {
top: 14px;
right: -260px;
}
.case_32 {
top: 17px;
right: -253px;
}
.case_33 {
top: 20px;
right: -246px;
}
.case_34 {
top: 24px;
right: -239px;
}
.case_35 {
top: 27px;
right: -232px;
}
.case_36 {
top: 30px;
right: -225px;
}
.case_37 {
top: 33px;
right: -218px;
}
.case_38 {
top: 37px;
right: -211px;
}
.case_39 {
top: 40px;
right: -204px;
}
.case_40 {
top: 43px;
right: -197px;
}
.case_41 {
top: 46px;
right: -190px;
}
.case_42 {
top: 49px;
right: -183px;
}
.case_43 {
top: 53px;
right: -176px;
}
.case_44 {
top: 56px;
right: -169px;
}
.case_45 {
top: 59px;
right: -162px;
}
.case_46 {
top: 62px;
right: -155px;
}
.case_47 {
top: 65px;
right: -148px;
}
.case__front {
position: absolute;
top: 3px;
left: 0;
width: 70px;
height: 55px;
background-color: #9d7f63;
transform: skewY(25deg);
}
.case__label {
position: absolute;
top: -12px;
left: 5px;
width: 10px;
height: 7px;
background-color: #9d7f63;
transform: skewY(25deg);
}
.case__label_left {
top: -12px;
left: 5px;
}
.case__label_right {
top: 12px;
left: 55px;
}
.case__top {
position: absolute;
top: 0;
left: 2px;
width: 70px;
height: 4px;
background-image: linear-gradient(to top, #e9eceb, #a3bab4 50%, #e9eceb);
transform: skewY(25deg) skewX(-45deg);
}
.case__right {
position: absolute;
top: 18px;
left: 69px;
width: 5px;
height: 55px;
background-image: linear-gradient(to left, #e9eceb, #a3bab4 50%, #e9eceb);
transform: skewY(-25deg);
}
.case__number {
position: absolute;
top: 41px;
left: 10px;
color: #7c664e;
font-size: 8px;
transform-origin: top left;
transform: rotate(-66deg) skewY(-25deg);
}
.glow {
position: absolute;
}
.glow__bottom {
position: absolute;
top: 60px;
left: 5px;
width: 135px;
height: 120px;
background-image: linear-gradient(to top, rgba(132, 255, 242, 1), rgba(132, 255, 242, 1) 30%, rgba(132, 255, 242, 0));
transform: perspective(120px) rotateX(-20deg);
}
.glow__top {
position: absolute;
top: -25px;
left: 7px;
width: 130px;
height: 180px;
background-image: linear-gradient(to top, rgba(132, 255, 242, 1), rgba(132, 255, 242, 1) 20%, rgba(132, 255, 242, 0));
transform: perspective(150px) rotateX(-20deg);
}
.glow__ball {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
border-radius: 10px;
background-color: #83fff2;
transform: translateY(160px);
}
.glow__ball_1 {
animation: 5s fadeUp infinite;
animation-delay: .5s;
}
.glow__ball_2 {
left: 10px;
width: 5px;
height: 5px;
animation: 4s fadeUp infinite;
animation-delay: .8s;
}
.glow__ball_3 {
left: 24px;
width: 15px;
height: 15px;
animation: 9s fadeUp infinite;
animation-delay: .65s;
}
.glow__ball_4 {
left: 34px;
width: 8px;
height: 8px;
animation: 7s fadeUp infinite;
animation-delay: .5s;
}
.glow__ball_5 {
left: 57px;
width: 14px;
height: 14px;
animation: 7s fadeUp infinite;
animation-delay: .9s;
}
.glow__ball_6 {
left: 78px;
width: 11px;
height: 11px;
animation: 3s fadeUp infinite;
animation-delay: .3s;
}
.glow__ball_7 {
left: 91px;
width: 13px;
height: 13px;
animation: 8s fadeUp infinite;
animation-delay: .77s;
}
.glow__ball_8 {
left: 105px;
width: 7px;
height: 7px;
animation: 6s fadeUp infinite;
animation-delay: .4s;
}
.glow__ball_9 {
left: 113px;
width: 8px;
height: 8px;
animation: 4s fadeUp infinite;
animation-delay: .6s;
}
.glow__ball_10 {
left: 120px;
width: 4px;
height: 4px;
animation: 9s fadeUp infinite;
animation-delay: .92s;
}
.numbers {
position: absolute;
top: 0;
left: 122px;
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 200px;
display: flex;
}
.numbers__item {
margin: 0 10px;
animation: 5s bounceUpDown infinite;
}
.numbers__item_1 {
animation-delay: .3s;
}
.numbers__item_2 {
animation: 5.4s bounceUpDown infinite;
animation-delay: .5s;
}
.numbers__item_3 {
animation-delay: .3s;
}
@keyframes fadeUp {
0% {
transform: translateY(160px);
opacity: 1;
}
60% {
opacity: 1;
}
100% {
transform: translateY(-10px);
opacity: 0;
}
}
@keyframes bounceUpDown {
0, 100% {
transform: translateY(0);
}
50% {
transform: translateY(50px);
}
}
@media screen and (max-width: 800px) {
.composition {
transform: scale(0.8);
}
}
@media screen and (max-width: 700px) {
.composition {
transform: scale(0.7);
}
}
@media screen and (max-width: 600px) {
.composition {
transform: scale(0.6);
}
}
@media screen and (max-width: 500px) {
.composition {
transform: scale(0.5);
}
}
@media screen and (max-width: 400px) {
.composition {
transform: scale(0.4);
}
}
@media screen and (max-width: 300px) {
.composition {
transform: scale(0.3);
}
}
!
