คิว สุรชล 62070209 (Copy 9496)

✨ นายสิรวิชญ์ เต็มสุทธิลาภ

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        --h:270;
        background:;
        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: rgb(251,63,63);
background: radial-gradient(circle, rgba(251,63,63,0.28335084033613445) 0%, rgba(70,217,252,0.2777485994397759) 98%);
      }
      /* สำคัญ */
      .flex-center-parent{
        /* ทำให้ลูกของ element นี้ อยู่ตรงกลาง พอดีเด๊ะ */
        display:flex;
        justify-content: center;
        align-items: center;
        
      
        
      }
      .card{
        background:#fff;
        border-radius:10px;
        box-shadow:20px 20px 5px #0003;
        padding:1em;
        min-height:80px;
        min-width:300px;
        font-family: 'Prompt', sans-serif;
        font-weight:bold;
        font-size:25;
        
      }
      .fullwidth{
        width:100%;
      }
      .card-article{
        border-radius:10px;
        overflow:hidden;
        box-shadow:5px 5px 20px hsl(calc(var(--h)*2),50%,60%,30%);
        background: rgb(251,63,63);
background: radial-gradient(circle, rgba(251,63,63,0.28335084033613445) 0%, rgba(70,217,252,0.2777485994397759) 98%);
        font-weight:bold;
        color:hsl(var(--h),90%,50%);
        font-family: 'Prompt', sans-serif;
      }
      .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(2,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(calc(var(--h)*5),90%,60%);
        transition:all .3s;
        color:white;
        position:fixed;
        width:100%;
        font-family: 'Prompt', sans-serif;
      }
      /* สำคัญ เรื่องการจัดเบรกพอยท์หน้าจอ*/
      /* 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;
        }
      }
      
      .topic{
			font-family: 'Prompt', sans-serif;
      }
      
      
      
      #header{
        padding:1rem 0;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="container">
        <div id="header">
          <b>มือถือที่ขายดีที่สุดในไตรมาสแรกปี 2021 ทั่วโลก By CounterPoint
          </b>
        </div>
      </div>
    </header>
    <div class="fullscreen flex-center-parent">
      <div class="card flex-center-parent">
       📱 มือถือขายดีไตรมาสแรกปี 2021 ทั่วโลก 📱
      </div>
    </div>
    
    <div class="container">
       <h3 class = "topic">
      CounterPoint เผยการวิเคราะห์อันดับมือถือขายดีทั่วโลกช่วงไตรมาส 1 (เดือนมกราคม-มีนาคม) ปี 2021
      </h3>
      <div class="card-article span-3 mob-span-4">
          <img src="https://i0.wp.com/guzap.com/wp-content/uploads/2021/05/s1-1.jpg?resize=1200%2C695&ssl=1" class="fullwidth">
        </div>
      <h3 class = "topic">
        Gallery รุ่นมือถือและยี่ห้อมือถือที่ขายดี
      </h3>
      <div class="grid-parent">
        <div class="card-article span-6 mob-span-12">
          <img src="https://www.apple.com/v/iphone-12/a/images/meta/iphone-12_specs__ffy8c0h8c2ai_og.png" class="fullwidth">
          <div class="padding">
            อันดับที่ 1 iPhone 12
          </div>
        </div>
        <div class="card-article span-6">
          <img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/iphone-12-pro-og-202009?wid=1200&hei=630&fmt=jpeg&qlt=95&.v=1601432262000" class="fullwidth">
          <div class="padding">
            อันดับที่ 2 iPhone 12 Pro Max
          </div>
        </div>
        <div class="card-article span-4 mob-span-6">
          <img src="https://www.flashfly.net/wp/wp-content/uploads/2021/02/iphone-12-pro-max-battery-capacity-1.jpg" class="fullwidth">
          <div class="padding">
            อันดับที่ 3 iPhone 12 Pro 
          </div>
        </div>
        <div class="card-article span-4">
          <img src="https://www.trustedreviews.com/wp-content/uploads/sites/54/2019/12/iPhone-11-colours-890d.jpg" class="fullwidth">
          <div class="padding">
            อันดับที่ 4 iPhone 11
          </div>
        </div>
        <div class="card-article span-4">
          <img src="https://smartphonew.in/wp-content/uploads-webpc/uploads/2020/06/Xiaomi-Redmi-9A-Phone.jpg.webp" class="fullwidth">
          <div class="padding">
            อันดับที่ 5 Redmi 9a
          </div>
          
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="https://i.ytimg.com/vi/ovuoi7MHwlc/maxresdefault.jpg" class="fullwidth">
          <div class="padding">
            อันดับที่ 6 Redmi 9
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="https://i.ytimg.com/vi/xL40ZLfFjF0/maxresdefault.jpg" class="fullwidth">
          <div class="padding">
            อันดับที่ 7 Samsung Galaxy A12
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="https://i.ytimg.com/vi/9LXm71UJ9hs/maxresdefault.jpg" class="fullwidth">
          <div class="padding">
            อันดับที่ 8 Redmi Note 9 
          </div>
        </div>
        <div class="card-article span-3 mob-span-4">
          <img src="https://www.whatphone.net/wp-content/uploads/2020/06/Samsung-Galaxy-A21s-01.jpg" class="fullwidth">
          <div class="padding">
            อันดับที่ 9 Samsung Galaxy A21s
          </div>
        </div>
      </div>
           
    </div>
    <br>
    <br>
  </body>
  
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;1,200&display=swap" rel="stylesheet">
  
</html>