Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$border: #eee 2px dashed;
$nameList: belt1, belt2, belt3, belt4;
$colorList: #3f171d, #573121, #774635, #b20008;
$degList: 15deg, -15deg, 25deg, -10deg;
$translateList: 0vh, -10vh, 50vh, 40vh;
body {
background-color: #eee;
overflow: hidden;
background-image: url('bg.jpg');
-webkit-background-size: cover;
background-size: cover;
& div {
@each $class in $nameList {
$index : index($nameList, $class);
&.#{$class} {
box-sizing: border-box;
margin-left: -200%;
padding-top: 10px;
width: 500%;
height: 100px;
background-color: nth($colorList, $index);
box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, .4);
-webkit-transform: translate(0, nth($translateList, $index)) rotateZ(nth($degList, $index));
transform: translate(0, nth($translateList, $index)) rotateZ(nth($degList, $index));
&:after {
content: "";
display: block;
height: 80px;
border-top: $border;
border-bottom: $border;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment