heart

✨ Pimwaree Kromsuriyasak

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#eee;
        margin:0em;
        font-family:sans-serif;
        --block-size:calc(100vw / 14);
      }
      .picture{
        display:flex;
        flex-flow:row wrap;
        width:calc(100vw - ( var(--block-size) *2) );
        margin:var(--block-size);
      }
      .block{
        width:var(--block-size);
        height:var(--block-size);
        box-shadow:0px 0px 20px inset #0002;
        background:hsl(0,100%,100%);
      }
      /* มาใส่สีกัน */
      .blink-1{
        /* สีสดใส l กลางๆ*/
        background:hsl(330,100%,50%);
        animation: anim 1s infinite alternate;
      }
      .blink-2{
        /* สีสดใส l กลางๆ*/
        background:hsl(300,100%,50%);
        animation: anim 2s infinite alternate;
      }
      .blink-3{
        /* สีสดใส l กลางๆ*/
        background:hsl(270,100%,50%);
        animation: anim 3s infinite alternate;
      }
      .blink-4{
        /* สีสดใส l กลางๆ*/
        background:hsl(390,100%,50%);
        animation: anim 4s infinite alternate;
      }
      .candle-1{
        /* สีสดใส l กลางๆ*/
        background:hsl(80,100%,50%);
      }
      .candle-2{
        /* สีสดใส l กลางๆ*/
        background:hsl(180,100%,50%);
      }
      .candle-3{
        /* สีสดใส l กลางๆ*/
        background:hsl(300,100%,50%);
      }
      .light{
        /* สีเปลวไฟ l กลางๆ */
        background:hsl(10,100%,50%);
        animation: fire 2s infinite alternate;
      }
      
      /* ด้านล่างนี้พยายาใช้ hue เดียวกัน แก้แค่ค่า lightness */
      .c1{
        /* s 100% l กลางๆ */
        background:hsl(40,100%,40%);
      }
      .c2{
        /* s ต่ำๆ l กลางๆ */
        background:hsl(40,100%,20%);
      }
      .c3{
        /* s ต่ำๆ l สูงขึ้น */
        background:hsl(40,100%,60%);
      }
      .c4{
        /* s ต่ำๆ l สูงขึ้นอีก */
        background:hsl(40,100%,80%);
      }
      .border{
        /* s ต่ำๆ ต่ำสุด */
        background:hsl(40,100%,10%);
      }
      @keyframes anim{
			from {opacity: 20%}
 			 to {opacity: 100%;}
      }
      @keyframes fire{
			0% {opacity: 100%}
 			20% {opacity: 20%;}
         40% {opacity: 40%;}
         60% {opacity: 60%;}
         80% {opacity: 80%;}
         100% {opacity: 100%;}
      }
    </style>
  </head>
  <body>
    <section class="picture">
      
      <div class="block">
      </div>
      <div class="block border">
      </div>
      <div class="block border">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block border">
      </div>
      <div class="block border">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      
      <div class="block border">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      <div class="block border">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      
      <div class="block border">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block border">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block ">
      </div>
      <div class="block light">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      
      <div class="block border">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      
      <div class="block">
      </div>
      <div class="block border">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block border">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block border">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block light">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block border">
      </div>
      <div class="block light">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block border">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
      
      
     
    </section>
  </body>
</html>