XYZ CODE: How to put human figure in blogger post

Back>

This example demonstrate a female figure in blogger post.

Here is the example:

Example

<div class="stage">

<br />
<div class="begum">
<div class="begum-head">
<div class="begum-face">
<div class="begum-lips--upper">
<div class="shine">
</div>
</div>
<div class="begum-lips--lower">
<div class="shine">
</div>
</div>
</div>
<div class="begum-hair">
<div class="shine">
</div>
<div class="begum-braids--top">
<div class="shine">
</div>
</div>
<div class="begum-braids--bottom">
<div class="shine">
</div>
</div>
<div class="begum-fringe">
<div class="shine">
</div>
</div>
<div class="begum-maangtika">
<div class="shine">
</div>
<div class="begum-maangtika-beads">
</div>
</div>
</div>
<div class="begum-earing begum-earing--top-left">
<div class="shine">
</div>
</div>
<div class="begum-earing begum-earing--bottom-left">
<div class="shine">
</div>
</div>
<div class="begum-earing begum-earing--top-right">
<div class="shine">
</div>
</div>
<div class="begum-earing begum-earing--bottom-right">
<div class="shine">
</div>
</div>
</div>
<div class="begum-neck">
<div class="shine">
</div>
</div>
<div class="begum-body">
<div class="shine">
</div>
<div class="begum-blouse--top">
</div>
<div class="begum-blouse--bottom">
<div class="shine">
</div>
</div>
<div class="begum-ghagra">
</div>
<div class="begum-arm--left">
<div class="begum-hand">
</div>
</div>
<div class="begum-arm--right">
<div class="begum-hand">
</div>
</div>
<div class="begum-pallu--front">
<div class="shadow">
</div>
</div>
<div class="begum-pallu--back">
</div>
</div>
</div>
</div>
<style>
*, *:before, *:after {
box-sizing: border-box;
}

.stage {
background: #29E2A8;
width: 600px;
height: 600px;
}

.begum {
position: absolute;
width: 480px;
height: 800px;
bottom: calc(50vh - 400px);
left: calc(50vw - 240px);
overflow: hide;
}

[class^="begum-"], .shine, .shadow {
position: absolute;
}
[class^="begum-"]:before, [class^="begum-"]:after, .shine:before, .shine:after, .shadow:before, .shadow:after {
position: absolute;
content: '';
}

.begum-head {
width: 300px;
height: 300px;
z-index: 4;
-webkit-transform: scale(1.25) translateY(100px) translateX(100px);
transform: scale(1.25) translateY(100px) translateX(100px);
}

.begum-face {
width: 250px;
height: 90px;
background: #D6A952;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
top: 100px;
z-index: 1;
box-shadow: 0 80px 90px -25px #1F2020;
}
.begum-face:before {
border-left: 90px solid transparent;
border-right: 85px solid transparent;
border-top: 65px solid #D6A952;
width: 250px;
bottom: -64px;
}

.begum-hair {
width: 270px;
height: 150px;
background: #1F2020;
left: -15px;
top: -90px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
z-index: 2;
box-shadow: 0 5px 25px 0 #060606;
}
.begum-hair:before {
border-left: 135px solid transparent;
border-right: 135px solid transparent;
border-bottom: 55px solid #1F2020;
top: -54px;
}
.begum-hair:after {
border-top: 120px solid transparent;
border-bottom: 60px solid transparent;
border-left: 70px solid #1F2020;
height: 265px;
right: -70px;
top: 0px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.begum-hair > .shine {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 190px solid rgba(255, 255, 255, 0.05);
z-index: 4;
right: 70px;
bottom: 10px;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.begum-hair > .shine:before {
border-left: 55px solid transparent;
border-right: 47px solid transparent;
border-top: 13px solid rgba(255, 255, 255, 0.05);
left: 90px;
top: -10px;
-webkit-transform: rotate(12.5deg);
transform: rotate(12.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.begum-hair > .shine:after {
border-top: 106px solid transparent;
border-bottom: 0px solid transparent;
border-right: 15px solid rgba(255, 255, 255, 0.05);
left: 175px;
top: -116px;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

.begum-braids--top {
background: #1F2020;
height: 135px;
width: 70px;
top: 0;
left: 0;
z-index: 2;
-webkit-transform: rotate(22deg);
transform: rotate(22deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.begum-braids--top:before {
width: 95px;
height: 95px;
background: #1F2020;
bottom: -95px;
-webkit-transform: translateX(3px) translateY(-20px) rotate(45deg) skewY(30deg);
transform: translateX(3px) translateY(-20px) rotate(45deg) skewY(30deg);
z-index: -999;
box-shadow: -10px 0 0 0 #1F2020, 3px 10px 30px -10px #060606, 30px 45px 0 0 #1F2020, 33px 49px 25px 0 #060606, 60px 85px 0 -5px #1F2020, 70px 85px 35px 0 #060606, 155px 90px 30px -35px #060606, 170px 105px 30px -35px #060606, 185px 120px 30px -35px #060606, 195px 130px 30px -40px #060606;
}
.begum-braids--top .shine {
border-left: 3px solid transparent;
border-right: 4px solid transparent;
border-top: 80px solid rgba(255, 255, 255, 0.05);
top: 155px;
left: 15px;
z-index: 2;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.begum-braids--top .shine:before {
border-left: 3px solid transparent;
border-right: 4px solid transparent;
border-top: 80px solid rgba(255, 255, 255, 0.05);
top: 15px;
left: 20px;
z-index: 2;
-webkit-transform: rotate(50deg) scale(0.95);
transform: rotate(50deg) scale(0.95);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.begum-braids--top .shine:after {
border-left: 3px solid transparent;
border-right: 4px solid transparent;
border-top: 80px solid rgba(255, 255, 255, 0.05);
top: 30px;
left: -65px;
z-index: 2;
-webkit-transform: rotate(0deg) scale(0.75);
transform: rotate(0deg) scale(0.75);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}

.begum-braids--bottom {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 30px solid #F7B22D;
width: 30px;
top: 318px;
left: -148px;
z-index: 2;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
.begum-braids--bottom:before {
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 20px solid #1F2020;
width: 80px;
left: calc(50% - 40px);
}
.begum-braids--bottom:after {
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 85px solid #1F2020;
left: calc(50% - 40px);
top: 19px;
}
.begum-braids--bottom .shine {
border-top: 15px solid transparent;
border-bottom: 60px solid transparent;
border-right: 25px solid rgba(255, 255, 255, 0.05);
top: 6px;
left: -20px;
z-index: 2;
}
.begum-braids--bottom .shine:before {
border-top: 15px solid transparent;
border-bottom: 60px solid transparent;
border-right: 20px solid #1F2020;
top: -15px;
left: 5px;
}

.begum-fringe {
bottom: -40px;
right: 55px;
z-index: 3;
border-left: 15px solid transparent;
border-bottom: 25px solid transparent;
border-right: 15px solid #1F2020;
border-top: 25px solid #1F2020;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.begum-fringe .shine {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 80px solid rgba(255, 255, 255, 0.05);
right: -70px;
bottom: -25px;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.begum-fringe .shine:before {
border-right: 10px solid transparent;
border-bottom: 20px solid rgba(255, 255, 255, 0.05);
right: -5px;
bottom: 80px;
}
.begum-fringe .shine:after {
border-right: 10px solid transparent;
border-top: 20px solid rgba(255, 255, 255, 0.05);
right: 4px;
bottom: 75px;
-webkit-transform: rotate(-27deg);
transform: rotate(-27deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

.begum-maangtika {
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 110px solid #F7B22D;
left: 75px;
top: -5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
z-index: 3;
}
.begum-maangtika:before {
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 110px solid #1F2020;
left: -30px;
-webkit-transform: scale(0.8) translateY(8px);
transform: scale(0.8) translateY(8px);
}
.begum-maangtika:after {
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 35px solid #F7B22D;
left: -25px;
top: 90px;
}
.begum-maangtika .shine {
border-left: 3px solid transparent;
border-right: 2px solid transparent;
border-top: 27px solid rgba(255, 255, 255, 0.35);
top: 96px;
left: -16px;
z-index: 2;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}

.begum-maangtika-beads {
width: 10px;
height: 10px;
background: #F7B22D;
border-radius: 50%;
z-index: 5;
top: 135px;
left: -5px;
box-shadow: -30px -29px 0 0 #F7B22D, 30px -29px 0 0 #F7B22D;
}
.begum-maangtika-beads:before {
border-left: 4px solid #F7B22D;
height: 22px;
left: calc(50% - 2px);
top: -20px;
}

.begum-lips--upper {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 60px;
border-bottom: 20px solid #F7046D;
bottom: -25px;
left: calc(50% - 25px);
z-index: 3;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.begum-lips--upper:before {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 8px solid #D6A952;
top: -1px;
}
.begum-lips--upper:after {
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 4px solid #1F2020;
bottom: -21px;
left: -3px;
}
.begum-lips--upper .shine {
border-left: 3px solid transparent;
border-right: 2px solid transparent;
border-top: 24px solid rgba(255, 255, 255, 0.35);
bottom: -27px;
right: 0px;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}

.begum-lips--lower {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 60px;
border-top: 20px solid #c50357;
bottom: -45px;
left: calc(50% - 25px);
z-index: 2;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.begum-lips--lower:before {
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-top: 8px solid #1F2020;
top: -20px;
left: -2px;
z-index: 3;
}
.begum-lips--lower .shine {
border-left: 18px solid transparent;
border-right: 11px solid transparent;
border-top: 8px solid rgba(255, 255, 255, 0.35);
top: -20px;
left: -10px;
}

.begum-earing {
z-index: 3;
border-bottom: 32px solid #F7B22D;
border-left: 24px solid transparent;
border-right: 24px solid transparent;
}
.begum-earing .shine {
border-bottom: 32px solid rgba(255, 255, 255, 0.35);
border-left: 24px solid transparent;
border-right: 24px solid transparent;
left: -24px;
-webkit-transform: scale(0.8) translateY(1px);
transform: scale(0.8) translateY(1px);
}
.begum-earing .shine:before {
border-bottom: 32px solid #F7B22D;
}
.begum-earing--top-left {
top: 180px;
left: 30px;
}
.begum-earing--top-right {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
right: 45px;
top: 165px;
}
.begum-earing--bottom-left {
-webkit-transform: scale(1.3);
transform: scale(1.3);
top: 211px;
left: 18px;
z-index: 2;
}
.begum-earing--bottom-right {
-webkit-transform: scale(1.3) rotate(-10deg);
transform: scale(1.3) rotate(-10deg);
right: 26px;
top: 193px;
z-index: 2;
}
.begum-earing--top-left .shine:before, .begum-earing--bottom-left .shine:before {
border-left: 12px solid transparent;
border-right: 24px solid transparent;
left: -12px;
}
.begum-earing--top-right .shine:before, .begum-earing--bottom-right .shine:before {
border-left: 24px solid transparent;
border-right: 13px solid transparent;
right: -12px;
}
.begum-earing--bottom-left:before, .begum-earing--bottom-right:before {
border-left: 5px solid #F7B22D;
height: 20px;
left: calc(50% - 2.5px);
bottom: -45px;
}
.begum-earing--bottom-left:after, .begum-earing--bottom-right:after {
background: #F7B22D;
width: 12px;
height: 15px;
border-radius: 50%;
left: calc(50% - 6px);
bottom: -55px;
}

.begum-neck {
border-left: 30px solid #D6A952;
height: 45px;
top: 395px;
left: calc(50% + 20px);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
z-index: 3;
}
.begum-neck .shine {
border-right: 3px solid transparent;
border-left: 3px solid transparent;
border-top: 12px solid rgba(0, 0, 0, 0.15);
bottom: -10px;
left: -12px;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.begum-neck .shine:before, .begum-neck .shine:after {
border-bottom: 3px solid transparent;
top: -12px;
}
.begum-neck .shine:before {
border-left: 35px solid rgba(0, 0, 0, 0.15);
right: -38px;
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.begum-neck .shine:after {
border-right: 35px solid rgba(0, 0, 0, 0.15);
left: -38px;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}

.begum-body {
width: 180px;
top: 445px;
left: calc(50% - 50px);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 170px solid #D6A952;
z-index: 2;
}
.begum-body:before {
top: -190px;
left: calc(50% - 90px);
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 20px solid #D6A952;
}
.begum-body:after {
top: 0;
left: calc(50% - 70px);
border-left: 10px solid transparent;
border-right: 15px solid transparent;
border-bottom: 30px solid #D6A952;
width: 145px;
z-index: 2;
}
.begum-body > .shine {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid rgba(0, 0, 0, 0.15);
bottom: 95px;
left: calc(50% - 10px);
}

.begum-blouse--top {
border-radius: 0 0 100px 100px;
width: 160px;
height: 100px;
border-bottom: 18px solid #F7046D;
border-left: 18px solid #F7046D;
border-right: 18px solid #F7046D;
left: calc(50% - 80px);
top: -176px;
z-index: 3;
}
.begum-blouse--top:before, .begum-blouse--top:after {
bottom: -5px;
border-bottom: 60px solid #F7046D;
}
.begum-blouse--top:before {
border-left: 25px solid transparent;
border-right: 40px solid transparent;
left: -42px;
}
.begum-blouse--top:after {
border-left: 40px solid transparent;
border-right: 25px solid transparent;
right: -40px;
}

.begum-blouse--bottom {
border-top: 55px solid #c50357;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 176px;
left: calc(50% - 88px);
top: -91px;
z-index: 2;
}
.begum-blouse--bottom:before, .begum-blouse--bottom:after {
top: -53px;
border-top: 45px solid #F7046D;
width: 120px;
}
.begum-blouse--bottom:before {
border-left: 25px solid transparent;
border-right: 45px solid transparent;
left: -35px;
}
.begum-blouse--bottom:after {
border-left: 45px solid transparent;
border-right: 25px solid transparent;
right: -35px;
}
.begum-blouse--bottom .shine {
z-index: 2;
border-bottom: 8px solid rgba(255, 255, 255, 0.35);
width: 60px;
height: 60px;
border-radius: 50%;
bottom: 25px;
left: 8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.begum-blouse--bottom .shine:before {
border-bottom: 8px solid rgba(255, 255, 255, 0.35);
width: 60px;
height: 60px;
border-radius: 50%;
bottom: 75px;
right: -26px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.begum-blouse--bottom .shine:after {
border-bottom: 4px solid rgba(255, 255, 255, 0.35);
width: 50px;
height: 20px;
border-radius: 50%;
bottom: 45px;
right: 10px;
-webkit-transform: rotate(-100deg);
transform: rotate(-100deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}

.begum-ghagra {
top: 30px;
left: calc(50% - 70px);
border-left: 5px solid transparent;
border-right: 0px solid transparent;
border-top: 25px solid #5CAC22;
width: 145px;
z-index: 3;
}
.begum-ghagra:before {
top: 0px;
left: calc(50% - 100px);
border-left: 30px solid transparent;
border-right: 0px solid transparent;
border-bottom: 130px solid #5CAC22;
width: 165px;
}
.begum-ghagra:after {
height: 155px;
width: 45px;
background: #5CAC22;
right: -40px;
top: -25px;
border-radius: 0 100% 0 0;
}

.begum-arm--left {
width: 36px;
height: 160px;
background: linear-gradient(#c50357 55%, #D6A952 55%);
right: 0;
z-index: 1;
top: -170px;
left: -51px;
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.begum-arm--left:before {
border-top: 4px solid transparent;
border-left: 18px solid transparent;
border-right: 18px solid #c50357;
border-bottom: 4px solid #c50357;
top: -8px;
left: 0px;
}
.begum-arm--left:after {
border-left: 10px solid transparent;
border-right: 8px solid transparent;
border-top: 90px solid #D6A952;
width: inherit;
bottom: -81px;
left: -3px;
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.begum-arm--left .begum-hand {
border-right: 20px solid transparent;
border-left: 60px solid transparent;
border-top: 25px solid #D6A952;
bottom: -100px;
right: -60px;
-webkit-transform: rotate(85deg);
transform: rotate(85deg);
}

.begum-arm--right {
width: 36px;
height: 160px;
background: linear-gradient(#c50357 55%, #D6A952 55%);
right: 0;
z-index: 1;
top: -168px;
right: -49px;
-webkit-transform: rotate(-16deg);
transform: rotate(-16deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.begum-arm--right:before {
border-top: 7px solid transparent;
border-right: 18px solid transparent;
border-left: 18px solid #c50357;
border-bottom: 7px solid #c50357;
top: -13px;
left: 0;
}
.begum-arm--right:after {
border-left: 8px solid transparent;
border-right: 10px solid transparent;
border-top: 90px solid #D6A952;
width: inherit;
bottom: -79px;
left: 3px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.begum-arm--right .begum-hand {
border-right: 45px solid transparent;
border-left: 45px solid transparent;
border-bottom: 25px solid #D6A952;
bottom: -97px;
left: -77px;
-webkit-transform: rotate(100deg);
transform: rotate(100deg);
}

.begum-pallu--front {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 390px solid #45811a;
width: 128px;
z-index: 4;
bottom: -205px;
left: 10px;
-webkit-transform: rotate(12deg);
transform: rotate(12deg);
}
.begum-pallu--front:before {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 392px solid #5CAC22;
width: 10px;
left: -20px;
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
}
.begum-pallu--front:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 382px solid #5CAC22;
width: 10px;
left: 2px;
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
.begum-pallu--front .shadow {
width: 15px;
height: 385px;
background: #45811a;
box-shadow: 10px 5px 14px -2px #1F2020;
z-index: 1;
right: -5px;
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}

.begum-pallu--back {
width: 20px;
height: 100px;
background: #417918;
z-index: 0;
bottom: -50px;
right: -20px;
}
.begum-pallu--back:before {
border-top: 40px solid #D6A952;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 14px;
left: -12px;
}
.begum-pallu--back:after {
border-right: 115px solid transparent;
border-bottom: 165px solid #417918;
right: -115px;
bottom: -135px;
}
</style>