qe-01 2020

✨ Orang Utan

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      .container{
      display: flex;
      transform-style: preserve-3d;
      gap: 10px;
      transform: rotatey(30deg) rotatex(10deg)
      }
      
      .container .text{
      position: relative;
      top:-100px;
      left:0px;
      width:100px;
      height:100px;
      transform-style: preserve-3d;
      transition: 2.5s ease-in-out;
        transition-delay:calc(0.25s*var(--j))
      }
      
      .container:hover .text{
      transform: rotatex(-360deg);
      }
      
      .container:hover .text:last-child{
      transform: rotatex(630deg);
      }
      
      .container .text::before{
      content: '';
      position: absolute;
      width: 100%;
      height:100%;
      background: linear-gradient(#f9eeb6,#eeb189);
      transform-origin: left;
      transform: rotatey(90deg) translatex(-50px);
      }
      
      .container .text:last-child:before{
      background: linear-gradient(#86a5c4, #c4b3c3);
      }
      
      .container .text span{
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background: linear-gradient(#f9eeb6,#eeb189);
      display:flex;
      justify-content: center;
      align-items:center;
      font-size:4em;
      color: #fff;
      transform-style:preserve-3d;
      transform:rotateX(calc(90deg * var(--i))) translatez(50px);
      }
      
      .container .text:last-child span{
		background: linear-gradient(#86a5c4, #c4b3c3);
      }
      
      body{
        background-image:url(https://cdn.discordapp.com/attachments/919474079248044032/938441988804608041/1744216537fd4e49.png);
        background-size:cover;
        background-repeat:no-repeat;
        margin:0;
        font-family:sans-serif;
        display:flex;
        justify-content:center;
        align-items:center;
        display:flex;
        justify-content: center;
        min-height: 100vh;
      }
      
      {
        box-sizing:border-box;
      }
      .aladin img{
        position:center;
        width:500px;
        height:auto;
        transform:translateY(0vw) rotate(-30deg) skew(35deg);
        transition:all 5s;
        border-radius:2vw;
        cursor:zoom-in;
        animation: spin 2s infinite linear alternate;
      }
      /*.aladin img:hover{
        transform:translateY(105px) rotate(-30deg) skew(30deg);
      }*/
      @keyframes spin{
  			from{
    			transform:translateY(0vw) rotate(-30deg) skew(35deg);
  				}
  			to{
    			transform:translateY(105px) rotate(-30deg) skew(30deg);
  				}
      }
      @keyframes kraprib{
        from{opacity:.2}
        to{opacity:1}
      }
      @keyframes moon{
        from{transform:rotate(0deg)}
        to{transform:rotate(360deg)}
      }
      @keyframes moon1{
        from{transform:rotate(360deg)}
        to{transform:rotate(0deg)}
      }
      .star{
        position:absolute;
        width:5em;
        height:5em;
        background-image:url(https://cdn.discordapp.com/attachments/919474079248044032/938447575596556328/IMG_7470.png);
        background-size:cover;
        background-repeat:no-repeat;

}
      /*.star1{
        position:absolute;
        width:10em;
        height:10em;
        background-image:url(https://cdn.discordapp.com/attachments/919474079248044032/938447575596556328/IMG_7470.png);
        background-size:cover;
        background-repeat:no-repeat;
      }*/
      
      .star:nth-child(1){
        top:10%;
        left:10%;
        animation:kraprib 10s infinite alternate,moon 15s infinite linear;
      }
       .star:nth-child(2){
        top:15%;
        left:50%;
        animation:kraprib 15s infinite alternate,moon 13s infinite linear;
      }
      .star:nth-child(3){
        top:5%;
        left:85%;
        animation:kraprib 5s infinite alternate,moon1 10s infinite linear;
      }
      .star:nth-child(4){
        top:70%;
        left:20%;
        animation:kraprib 20s infinite alternate,moon 17s infinite linear;
      }
      .star:nth-child(5){
        top:90%;
        left:60%;
        animation:kraprib 19s infinite alternate,moon 12s infinite linear;
      }
      .star:nth-child(6){
        top:70%;
        left:95%;
        animation:kraprib 9s infinite alternate,moon1 10s infinite linear;
      }
      .star:nth-child(7){
        top:50%;
        left:2%;
        animation:kraprib 9s infinite alternate,moon1 10s infinite linear;
      }

</style>
  </head>
  <body>
      <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>    
    <div class="star">
    </div>    
    <div class="star">
    </div>    
    <div class="star">
    </div>
    <div class="star">
    </div>
    <div class="star">
    </div>