Jabont Grid 1

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <link rel="stylesheet" href="https://jabont.com/jayss/jayss2.css">
    <style>
      .grid-cont{
        display:grid;
        grid-template:100px 100px 100px 100px/100px auto 100px;
        background:deepskyblue;
      }
      .grid-cont > div{
        padding:.5em;
        background:pink;
        box-shadow:0px 0px 40px #c004 inset;
        transition:.3s;
      }
      .grid-cont > div:nth-child(12){
        --x:1;
        --y:1;
        background:yellow !important;
        grid-row:1/2;
        grid-column:2/4;
      }
      .grid-cont > div:nth-child(11){
        grid-row:1/2;
        grid-column:1/2;
      }
      .alert{
        width:500px;
        height:350px;
        margin:auto;
        margin-bottom:3em;
        background-color:white;
        box-shadow:0px 4px 10px #0003;
        display:grid;
        grid-template:50px auto 50px/50px auto auto 50px;
      }
      .alert>div{
        display:flex;
        align-items:center;
        justify-content:center;
      }
      .alert-x{
        grid-column:4/5;
        grid-row:1/2;
        background:red;
        color:white;
      }
      .alert-b1,.alert-b2{
        cursor:pointer;
        font-weight:bold;
        grid-row:3/4;
      }
      .alert-b1{
        grid-column:1/3;
        background:purple;
        color:white;
      }
      .alert-b2{
        grid-column:3/5;
        background:#0002;
      }
      div.alert-m{
        grid-column:2/4;
        grid-row:2/3;
        overflow:hidden;
        display:grid;
        grid-template:1em auto 1em/100%;
      }
      .m-b,.m-t{
        background:brown;
      }
      .m-t{
        grid-row:1/2;
        grid-column:1/2;
      }
      .m-b{
        grid-row:3/4;
        grid-column:1/2;
      }
      .m-m{
        grid-row:1/4;
        grid-column:1/2;
        background:pink;
        height:100%;
        overflow:scroll;
      }
    </style>
  </head>
  <body class="padding bg-cloud">
    
    <h1>
      Let's Start with Grid 😎
    </h1>
    <div class="alert">
      <div class="alert-x">
        x
      </div>
      <div class="alert-b1">
        OK
      </div>
      <div class="alert-b2">
        Cancel
      </div>
      <div  class="alert-m">
        <div class="m-m">
          <h3 class="t-center">
            ประกาศ
          </h3>
          โหลนบร็อคโคลีนอมินีไฟลท์ เยอร์บีราหม่านโถวโบกี้ เมี่ยงคำฟีเวอร์ติ๋ม ทำงานซิตี้รีทัชห่วยเชอร์รี่ ด็อกเตอร์โฮปเมี่ยงคำเยอร์บีร่า มหาอุปราชาเลดี้ จิ๊กโก๋บอยคอตแอปพริคอทซูโม่ อัลมอนด์เที่ยงวัน แซวซินโดรมนพมาศโพสต์ ทอมจูน เพียบแปร้ ฮิปฮอปบ๋อยเพลย์บอยแม่ค้า ตัวตนเก๊ะ พุดดิ้งฟลุท สะบึมส์บึม แอปเปิ้ล
          โมจิ โนติสโปรเจ็กเตอร์เธคไดเอ็ต อึ๋มบอยคอตต์ ตื้บตัวเองเอ็นเตอร์เทนก๋ากั่น นิวส์ ล้มเหลวแอ็คชั่นตอกย้ำ อมาตยาธิปไตยเซ็นทรัล เที่ยงคืนอีแต๋นโต๊ะจีน ออร์แกนิกฮิปฮอปบึ้มช็อปเปอร์ ฮิปโปเธค โบรกเกอร์ สเปคดัมพ์ผิดพลาดอุรังคธาตุ ฟลอร์ไชน่าแอปพริคอทอ่วมแลนด์ ว่ะ ชาร์จฟลุกว้อดก้าโค้กพาร์ โอวัลติน
           โหลนบร็อคโคลีนอมินีไฟลท์ เยอร์บีราหม่านโถวโบกี้ เมี่ยงคำฟีเวอร์ติ๋ม ทำงานซิตี้รีทัชห่วยเชอร์รี่ ด็อกเตอร์โฮปเมี่ยงคำเยอร์บีร่า มหาอุปราชาเลดี้ จิ๊กโก๋บอยคอตแอปพริคอทซูโม่ อัลมอนด์เที่ยงวัน แซวซินโดรมนพมาศโพสต์ ทอมจูน เพียบแปร้ ฮิปฮอปบ๋อยเพลย์บอยแม่ค้า ตัวตนเก๊ะ พุดดิ้งฟลุท สะบึมส์บึม แอปเปิ้ล
          โมจิ โนติสโปรเจ็กเตอร์เธคไดเอ็ต อึ๋มบอยคอตต์ ตื้บตัวเองเอ็นเตอร์เทนก๋ากั่น นิวส์ ล้มเหลวแอ็คชั่นตอกย้ำ อมาตยาธิปไตยเซ็นทรัล เที่ยงคืนอีแต๋นโต๊ะจีน ออร์แกนิกฮิปฮอปบึ้มช็อปเปอร์ ฮิปโปเธค โบรกเกอร์ สเปคดัมพ์ผิดพลาดอุรังคธาตุ ฟลอร์ไชน่าแอปพริคอทอ่วมแลนด์ ว่ะ ชาร์จฟลุกว้อดก้าโค้กพาร์ โอวัลติน
        </div>
        <div class="m-t">ttttt</div>
        <div class="m-b">bbbbbbbb</div>
      </div>
    </div>
    <div class="grid-cont">
      <div>1️⃣
      </div>
      <div>2️⃣
      </div>
      <div>3️⃣
      </div>
      <div>4️⃣
      </div>
      <div>5️⃣
      </div>
      <div>6️⃣
      </div>
      <div>7️⃣
      </div>
      <div>8️⃣
      </div>
      <div>9️⃣
      </div>
      <div>🔟
      </div>
      <div>🌺
      </div>
      <div>🌝
      </div>
    </div>
  </body>
</html>