qe1

✨ WACHIRAWIT PRANGNAWARAT

<html>
<head>
	<title>Let's Start</title>
  <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: -5;
	-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-top: 300px;
	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>
<!DOCTYPE html>
<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>
  </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-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 class="box bottom">
          <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>
    </div>
    <div class="shadow"></div>
  </body>
</html>