P’New (Copy 1105) (Branch 1125)

✨ PANNATHORN KRASAEVIG

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#eee;
        margin:1em;
        font-family:sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="s1 bb">
      1. กดปุ่มนี้เพื่อแตกบรานซ์เลยจ้า<br>ตี้นึงทำแค่คนเดียวนะ
    </div>
    <div class="s2 bb">
      2. กดตรงนี้เพื่อเปลี่ยนชื่อเป็นชื่อพี่หัวตี้จ้า
    </div>
    <style>
      @keyframes ani{
        from{
          transform:translatey(2px)}
        to{
          transform:translatey(-2px)}
      }
      .bb{
        background:#111;
        color:#fff;
        padding:.3em .6em;
        border-radius:1em;
        box-shadow:0px 0px 5px #0004;
        position:fixed;
        animation:ani .5s infinite alternate;
        font-size:.9em;
      }
      .s1{
        left:.5em;
        bottom:1em;
        animation:ani .5s .5s infinite alternate;
      }
      .s2{
        left:19rem;
        top:1em;
      }
      .s1::after,.s2::after{
        content:"";
        position:absolute;
        left:.6em;
        border-top:.5em solid #111;
        border-right:.5em solid transparent;
        border-left:.5em solid transparent;
      }
      .s1::after{
        bottom:-.3em;
      }
      .s2::after{
        top:-.3em;
        transform:rotate(180deg)
      }
    </style>
  </body>
</html>