CSS
body {
background: rgba(32,184,230,1);
background: linear-gradient(to bottom,
rgba(32,184,230,1) 10%,
rgba(32,184,230,1) 1%,
rgba(104,126,151,1) 37%,
rgba(128,107,125,1) 49%,
rgba(161,94,111,1) 62%,
rgba(243,78,63,1) 100%,
rgba(243,78,63,1) 100%);
padding: 0;
margin: 0;
overflow: hidden;
}
.hello-trump {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.hello-trump img {
border-radius: 10px;
box-shadow: 6px 5px 26px -4px rgba(0, 0, 0, 0.75);
}
.loader-container {
animation: slide-up-loader 1s ease-in-out;
animation-fill-mode: forwards;
animation-delay: 5.5s;
background-color: #232329;
height: 100vh;
width: 100vw;
position: fixed;
}
.trump {
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: trump-animation 2s linear infinite;
}
/* animations */
@keyframes trump-animation {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes slide-up-loader {
from { top: 0; }
to { top: -100%; }
}
