siwat_nuamjit_62070182 (Copy 9615)

✨ นายศิวัช นวมจิตร์

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        --h:270;
        background:#FCDEE2;
        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:#FCDEE2;
      }
      /* สำคัญ */
      .flex-center-parent{
        /* ทำให้ลูกของ element นี้ อยู่ตรงกลาง พอดีเด๊ะ */
        display:flex;
        justify-content: center;
        align-items: center;
      }
      .card{
        background:#fff;
        border-radius:40px;
        box-shadow:4px 8px 0px #0003;
        padding:1em;
        min-height:350px;
        min-width:600px;
        font-size:20;
      }
      .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:#ABBDEE;
      }
      .padding{
        padding:1rem;
        font-size:25;
         
       
      }
      /* สำคัญ */
      /* ตรงนี้คือ 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:#AAD8E5;
        transition:all .3s;
        color:white;
        position:fixed;
        width:100%;
        font-size:30;
        
      }
      /* สำคัญ เรื่องการจัดเบรกพอยท์หน้าจอ*/
      /* 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:1.5rem 0;
        
      }
      .h33{
			color:#ABBDEE;
         font-size:25;
                   
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container">
        <div id="header">
          <center>ดอกไม้ในประเทศไทย
          </center>
        </div>
      </div>
    </header>
    <div class="fullscreen flex-center-parent">
      <div class="card flex-center-parent">
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ดอกไม้กับมนุษย์มีความเกี่ยวเนื่องกันมาโดยตลอด สำหรับคนไทยดอกไม้มีอิทธิพลต่อความเป็นอยู่มาก ทั้งด้านศาสนา พิธีการต่างๆเพื่อการสักการบูชาสิ่งที่ตนเคารพ รวมทั้งการนำดอกไม้มาประดับตกแต่งภายในบ้าน สร้างบรรยากาศที่น่าอยู่ สบายใจ ความสดชื่น และความประทับใจต่อผู้มาเยือน รวมทั้งมีการนำดอกไม้ไปผสานกับวรรณกรรมต่างๆจนขาดเสียมิได้ ไม่ว่าจะเป็นการชมพฤกษาการเปรียบเปรยตัวละครเอกด้วยชื่อดอกไม้ที่น่าถนอมไว้<br>
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ประเทศไทยที่มีความอุดมสมบูรณ์ทางภูมิประเทศ ภูมิศาสตร์อันเหมาะในการเพาะปลูก ส่งผลให้มีพันธุ์ดอกไม้ต่างๆ มากมาย แต่อย่างไรก็ตามคนไทยในปัจจุบันนับว่าห่างจากธรรมชาติมาขึ้น เด็กไทยจำนวนไม่น้อยที่ไม่รู้จักชื่อ หรือพันธุ์ดอกไม้ที่เปรียบเสมือนวัฒนธรรมอันดีงามของชาติไทย เนื้อหาในส่วนนี้ ขอนำเสนอดอกไม้ไทย ที่ควรค่าต่อการศึกษากับทุกคนตลอดไป
      </div>
    </div>
    <div class="container">
      <h3 class = "h33">
        ดอกไม้ชนิดต่างๆในประเทศไทย
      </h3>
      <div class="grid-parent">
        <div class="card-article span-6 mob-span-12">
          <img                    src="https://shopping7541home.files.wordpress.com/2019/03/29216286_1802979703056732_6774753714742755328_n-1.jpg" class="fullwidth">
          <center class="padding">
            ดอกราชพฤกษ์
          </center>
        </div>
        <div class="card-article span-6">
          <img src="https://medthai.com/images/2013/08/%E0%B8%94%E0%B8%AD%E0%B8%81%E0%B8%9B%E0%B8%B5%E0%B8%9A.jpg" class="fullwidth">
          <center class="padding">
           ดอกปีบ (กาสะลอง)
          </center>
        </div>
        <div class="card-article span-4 mob-span-6">
          <img src="https://sites.google.com/site/dxkmi60728/_/rsrc/1473768626610/klwymi/1.jpg?height=266&width=400">
          <center class="padding">
             ดอกกล้วยไม้
          </center>
        </div>
        <div class="card-article span-4">
          <img src="http://4.bp.blogspot.com/_gDGyd7Bvl0A/TJDTxUq4KWI/AAAAAAAAABM/xSZYIJQxN3k/s320/pic33.jpg">
          <div class="padding">
            ดอกแก้ว
          </div>
        </div>
        <div class="card-article span-4">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQw7mRSJYGsvX1VC18iwqnHJzu4o8TZ-D-n_ttBy_4Ltwb0GNmR">
          <div class="padding">
            ดอกอัญชัญ
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="http://2.bp.blogspot.com/_fVMTnglRaeY/TJYFdpZv2_I/AAAAAAAACIY/oCUcZHTyVHU/s320/9-4.jpg" class="fullwidth">
          <div class="padding">
            ดอกแพงพวย
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="http://sv6.postjung.com/wb/data/637/637229-topic-ix-0.jpeg" class="fullwidth">
          <div class="padding">
            ดอกหอมนวล (ลำดวน)
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="http://4.bp.blogspot.com/_fVMTnglRaeY/SxChqviXLjI/AAAAAAAAA6w/XmBsZb0D638/s320/%E0%B8%9E%E0%B8%9E.jpg" class="fullwidth">
          <div class="padding">
            ดอกรัก
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="http://3.bp.blogspot.com/_fVMTnglRaeY/Spagvr64foI/AAAAAAAAAO8/5UC3wPxfRAs/s320/%E0%B8%81%E0%B8%A3%E0%B8%B0%E0%B8%B0.jpg" class="fullwidth">
          <div class="padding">
            ดอกดาวกระจาย
          </div>
        </div>
      </div>
    </div>
    <br>
    <br>
  </body>
</html>