CSS Santa Claus ~ CODING-GREED

CSS SANTA CLAUS

HTML:

	<!DOCTYPE html>
	<html>

	<head>
	<title>MERRY CHRISTMAS</title>
	<link rel="stylesheet" href="santa.css">
	</head>

	<body>
	<div class="logo"></div>
	<div class="all">
	<div class="cap"></div>
	<div class="face"></div>
	<div class="eye"></div>
	<div class="mouth"></div>
	<div class="round_body"></div>
	<div class="hand1"></div>
	<div class="hand2"></div>
	<div class="leg1"></div>
	<div class="leg2"></div>
	</div>
	</body>

	</html>

view raw christmas.html hosted with ❤ by GitHub

CSS:

	body {
	background: url("https://i.ibb.co/ZxRQqgP/Pngtree-christmas-card-with-snow-background-3749618.png");
	background-size: 170%;
	}

	.logo {
	background: url("https://i.ibb.co/bmcHJ2M/5a1ba90a01f4c2-750948241511762186008.png");
	background-size: 100%;
	width: 200px;
	height: 100px;
	position: relative;
	left: 25%;
	}
	.all {
	position: absolute;
	top: 30%;
	left: 40%;
	transform: translate(-50% -50%);
	}

	.cap {
	width: 75px;
	height: 75px;
	background: -webkit-linear-gradient(red 0px 35px, transparent 35px 45px);
	border-radius: 0 60px 0 0;
	}
	.cap:before {
	content: " ";
	position: absolute;
	width: 22px;
	height: 22px;
	background: white;
	border-radius: 22px;
	top: -19px;
	left: -19px;
	}
	.cap:after {
	content: "";
	position: absolute;
	width: 80px;
	height: 20px;
	background: white;
	border-radius: 5px;
	top: 25px;
	left: -8px;
	}

	.face {
	position: absolute;
	width: 13px;
	height: 20px;
	background-color: #f7838a;
	border-radius: 10px;
	top: 45px;
	left: -12px;
	transform: rotate(20deg);
	z-index: 1;
	}
	.face:before {
	position: absolute;
	content: " ";
	width: 13px;
	height: 20px;
	background-color: #f7838a;
	border-radius: 10px;
	top: -27px;
	left: 71.5px;
	transform: rotate(-40deg);
	}
	.face:after {
	content: " ";
	width: 80px;
	height: 80px;
	border-radius: 80px;
	background: linear-gradient(
	transparent 0px 22px,
	#f4c298 22px 55px,
	transparent 55px 78px
	);
	position: absolute;
	transform: rotate(-20deg);
	top: -37px;
	left: 5.5px;
	}

	.eye {
	width: 15px;
	height: 15px;
	border-radius: 15px;
	border-radius: 5px solid black;
	position: absolute;
	left: 5px;
	top: 52px;
	border-top: 5px solid black;
	z-index: 2;
	}

	.eye:before {
	content: " ";
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 15px;
	border-radius: 5px solid black;
	left: 43px;
	top: -4px;
	border-top: 5px solid black;
	z-index: 2;
	}

	.mouth {
	width: 100px;
	height: 40px;
	background: white;
	border-radius: 0px 110px 110px 110px;
	position: absolute;
	left: -12px;
	z-index: 3;
	}

	.mouth:before {
	position: absolute;
	content: " ";
	width: 20px;
	height: 20px;
	background: red;
	border-radius: 15px;
	left: 35px;
	top: -10px;
	}

	.mouth:after {
	position: absolute;
	content: " ";
	width: 25px;
	height: 15px;
	background: black;
	border-radius: 0 0 15px 15px;
	top: 13px;
	left: 33px;
	}

	.round_body {
	width: 160px;
	height: 160px;
	background: red;
	border-radius: 150px;
	position: absolute;
	top: 85px;
	left: -42px;
	}
	.round_body:before {
	content: " ";
	position: absolute;
	width: 160px;
	height: 20px;
	background: black;
	top: 75px;
	}
	.round_body:after {
	content: " ";
	position: absolute;
	width: 40px;
	height: 20px;
	background: yellow;
	top: 75px;
	left: 60px;
	}

	.hand1 {
	width: 120px;
	height: 33px;
	background: red;
	position: absolute;
	left: -120px;
	top: 100px;
	transform: rotate(-20deg);
	border-radius: 0 2px 0 0;
	animation-name: tt;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transform-origin: right;
	animation-delay: 1s;
	animation-duration: 4s;
	}

	@keyframes tt {
	0% {
	transform: rotate(-20deg);
	}
	50% {
	transform: rotate(50deg);
	}
	100% {
	transform: rotate(-20deg);
	}
	}
	.hand1:before {
	position: absolute;
	content: " ";
	width: 15px;
	height: 40px;
	background: white;
	top: -3.5px;
	border-radius: 4px;
	}
	.hand1:after {
	position: absolute;
	content: " ";
	width: 30px;
	height: 30px;
	background: orange;
	top: 0px;
	left: -30px;
	border-radius: 35px 0 0 35px;
	}

	.hand2 {
	width: 120px;
	height: 33px;
	background: red;
	position: absolute;
	left: 80px;
	top: 100px;
	transform: rotate(20deg);
	border-radius: 0 2px 0 0;
	animation-name: rr;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	transform-origin: left;
	animation-delay: 1s;
	animation-duration: 4s;
	}
	@keyframes rr {
	0% {
	transform: rotate(20deg);
	}
	50% {
	transform: rotate(-50deg);
	}
	100% {
	transform: rotate(20deg);
	}
	}
	.hand2:before {
	position: absolute;
	content: " ";
	width: 15px;
	height: 40px;
	background: white;
	top: -3.5px;
	left: 120px;
	border-radius: 4px;
	}
	.hand2:after {
	position: absolute;
	content: " ";
	width: 30px;
	height: 30px;
	background: orange;
	top: 0px;
	left: 135px;
	border-radius: 0 35px 35px 0;
	}

	.leg1 {
	width: 37px;
	height: 120px;
	background: linear-gradient(red 0px 80px, black 80px 120px);
	position: absolute;
	top: 220px;
	transform: rotate(10deg);
	left: -8px;
	}
	.leg1:before {
	position: absolute;
	content: " ";
	width: 70px;
	height: 30px;
	background: black;
	border-radius: 50px 0 0 0;
	top: 95px;
	left: -40px;
	transform: rotate(-10deg);
	}

	.leg2 {
	width: 37px;
	height: 120px;
	background: linear-gradient(red 0px 80px, black 80px 120px);
	position: absolute;
	top: 218px;
	transform: rotate(-10deg);
	left: 60px;
	}
	.leg2:before {
	position: absolute;
	content: " ";
	width: 70px;
	height: 30px;
	background: black;
	border-radius: 0 50px 0 0;
	top: 97px;
	left: 3px;
	transform: rotate(10deg);
	}

view raw christmas.css hosted with ❤ by GitHub

OUTPUT:

NOTE: The background-size property is given in "%" in this projects.So the background may looks quite different on different screen, depends on the screen size.