CSS
html {
height: 100%;
}
body {
background:
-webkit-linear-gradient(#ABC4E6 , rgba(135, 60, 255, 0.0) 80%),
-webkit-linear-gradient(-45deg, #969BD9 15%, #C3A8E9 75%);
}
@keyframes harlem {
0% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
20% {
transform: scale(1.03, 1);
-webkit-transform: scale(1.03, 1);
-moz-transform: scale(1.03, 1);
-o-transform: scale(1.03, 1);
-ms-transform: scale(1.03, 1);
}
40% {
transform: scale(0.97, 1);
-webkit-transform: scale(0.97, 1);
-moz-transform: scale(0.97, 1);
-o-transform: scale(0.97, 1);
-ms-transform: scale(0.97, 1);
}
60% {
transform: scale(1.01, 1);
-webkit-transform: scale(1.01, 1);
-moz-transform: scale(1.01, 1);
-o-transform: scale(1.01, 1);
-ms-transform: scale(1.01, 1);
}
80% {
transform: scale(0.99, 1);
-webkit-transform: scale(0.99, 1);
-moz-transform: scale(0.99, 1);
-o-transform: scale(0.99, 1);
-ms-transform: scale(0.99, 1);
}
100% {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
}
h1 {
}
h2 {
margin: 0;
padding: 0;
font-size: 10px;
line-height: 10px;
letter-spacing: 2.5px;
font-family: 'Open Sans';
font-weight: 700;
color: #fff;
}
h3 {
margin: 0;
padding: 0;
font-size: 11px;
line-height: 11px;
font-family: 'Open Sans';
font-weight: 400;
color: #777;
}
h4 {
margin: 0 0 5px 29px;
padding: 0;
font-size: 14px;
line-height: 14px;
font-family: 'Open Sans';
font-weight: 700;
color: #fff;
}
h5 {
margin: 0;
padding: 0;
font-size: 13px;
line-height: 13px;
font-family: 'Open Sans';
font-weight: 700;
color: #6d6d6d;
}
h6 {
margin: 0;
padding: 0;
font-size: 13px;
line-height: 13px;
font-family: 'Open Sans';
font-weight: 700;
color: #f0f0f0;
}
.frame1 {
height: 45px;
background: white;
width:200px;
margin-top:45px;
margin-left:505px;
}
.frame2 {
height: 45px;
background: white;
width:400px;
margin-top:45px;
margin-left:1000px;
}
.screen {
background-color: #6862A2;
padding: 0;
height: 650px;
width: 500px;
position: absolute;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0);
box-shadow: -20px 24px 125px rgba(0, 0, 0, 0.8);
overflow: hidden;
margin: 30px 0;
background-image:
radial-gradient(
circle closest-side,
#341b85,
#160b39
);
}
.title {
font-family:'Heebo';
font-size:80px;
margin-left:90px;
margin-top:140px;
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #3366ff ), color-stop(0.15, #4775ff ), color-stop(0.3, #888cff ), color-stop(0.45, #14e5f3 ), color-stop(0.6, #a77fdf ),color-stop(0.75, #a77fdf ), color-stop(0.9, #ff2), color-stop(1, #1e90ff) );
background-image: gradient( linear, left top, right top, color-stop(0, #1e90ff), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #C3A8E9 ),color-stop(0.75, #C3A8E9 ), color-stop(0.9, #ff2), color-stop(1, #1e90ff) );
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}
#loader {
position: fixed;
left: 0;
right: 0;
top: 27%;
width: 390px;
}
#loader ul {
margin: 0;
list-style: none;
width: 390px;
position: relative;
padding: 0;
height: 210px;
}
#loader ul li {
position: absolute;
width: 0px;
height: 18px;
margin-top:20px;
background-color: #fff;
bottom: 0;
}
@keyframes sequence1 {
0% {
width: 40px;
}
50% {
width: 280px;
}
100% {
width: 40px;
}
}
@keyframes sequence2 {
0% {
width: 50px;
}
50% {
width: 395px;
}
100% {
width: 50px;
}
}
#loader li:nth-child(1) {
top: 0;
animation: sequence1 2s ease infinite 0;
}
#loader li:nth-child(2) {
top: 15px;
animation: sequence2 2s ease infinite 0.1s;
}
#loader li:nth-child(3) {
top: 50px;
animation: sequence1 2s ease-in-out infinite 0.2s;
}
#loader li:nth-child(4) {
top: 85px;
animation: sequence2 2s ease-in infinite 0.3s;
}
#loader li:nth-child(5) {
top: 120px;
animation: sequence1 2s ease-in-out infinite 0.4s;
}
#loader2 {
position: fixed;
left: 110px;
right: 0;
top: 43.3%;
width: 390px;
}
#loader2 ul {
margin: 0;
list-style: none;
width: 390px;
position: relative;
padding: 0;
height: 210px;
}
#loader2 ul li {
position: absolute;
right: 0px;
width: 0px;
height: 18px;
margin-top:20px;
margin-left:100px;
background-color: #fff;
bottom: 0;
}
@keyframes sequence3 {
0% {
width: 40px;
}
50% {
width: 380px;
}
100% {
width: 40px;
}
}
@keyframes sequence4 {
0% {
width: 50px;
}
50% {
width: 295px;
}
100% {
width: 50px;
}
}
#loader2 li:nth-child(1) {
top: 0;
animation: sequence3 2s ease infinite 0;
}
#loader2 li:nth-child(2) {
top: 15px;
animation: sequence4 2s ease infinite 0.1s;
}
#loader2 li:nth-child(3) {
top: 50px;
animation: sequence3 2s ease-in-out infinite 0.2s;
}
#loader2 li:nth-child(4) {
top: 85px;
animation: sequence4 2s ease-in infinite 0.3s;
}
#loader2 li:nth-child(5) {
top: 120px;
animation: sequence3 2s ease-in-out infinite 0.4s;
}
