Tycho West Coast Tour Poster

HTML
<div class="poster"> <div class="rectangle-container"> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> </div> <div class="circle"> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> <div class="circle__stripe"></div> </div> </div>
SCSS
$orange: #ffa300; $blue: #399cad; $red: #ef3641; body { margin: 0; background-color: rgba(17, 17, 17, 0.9); height: 100vh; } * { box-sizing: border-box; } .poster { background-color: $orange; width: 400px; height: 541px; position: relative; padding: 0 34px; margin: 0 auto; display: flex; top: 50%; transform: translateY(-50%); } .rectangle-container { margin-top: 80px; margin-left: auto; z-index: 1; .rectangle { width: 166px; height: 11px; background-color: $blue; margin-bottom: 11px; } } .circle { top: 168px; position: absolute; margin: 0 auto; left: 0; right: 0; width: 186px; border-radius: 50%; overflow: hidden; &__stripe { width: 186px; height: 11px; &:nth-child(odd) { background: #ef393f; background: linear-gradient(to right, #ef393f 0%,#ef393f 50%, #faa31b 50%,#faa31b 100%); } &:nth-child(even) { background: #ef393f; background: linear-gradient(to left, #ef393f 0%,#ef393f 50%, #faa31b 50%,#faa31b 100%); } } }
JAVASCRIPT
Expand for more options Login