header.svg

<svg fill="none" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="100%" height="100%">
		<div xmlns="http://www.w3.org/1999/xhtml">
			<style>
				@keyframes rotate {
					0% {
						transform: rotate(3deg);
					}
		
					100% {
						transform: rotate(-3deg);
					}
				}
		
				@keyframes backInDown {
					0% {
						transform: translateY(-1200px) scale(0.7);
						opacity: 0.7;
					}
		
					80% {
						transform: translateY(0px) scale(0.7);
						opacity: 0.7;
					}
		
					100% {
						transform: scale(1);
						opacity: 1;
					}
				}
		
		
				@keyframes gradientBackground {
					0% {
						background-position: 0% 50%;
					}
		
					50% {
						background-position: 100% 50%;
					}
		
					100% {
						background-position: 0% 50%;
					}
				}
		
				@keyframes fadeIn {
					0% {
						opacity: 0;
					}
		
					66% {
						opacity: 0;
					}
		
					100% {
						opacity: 1;
					}
				}
		
				.container {
					font-family:
						system-ui,
						-apple-system,
						'Segoe UI',
						Roboto,
						Helvetica,
						Arial,
						sans-serif,
						'Apple Color Emoji',
						'Segoe UI Emoji';
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin: 0;
					width: 100%;
					height: 400px;
					background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
					background-size: 600% 400%;
					animation: gradientBackground 10s ease infinite;
					border-radius: 10px;
					color: white;
					text-align: center;
				}
		
				h1 {
					font-size: 50px;
					line-height: 1.3;
					letter-spacing: 5px;
					text-transform: uppercase;
					animation: backInDown 3s ease 0s normal forwards 1;
				}
		
				p {
					font-size: 20px;
					text-shadow: 0 1px 0 #efefef;
					animation: rotate ease-in-out 2s infinite alternate;
				}
			</style>
			<style>
				.bear {
					width: 240px;
					-webkit-animation: updown 2s infinite alternate;
					animation: updown 2s infinite alternate;
					position: absolute;
					top: 5%;
					left: 5%;
					zoom: 0.2;
				}
		
				.bear__ears {
					display: -webkit-box;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: justify;
					-webkit-justify-content: space-between;
					-ms-flex-pack: justify;
					justify-content: space-between;
					-webkit-animation: updown 2s infinite alternate;
					animation: updown 2s infinite alternate;
					-webkit-transform: translateY(10px);
					-ms-transform: translateY(10px);
					transform: translateY(10px);
				}
		
				.bear__ears .ear {
					width: 50px;
					height: 60px;
					background: #000;
				}
		
				.bear__ears__left {
					-webkit-border-radius: 50% 100%;
					border-radius: 50% 100%;
				}
		
				.bear__ears__right {
					-webkit-border-radius: 100% 50%;
					border-radius: 100% 50%;
				}
		
				.bear__body {
					width: 100%;
					height: 230px;
					background: #000;
					-webkit-border-radius: 50% / 40% 40% 60% 60%;
					border-radius: 50% / 40% 40% 60% 60%;
		
				}
		
				.bear__eyes {
					display: -webkit-box;
					display: -webkit-flex;
					display: -ms-flexbox;
					display: flex;
					-webkit-justify-content: space-around;
					-ms-flex-pack: distribute;
					justify-content: space-around;
					position: relative;
					-webkit-transform: translateY(60px);
					-ms-transform: translateY(60px);
					transform: translateY(60px);
					-webkit-transition: all .3s linear;
					-o-transition: all .3s linear;
					transition: all .3s linear;
				}
		
				.bear__eyes .eye {
					width: 20px;
					background: #fff;
					height: 15px;
					position: absolute;
					-webkit-border-radius: 50% / 40% 40% 60% 60%;
					border-radius: 50% / 40% 40% 60% 60%;
					-webkit-animation: blink .5s infinite alternate;
					animation: blink .5s infinite alternate;
					-webkit-transition: all .3s ease;
					-o-transition: all .3s ease;
					transition: all .3s ease;
				}
		
				.bear__eyes--left {
					left: 50px;
					-webkit-transform: skewY(5deg);
					-ms-transform: skewY(5deg);
					transform: skewY(5deg);
				}
		
				.bear__eyes--right {
					right: 50px;
					-webkit-transform: skewY(-5deg);
					-ms-transform: skewY(-5deg);
					transform: skewY(-5deg);
				}
		
				.bear__nose {
					width: 80px;
					background: #fff;
					height: 100px;
					margin: auto;
					-webkit-transform: translateY(80px);
					-ms-transform: translateY(80px);
					transform: translateY(80px);
					-webkit-border-radius: 50% / 60% 60% 30% 30%;
					border-radius: 50% / 60% 60% 30% 30%;
					position: relative;
					-webkit-animation: moveNose 3s infinite;
					animation: moveNose 3s infinite;
					-webkit-transition: .4s ease;
					-o-transition: .4s ease;
					transition: .4s ease;
				}
		
				.bear__nose--inner {
					width: 50px;
					height: 26px;
					background: #000;
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					-webkit-border-radius: 50% / 40% 40% 60% 60%;
					border-radius: 50% / 40% 40% 60% 60%;
					-webkit-animation: flip .5s infinite alternate;
					animation: flip .5s infinite alternate;
				}
		
				.bear__nose--inner:after {
					content: "";
					width: 20px;
					height: 20px;
					background: #000;
					position: absolute;
					bottom: -6px;
					left: 50%;
					-webkit-border-radius: 50px;
					border-radius: 50px;
					-webkit-transform: translate(-50%);
					-ms-transform: translate(-50%);
					transform: translate(-50%);
					-webkit-box-shadow: 20px 5px 0 #fff, -20px 5px 0 #fff;
					box-shadow: 20px 5px 0 #fff, -20px 5px 0 #fff;
				}
		
				.shadow {
					width: 200px;
					height: 30px;
					margin: auto;
					margin-top: -20px;
					background: #000;
					opacity: .6;
					display: block;
					-webkit-border-radius: 100%;
					border-radius: 100%;
					-webkit-transform: translateY(60px);
					-ms-transform: translateY(60px);
					transform: translateY(60px);
					-webkit-filter: blur(17px);
					filter: blur(17px);
					-webkit-animation: shadow 2s infinite alternate;
					animation: shadow 2s infinite alternate;
				}
		
				@-webkit-keyframes updown {
					to {
						-webkit-transform: translateY(40px);
						transform: translateY(40px);
					}
				}
		
				@keyframes updown {
					to {
						-webkit-transform: translateY(40px);
						transform: translateY(40px);
					}
				}
		
				@-webkit-keyframes blink {
					from {
						height: 0;
					}
		
					to {
						height: 15px;
					}
				}
		
				@keyframes blink {
					from {
						height: 0;
					}
		
					to {
						height: 15px;
					}
				}
		
				@-webkit-keyframes moveNose {
		
					0%,
					100%,
					90% {
						-webkit-transform: translateY(80px);
						transform: translateY(80px);
					}
		
					20%,
					30% {
						-webkit-transform: translate(20px, 60px);
						transform: translate(20px, 60px);
					}
		
					60%,
					70% {
						-webkit-transform: translate(-20px, 60px);
						transform: translate(-20px, 60px);
					}
				}
		
				@keyframes moveNose {
		
					0%,
					100%,
					90% {
						-webkit-transform: translateY(80px);
						transform: translateY(80px);
					}
		
					20%,
					30% {
						-webkit-transform: translate(20px, 60px);
						transform: translate(20px, 60px);
					}
		
					60%,
					70% {
						-webkit-transform: translate(-20px, 60px);
						transform: translate(-20px, 60px);
					}
				}
		
				@-webkit-keyframes shadow {
					from {
						width: 200px;
					}
		
					to {
						width: 150px;
					}
				}
		
				@keyframes shadow {
					from {
						width: 200px;
					}
		
					to {
						width: 150px;
					}
				}
			</style>
			<div class="container">
				<h1>
					Project Name
				</h1>
				<p>
					YOUR_SHORT_DESCRIPTION
				</p>
			</div>

			<div class="bear">
				<div class="bear__ears">
					<div class="bear__ears__left ear"></div>
					<div class="bear__ears__right ear"></div>
				</div>
				<div class="bear__body">
					<div class="bear__eyes">
						<div class="bear__eyes--left eye"></div>
						<div class="bear__eyes--right eye"></div>
					</div>
					<div class="bear__nose">
						<div class="bear__nose--inner"></div>
					</div>
				</div>
			</div>


		</div>
	</foreignObject>
</svg>