<!-- Peppa Pig -->
<div id="peppa">
<!-- The head -->
<div class="top_of_face"></div>
<div class="bottom_of_face_1"></div>
<div class="bottom_of_face_2"></div>
<div class="part_of_face_1"></div>
<div class="part_of_face_2"></div>
<!-- The ears -->
<div class="left_ear"></div>
<div class="bottom_left_of_left_ear"></div>
<div class="bottom_right_of_left_ear"></div>
<div class="right_ear"></div>
<div class="bottom_left_of_right_ear"></div>
<div class="bottom_right_of_right_ear"></div>
<!-- The eyes -->
<div class="left_eye_socket"></div>
<div class="right_eye_socket"></div>
<div class="left_pupil"></div>
<div class="right_pupil"></div>
<div class="eyes"></div>
<!-- The nose -->
<div class="center_of_nose"></div>
<div class="vertical_line_near_nose"></div>
<div class="horizontal_line_near_nose"></div>
<div class="part_of_nose"></div>
<div class="bottom_of_nose"></div>
<div class="top_of_nose"></div>
<!-- The mouth -->
<div class="left_of_mouth"></div>
<div class="right_of_mouth"></div>
<div class="left_of_mouth_2"></div>
<div class="right_of_mouth_2"></div>
<div class="bottom_of_mouth"></div>
<div class="top_of_mouth"></div>
<!-- The cheek -->
<div class="cheek"></div>
<!-- The dress -->
<div class="dress"></div>
<div class="bottom_of_dress_1"></div>
<div class="bottom_of_dress_2"></div>
<div class="left_of_dress"></div>
<div class="right_of_dress"></div>
<div class="bottom_of_dress_3"></div>
<!-- The hands -->
<div class="left_hand"></div>
<div class="first_finger"></div>
<div class="third_finger"></div>
<div class="second_finger"></div>
<div class="fifth_finger"></div>
<div class="right_hand"></div>
<div class="fourth_finger"></div>
<div class="sixth_finger"></div>
<!-- The legs -->
<div class="left_leg"></div>
<div class="left_foot">
<div class="bottom_of_foot"></div>
<div class="top_of_foot"></div>
<div class="left_of_foot"></div>
<div class="right_of_foot"></div>
</div>
<div class="right_leg"></div>
<div class="right_foot">
<div class="bottom_of_foot"></div>
<div class="top_of_foot"></div>
<div class="left_of_foot"></div>
<div class="right_of_foot"></div>
</div>
<!-- The tail -->
<div class="left_of_tail"></div>
<div class="right_of_tail"></div>
<div class="top_of_tail"></div>
<div class="bottom_of_tail"></div>
<!-- The shadow of Peppa Pig -->
<div class="shadow"></div>
</div>
<!-- The ground -->
<div id="ground">
<!-- The yellow flowers -->
<div class="left_yellow_flower">
<div class="stalk_of_yellow_flower"></div>
<div class="top_right_yellow_petal"></div>
<div class="bottom_right_yellow_petal"></div>
<div class="bottom_left_yellow_petal"></div>
<div class="top_left_yellow_petal"></div>
</div>
<div class="right_yellow_flower">
<div class="stalk_of_yellow_flower"></div>
<div class="top_right_yellow_petal"></div>
<div class="bottom_right_yellow_petal"></div>
<div class="bottom_left_yellow_petal"></div>
<div class="top_left_yellow_petal"></div>
</div>
<!-- The grass -->
<div class="left_clump_of_grass">
<div class="left_blade_of_grass"></div>
<div class="center_blade_of_grass"></div>
<div class="right_blade_of_grass"></div>
</div>
<div class="center_clump_of_grass">
<div class="left_blade_of_grass"></div>
<div class="center_blade_of_grass"></div>
<div class="right_blade_of_grass"></div>
</div>
<div class="right_clump_of_grass">
<div class="left_blade_of_grass"></div>
<div class="center_blade_of_grass"></div>
<div class="right_blade_of_grass"></div>
</div>
<!-- The white flowers -->
<div class="left_white_flower">
<div class="stalk_of_white_flower"></div>
<div class="top_right_white_petal"></div>
<div class="bottom_right_white_petal"></div>
<div class="bottom_left_white_petal"></div>
<div class="top_left_white_petal"></div>
<div class="center_of_white_flower"></div>
</div>
<div class="right_white_flower">
<div class="stalk_of_white_flower"></div>
<div class="top_right_white_petal"></div>
<div class="bottom_right_white_petal"></div>
<div class="bottom_left_white_petal"></div>
<div class="top_left_white_petal"></div>
<div class="center_of_white_flower"></div>
</div>
<div class="center_white_flower">
<div class="stalk_of_white_flower"></div>
<div class="top_right_white_petal"></div>
<div class="bottom_right_white_petal"></div>
<div class="bottom_left_white_petal"></div>
<div class="top_left_white_petal"></div>
<div class="center_of_white_flower"></div>
</div>
</div>
body {
background-color: #87B9F6;
overflow: hidden;
}
#peppa {
position: absolute;
top: 65%;
left: 55%;
width: 300px;
margin-left: -150px;
margin-top: -100px;
}
#peppa * {
position: absolute;
}
.dress {
top: 4px;
left: 14px;
width: 180px;
height: 154px;
background-color: #E9565E;
border: 8px solid #E3353F;
border-bottom: none;
-moz-border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
-webkit-border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
z-index: -2;
}
.bottom_of_dress_1, .bottom_of_dress_2 {
height: 2px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: 6;
}
.bottom_of_dress_1 {
top: 168px;
left: 14px;
width: 194px;
background-color: #E3353F;
border-top: 5px solid #E3353F;
}
.bottom_of_dress_2 {
top: 162px;
left: 20px;
width: 183px;
background-color: #E9565E;
border-top: 5px solid #E9565E;
}
.left_of_dress, .right_of_dress {
top: 132px;
height: 40px;
width: 8px;
background-color: #E3353F;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 5;
}
.left_of_dress {
left: 13px;
border-right: 3px solid #E9565E;
-ms-transform: rotate(9deg);
-webkit-transform: rotate(9deg);
transform: rotate(9deg);
}
.right_of_dress {
left: 199px;
border-left: 3px solid #E9565E;
-ms-transform: rotate(-6deg);
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
.bottom_of_dress_3 {
top: 166px;
left: 12px;
height: 6px;
width: 198px;
background-color: #E3353F;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 5;
}
.top_of_face {
top: -107px;
left: 40px;
height: 150px;
width: 147px;
background-color: #FFB0DF;
border: 7px solid #EB8DC2;
border-bottom-left-radius: 220px;
border-top-right-radius: 350px;
border-bottom-right-radius: 235px;
border-top-left-radius: 180px;
-ms-transform: rotate(18deg);
-webkit-transform: rotate(18deg);
transform: rotate(18deg);
}
.bottom_of_face_1, .bottom_of_face_2 {
top: -69px;
left: 31px;
height: 121px;
width: 149px;
background-color: #FFB0DF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.bottom_of_face_1 {
border: 7px solid #EB8DC2;
border-bottom: 7px solid transparent;
z-index: 2;
}
.bottom_of_face_2 {
border: 7px solid #EB8DC2;
border-bottom: 7px solid transparent;
z-index: 1;
}
.bottom_of_nose, .top_of_nose {
background-color: #FFB0DF;
-moz-border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
-webkit-border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}
.bottom_of_nose {
top: -113px;
left: -11px;
width: 60px;
height: 76px;
border-left: 7px solid #EB8DC2;
border-top: 7px solid #EB8DC2;
-ms-transform: rotate(-70deg);
-webkit-transform: rotate(-70deg);
transform: rotate(-70deg);
}
.top_of_nose {
top: -149px;
left: 11px;
width: 68px;
height: 105px;
border-right: 7px solid #EB8DC2;
border-top: 6px solid #EB8DC2;
border-left: 2px solid transparent;
-ms-transform: rotate(-73deg);
-webkit-transform: rotate(-73deg);
transform: rotate(-73deg);
}
.eyes:before, .eyes:after {
position: absolute;
content: "";
background-color: #FDFDFD;
border: 5px solid #FDFDFD;
-moz-border-radius: 47%;
-webkit-border-radius: 47%;
border-radius: 47%;
z-index: 2;
}
.eyes:before {
top: -105px;
left: 65px;
width: 11px;
height: 12px;
}
.eyes:after {
top: -92px;
left: 107px;
width: 12px;
height: 13px;
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.right_pupil, .left_pupil {
height: 11px;
width: 10px;
background-color: #000;
-moz-border-radius: 47%;
-webkit-border-radius: 47%;
border-radius: 47%;
-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
z-index: 3;
}
.left_pupil {
top: -99px;
left: 73px;
}
.right_pupil {
top: -85px;
left: 116px;
}
.center_of_nose {
top: -128px;
left: -16px;
height: 58px;
width: 42px;
background-color: #FFB0DF;
border: 7px solid #EB8DC2;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-ms-transform: rotate(29deg);
-webkit-transform: rotate(29deg);
transform: rotate(29deg);
z-index: 3;
}
.center_of_nose:before, .center_of_nose:after {
position: absolute;
content: "";
width: 11px;
height: 12px;
background-color: #D667A9;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-ms-transform: rotate(-39deg);
-webkit-transform: rotate(-39deg);
transform: rotate(-39deg);
}
.center_of_nose:before {
top: 24px;
left: 7px;
}
.center_of_nose:after {
top: 19px;
right: 8px;
}
.cheek {
top: -58px;
left: 121px;
width: 45px;
height: 50px;
background-color: #FF8CD1;
border: 11px solid #FFB0DF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-ms-transform: rotate(24deg);
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
z-index: 3;
}
.right_eye_socket, .left_eye_socket {
width: 35px;
height: 35px;
background-color: #EB8DC2;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.right_eye_socket {
top: -98px;
left: 100px;
-ms-transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
z-index: 2;
}
.left_eye_socket {
top: -112px;
left: 58px;
z-index: 1;
}
.left_ear, .right_ear {
height: 44px;
background-color: #FFB0DF;
border: 7px solid #EB8DC2;
-moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
z-index: -1;
}
.left_ear {
top: -154px;
left: 108px;
width: 21px;
-ms-transform: rotate(190deg);
-webkit-transform: rotate(190deg);
transform: rotate(190deg);
}
.right_ear {
top: -132px;
left: 149px;
width: 23px;
-ms-transform: rotate(210deg);
-webkit-transform: rotate(210deg);
transform: rotate(210deg);
}
.bottom_left_of_left_ear, .bottom_right_of_left_ear, .bottom_left_of_right_ear, .bottom_right_of_right_ear {
width: 7px;
height: 10px;
background-color: #EB8DC2;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: 2;
}
.bottom_left_of_right_ear {
top: -98px;
left: 146px;
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.bottom_right_of_right_ear {
top: -87px;
left: 161px;
-ms-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.bottom_left_of_left_ear {
top: -114px;
left: 110px;
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.bottom_right_of_left_ear {
top: -109px;
left: 126px;
-ms-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.vertical_line_near_nose, .horizontal_line_near_nose {
width: 6px;
background-color: #EB8DC2;
}
.vertical_line_near_nose {
top: -40px;
left: 42px;
height: 10px;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
z-index: 4;
}
.horizontal_line_near_nose {
top: -39px;
left: 44px;
height: 14px;
-ms-transform: rotate(98deg);
-webkit-transform: rotate(98deg);
transform: rotate(98deg);
-moz-border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
-webkit-border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
z-index: 3;
}
.part_of_nose {
top: -49px;
left: 44px;
width: 1px;
height: 1px;
background-color: #FFB0DF;
border: 9px solid #FFB0DF;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
z-index: 2;
}
.part_of_face_1, .part_of_face_2 {
background-color: transparent;
border-bottom: 4px solid #FFB0DF;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: 6;
}
.part_of_face_1 {
top: -34px;
left: 125px;
width: 85px;
height: 40px;
-ms-transform: rotate(-85.5deg);
-webkit-transform: rotate(-85.5deg);
transform: rotate(-85.5deg);
}
.part_of_face_2 {
top: -8px;
left: 150px;
width: 50px;
height: 20px;
-ms-transform: rotate(-75deg);
-webkit-transform: rotate(-75deg);
transform: rotate(-75deg);
}
.left_of_mouth, .right_of_mouth, .left_of_mouth_2, .right_of_mouth_2, .bottom_of_mouth, .top_of_mouth {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: 2;
}
.left_of_mouth {
top: -54px;
left: 55px;
width: 64px;
height: 71px;
background-color: transparent;
border-bottom: 6px solid #D8468F;
border-left: 4px solid transparent;
border-right: 5px solid transparent;
-ms-transform: rotate(24deg);
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
.right_of_mouth {
top: -61px;
left: 48px;
width: 80px;
height: 71px;
background-color: transparent;
border-bottom: 2px solid transparent;
border-right: 8px solid #D8468F;
border-top: 4px solid transparent;
-ms-transform: rotate(92deg);
-webkit-transform: rotate(92deg);
transform: rotate(92deg);
}
.left_of_mouth_2 {
top: -12px;
left: 56px;
width: 6px;
height: 14px;
background-color: #D8468F;
-ms-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
.right_of_mouth_2 {
top: -1px;
left: 117px;
width: 7px;
height: 9px;
background-color: #D8468F;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.bottom_of_mouth {
top: -60px;
left: 49px;
width: 80px;
height: 71px;
background-color: transparent;
border-bottom: 2px solid transparent;
border-right: 8px solid #D8468F;
border-top: 4px solid transparent;
-ms-transform: rotate(88deg);
-webkit-transform: rotate(88deg);
transform: rotate(88deg);
}
.top_of_mouth {
top: -47px;
left: 59px;
width: 63px;
height: 63px;
background-color: #FFB0DF;
}
.left_hand, .right_hand {
top: 72px;
height: 10px;
background-color: #FDB6E0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.left_hand {
left: -29px;
width: 75px;
-ms-transform: rotate(156deg);
-webkit-transform: rotate(156deg);
transform: rotate(156deg);
z-index: -3;
}
.right_hand {
left: 180px;
width: 65px;
-ms-transform: rotate(204deg);
-webkit-transform: rotate(204deg);
transform: rotate(204deg);
z-index: 2;
}
.first_finger, .second_finger, .third_finger, .fourth_finger, .fifth_finger, .sixth_finger {
height: 8px;
background-color: #FDB6E0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 3;
}
.first_finger {
top: 75px;
left: -26px;
width: 22px;
border-top-left-radius: 50%;
border-top-right-radius: 35%;
-ms-transform: rotate(16deg);
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
}
.third_finger {
top: 87px;
left: -17px;
width: 18px;
border-bottom-right-radius: 50%;
-ms-transform: rotate(105deg);
-webkit-transform: rotate(105deg);
transform: rotate(105deg);
}
.second_finger {
top: 86px;
left: -27px;
width: 18px;
border-bottom-right-radius: 50%;
-ms-transform: rotate(145deg);
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
}
.fourth_finger {
top: 78px;
left: 230px;
width: 22px;
border-top-left-radius: 35%;
border-top-right-radius: 50%;
-ms-transform: rotate(-18deg);
-webkit-transform: rotate(-18deg);
transform: rotate(-18deg);
}
.sixth_finger {
top: 89px;
left: 224px;
width: 18px;
border-top-right-radius: 50%;
-ms-transform: rotate(75deg);
-webkit-transform: rotate(75deg);
transform: rotate(75deg);
}
.fifth_finger {
top: 88px;
left: 234px;
width: 18px;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
-ms-transform: rotate(38deg);
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
.left_of_tail, .right_of_tail {
width: 19px;
background-color: transparent;
border: 8px solid #FDB6E0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: -3;
}
.left_of_tail {
top: 100px;
left: 194px;
height: 30px;
border-right: 7px solid transparent;
-ms-transform: rotate(-80deg);
-webkit-transform: rotate(-80deg);
transform: rotate(-80deg);
}
.right_of_tail {
top: 102px;
left: 215px;
height: 24px;
border-left: 7px solid transparent;
border-top: 9px solid transparent;
-ms-transform: rotate(80deg);
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
}
.top_of_tail {
top: 111px;
left: 212px;
height: 8px;
width: 8px;
background-color: transparent;
border: 6px solid transparent;
border-top: 8px solid #FDB6E0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: -3;
}
.bottom_of_tail {
top: 125px;
left: 240px;
width: 10px;
height: 8px;
background-color: #FDB6E0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-ms-transform: rotate(100deg);
-webkit-transform: rotate(100deg);
transform: rotate(100deg);
z-index: 2;
}
.left_leg, .right_leg {
top: 172px;
width: 10px;
height: 40px;
background-color: #FCB8E1;
-ms-transform: rotate(-1.5deg);
-webkit-transform: rotate(-1.5deg);
transform: rotate(-1.5deg);
z-index: -1;
}
.left_leg {
left: 72px;
}
.right_leg {
left: 156px;
}
.left_foot, .right_foot {
top: 185px;
width: 55px;
height: 55px;
}
.left_foot {
left: 32px;
}
.right_foot {
left: 116px;
}
.bottom_of_foot, .top_of_foot, .left_of_foot, .right_of_foot {
background-color: #000;
}
.bottom_of_foot {
top: 24px;
left: 8px;
width: 43px;
height: 7px;
border-bottom: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-ms-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
}
.top_of_foot {
top: 20px;
left: 11px;
width: 40px;
height: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-ms-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
transform: rotate(6.2deg);
}
.left_of_foot {
top: 18px;
left: 2px;
width: 22px;
height: 13px;
border-bottom: 1px solid black;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.right_of_foot {
top: 22px;
left: 44px;
width: 8px;
height: 8px;
border-bottom: 1px solid black;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.shadow {
top: 196px;
left: 3px;
width: 205px;
height: 31px;
background-color: #589454;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: -3;
}
#ground {
position: absolute;
margin: auto;
overflow: hidden;
bottom: 0px;
left: 0px;
width: 100%;
height: 27%;
background-color: #77C76E;
-moz-border-radius: 50% 50% 50% 50% / 3% 9% 0% 0%;
-webkit-border-radius: 50% 50% 50% 50% / 3% 9% 0% 0%;
border-radius: 50% 50% 50% 50% / 3% 9% 0% 0%;
z-index: -4;
}
#ground * {
position: absolute;
}
.left_yellow_flower, .right_yellow_flower {
width: 50px;
height: 50px;
}
.left_yellow_flower {
top: 61px;
left: 881px;
}
.right_yellow_flower {
top: 12px;
left: 982px;
}
.top_right_yellow_petal, .bottom_right_yellow_petal, .bottom_left_yellow_petal, .top_left_yellow_petal {
width: 6px;
height: 10px;
background-color: #FBED04;
-moz-border-radius: 35%;
-webkit-border-radius: 35%;
border-radius: 35%;
z-index: -3;
}
.top_right_yellow_petal {
top: 11px;
left: 25px;
-ms-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.bottom_right_yellow_petal {
top: 18px;
left: 24px;
-ms-transform: rotate(125deg);
-webkit-transform: rotate(125deg);
transform: rotate(125deg);
}
.bottom_left_yellow_petal {
top: 18px;
left: 19px;
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.top_left_yellow_petal {
top: 11px;
left: 18px;
-ms-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.stalk_of_yellow_flower, .stalk_of_white_flower {
width: 6px;
height: 22px;
background-color: #56A14C;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
z-index: -3;
}
.stalk_of_yellow_flower {
top: 20px;
left: 21px;
}
.stalk_of_white_flower {
top: 26px;
left: 27px;
}
.left_clump_of_grass, .center_clump_of_grass, .right_clump_of_grass {
width: 60px;
height: 60px;
}
.left_clump_of_grass {
top: 32px;
left: 1082px;
}
.center_clump_of_grass {
top: 30px;
left: 493px;
}
.right_clump_of_grass {
top: 90px;
left: 344px;
}
.left_blade_of_grass, .center_blade_of_grass, .right_blade_of_grass {
top: 12px;
width: 6px;
background-color: #64AC56;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
z-index: -3;
}
.left_blade_of_grass {
left: 15px;
height: 14px;
}
.center_blade_of_grass {
left: 27px;
height: 14px;
-ms-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
.right_blade_of_grass {
left: 37px;
height: 20px;
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.left_white_flower, .right_white_flower, .center_white_flower {
width: 60px;
height: 60px;
}
.left_white_flower {
top: 70px;
left: 65px;
}
.right_white_flower {
top: 30px;
left: 1275px;
}
.center_white_flower {
top: 30px;
left: 175px;
}
.top_right_white_petal, .bottom_right_white_petal, .bottom_left_white_petal, .top_left_white_petal {
width: 6px;
height: 8px;
background-color: #FDFFFE;
-moz-border-radius: 35%;
-webkit-border-radius: 35%;
border-radius: 35%;
z-index: -2;
}
.top_right_white_petal {
top: 9px;
left: 33px;
-ms-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.bottom_right_white_petal {
top: 22px;
left: 34px;
-ms-transform: rotate(125deg);
-webkit-transform: rotate(125deg);
transform: rotate(125deg);
}
.bottom_left_white_petal {
top: 22px;
left: 21px;
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.top_left_white_petal {
top: 10px;
left: 21px;
-ms-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.center_of_white_flower {
top: 14px;
left: 24px;
width: 13px;
height: 13px;
background-color: #FFED07;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: -3;
}
/*My first CSS drawing.
Inspired by my daughter's favourite cartoon character.*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.