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);
}
