Assignment CSS Calc and CSS Var (64070230 Wichai Kommongkhun)

Assignment CSS Calc and CSS Var (64070230 Wichai K..

✨ WICHAI KOMMONGKHUN

<html>
  <head>
    <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=Fredoka+One&display=swap" rel="stylesheet">
    <style>
      body{
        	
		/*  var */
      --fontsize:;
      --fontcolor:;
      --bgcolor:;
        
		width:100%;
      contain:center;
      background-color:var(--bgcolor);
      }
      #pic-manu{
			width:98%;
        	margin:0 0 0 0%;
      }
      #info-main{
		width:95%;
      margin: 0 0 0 1%;
        position:relative;
      }
      #pic-lineup{
		width: 600px;
      height: 400pxpx;
      margin: 0 0 0 17%;
        
      }
      #pic{	
		width: 600px;
      height: 400pxpx;
      margin: 0 0 0 17%;
      }
      textday {
      
		padding:15px;
      background-color: #f3d3d3;
      border-left: 7px solid red;
      margin: 0 0 0 2.2%;
      }
      h1{
        color:var(--fontcolor);
		  margin: 0 0 0 2.2%
      }
      p{
		  margin: 2% 0 2% 2.2%;
        font-size:var(--fontsize);
        color:var(--fontcolor);
      }
      
      
      #nav{
		width:100%;
      height: 100px;
      position: relative;
      background-color: #5a2020;
      margin: 0 0 10px 0;
      display: block;
      }
      
      #font-size {
      position:absolute;
		color:#fff;
      font-size: 50px;
      margin: 20px 0 0 10px;
      }
      #set-font-number{
        width:60px;
        height:60px;
		  margin: 10px 0 0 210px;
        font-size: 32px;
        background-color:pink;
        text-align: center;
      }
      #font-color{
		position:absolute;
		color:#fff;
      font-size: 50px;
      margin: 20px 0 0 35px;
      }
      
      #f-color{
         height:50px;
			margin: 18px 0 0 260px;

}
      
      #bg-color{
		position:absolute;
		color:#fff;
      font-size: 50px;
      margin: 20px 0 0 50px;
      }
      #setbg-color{
         height:50px;
				margin: 0 0 0 240px;
      }
      
      #footer{
      position:absolute;
      margin: 5% 0 0 0;
      width:100%;
      background: #5a2020;
      height:80px
      }
      h3{
		margin: 5px 0 15px 11px;
      color: #FFF;
        
      }
      a{
      padding: 5px;
		display: inline;
      background-color:#e7cfcf;
      text-decoration: none;
      margin: 0 0 0 10px;
      color:#5a2020;
      }
      #max{
		position:absolute;
        font-size: 55px;
      color: #fff;
      margin: 540px 0 0 50px;
      font-family: 'Fredoka One', cursive;
      }
    </style>
    
    <script>
      let name = prompt('มาเล่นตอบคำถามกันครับพี่ๆTA รหัสลับในการเข้ามาตรวจงานผม คือ ให้บอกชื่อทีมฟุตบอลในประเทศอังกฤษ ที่มีสีเเดงเป็นสีประจำทีม เเละมีรูปเรืออยู่บนตราสโมสร โดยที่ตั้งของสนามเย้าของทีมนี้อยู่ในเมือง ที่ครั้งหนึ่งเคยขุดคลองเพื่อให้เรือบันทุกสินค้าเข้ามาจอดในเมืองได้ โดยสามารถ ตอบได้ทั้ง ชื่อเต็มเเละชื่อย่อ เป็นภาษาอังกฤษตัวเล็กเท่านั้นเเละไม่มีเว้นวรรค ชื่อเต็มมี 6 พยางค์ ชื่อย่อ มี 2 พยางค์ หรือจะใส่รหัสพิเศษเป็นคำที่เด็กหงส์ชอบโดนล้อกันบ่อยๆ')
      var number = 0;
      if (name == 'manu' || name == 'manchesterunited' || name == 'เป็ดกาก'){
        var text = "ยินดีต้อนรับจากเด็กเรือใบสีฟ้าที่น่ารักคนนี้ ถึงจะเป็นเเฟนบอลเเมนซิตี้ เเต่ผมก็ชอบล้อเวลาที่เเมนยูเเพ้เสมอนะครับ ขอบคุณที่ร่วมสนุกกับผม";
        alert(text)
      }
      else{
        while (number <= 11){
          var text = "ใส่รหัสลับไม่ถูกต้อง";
          alert(text);
          let name = prompt("กรุณาใส่รหัสลับอีกครั้ง")
          if (name == 'manu' || name == 'manchesterunited' || name == 'เป็ดกาก'){
            var text = "ยินดีต้อนรับจากเด็กเรือใบสีฟ้าที่น่ารักคนนี้ ถึงจะเป็นเเฟนบอลเเมนซิตี้ เเต่ผมก็ชอบล้อเวลาที่เเมนยูเเพ้เสมอนะครับ";
            alert(text)
            break;
          }
          number += 1;
        }

}
      
      function set_fontsize(){
			var size = document.getElementById('set-font-number').value;
        	var textsize = document.getElementById('main');
         textsize.style.setProperty('--fontsize', size + 'px');
      }
      
      function set_fontcolor(){
		var color = document.getElementById('f-color').value;
      var textcolor = document.getElementById('main');
      textcolor.style.setProperty('--fontcolor', color);
      }
      
      function set_bgcolor(){
		var color = document.getElementById('setbg-color').value;
      var bgcolor = document.getElementById('main');
      bgcolor.style.setProperty('--bgcolor', color);
      }

</script>
  </head>
  
  <body id='main'>
    
    <div id='nav'>
      <label id='font-size'>Font-size</label>
      <input type='number' id='set-font-number' min='6' max='120' value='18'  onchange='set_fontsize()'>
      
      <leble id='font-color'>Font-color</leble>
      <input type='color' id='f-color'  value='#000000' onchange='set_fontcolor()'>
      
       <leble id='bg-color'>bg-color</leble>
      <input type='color' id='setbg-color' value='#FFFFFF' onchange='set_bgcolor()'>
    </div>
    
    
    
    
    
    <h2 id='max'>
      ส่วนพี่น้องชาวดูไบ 1.0 ลูก กินเต็ม !!
    </h2>
    
    <img src="https://s.isanook.com/sp/0/rp/rc/w850h510/yatxacm1w0/aHR0cHM6Ly9zLmlzYW5vb2suY29tL3NwLzAvdWQvMjY4LzEzNDI4NTAvcm9uZG8uanBn.jpg" id='pic-manu'>
    
    <div id="info-main">
      <h1>
        แมนเชสเตอร์ยูไนเต็ดเปิดบ้านเอาชนะไบรท์ตัน ไป 2-0 เเซงเวสต์แฮมขึ้นอันดับที่ 4 เเละนำห่างถึง 2 คะเเนน เป็นการชนะครั้งเเรกในรอบ 4 เกมส์
      </h1>
      <br><br><br>
       <textday>
         วันที่ 16 กุมภาพันธ์ 2565
      </textday>
      <br><br><br>
		<p>
        CR7 ปลดล็อค !! ปีศาจเเดงเปิดบ้านเอาชนะไบรท์ตัน ไป 2-0 เเมนเชสเตอร์ยูไนเต็ดของผู้จัดการทีม ราล์ฟ รังนิกเก็บชัยชนะนัดเเรกในรอบ 4 เกมส์ได้สำเร็จหลังจากที่ ตกรอบฟุตบอลถ้วย FA cup ที่เเพ้การดวลจุดโทษ กับโบโร่ ทีมจาก The Championship เเละเสมอ เบิร์นลี่ย์ กับ นักบุญ เซาร์เเธมป์ตัน ด้วยสกอร์ 1-1 ทั้งสองเกมส์ โดยแมนยู มาในระบบ 4-2-3-1 ได้เเก่ ผู้รักษาประตู ดาบิด เดเฆอา กองหลังมี ดิโอโก้ ดาโลต์ - แฮรี่ เเมกไกวร์(C) - วิกเตอร์ ลินเดอเลิฟ <b>(เนื่องจาก วาราน เจ็บก่อนเกม)</b> ลุค ชอว์ กองกลาง 2 คน เฟร็ด เเละ เเม็กโทมิเน ตัวรุกเป็น บรูโน่ เเฟร์นันเดช ปีก 2 ข้าง เป็น ซานโช่ เเละ อีเเรนก้า กองหน้าตัวเป้าเป็น CR7 คริสเตียโน โรนัลโด้.
      </p>
      <img src ='https://scontent.fbkk5-4.fna.fbcdn.net/v/t39.30808-6/273932155_10159215402202746_2776093934820508953_n.png?_nc_cat=103&ccb=1-5&_nc_sid=9267fe&_nc_eui2=AeEZexzV0lx1UHAFj9zs18N3__aqK3fxSX3_9qord_FJfSTZSCeDBU41COtHpUBcYnm_bJdd3beTn3-8kAnjwvgf&_nc_ohc=NWISIOwnui0AX94ITLt&_nc_ht=scontent.fbkk5-4.fna&oh=00_AT_8feev9zw7YhTlc-kGiTgdNj0TEavsuU4txwVXqQa9sQ&oe=6214DC31'  id='pic-lineup'>
      
 		<p>
        ทีมเยือน ไบรท์ตัน ของผู้จัดการทีม แกรแฮม พอตเตอร์ มาในระบบ 4-3-1-2 ผู้รักษาประตู โรเบิร์ด ซานเชส กองหลัง 4 คน มี ฌอแอล แฟ็ลต์มัน - อดัม เว็บสเตอร์ -ลูอิส ดังค์(C) - มาร์ค คูคูเรลลา กองกลาง 3 คน ปาสกาล กรอส - บิสซูมา - อเล็กซิส แม็ก อัลลิสเตอร์ ตัวรุกเป็น จาคอบ โมเดอร์ กองหน้าคู่ เป็น นีล โมเพย์ - ลีอันโดร ทรอสซาร์ด.
      </p>
      <img src='https://scontent.fbkk5-8.fna.fbcdn.net/v/t39.30808-6/273714342_10159823953578139_2359443605569253824_n.png?_nc_cat=106&ccb=1-5&_nc_sid=730e14&_nc_eui2=AeEm3zLsUT_WaFMH51m3TN-HqzhgKZ3_J96rOGApnf8n3ulaVVkCmNnVtXuyGFcpenL0udwSQ1SU_h8m0UsaCQC7&_nc_ohc=NNU25WcRKXsAX8pZkIi&_nc_ht=scontent.fbkk5-8.fna&oh=00_AT8R9-HCXzq4H4mr3dCOcn775HZaVfXHO_0ahMXen3llhw&oe=6214A0CF' id='pic-lineup'>
      <p>
        เริ่มครึ่งเเรกมาเป็นฝ่ายทีมเยือนที่สร้างเกมรุกใส่เจ้าบ้านได้มากกว่าชัดเจน เเต่ยังไม่เฉียบคมในพื้นที่สุดท้าย โดยโอกาศที่น่าจะเป็นประตูมากที่สุดคือนาทีที่ 31 จาคอบ โมดอร์ ได้โหม่งโล่งๆในกอบเขตโทษ เเต่ก็เป็นอีกครั้งที่ความยอดเยี่ยมของ เดเฆอา ที่ช่วยทีมไว้อีกเเล้ว เเละเป็นที่กองหลังค่าตัว 80 ล้านปอนด์เค้าปล่อยให้คู่เเข่งโหม่งเเบบนี้ละนะ 555+ เเต่ก็ทำให้จบครึ่งเเรกไปด้วยโดยการไม่เสียประตูของเจ้าบ้าน
      </p>
      <img src='https://i2-prod.mirror.co.uk/incoming/article26240989.ece/ALTERNATES/s615b/1_Manchester-United-v-Brighton-Hove-Albion-Premier-League.jpg' id ='pic'>
      <p>
        เริ่มครึ่งหลังมาได้เพียง 5 นาที เเมนเชสเตอร์ยูไนเต็ดก็ได้ประตูขึ้นนำ จากลูกยิงปลดล็อคหลังจ้าตัวทำประตูไม่ได้มา 6 นัดติดของ CR7 คริสเตียโน โรนัลโด้ ในนาทีที่ 50 จากจังหวะตัวบอลกลางสนาม ก่อนที่ cr7 จะเลี้ยงลุยไปหน้ากอบเขตโทษเเละปั่นโค้งเข้าประตูไปอย่างสวยงาม
      </p>
      <img src='https://scontent.fbkk5-7.fna.fbcdn.net/v/t39.30808-6/273872767_10159216311297746_8084963911700005487_n.jpg?_nc_cat=107&ccb=1-5&_nc_sid=730e14&_nc_eui2=AeExBzPvIerMkxLteB7U9ftx_v6OFdw1kVX-_o4V3DWRVZKR0t3nEHcFwJQuDK-NXtzFnAaXc-vf8jFztoKkZ_6h&_nc_ohc=capdMIrIy30AX9HL3CQ&tn=hOCbPfNDjwrA3cr6&_nc_ht=scontent.fbkk5-7.fna&oh=00_AT9wCYc8mm62bAwhcQeHqgyk-W9NWcC4AyNjdCHdt84EbA&oe=6213A31C' id='pic'>
      <p>
        หลังได้ประตูขึ้นนำได้เพียง 1 นาที ลูอิส ดังค์(C) กองหลังกัปตันทีมของไบรท์ตันพลาดทำฟาวล์อีแรนก้าที่วิ่งเข้าไปเเย่งบอลจากเท้า เเละ ผู้ตัดสิน ปีเตอร์ แบงค์ ได้ไปดูVARด้วยตนเองก่อนจะัดสินว่า ลูอิส ดังค์(C) เป็นกองหลังตัวสุดท้าย เเละให้ใบเเดงโดยตรงในที่สุด</p>
      <img src='https://img.pptvhd36.com/thumbor/2022/02/17/news-8c3ae57868.webp'  id='pic'>
      <p>
        หลังจากไบรท์ตัน เหลือ 10 เเมนยูที่มีผู้เล่นมากกว่า ก็พยามบุกอย่างหนักในช่วง 20 นาทีเเรกของครึ่งหลังเเต่ก็ยังทำประตูเพิ่มไม่ได้ เเต่กลายเป็นว่าทีมเยือนที่มีผู้เล่นน้อยกว่ากลับสร้างเกมรุกที่อันตรายกว่าเจ้าบ้าน 11 คนเสียอีก </p>
        <img src='https://scontent.fbkk5-3.fna.fbcdn.net/v/t39.30808-6/274048005_10159215842472746_3308130562051176613_n.jpg?_nc_cat=111&ccb=1-5&_nc_sid=730e14&_nc_eui2=AeE0ULy2VcgWBlcZKF0fTFhJGTnPCrxYHqsZOc8KvFgeq2CZM8Dmk1MpPYLhx8tio42UJ78eKAxNS-YH3FEH-xt5&_nc_ohc=mCFlgZrKqJMAX9MTIbl&_nc_ht=scontent.fbkk5-3.fna&oh=00_AT-Z2Gy-FFhcsFNWFEops0rG2hSVuIzZeliguQCOMStlEQ&oe=6213C711' id='pic'>
     <p>
       จนในที่เจ้าบ้าน แมนเชสเตอร์ยูไนเต็ดก็มาได้ประตูฝั่งทีมเยื่อน จากจากหวะเล่นเร็วของ พอล ป็อกปา ที่ลงมาเป็นตัวสำรอง จ่ายบอลให้บรูโน่ หลุดไปยิงง่ายๆ เป็น 2-0 ในช่วงทดเจ็บนาทีสุดท้าย ก่อนที่ผู้ตัดสินจะเป่านกหวีดจบเกม ที่สนาม  โอลด์แทรฟฟอร์ด เป็นการเก็บ 3 เเต้มสำคัญของเหล่าปีศาจเเดง

</p>
      <img src='https://scontent.fbkk5-4.fna.fbcdn.net/v/t39.30808-6/274057882_10159216613777746_208497133585669591_n.jpg?_nc_cat=110&ccb=1-5&_nc_sid=730e14&_nc_eui2=AeGIMKYvYiZkqQw7UgZ9U9n3vBTUtEHA7km8FNS0QcDuSfr9TfJVqS3wq8gnJ8rh7uOrPe0wurkaRe-SO__-0Qr3&_nc_ohc=Nh22Vsy_WfUAX9RgVWu&tn=hOCbPfNDjwrA3cr6&_nc_ht=scontent.fbkk5-4.fna&oh=00_AT_az73qcg4AIMqVih92u9Fi7ZrB0wuH9HU55PZ-JS2hTw&oe=62146837' id='pic'>
      <p>
        โดยชัยชนะนัดนี้ทำให้เเมนเชสเตอร์ยูไนเต็ดขยับขึ้นไปรั้งอันดับ 4 โดยนำเวสเเฮมยูไนเต็ด 2 คะเเนน เเต่หลังเกมเหล่านักวิจารณ์ก็ยังพูดเป็นเสียงเดียวกันว่าเเมนเชสเตอร์ยูไนเต็ดควรจะมีรูปเกมที่ดีกว่านี้
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/HpuOxGVIjeg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id='pic'></iframe>
    
    </div>
    <div id='footer'>
      
      <h3>
        #Tag ที่เกี่ยวข้อง
      </h3>
      
      <a href='https://www.google.com/search?q=%E0%B8%9A%E0%B8%AD%E0%B8%A5%E0%B8%9E%E0%B8%A3%E0%B8%B5%E0%B9%80%E0%B8%A1%E0%B8%B5%E0%B8%A2%E0%B8%A3%E0%B9%8C%E0%B8%A5%E0%B8%B5%E0%B8%81&biw=1920&bih=937&ei=NlEPYv6wLbfF4-EP-sauyAM&ved=0ahUKEwj-o-bH44j2AhW34jgGHXqjCzkQ4dUDCA4&uact=5&oq=%E0%B8%9A%E0%B8%AD%E0%B8%A5%E0%B8%9E%E0%B8%A3%E0%B8%B5%E0%B9%80%E0%B8%A1%E0%B8%B5%E0%B8%A2%E0%B8%A3%E0%B9%8C%E0%B8%A5%E0%B8%B5%E0%B8%81&gs_lcp=Cgdnd3Mtd2l6EANKBAhBGABKBAhGGABQAFgAYMQFaABwAXgAgAEAiAEAkgEAmAEAoAECoAEBwAEB&sclient=gws-wiz' target='_blank'>#ฟุตบอลพรีเมียร์ลีก</a>
      
       <a href='https://www.google.com/search?q=%E0%B9%81%E0%B8%A1%E0%B8%99%E0%B8%A2%E0%B8%B9&bih=937&biw=1920&hl=en&ei=VlMPYsXHBYiF4-EP96GKsAY&gs_ssp=eJzj4tDP1TcwNUjLMGD04n-ws_HBjoUPdsx8sGPRgx07AZaPDdo&oq=%E0%B9%80%E0%B9%80%E0%B8%A1%E0%B8%99&gs_lcp=Cgdnd3Mtd2l6EAMYADIECC4QCjIECC4QCjIECAAQCjIECAAQCjIECAAQCjIECAAQCjIECAAQCjIECAAQCjIECAAQCjIECAAQCjoFCAAQgAQ6BAgAEAM6BQguEIAEOgsILhCABBDHARCvAToECAAQHjoGCAAQChAeOgcILhDUAhAKSgQIQRgASgQIRhgAUABYxgJgmAtoAHABeACAAWOIAekCkgEBNJgBAKABAcABAQ&sclient=gws-wiz' target='_blank'>#แมนยู</a>
      
      
       <a href='https://www.google.com/search?q=%E0%B9%84%E0%B8%9A%E0%B8%A3%E0%B8%97%E0%B9%8C%E0%B8%95%E0%B8%B1%E0%B8%99&bih=937&biw=1920&hl=en&ei=WlMPYpXrIJmV4-EPyryOoA0&gs_ssp=eJwBJgDZ_woIL20vMGoycGcwAUoY4LmE4Lia4Lij4LiX4LmM4LiV4Lix4LiZPCUUmQ&oq=%E0%B9%84%E0%B8%9A%E0%B8%A3&gs_lcp=Cgdnd3Mtd2l6EAEYADIFCC4QgAQyBQguEIAEMgUIABCABDIFCAAQgAQyBQguEIAEMgUIABCABDIFCAAQgAQyBQguEIAEMgQIABAeMgQIABAeOgsILhCABBDHARCjAkoECEEYAEoECEYYAFAAWK8NYNwVaABwAXgAgAGZAYgBywKSAQMyLjGYAQCgAQHAAQE&sclient=gws-wiz' target='_blank'>#ไบรท์ตัน</a>
      
      <a href='https://truevisions.co.th/packages/16/' target='_blank'>#ทรูพรีเมียร์ลีก</a>
      
       <a href='https://www.google.com/search?q=%E0%B8%95%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%87%E0%B8%84%E0%B8%B0%E0%B9%81%E0%B8%99%E0%B8%99+%E0%B8%9E%E0%B8%A3%E0%B8%B5%E0%B9%80%E0%B8%A1%E0%B8%B5%E0%B8%A2%E0%B8%A3%E0%B9%8C%E0%B8%A5%E0%B8%B5%E0%B8%81&bih=937&biw=1920&hl=en&ei=NlUPYrnqI5q94-EPloWj6Ag&oq=%E0%B8%95%E0%B8%A3%E0%B8%B2%E0%B8%87%E0%B8%84%E0%B8%9E&gs_lcp=Cgdnd3Mtd2l6EAEYATIECAAQEzIGCAAQChATMgYIABAKEBM6CwgAEIAEELEDEIMBOgQIABADOggIABCxAxCDAToFCAAQgAQ6BQguEIAEOgQIABAeOgQIABANSgQIQRgASgQIRhgAUABYhBFgriZoAHABeACAAWSIAYYEkgEDNS4xmAEAoAEBwAEB&sclient=gws-wiz' target='_blank'>#ตารางคะแนนพรีเมียร์ลีก</a>
      <a href='https://www.it.kmitl.ac.th/en/' target='_blank'>#IT KMITL</a>

</div>
  </body>
</html>