QE C-Kwan rubik

✨ นายสัณห์พิชญ์ พูลศิลป์

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>@import url('https://fonts.googleapis.com/css2?family=Economica:wght@700&display=swap');</style>
    <style>@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@500&display=swap');
</style>
    <style>
    body {
		overflow: hidden;
		height: 100vh;
		background: linear-gradient(-330deg,rgb(241, 193, 89) 0%,rgb(204, 160, 50) 25%,rgb(150, 		 85, 20) 80%,rgb(129, 50, 2) 95%,rgb(129, 10, 2) 100%);
		font-size: 16px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	h1 {
		font-size: 9em;
		font-family: "Ink Free", "Economica", sans-serif;
		margin: 0;
		-webkit-text-stroke-width: 2px;
		-webkit-text-stroke-color: hsl(150,50%,75%);
 		margin-top: -300px;
	}
	.scene {
		perspective: 30em;
		perspective-origin: 50% calc(50% - 10em);
		width: 20em;
		height: 20em;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cube {
		transform-style: preserve-3d;
		animation: rotate 16s infinite ease-in-out;
		width: 10em;
		height: 10em;
		cursor: pointer;
	}
	@keyframes rotate {
		0% {
			transform: rotatez(0deg) rotatex(0deg) rotatey(0deg);
		}
  		25%{
    		transform: rotatez(270deg) rotatex(270deg) rotatey(0deg);
  		}
		50% {
			transform: rotatez(360deg) rotatex(360deg) rotatey(300deg);
		}
  		75%{
    		transform: rotatez(360deg) rotatex(0deg) rotatey(360deg);
  		}
		100% {
			transform: rotatez(0deg) rotatex(0deg) rotatey(0deg);
		}
	}

.box {
		position: absolute;
		opacity: .9;
		width: 100%;
		height: 100%;
		box-shadow: 0 0 0.9em #000a inset;
		background-size: 3% 3%, 1em 1em;
		display: flex;
		justify-content: center;
		align-items: center;
  		background-color: hsl(0, 0%, 0%);
	}
	.front {
		transform: translateZ(calc(10em / 2));
	}
	.back {
		transform: rotatez(0deg) rotatey(180deg) translateZ(calc(10em / 2));
	}
	.left {
		transform: rotatey(-90deg) translateZ(calc(10em / 2));
	}
	.right {
		transform: rotatey(90deg) translateZ(calc(10em / 2));
	}
	.top {
		transform: rotatex(90deg) translateZ(calc(10em / 2));
	}
	.bottom {
		transform: rotatex(-90deg) translateZ(calc(10em / 2));
	}
	.in-color1{
  		margin: auto;
  		text-align: center;
	}
	.color-red{
  		width: 47px;
  		height: 47px;
  		background: hsl(0,100%,50%);
  		display: inline-block;
  		border-radius: 3px;
	}
	.color-green{
  		width: 47px;
  		height: 47px;
  		background: hsl(120,100%,50%);
  		display: inline-block;
  		border-radius: 3px;
	}
	.color-blue{
 	 	width: 47px;
  		height: 47px;
  		background: hsl(240,100%,50%);
  		display: inline-block;
  		border-radius: 3px;
	}
	.color-orange{
  		width: 47px;
  		height: 47px;
  		background: hsl(30,100%,50%);
  		display: inline-block;
  		border-radius: 3px;
	}
	.color-white{
 		width: 47px;
  		height: 47px;
  		background: hsl(0,100%,100%);
  		display: inline-block;
  		border-radius: 3px;
	}
	.color-yellow{
  		width: 47px;
  		height: 47px;
  		background: hsl(60,100%,50%);
  		display: inline-block;
  		border-radius: 3px;
	}
	.cube:hover {
		animation-play-state: paused;
	}
	.shadow {
		position: absolute;
		width: 10rem;
		height: 10rem;
		margin-bottom: -450px;
		border-radius: 6px;
		background-color: #00000070;
		filter: blur(20px);
		transform: rotateX(80deg) rotateZ(-30deg);
	}
	::selection{
  		color: black
	}
	.member{
  		margin-left: -90px;
  		font-size: 1.75em;
  		font-family: 'IBM Plex Sans Thai', sans-serif;
 		color: hsl(0,100%,100%);
  		text-shadow: 1px 1px hsl(0,0%,0%);
	}
    </style>
  </head>
  <body>
    <h1>C-Kwan party</h1>
    <div class="member">สมาชิก โอ๊ก-ยงศิลป์ ทาม-วชิรวิทย์ อู๋-สัณห์พิชญ์</div>
    <div class="scene">
	    <div class="cube">
		    <div class="box front">
          <div class="in-color1">
            <div class="color-red"></div>
            <div class="color-red"></div>
            <div class="color-red"></div>
            <div class="color-red"></div>
            <div class="color-red"></div>
            <div class="color-red"></div>
            <div class="color-red"></div>
            <div class="color-red"></div>
            <div class="color-red"></div>
          </div>
		    </div>
		    <div class="box left">
          <div class="in-color1">
            <div class="color-green"></div>
            <div class="color-green"></div>
            <div class="color-green"></div>
            <div class="color-green"></div>
            <div class="color-green"></div>
            <div class="color-green"></div>
            <div class="color-green"></div>
            <div class="color-green"></div>
            <div class="color-green"></div>
          </div>
		    </div>
		    <div class="box back">
          <div class="in-color1">
            <div class="color-blue"></div>
            <div class="color-blue"></div>
            <div class="color-blue"></div>
            <div class="color-blue"></div>
            <div class="color-blue"></div>
            <div class="color-blue"></div>
            <div class="color-blue"></div>
            <div class="color-blue"></div>
            <div class="color-blue"></div>
          </div>
		    </div>
		    <div class="box right">
          <div class="in-color1">
            <div class="color-orange"></div>
            <div class="color-orange"></div>
            <div class="color-orange"></div>
            <div class="color-orange"></div>
            <div class="color-orange"></div>
            <div class="color-orange"></div>
            <div class="color-orange"></div>
            <div class="color-orange"></div>
            <div class="color-orange"></div>
          </div>
		    </div>
		    <div class="box top">
          <div class="in-color1">
            <div class="color-white"></div>
            <div class="color-white"></div>
            <div class="color-white"></div>
            <div class="color-white"></div>
            <div class="color-white"></div>
            <div class="color-white"></div>
            <div class="color-white"></div>
            <div class="color-white"></div>
            <div class="color-white"></div>
          </div>
		    </div>
		    <div class="box bottom">
          <div class="in-color1">
            <div class="color-yellow"></div>
            <div class="color-yellow"></div>
            <div class="color-yellow"></div>
            <div class="color-yellow"></div>
            <div class="color-yellow"></div>
            <div class="color-yellow"></div>
            <div class="color-yellow"></div>
            <div class="color-yellow"></div>
            <div class="color-yellow"></div>
          </div>
		    </div>
	    </div>
    </div>
    <div class="shadow"></div>
  </body>
</html>