SCSS
body {
background: linear-gradient(to left, #2c3e50 , #3498db);
height: 100%;
overflow: hidden;
}
@for $i from 1 through 24 {
$colors:
#1abc9c,
#f1c40f,
#e74c3c,
#2c3e50,
#3498db,
#40d47e,
#16a085,
#c0392b,
#8e44ad,
#5677fc,
#8bc34a,
#673ab7,
#1abc9c,
#f1c40f,
#e74c3c,
#2c3e50,
#3498db,
#40d47e,
#16a085,
#c0392b,
#8e44ad,
#5677fc,
#8bc34a,
#673ab7;
.animated:nth-child(#{$i}) {
-webkit-animation-delay: ($i * 0.2) + s;
animation-delay: ($i * 0.2) + s;
background: nth($colors, $i)
}
}
.col {
background: #000;
width: 100px;
height: 300px;
float: left;
margin: 10px auto;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.wrapper {
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
// you can delete this line if u want
// flex-direction: column;
}
