CSS GIRL

Image of Output

HTML:

	<html>

	<head>
	<title></title>
	</head>

	<body>
	<div class="all">

	<div class="hair_back"></div>
	<div class="hair_front1"></div>
	<div class="hair_front2"></div>
	<div class="face">
	<div class="eye"></div>
	<div class="mouth"></div>
	</div>

	<div class="bod">
	<div class="neck"></div>
	<div class="appraon"></div>
	</div>

	<div class="hand1"></div>
	<div class="hand2"></div>
	<div class="belt"></div>
	<div class="lower"></div>
	<div class="leg1"></div>
	<div class="leg2"></div>
	<div class="shoe1"></div>
	<div class="shoe2"></div>
	</div>

	</body>
	</html>

view raw css_girl.html hosted with ❤ by GitHub

CSS:

	body {
	background-color: #0b8043;
	}

	p {
	text-align: center;
	}
	a {
	text-decoration: none;
	color: red;
	font-family: "Courier New", Courier, monospace;
	font-weight: bolder;
	font-size: 1.5em;
	text-shadow: 2px 2px white;
	}
	.all {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	.hair_back {
	position: relative;
	width: 90px;
	height: 90px;
	background-color: black;
	border-radius: 45px 45px 0px 0px;
	z-index: 1;
	}

	.hair_back:before {
	position: absolute;
	content: " ";
	width: 70px;
	height: 70px;
	background-color: black;
	border-radius: 70px;
	right: 60px;
	top: 45px;
	}

	.hair_back:after {
	position: absolute;
	content: " ";
	width: 70px;
	height: 70px;
	background-color: black;
	border-radius: 70px;
	left: 60px;
	top: 45px;
	}

	.hair_front1 {
	width: 55px;
	height: 10px;
	border-radius: 0px 0px 25px 25px;
	background-color: black;
	position: relative;
	float: right;
	z-index: 3;
	top: -40px;
	}

	.hair_front1:before {
	position: absolute;
	content: " ";
	width: 8px;
	height: 25px;
	background-color: black;
	border-radius: 0px 0px 20px 0px;
	left: 47px;
	}

	.hair_front2 {
	width: 35px;
	height: 10px;
	background-color: black;
	border-radius: 0px 0px 40px 40px;
	position: absolute;
	top: 50px;

	z-index: 3;
	}

	.hair_front2:before {
	position: absolute;
	content: " ";
	width: 8px;
	height: 25px;
	background-color: black;
	border-radius: 0px 0px 0px 20px;
	}

	.face {
	position: relative;
	top: -40px;
	width: 90px;
	height: 80px;
	background-color: #ffd099;
	border-radius: 0px 0px 45px 45px;
	z-index: 2;
	}

	.face:before {
	position: absolute;
	content: " ";
	width: 8px;
	height: 25px;
	border-radius: 20px 0px 0px 20px;
	left: -7.5px;
	background-color: #ffd099;
	}

	.face:after {
	position: absolute;
	content: " ";
	width: 8px;
	height: 25px;
	background-color: #ffd099;
	border-radius: 0px 20px 20px 0px;
	left: 89px;
	}

	.eye {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 15px;
	background-color: black;
	top: 20px;
	left: 18px;
	}
	.eye:before {
	position: absolute;
	content: " ";
	width: 8px;
	height: 8px;
	border-radius: 15px;
	background-color: black;
	top: 0px;
	left: 45px;
	}

	.eye:after {
	position: absolute;
	content: " ";
	width: 0px;
	height: 0px;
	/border-top:15px solid white;/
	border-bottom: 18px solid orange;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	left: 15px;
	top: 10px;
	}

	.mouth {
	width: 25px;
	height: 25px;
	border-radius: 25px;
	border-bottom: 3px solid red;
	position: absolute;
	top: 40px;
	left: 30px;
	}

	.neck {
	width: 23px;
	height: 25px;
	background-color: #ffd099;
	position: relative;
	top: -15px;
	left: 33px;
	z-index: 2;
	}

	.neck:after {
	position: absolute;
	content: " ";
	width: 0px;
	height: 0px;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 12px solid silver;
	border-right: 12px solid silver;
	top: 14px;
	}

	.bod {
	width: 90px;
	height: 110px;
	background: linear-gradient(white 71px, black 39px);
	z-index: 3;
	position: absolute;
	top: 140px;
	border-radius: 8px 8px 0px 0px;
	}

	.appraon {
	width: 66px;
	height: 0px;
	border-top: 12px solid transparent;
	border-bottom: 35px solid black;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	}

	.appraon:before {
	position: absolute;
	content: " ";
	width: 8px;
	height: 38px;
	background-color: rgb(253, 22, 22);
	top: 0px;
	left: 12px;
	}

	.appraon:after {
	position: absolute;
	content: " ";
	width: 8px;
	height: 38px;
	background-color: rgb(253, 22, 22);
	top: 0px;
	left: 70px;
	}

	.hand1 {
	width: 22px;
	height: 110px;
	border-radius: 10px 0px 0px 0px;
	background: linear-gradient(white 0px 50px, #ffd099 50px 110px);
	position: absolute;
	left: -25px;
	z-index: 1;
	top: 137px;
	transform: rotate(20deg);
	}

	.hand2 {
	width: 22px;
	height: 110px;
	border-radius: 0px 10px 0px 0px;
	background: linear-gradient(white 0px 50px, #ffd099 50px 110px);
	position: absolute;
	left: -25px;
	z-index: 1;
	top: 137px;
	left: 90px;
	transform: rotate(-20deg);
	}

	.belt {
	width: 90px;
	height: 5px;
	background-color: red;
	position: relative;
	top: 75px;
	z-index: 15;
	}

	.belt:before {
	position: absolute;
	content: " ";
	width: 15px;
	height: 10px;
	background-color: yellow;
	left: 35px;
	top: -3px;
	border: 1.5px double orange;
	}

	.belt:after {
	position: absolute;
	content: " ";
	width: 0px;
	height: 0px;
	left: 45px;
	border-radius: 10px;
	border-top: 5px solid white;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
	border-right: 5px solid white;
	transform: rotate(-135deg);
	}

	.lower {
	width: 50px;
	height: 0px;
	border-top: 40px solid black;
	/border-bottom: 20px solid blue;/
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	position: absolute;
	top: 250px;
	}

	.leg1 {
	width: 25px;
	height: 0px;
	border-top: 130px solid black;
	/border-bottom: 20px solid blue;/
	border-left: 5px solid transparent;
	border-right: 15px solid transparent;
	position: absolute;
	top: 250px;
	}

	.leg2 {
	width: 25px;
	height: 0px;
	border-top: 130px solid black;
	/border-bottom: 20px solid blue;/
	border-left: 15px solid transparent;
	border-right: 5px solid transparent;
	position: absolute;
	top: 250px;

	left: 45px;
	}

	.shoe1 {
	position: relative;
	width: 40px;
	height: 40px;
	background: linear-gradient(red 0px 25px, transparent 25px 50px);
	border-radius: 50px;
	top: 197px;
	left: -2px;
	}

	.shoe1:before {
	position: absolute;
	content: " ";
	width: 35px;
	height: 35px;
	background: linear-gradient(orange 0px 22px, transparent 22px 50px);
	border-radius: 35px;
	top: 2.5px;
	left: 2px;
	}
	.shoe2 {
	position: relative;
	width: 40px;
	height: 40px;
	background: linear-gradient(red 0px 25px, transparent 25px 50px);
	border-radius: 50px;
	top: 155px;
	left: 55px;
	}

	.shoe2:before {
	position: absolute;
	content: " ";
	width: 35px;
	height: 35px;
	background: linear-gradient(orange 0px 22px, transparent 22px 50px);
	border-radius: 35px;
	top: 2px;
	left: 2px;
	}