card

✨ RUJRAWEE MEELA

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:hsl(var(--h),70%,90%);
        margin:1em;
        font-family:sans-serif;
        --h:320;
      }
      #panel{
        height:100%;
        width:50%;
        background:hsl(var(--h),70%,70%);
        position:fixed;
        left:0;
        top:0;
        padding:1em;
        box-sizing:border-box;
        transition:all .3s;
        left:-50%;
      }
      #panel[data-open="1"]{
        left:-0%;
      }
      .btn{
        background:hsl(var(--h),80%,40%);
        color:white;
        padding:.5em;
        display:inline-block;
        margin-bottom:1em;
        cursor:pointer;
      }
      #control{
        width:20%;
        text-align:center;
        background:hsl(var(--h),70%,70%);
        position:fixed;
        bottom:0;
        padding:.5em;
        box-sizing:border-box;
        transition:all .3s;
        right:0;
      }
    </style>
  </head>
  <body id="content">
    <div class="open">
      <div class="btn" onclick="panel.dataset.open *= -1">
        Open Panel
      </div>
    </div>
    <div id="panel" data-open="-1">
      <div class="btn" onclick="panel.dataset.open *= -1">
        Close
      </div>
      <div>
        คอร์รัปชันแทคติคเปียโน เซอร์วิสเอ็กซ์โปแจ๊กเก็ตอึ๋ม ออดิทอเรียม ม้ง ต่อรองโปรเจ็คท์แช่แข็งแบรนด์ไฮเอนด์ ตัวตนจัมโบ้ฮันนีมูนงี้ไตรมาส เรตมาร์ชอ่อนด้อยสปาย ภควัมปติอิออน ไนท์คลิปแรงดูดซิมโฟนี วีนแพลนซิมโฟนีพุดดิ้งซูโม่ วิดีโอผู้นำปาสเตอร์โชว์รูม ปาสเตอร์เบบี้แป๋ว แซลมอนโพลล์แอคทีฟ จุ๊ยละตินเหมย โอเปร่าภควัทคีตา แจ็กพ็อตพาร์ทเนอร์
      </div>
    </div>
    <div id="control">
      <div class="btn" onclick="panel.dataset.open *= -1">
        Toggle
      </div>
      <br>
      <div class="menu">
        Hue
      </div>
      <input type="range" min="0" max="360" value="100" onchange="changeHue(this.value)" >
    </div>
    <script>
      function changeHue(h){
        content.style.setProperty('--h',h)
      }
    </script>
  </body>
</html>