MultiPro2021 – Before Midterm

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        --h:270;
        background:#eee;
        margin:0;
        font-family:sans-serif;
      }
      /* สำคัญ */
      .container{
        /* background:yellow; */
        width:100%;
        /* อย่าให้ให้กว้างเกิน 1024 */
        max-width:1024;
        /* เว้นขอบด้านข้างไว้ 16px */
        padding:0 1rem;
        margin:auto;
        /* ทำให้ความกว้าง เท่ากับที่กำหนดไว้ อย่าสนขอบหรือ padding */
        box-sizing:border-box;
      }
      .fullscreen{
        width:100%;
        height:100vh;
        background:gold;
      }
      /* สำคัญ */
      .flex-center-parent{
        /* ทำให้ลูกของ element นี้ อยู่ตรงกลาง พอดีเด๊ะ */
        display:flex;
        justify-content: center;
        align-items: center;
      }
      .card{
        background:#fff;
        border-radius:10px;
        box-shadow:4px 8px 0px #0003;
        padding:1em;
        min-height:100px;
        min-width:300px;
      }
      .fullwidth{
        width:100%;
      }
      .card-article{
        border-radius:10px;
        overflow:hidden;
        box-shadow:0px 0px 8px hsl(var(--h),90%,60%,30%);
        background:white;
        font-weight:bold;
        color:hsl(var(--h),90%,50%);
      }
      .padding{
        padding:1rem;
      }
      /* สำคัญ */
      /* ตรงนี้คือ Grid ประกาศตัวแม่ */
      .grid-parent,.column-12{
        display:grid;
        grid-template-columns:repeat(12,1fr);
        grid-gap:.75rem;
      }
      .column-1{
        grid-template-columns:repeat(1,1fr);
      }
      .column-2{
        grid-template-columns:repeat(2,1fr);
      }
      .column-3{
        grid-template-columns:repeat(3,1fr);
      }
      .column-4{
        grid-template-columns:repeat(4,1fr);
      }
      .column-5{
        grid-template-columns:repeat(5,1fr);
      }
      .column-6{
        grid-template-columns:repeat(6,1fr);
      }
      .column-7{
        grid-template-columns:repeat(7,1fr);
      }
      .column-8{
        grid-template-columns:repeat(8,1fr);
      }
      .column-9{
        grid-template-columns:repeat(9,1fr);
      }
      .column-10{
        grid-template-columns:repeat(10,1fr);
      }
      .column-11{
        grid-template-columns:repeat(11,1fr);
      }
      /*   ตัว Grid ลูก */
      .grid-parent > div{
      }
      .grid-parent > div.span-1{
        grid-column:span 1;
      }
      .grid-parent > div.span-2{
        grid-column:span 2;
      }
      .grid-parent > div.span-3{
        grid-column:span 3;
      }
      .grid-parent > div.span-4{
        grid-column:span 4;
      }
      .grid-parent > div.span-5{
        grid-column:span 5;
      }
      .grid-parent > div.span-6{
        grid-column:span 6;
      }
      .grid-parent > div.span-7{
        grid-column:span 7;
      }
      .grid-parent > div.span-8{
        grid-column:span 8;
      }
      .grid-parent > div.span-9{
        grid-column:span 9;
      }
      .grid-parent > div.span-10{
        grid-column:span 10;
      }
      .grid-parent > div.span-11{
        grid-column:span 11;
      }
      .grid-parent > div.span-12{
        grid-column:span 12;
      }
      header{
        background:hsl(var(--h),90%,60%);
        transition:all .3s;
        color:white;
        position:fixed;
        width:100%;
      }
      /* สำคัญ เรื่องการจัดเบรกพอยท์หน้าจอ*/
      /* iPad แนวนอน*/
      @media (max-width: 1024px) {
        body{
          --h:330;
        }
        /* สร้างสำหรับ Mobile */
      }
      /* iPad แนวตั้ง หรือ มือถือลงไป*/
      @media (max-width: 768px) {
        body{
          --h:190;
        }
        /* สร้างสำหรับ Mobile */
        .mob-column-12{
          display:grid;
          grid-template-columns:repeat(12,1fr);
          grid-gap:.75rem;
        }
        .mob-column-1{
          grid-template-columns:repeat(1,1fr);
        }
        .mob-column-2{
          grid-template-columns:repeat(2,1fr);
        }
        .mob-column-3{
          grid-template-columns:repeat(3,1fr);
        }
        .mob-column-4{
          grid-template-columns:repeat(4,1fr);
        }
        .mob-column-5{
          grid-template-columns:repeat(5,1fr);
        }
        .mob-column-6{
          grid-template-columns:repeat(6,1fr);
        }
        .mob-column-7{
          grid-template-columns:repeat(7,1fr);
        }
        .mob-column-8{
          grid-template-columns:repeat(8,1fr);
        }
        .mob-column-9{
          grid-template-columns:repeat(9,1fr);
        }
        .mob-column-10{
          grid-template-columns:repeat(10,1fr);
        }
        .mob-column-11{
          grid-template-columns:repeat(11,1fr);
        }
        /*   ตัว Grid ลูก */
        .grid-parent > div.mob-span-1{
          grid-column:span 1;
        }
        .grid-parent > div.mob-span-2{
          grid-column:span 2;
        }
        .grid-parent > div.mob-span-3{
          grid-column:span 3;
        }
        .grid-parent > div.mob-span-4{
          grid-column:span 4;
        }
        .grid-parent > div.mob-span-5{
          grid-column:span 5;
        }
        .grid-parent > div.mob-span-6{
          grid-column:span 6;
        }
        .grid-parent > div.mob-span-7{
          grid-column:span 7;
        }
        .grid-parent > div.mob-span-8{
          grid-column:span 8;
        }
        .grid-parent > div.mob-span-9{
          grid-column:span 9;
        }
        .grid-parent > div.mob-span-10{
          grid-column:span 10;
        }
        .grid-parent > div.mob-span-11{
          grid-column:span 11;
        }
        .grid-parent > div.mob-span-12{
          grid-column:span 12;
        }
      }
      #header{
        padding:1rem 0;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container">
        <div id="header">
          <b>MultiPro2021
          </b>
        </div>
      </div>
    </header>
    <div class="fullscreen flex-center-parent">
      <div class="card flex-center-parent">
        สวัสดี ฉันเป็นกลาง
      </div>
    </div>
    <div class="container">
      <h3>
        ข่าวสารและกิจกรรม
      </h3>
      <div class="grid-parent">
        <div class="card-article span-6 mob-span-12">
          <img src="https://via.placeholder.com/1600x900" class="fullwidth">
          <div class="padding">
            มาทำ Grid กันเถอะ
          </div>
        </div>
        <div class="card-article span-6">
          <img src="https://via.placeholder.com/1600x900" class="fullwidth">
          <div class="padding">
            มาทำ Grid กันเถอะ
          </div>
        </div>
        <div class="card-article span-4 mob-span-6">
          <img src="https://via.placeholder.com/1600x900" class="fullwidth">
          <div class="padding">
            มาทำ Grid กันเถอะ
          </div>
        </div>
        <div class="card-article span-4">
          <img src="https://via.placeholder.com/1600x900" class="fullwidth">
          <div class="padding">
            มาทำ Grid กันเถอะ
          </div>
        </div>
        <div class="card-article span-4">
          <img src="https://via.placeholder.com/1600x900" class="fullwidth">
          <div class="padding">
            มาทำ Grid กันเถอะ
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="https://via.placeholder.com/1600x900" class="fullwidth">
          <div class="padding">
            มาทำ Grid กันเถอะ
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="https://via.placeholder.com/1600x900" class="fullwidth">
          <div class="padding">
            มาทำ Grid กันเถอะ
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="https://via.placeholder.com/1600x900" class="fullwidth">
          <div class="padding">
            มาทำ Grid กันเถอะ
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="https://via.placeholder.com/1600x900" class="fullwidth">
          <div class="padding">
            มาทำ Grid กันเถอะ
          </div>
        </div>
      </div>
    </div>
    <br>
    <br>
  </body>
</html>