AirBnb App Icon CSS

HTML
<div class="logo"> <div class="logo__top"></div> <div class="logo__sides"></div> <div class="logo__loop"> <span></span> <span></span> <span></span> </div> <div class="logo__corners"> <span></span> <span></span> </div> </div>
SCSS
$size: 260px; .logo { z-index: 1; position: absolute; left: 50%; top: 50%; margin: (-$size/2) 0 0 (-$size/2); width: $size; height: $size; border-radius: 20%; background: linear-gradient(135deg, rgba(255, 90, 96, 1) 0%, rgba(255, 88, 140, 1) 100%); border: 1px solid #ca4662; box-shadow: 0 40px 100px rgba(202, 70, 98, 0.62); &__top { position: absolute; top: 35px; width: 67px; left: 95px; height: 29px; overflow: hidden; &:before { content: ''; position: absolute; left: 0; top: 0; margin: 0; width: 43px; height: 60px; border-radius: 50%; border-width: 12px; border-style: solid; border-color: #fff; } } &__sides { position: absolute; width: 100%; height: 100%; &:before, &:after { content: ''; position: absolute; border-style: solid; border-color: #fff; transform-origin: 0 0; border-width: 12px 0 0 12px; } &:before { left: 100.4px; top: 54px; height: 110px; transform: rotate(26deg); } &:after { right: 102px; top: 59px; height: 110px; transform: rotate(-26.5deg); } } &__corners { span { position: absolute; overflow: hidden; height: 54px; width: 61px; bottom: 43px; &:after { content: ''; position: absolute; display: block; left: 0; bottom: 0; width: 59px; height: 59px; border-radius: 50%; border-width: 12px; border-style: solid; border-color: #fff; } } span:first-child { left: 45px; } span:last-child { right: 47px; &:after { right: 0; left: initial; } } } &__loop { span { position: absolute; overflow: hidden; left: 98px; height: 44px; width: 68px; bottom: 116px; &:after { content: ''; position: absolute; display: block; left: 0; top: 0; width: 39px; height: 44px; border-radius: 50%; border-width: 12px; border-style: solid; border-color: #fff; } } span:nth-child(2) { bottom: 15px; left: 106px; width: 57px; height: 105px; &:after { left: initial; right: 0; top: -130px; width: 208px; height: 193px; } } span:nth-child(3) { bottom: 15px; left: 96px; width: 57px; height: 105px; &:after { left: initial; left: 0; top: -130px; width: 208px; height: 194px; } } } }
JAVASCRIPT
Expand for more options Login