<div class="character">
<div id="head">
<div id="shirt-bg-2"></div>
<div id="arm-1" class="hab"></div>
<div id="arm-2" class="hab"></div>
<div id="shirt-neck-back" class="r"></div>
<div class="sleeve" id="sleeve-2"><div class="hab"></div></div>
<div id="knife" class="b ha"></div>
<div id="back" class="r hab"></div>
<div id="ojeras" class="r ha"></div>
<div id="eye-2" class="eye r b hab"></div>
<div id="lip" class="r b"></div>
<div id="mouth" class="r hba"></div>
<div id="upper-lip" class="r hba"></div>
<div id="nose" class="r b hab"></div>
<div id="nose-line" class="r"></div>
<div id="eye-1" class="eye r b hba"></div>
<div id="eye-lines-1" class="hba"></div>
<div id="eye-lines-2" class="hba"></div>
<div id="ear" class="r b ha"></div>
<div id="hair" class="r"></div>
<div id="shirt-back" class="shirt-bottom r"></div>
<div id="shoe-body-2" class="shoe-body hab"></div>
<div id="shoe-2" class="shoe r b hab"></div>
<div id="shoe-body-1" class="shoe-body hab"></div>
<div id="shoe-1" class="shoe r b hab"></div>
<div id="pants-bottom" class="hab"></div>
<div id="pernera-2" class="pernera"></div>
<div id="pants" class="r b"></div>
<div id="pernera-1" class="pernera ha"></div>
<div id="shirt-bg-1"></div>
<div id="shirt-v-neck" class="hab"></div>
<div id="shirt-left" class="r ha"></div>
<div id="shirt-right" class="r"></div>
<div id="shirt">
<div id="shirt-bottom" class="shirt-bottom r hab"></div>
</div>
<div id="shirt-neck-right-1" class="r hab"></div>
<div id="shirt-neck-right-2" class="r hab"></div>
<div class="sleeve" id="sleeve-1"><div class="hab"></div></div>
</div>
</div>
<div id="links">
<a target="_blank" href="https://github.com/alvaromontoro/CSS-Simpsons">More on GitHub</a>
<a target="_blank" href="https://codepen.io/collection/DrwLdN/">More on CodePen</a>
</div>
html {
--yellow: #FDD835;
--blue: #448cb1;
--red: #c10031;
--green: #097422;
--brown: #9f2500;
background: #fff;
}
.r { border-radius:100%; }
.b { border: 3px solid #000; }
.character > div > div,
.character > div > div > div {
position: absolute;
box-sizing: border-box;
transform-origin: center center;
}
.character {
position: relative;
/* these values change from character to character */
width: 400px;
height: 720px;
margin: auto auto;
}
.character::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index:-1;
background-size: cover;
width: 100%;
height: 100%;
opacity: 0;
/* this value changes from character to character */
background-image: url(https://upload.wikimedia.org/wikipedia/en/c/c8/C-bob.png); */
}
.character::before {
content: "";
display: block;
position: absolute;
border-radius: 100%;
background: #999;
filter: blur(5px);
z-index: -1;
/* these values change from character to character */
left: 20px;
top: 666px;
width: 330px;
height: 60px;
}
/* while drawing */
.character > div {
opacity: 1;
}
.character > div > div,
.character > div > div > div {
position: absolute;
box-sizing: border-box;
}
/* set common values to all the ::before and ::after (revmoes repetition, DRY!) */
.hb::before,
.ha::after,
.hba::before,
.hba::after,
.hab::before,
.hab::after {
content: "";
display: block;
position: absolute;
}
#hair {
width: 60px;
height: 60px;
background: var(--red);
top: 80px;
left: 190px;
box-shadow:
0 -1px 0 20px var(--red),
-20px -10px 0 20px var(--red),
46px 0px 0 13px var(--red),
/******/
-151px 32px 0 -26px var(--red),
-81px -15px 0 -10px var(--red),
-111px 0px 0 -16px var(--red),
-153px 38px 0 -26px var(--red),
-155px 30px 0 -26px var(--red),
-143px 21px 0 -17px var(--red),
-136px 8px 0 -17px var(--red),
-124px -8px 0 -17px var(--red),
-106px -20px 0 -17px var(--red),
-85px -28px 0 -15px var(--red),
-62px -35px 0 -15px var(--red),
-120px 15px 0 -22px var(--red),
-89px 3px 0 -23px var(--red),
-103px 6px 0 -18px var(--red),
-153px 38px 0 -23px #000,
-155px 30px 0 -23px #000,
-143px 21px 0 -14px #000,
-136px 8px 0 -14px #000,
-124px -8px 0 -14px #000,
-106px -20px 0 -14px #000,
-85px -28px 0 -12px #000,
-62px -35px 0 -12px #000,
-120px 15px 0 -19px #000,
-89px 3px 0 -20px #000,
-103px 6px 0 -15px #000,
/*****/
-1px 84px 0 -26px var(--red),
0 40px 0 -10px var(--red),
-1px 90px 0 -26px var(--red),
2px 73px 0 -20px var(--red),
-3px 77px 0 -22px var(--red),
-10px 63px 0 -22px var(--red),
-14px 46px 0 -19px var(--red),
6px 58px 0 -19px var(--red),
18px 47px 0 -26px var(--red),
-1px 90px 0 -23px #000,
2px 73px 0 -17px #000,
-3px 77px 0 -19px #000,
-10px 63px 0 -19px #000,
-14px 46px 0 -16px #000,
6px 58px 0 -16px #000,
18px 47px 0 -23px #000,
/******/
-57px 43px 0 -14px var(--red),
-59px 74px 0 -27px var(--red),
-60px 79px 0 -25px var(--red),
-61px 63px 0 -21px var(--red),
-68px 48px 0 -23px var(--red),
-55px 68px 0 -24px var(--red),
-47px 53px 0 -21px var(--red),
-36px 40px 0 -19px var(--red),
-60px 79px 0 -22px #000,
-61px 63px 0 -18px #000,
-68px 48px 0 -20px #000,
-55px 68px 0 -21px #000,
-47px 53px 0 -18px #000,
-36px 40px 0 -16px #000,
/******/
-80px 40px 0 -20px var(--red),
-60px 0px 0 4px var(--red),
-95px 60px 0 -17px var(--red),
-120px 105px 0 -27px var(--red),
-121px 110px 0 -25px var(--red),
-118px 94px 0 -20px var(--red),
-114px 77px 0 -20px var(--red),
-107px 78px 0 -19px var(--red),
-108px 59px 0 -19px var(--red),
-93px 45px 0 -15px var(--red),
-78px 26px 0 -15px var(--red),
-89px 66px 0 -22px var(--red),
-75px 56px 0 -22px var(--red),
-121px 110px 0 -22px #000,
-118px 94px 0 -17px #000,
-114px 77px 0 -17px #000,
-107px 78px 0 -16px #000,
-108px 59px 0 -16px #000,
-93px 45px 0 -12px #000,
-78px 26px 0 -12px #000,
-89px 66px 0 -19px #000,
-75px 56px 0 -19px #000,
/*******/
39px 49px 0 -4px var(--red),
49px 69px 0 -4px var(--red),
51px 110px 0 -15px var(--red),
52px 99px 0 -11px var(--red),
35px 159px 0 -27px var(--red),
33px 164px 0 -26px var(--red),
39px 149px 0 -20px var(--red),
39px 129px 0 -20px var(--red),
47px 137px 0 -20px var(--red),
57px 123px 0 -20px var(--red),
64px 107px 0 -20px var(--red),
38px 110px 0 -21px var(--red),
33px 90px 0 -20px var(--red),
25px 71px 0 -20px var(--red),
67px 88px 0 -19px var(--red),
70px 71px 0 -20px var(--red),
33px 164px 0 -23px #000,
39px 149px 0 -17px #000,
39px 129px 0 -17px #000,
47px 137px 0 -17px #000,
57px 123px 0 -17px #000,
64px 107px 0 -17px #000,
38px 110px 0 -18px #000,
33px 90px 0 -17px #000,
25px 71px 0 -17px #000,
67px 88px 0 -16px #000,
70px 71px 0 -17px #000,
/******/
80px 40px 0 -20px var(--red),
66px 60px 0 -1px var(--red),
98px 110px 0 -23px var(--red),
103px 130px 0 -25px var(--red),
103px 135px 0 -24px var(--red),
97px 122px 0 -22px var(--red),
93px 95px 0 -11px var(--red),
106px 122px 0 -24px var(--red),
107px 110px 0 -22px var(--red),
100px 73px 0 -20px var(--red),
94px 57px 0 -20px var(--red),
85px 42px 0 -22px var(--red),
103px 135px 0 -21px #000,
97px 122px 0 -19px #000,
93px 95px 0 -8px #000,
106px 122px 0 -21px #000,
107px 110px 0 -19px #000,
100px 73px 0 -17px #000,
94px 57px 0 -17px #000,
85px 42px 0 -19px #000,
/******/
87px 25px 0 -5px var(--red),
133px 70px 0 -26px var(--red),
137px 75px 0 -25px var(--red),
118px 46px 0 -13px var(--red),
127px 66px 0 -23px var(--red),
132px 60px 0 -23px var(--red),
119px 26px 0 -21px var(--red),
103px 13px 0 -17px var(--red),
88px -3px 0 -20px var(--red),
137px 75px 0 -22px #000,
118px 46px 0 -10px #000,
127px 66px 0 -20px #000,
132px 60px 0 -20px #000,
119px 26px 0 -18px #000,
103px 13px 0 -14px #000,
88px -3px 0 -17px #000,
/******/
-40px -47px 0 5px var(--red),
-115px -74px 0 -26px var(--red),
-120px -73px 0 -25px var(--red),
-72px -50px 0 -25px var(--red),
-81px -73px 0 -12px var(--red),
-101px -75px 0 -17px var(--red),
-58px -80px 0 -17px var(--red),
-36px -79px 0 -20px var(--red),
-19px -71px 0 -21px var(--red),
-6px -57px 0 -21px var(--red),
-120px -73px 0 -22px #000,
-72px -50px 0 -22px #000,
-81px -73px 0 -9px #000,
-101px -75px 0 -14px #000,
-58px -80px 0 -14px #000,
-36px -79px 0 -17px #000,
-19px -71px 0 -18px #000,
-6px -57px 0 -18px #000,
/******/
28px -55px 0 -5px var(--red),
49px -77px 0 -17px var(--red),
79px -91px 0 -25px var(--red),
68px -92px 0 -23px var(--red),
49px -87px 0 -18px var(--red),
63px -84px 0 -20px var(--red),
54px -68px 0 -22px var(--red),
46px -50px 0 -20px var(--red),
6px -70px 0 -22px var(--red),
28px -77px 0 -17px var(--red),
79px -91px 0 -22px #000,
68px -92px 0 -20px #000,
49px -87px 0 -15px #000,
63px -84px 0 -17px #000,
54px -68px 0 -19px #000,
46px -50px 0 -17px #000,
6px -70px 0 -19px #000,
28px -77px 0 -14px #000,
/*****/
130px -23px 0 -20px var(--red),
120px -27px 0 -20px var(--red),
80px -20px 0 -10px var(--red),
147px -16px 0 -26px var(--red),
139px -16px 0 -24px var(--red),
135px -26px 0 -23px var(--red),
125px -36px 0 -25px var(--red),
123px -18px 0 -21px var(--red),
100px -18px 0 -15px var(--red),
108px -34px 0 -17px var(--red),
88px -39px 0 -17px var(--red),
66px -38px 0 -17px var(--red),
147px -16px 0 -23px #000,
139px -16px 0 -21px #000,
135px -26px 0 -20px #000,
125px -36px 0 -22px #000,
123px -18px 0 -18px #000,
100px -18px 0 -12px #000,
108px -34px 0 -14px #000,
88px -39px 0 -14px #000,
66px -38px 0 -14px #000;
}
#ear {
top: 254px;
left: 206px;
width: 25px;
height: 26px;
border-left: 3px solid var(--yellow);
background: var(--yellow)
}
#ear::after {
top: 5px;
left: 4px;
width: 6px;
height: 7px;
border-radius: 100%;
border: 3px solid transparent;
border-top: 3px solid #000;
border-left: 3px solid #000;
transform: rotate(45deg)
}
#back {
top: 125px;
left: 225px;
height: 250px;
width: 80px;
box-shadow: inset 4px 0 0 -1px #000, -30px 0 var(--yellow), -53px -23px 0 8px var(--yellow), -60px -30px 0 7px var(--yellow), -56px -20px 0 8px #000;
transform: rotate(20deg);
}
#back::before {
height: 40px;
width: 20px;
border-radius: 100%;
border: 3px solid transparent;
border-right: 3px solid #000;
top: 231px;
left: -33px;
transform: rotate(-10deg);
box-shadow: 18px 0 0 11px var(--yellow);
}
#back::after {
top: 157px;
width: 30px;
height: 80px;
background: var(--yellow);
left: -46px;
transform: rotate(-20deg);
border-radius: 100%;
}
#mouth {
top: 272px;
left: 140px;
width: 60px;
height: 20px;
border: 3px solid transparent;
border-bottom: 3px solid #000;
transform: rotate(-4deg);
background: var(--yellow)
}
#mouth::before {
border-radius: 100%;
height: 12px;
width: 13px;
border: 3px solid transparent;
border-left: 3px solid #000;
right: -14px;
transform: rotate(-15deg);
}
#mouth::after {
left:-22px;
top: 9px;
height: 4px;
width: 25px;
border-radius: 100%;
border: 3px solid transparent;
border-top: 3px solid #000;
transform: rotate(6deg);
box-shadow: -1px -6px 0 -0px var(--yellow);
}
#lip {
top: 283px;
left: 146px;
width: 17px;
height: 17px;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
transform: rotate(-60deg);
box-shadow: inset 0 0 0 10px var(--yellow);
}
#upper-lip {
top: 274px;
left: 120px;
width: 30px;
height: 10px;
border: 3px solid var(--yellow);
border-top: 3px solid #000;
transform: rotate(-20deg);
box-shadow: inset 0 0 0 20px var(--yellow);
}
#upper-lip::before {
top: -2px;
left: -3px;
width: 5px;
height: 6px;
border-radius: 100%;
border: 3px solid transparent;
border-left: 3px solid #000;
border-top: 3px solid #000;
transform: rotate(-45deg);
}
#upper-lip::after {
top: -18px;
left: 17px;
width: 16px;
height: 14px;
border-radius: 100%;
border: 3px solid transparent;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
transform: rotate(-15deg);
box-shadow: 0 15px var(--yellow);
}
.eye {
width: 37px;
height: 30px;
background: #fff;
}
#eye-1 {
top: 200px;
left: 173px;
}
#eye-1::after {
top: 9px;
left: -8px;
width: 40px;
height: 6px;
border-radius: 100%;
border: 3px solid transparent;
border-top: 3px solid #000;
box-shadow: 0 -10px 0 2px var(--yellow);
}
#eye-1::before {
top: 10px;
left: 17px;
width: 6px;
height: 6px;
border-radius: 100%;
background: #000;
}
#eye-lines-1 {
width: 43px;
height: 20px;
top: 195px;
left: 170px;
}
#eye-lines-1::before {
top: 5px;
left: 1px;
width: 10px;
height: 15px;
border-radius: 100%;
border: 3px solid transparent;
border-left: 3px solid #000;
transform: rotate(25deg);
}
#eye-lines-1::after {
top: 8px;
left: 25px;
width: 10px;
height: 12px;
border-radius: 100%;
border: 3px solid transparent;
border-right: 3px solid #000;
transform: rotate(-20deg);
}
#eye-2 {
top: 196px;
left: 139px;
border-right: 3px solid var(--yellow);
box-shadow: inset -4px 10px var(--yellow);
}
#eye-2::before {
top: 12px;
left: 8px;
width: 6px;
height: 6px;
border-radius: 100%;
background: #000;
}
#eye-2::after {
top: 11px;
left: -6px;
width: 40px;
height: 6px;
border-radius: 100%;
border: 3px solid transparent;
border-top: 3px solid #000;
box-shadow: 6px -3px var(--yellow);
}
#eye-lines-2 {
width: 30px;
height:20px;
top: 200px;
left: 130px;
}
#eye-lines-2::before {
top: -18px;
left: 8px;
width: 30px;
height: 13px;
border-radius: 100% 0 0 0;
box-shadow: inset 2px 5px 0 -2px #000, inset 6px 6px 0 14px var(--yellow), 9px 6px 0 6px var(--yellow), 19px 12px 0 6px var(--yellow), 3px 1px 0 1px var(--yellow);
transform: rotate(-40deg);
}
#ojeras {
width: 40px;
height: 30px;
border: 3px solid transparent;
border-bottom: 3px solid #000;
top: 207px;
left: 170px;
transform: rotate(14deg);
}
#ojeras::after {
left: -29px;
top: 14px;
width: 14px;
height: 14px;
border-radius: 100%;
border: 3px solid #000;
background: var(--yellow);
}
#nose {
top: 259px;
left: 138px;
width: 11px;
height: 11px;
border-top: 3px solid transparent;
border-right: 3px solid transparent;
background: var(--yellow);
transform: rotate(-4deg)
}
#nose::before {
top: -37px;
left: 2px;
left: 1.5px;
width: 13px;
height: 40px;
border-radius: 100%;
border: 3px solid transparent;
border-left: 3px solid #000;
transform: rotate(28deg);
box-shadow: inset 0 0 0 10px var(--yellow);
}
#nose::after {
top: -73px;
left: 8px;
width: 12px;
height: 44px;
border-radius: 100%;
border: 3px solid transparent;
border-right: 3px solid #000;
transform: rotate(26deg);
box-shadow: 10px 0 0 0px var(--yellow);
}
#nose-line {
top: 260px;
left: 141px;
height: 15px;
width: 29px;
border: 3px solid transparent;
border-top: 3px solid #000;
transform: rotate(-30deg);
box-shadow: 5px -10px var(--yellow);
}
#arm-1 {
border-radius: 50% 80% 0 80%;
width: 140px;
height: 90px;
transform: rotate(-20deg);
top: 362px;
left: 90px;
border: 3px solid transparent;
border-top: 3px solid #000;
border-left: 3px solid #000;
box-shadow: inset 14px 14px 0 8px var(--yellow);
}
#arm-1::before {
width: 1px;
height: 10px;
border-left: 3px solid #000;
border-radius: 100%;
top: 30px;
left: 29px;
box-shadow: -10px 0 0 8px var(--yellow);
}
#arm-1::after {
width: 40px;
height: 10px;
border: 3px solid transparent;
border-top: 3px solid #000;
border-radius: 100%;
transform: rotate(-10deg);
top: 24px;
left: 24px;
box-shadow: 0 -3px 0 0 var(--yellow);
}
#arm-2 {
top: 365px;
left: 170px;
width: 90px;
height: 102px;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
box-shadow: /*inset -3.5px -3.5px 0 -1px #000,*/ inset -10px -10px 0 15px var(--yellow);
border-radius: 0 70px 20px 60px;
transform: rotate(-20deg);
}
#arm-2::before {
top: 70px;
left: 40px;
width: 20px;
height: 10px;
border-top: 3px solid #000;
background: var(--yellow);
}
#arm-2::after {
top: 47px;
left: 53px;
width: 5px;
height: 30px;
border-radius: 100%;
border-right: 3px solid #000;
transform: rotate(-5deg);
box-shadow: 10px 0 0 9px var(--yellow);
}
#knife {
height: 100px;
width: 40px;
border-radius:0 3px 100% 0;
border-bottom:2px solid #000;
background: #ccc;
top:505px;
left: 234px;
transform: rotate(-37deg);
box-shadow: 0 -4px 0 -3px #bbb, 0 -4px #000;
}
#knife::after {
width: 14px;
height: 20px;
border: 3px solid #000;
background: var(--brown);
border-radius: 5px;
top: -26px;
left: -3px;
}
#pants {
top: 430px;
left: 90px;
width: 132px;
height: 100px;
background: var(--blue);
}
.pernera {
width: 50px;
height: 144px;
border-left: 3px solid #000;
background: var(--blue);
}
#pernera-1 {
background:var(--blue);
top: 513px;
left: 163px;
transform: rotate(-13deg)
}
#pernera-1::after {
transform: rotate(4deg);
height: 150px;
width: 20px;
background: var(--blue);
left: 33px;
border-right: 3px solid #000;
}
#pernera-2 {
height: 170px;
top: 486px;
left: 122px;
transform: rotate(-17deg);
}
#pants-bottom {
top: 650px;
left: 150px;
height: 20px;
width: 100px;
}
#pants-bottom::before {
top: -4px;
left: -2px;
width: 50px;
height:20px;
border-radius: 100%;
box-shadow: inset 0 -4px 0 -1px #000, inset 0 0 0 10px var(--blue);
transform: rotate(-5deg);
}
#pants-bottom::after {
top: -3px;
left: 30px;
width: 53px;
height:20px;
border-radius: 100%;
box-shadow: inset 0 -4px 0 -1px #000, inset 0 0 0 10px var(--blue);
transform: rotate(-4deg);
}
.shoe {
width: 117px;
height: 28px;
background: var(--brown);
}
.shoe::before {
width: 158px;
border-radius: 100%;
height: 32px;
border: 3px solid #000;
border-top: 3px solid transparent;
top: -10px;
left: -49px;
transform: rotate(3deg);
box-shadow: inset 1px -3px var(--brown);
}
.shoe::after {
width: 158px;
border-radius: 100%;
height: 30px;
top: -7px;
left: -48px;
box-shadow: inset 0 -4px 0 -1px #000, inset 0 -10px 0 5px var(--brown);
transform: rotate(4deg);
}
#shoe-1 {
top: 675px;
left: 230px;
}
#shoe-2 {
top: 671px;
left: 28px;
transform: rotate(0deg) rotateY(180deg);
}
.shoe-body {
top: 657px;
left: 220px;
width: 60px;
height: 13px;
}
.shoe-body::before {
top: 0;
left: 0;
width: 60px;
height: 13px;
border-radius: 100%;
box-shadow: 0 3px 0 -1px #000, -14px 22px 0 14px var(--brown);
transform: rotate(20deg);
}
#shoe-body-1::after {
width: 5px;
height: 28px;
border-radius: 100%;
border-left: 3px solid #000;
top: 2px;
left: -37px;
}
#shoe-body-2 {
top: 657px;
left: 100px;
width: 60px;
height: 13px;
}
#shoe-body-2::before {
box-shadow: 0 3px 0 -1px #000,14px 19px 0 13px var(--brown);
transform: rotate(-20deg);
}
#shirt {
width: 200px;
height: 190px;
top: 300px;
left: 80px;
overflow:hidden;
abackground: rgba(0,0,255,0.2)
}
.shirt-bottom {
width: 149px;
height: 20px;
top: 472px;
left: 80px;
transform: rotate(4deg);
background: var(--green);
}
.shirt-bottom {
width: 149px;
height: 20px;
top: 472px;
left: 80px;
transform: rotate(4deg);
background: var(--green);
box-shadow: inset 0 -4px 0 -1px #000;
}
#shirt-bottom {
top: 172px;
left: 0;
background: none;
box-shadow: inset 0 4px 0 -1px #000, 0 -5px 0 -4px var(--green), 0 -10px 0 -3px var(--green), 0 -15px 0 -3px var(--green);
}
#shirt-bottom::before {
width:70px;
height:110px;
border: 3px solid transparent;
border-left: 3px solid #000;
border-radius: 100%;
transform: rotate(40deg);
top: -67px;
left: 9px;
box-shadow: inset 22px 40px 0 -10px var(--green);
}
#shirt-bottom::after {
width:30px;
height:70px;
border: 3px solid transparent;
border-right: 3px solid #000;
border-radius: 100%;
transform: rotate(-18deg);
top: -52px;
left: 111px;
box-shadow: inset -15px 37px 0 -10px var(--green);
}
.sleeve {
width:48px;
height:55px;
border-radius: 100% 100% 0 0;
overflow: hidden;
}
.sleeve > div {
width: 120px;
height: 120px;
border-radius: 100%;
border: 3px solid #000;
top: -65px;
left: -36px;
overflow: hidden;
box-shadow: inset 0 -20px 0 -12px var(--green);
}
.sleeve > div::before {
border-radius: 100%;
height: 75px;
width: 42px;
top: 67px;
left: 33px;
border: 3px solid #000;
box-shadow: inset 0 40px 0 -11px var(--green);
}
.sleeve > div::after {
width: 33px;
height: 20px;
top: 90px;
left: 40px;
background: var(--green);
}
#sleeve-1 {
top: 359px;
left: 203px;
transform: rotate(-35deg);
}
#sleeve-2 {
top: 352px;
left: 130px;
transform: rotate(68deg);
}
#sleeve-2 > div::before {
border-right: 0;
border-top: 3px solid transparent;
}
#shirt-neck-back {
width: 65px;
height: 20px;
border-top: 4px solid #000;
background: var(--green);
box-shadow: -1px 13px 0 5px var(--green);
top: 340px;
left: 160px;
transform: rotate(-5deg);
}
#shirt-v-neck {
height: 27px;
width: 7px;
border-left: 3px solid #000;
background: var(--green);
top: 349px;
left: 156px;
transform: rotate(24deg);
}
#shirt-v-neck::before {
transform: rotate(-40deg);
height: 36px;
width: 4px;
top: -3px;
left: 7px;
border-radius: 100%;
border-right: 3px solid #000;
box-shadow: inset 0px -20px 0 0px var(--green), -8px 24px 0 5px var(--green);
}
#shirt-v-neck::after {
top: -5px;
height: 33px;
left: 21px;
width: 30px;
border-left: 3px solid #000;
transform: rotate(3deg);
background: var(--green);
box-shadow: 0 45px 0 12px var(--green);
}
#shirt-left {
top: 353px;
left: 132px;
width: 10px;
height: 100px;
transform: rotate(33deg);
box-shadow: inset -3px 0 #000, 8px 10px var(--green);
}
#shirt-left::after {
transform: rotate(-33deg);
width: 6px;
border-top: 3px solid #000;
top: 13px;
left:1px;
}
#shirt-right {
width: 20px;
height: 100px;
top: 370px;
left: 205px;
background: var(--green);
box-shadow: inset -3px 0 #000, -10px 0 0 10px var(--green);
}
#shirt-neck-right-1 {
top: 343px;
left: 220px;
height: 22px;
width: 10px;
border-right: 3px solid #000;
transform: rotate(-20deg);
box-shadow: inset 0px -15px 0 0 var(--green);
}
#shirt-neck-right-1::before {
left: -36px;
top:-11px;
width: 42px;
height: 10px;
border-radius: 100%;
border: 3px solid transparent;
border-bottom: 3px solid #000;
transform: rotate(5deg);
box-shadow: 0 8px 0 -5px var(--green), 0 12px 0 -5px var(--green), -3px 18px 0 -2px var(--green);
}
#shirt-neck-right-1::after {
height: 30px;
border-left: 3px solid #000;
left: -30px;
}
#shirt-neck-right-2 {
width: 49px;
height: 20px;
top: 358px;
left: 187px;
border: 3px solid transparent;
border-bottom: 3px solid #000;
transform: rotate(-35deg)
}
#shirt-bg-1 {
width: 40px;
height: 40px;
background: var(--green);
top: 430px;
left: 110px;
box-shadow: -10px 0 0 -3px var(--green), 40px 0 0 4px var(--green);
}
#shirt-bg-2 {
width: 146px;
height: 50px;
border-radius: 100%;
background: var(--green);
top:450px;
left: 82px;
transform: rotate(4deg)
}
#links {
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 0;
right: 0;
transform: rotate(45deg);
}
#links a {
display: block;
background: black;
color: white;
text-align: center;
line-height: 20px;
height: 20px;
font-size: 14px;
text-decoration: none;
margin: 3px;
font-family: Arial, Verdana, sans-serif;
}
#links a:nth-child(2) {
background: green;
}
@media all and (max-width: 1000px) {
#links {
display: none;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.