Mascots

HTML
<div class="container"> <div class="gull1"> <div class="head1"> <div class="sunglasses1"></div> <div class="beak1"></div> </div> <div class="torso1"></div> <div class="wing1"></div> <div class="tail1"></div> <div class="left-leg1"></div> <div class="left-foot1"></div> <div class="right-leg1"></div> <div class="right-foot1"></div> </div> <div class="gull2"> <div class="head"> <div class="sunglasses"></div> <div class="beak"></div> </div> <div class="torso"></div> <div class="wing"></div> <div class="tail"></div> <div class="left-leg"></div> <div class="left-foot"></div> <div class="right-leg"></div> <div class="right-foot"></div> </div> </div>
SCSS
/*Colour Palette */ $background: #97c5d9; $black: #231F20; $white: #FEF1E3; $gray: #666; $orange: #EA773B; body { background: $background; } .container { position: relative; margin: auto; top: 40px; height: 352px; width: 600px; background: none; } .torso1 { position: absolute; height: 110px; width: 200px; left: 100px; top: 145px; border-radius: 0 0 80px 100px; background: $white; -webkit-transform: rotate(-20deg); z-index: 2; } .head1 { position: absolute; height: 190px; width: 70px; left: 207px; top: 40px; border-radius: 50px; background: $white; z-index: 3; } .sunglasses1 { position: absolute; width: 90px; height: 5px; left: -7px; top: 25px; background: $black; border-radius: 5px; } .sunglasses1:before { position: absolute; content: ""; height: 20px; width: 30px; left: 35px; border-radius: 0 0 50px 30px; background: $black; } .sunglasses1:after { position: absolute; content: ""; height: 20px; width: 30px; left: 65px; border-radius: 0 0 30px 50px; background: $black; } .beak1 { position: absolute; height: 10px; width: 25px; left: 79px; top: 47px; border-top-left-radius: 50px; border-top-right-radius: 50px; -webkit-transform: rotate(30deg); background: $orange; } .beak1:after { position: absolute; content: ""; height: 40px; width: 20px; left: -17px; top: -12px; -webkit-transform: rotate(-103deg); -webkit-clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%); clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%); background: $orange; } .wing1 { position: absolute; height: 70px; width: 115px; left: 110px; top: 156px; border-radius: 0 0 120px 70px; background: $black; -webkit-transform: rotate(-20deg); z-index: 2; } .tail1 { position: absolute; height: 100px; width: 100px; background: $black; left: 25px; top: 145px; -webkit-clip-path: polygon(100% 45%, 0 0, 85% 100%); clip-path: polygon(100% 45%, 0 0, 85% 100%); -webkit-transform: rotate(110deg); z-index: 1; } .left-leg1 { position: absolute; height: 90px; width: 10px; left: 200px; top: 240px; background: $orange; -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); } .right-leg1 { position: absolute; height: 90px; width: 10px; left: 240px; top: 240px; background: $orange; -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); } .left-foot1 { position: absolute; height: 40px; width: 40px; background: $orange; left: 186px; top: 312px; -webkit-clip-path: polygon(45% 0, 0% 100%, 100% 100%); clip-path: polygon(45% 0, 0% 100%, 100% 100%); } .right-foot1 { position: absolute; height: 40px; width: 40px; background: $orange; left: 227px; top: 312px; -webkit-clip-path: polygon(45% 0, 0% 100%, 100% 100%); clip-path: polygon(45% 0, 0% 100%, 100% 100%); } .gull2 { position: absolute; left: 100px; } .head { position: absolute; height: 197px; width: 70px; left: 250px; top: 40px; border-radius: 50px; background: $white; z-index: 3; } .torso { position: absolute; height: 110px; width: 200px; left: 227px; top: 145px; border-radius: 0 0 100px 80px; background: linear-gradient(to right, $gray 20%, $white 20%); -webkit-transform: rotate(20deg); z-index: 2; } .wing { position: absolute; height: 70px; width: 110px; left: 304px; top: 155px; border-radius: 0 0 70px 120px; background: $gray; -webkit-transform: rotate(20deg); z-index: 2; } .tail { position: absolute; height: 100px; width: 100px; background: $gray; left: 390px; top: 159px; -webkit-clip-path: polygon(100% 45%, 0 0, 85% 100%); clip-path: polygon(100% 45%, 0 0, 85% 100%); -webkit-transform: rotate(-5deg); z-index: 1; } .left-leg { position: absolute; height: 90px; width: 10px; left: 280px; top: 240px; background: $orange; -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); } .right-leg { position: absolute; height: 90px; width: 10px; left: 320px; top: 240px; background: $orange; -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); } .left-foot { position: absolute; height: 40px; width: 40px; background: $orange; left: 258px; top: 312px; -webkit-clip-path: polygon(69% 0, 0% 100%, 100% 100%); clip-path: polygon(69% 0, 0% 100%, 100% 100%); } .right-foot { position: absolute; height: 40px; width: 40px; background: $orange; left: 298px; top: 312px; -webkit-clip-path: polygon(69% 0, 0% 100%, 100% 100%); clip-path: polygon(69% 0, 0% 100%, 100% 100%); } .sunglasses { position: absolute; width: 75px; height: 5px; left: -2px; top: 25px; background: $black; border-radius: 5px; } .sunglasses:before { position: absolute; content: ""; height: 20px; width: 30px; left: 5px; border-radius: 0 0 50px 30px; background: $black; } .sunglasses:after { position: absolute; content: ""; height: 20px; width: 30px; left: 40px; border-radius: 0 0 30px 50px; background: $black; } .beak { position: absolute; height: 15px; width: 20px; left: 25px; top: 29px; border-top-left-radius: 50px; border-top-right-radius: 50px; background: $orange; } .beak:after { position: absolute; content: ""; height: 30px; width: 20px; top: 14px; background: $orange; -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0); clip-path: polygon(0 0, 50% 100%, 100% 0); }
JAVASCRIPT
Expand for more options Login