MT2021-A2 64070257 เฟรมิน-อินทุมดึ

✨ chocolate

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <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=Chonburi&family=IBM+Plex+Sans+Thai+Looped:wght@400;600&family=Noto+Sans+Thai:wght@400;600&display=swap" rel="stylesheet">
    <title>MT2021-A2 64070257 เฟรมิน-อินทุมดึ
    </title>
   <style>
     
     body{
       --ci1:hsl(251, 100%, 21%);
        --ci2:hsl(0, 100%, 99%);
        --ci3:hsl(262, 100%, 83%);
        --ci4:black;
        --ci5:hsl(237, 100%, 26%);
        --ci6:hsl(298, 27%, 75%);
       
       background:black;
        margin:0;
        font-family:sans-serif;
        color:white;
        font-family: 'IBM Plex Sans Thai Looped', sans-serif;}
     
     
     
     .bg-ci1{
        background-color:var(--ci1) !important}
      .bg-ci2{
        background-color:var(--ci2) !important}
      .bg-ci3{
        background-color:var(--ci3) !important}
      .bg-ci4{
        background-color:var(--ci4) !important}
      .bg-ci5{
        background-color:var(--ci5) !important}
      .bg-ci6{
        background-color:var(--ci6) !important}
     
      .cl-ci1{
        color:var(--ci1) !important}
      .cl-ci2{
        color:var(--ci2) !important}
      .cl-ci3{
        color:var(--ci3) !important}
      .cl-ci4{
        color:var(--ci4) !important}
      .cl-ci5{
        color:var(--ci5) !important}
      .cl-ci6{
        color:var(--ci6) !important}
     
     a{
        text-decoration:none;
        color:var(--ci3);
     }
     
      a:hover{
        color:var(--ci4);
     }
     
     nav{
/*    nav เก็บพวก link       */
       
/*        background:black; */
        height:64px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        box-sizing:border-box;
        box-shadow:0px 5px 10px #0008;
        font-family: 'Noto Sans Thai', sans-serif;}
/*      https://www.w3schools.com/cssref/playit.asp?filename=playcss_justify-content&preval=space-between */
     
     nav .site{
/*    บ้าน     */
       
/*        background:cyan; */
        width:4rem;
        margin-left:1.5rem; 
     }
     
     nav .site:hover{
       transform:scale(1.3);

}
     
     nav .nav-items{
/*        background:green; */
        height:100%;
        width:calc(100% - 5rem);
			font-size:20px;
			font-family: Garamond, serif;
        display:flex;
        justify-content:flex-end;}
     
     
     
     nav a{
        height:100%;
/*        background:pink; */
        display:inline-flex;
        align-items:center;
        padding:0 1em ;
        font-weight:bold;
        transition:all .2s;}
     	  
     nav a:hover{
        color:black;
        background:var(--ci6);}
     
     .logo{
        font-size:2rem;
        color:var(--ci3);}
     
     
     
     
     
     
     
     
     
     #header{
        height:50vw;
        font-size:4vw;
        box-sizing:border-box;
        text-align:center;
        background-image:
      url("https://cdn.discordapp.com/attachments/932854446721994782/935534140311359528/oj62nbdicWpehHyCimh-o.png");

background-size:cover;
        background-position:center;
        color:#fff9;
        display:flex;
        background-attachment:fixed;
        position:relative;}
     
     .header-inner{
        background-image:
          linear-gradient(to bottom,#0001,#000a);
        width:100%;
        height:100%;
        justify-content:center;
        align-items:center;
        display:flex;
        flex-flow:column wrap;
/*   https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-flow      */
       
        font-family: 'Chonburi', cursive;}
     
     .header-inner h1,.header-inner h2{
        margin:3;
       font-family: 'Brush Script MT', cursive;
    
     }
     
     .header-inner h2{
        font-size:2em;
        color:#fff;}
     
     
     
     
     
     
     
     
     
     #palette{
       
/*         background:red; */
        display:flex;
        width:max-content;
       
        margin:auto;
        margin-top:-40px;
        position:relative;
       
        z-index:10;}
     
     .palette-color{
        width:64px;
        height:64px;
       background:grey;
        border-radius:38px;
        margin-left:1.5em;
        border:.4em solid #fff;
/*                 box-sizing:border-box; */
        box-shadow:0px 5px 10px #0007;}
        
     .palette-color .palette-color:first-child {
            margin: 0;}
     
     .palette-color:hover{
            transform: scale(1.2);
        }
     
     .title:hover{
       transform:scale(1.1);

}
     
     
     
     
     
     .article{
       background:var(--ci4);
        max-width:900px;
        margin:auto;
        padding:2em;
     }
     
     
     .title{
/*   ปฎิญญาสากลว่าด้วยสิทธิมนุษยชน      */
        color:var(--ci1);
        background:var(--ci3);
        padding:0.4em .5em;
        display:inline-block;
        font-size:2em;
        font-family: 'Noto Sans Thai', sans-serif;
        font-family: 'Chonburi', cursive;
       border-radius:23px;
        text-decoration: underline dotted var(--ci4);
       text-decoration-style: double;
     }
     
     
     .subtitle{
/*    คำปรารภ     */
        font-size:1.4em;
        color:var(--ci3);
        font-family: 'Noto Sans Thai', sans-serif;
     }
     
     .lead{
        font-family: 'Noto Sans Thai', sans-serif;
     }
     
     .pic{
        width:100%;
        border-radius:15px;
        box-shadow:0px 1px 10px var(--ci3);
        margin:1em 0 2em;
     }
     
     .caption{
        text-align:center;
        font-style:italic;
        color:var(--ci3);
        margin-bottom:2em;
        font-family: 'Noto Sans Thai', sans-serif;
      }
     
     
     .hr{
/*   ตรงที่ขั้นระหว่างพารากราฟ      */
        display:block;
        width:200px;
        background:var(--ci3);
        height:2px;
        margin:auto;
     }
     
     blockquote {
        margin: 2em;
        background:var(--ci5);
        padding: 1em;
        font-size: 1.3em;
        border-left: 10px solid var(--ci2);
        font-family: 'Noto Sans Thai', sans-serif;
      }
     
     
     
     	
     
     
     
     
/*      filter: blur(4px); */
     
     #footer{
/*   ตรง ฮาโลวีน แฟนซี      */
        background:var(--ci3);
        
       background-image:linear-gradient(to top,#0000,#0004), url(https://media.discordapp.net/attachments/932854446721994782/935534140311359528/oj62nbdicWpehHyCimh-o.png?width=1176&height=662);
       
		
       
        padding:2em 1 3em;
        color:#fffb;
        background-size:cover;
        background-position:top center;
        font-family: 'Noto Sans Thai', sans-serif;
       
      }
     
     
     
     
     #copy{
/*    ตรงชื่อเล่นด้านล่างสุด     */
        background:var(--ci4);
        color:white;
        padding:1em 0;
        text-align:center;
        font-size:.9em;
        font-weight:700;
        color:#fff8;
        font-family: 'Noto Sans Thai', sans-serif;
       
      }
     
     .social{
        font-size:2em;
      }
     
     i:hover{
       transform:scale(1.4);

}
     
     
     
     
     
     /* width */
    ::-webkit-scrollbar {
      width: 10px;
    }

/* Track */
    ::-webkit-scrollbar-track {
      background: #f1f1f1; 
    }

/* Handle */
    ::-webkit-scrollbar-thumb {
      background: var(--ci1); 
    }

/* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: var(--ci5); 
    }
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    
    </style>
    
  </head>

<body>
    
    <nav>

      <div class="site">
        <i class="fas fa-school logo">
        </i>
      </div>
      
      <div class="nav-items">
        <a href="#!">Home</a>
        <a href="#!">Blog</a>
        <a href="#!">About</a>
        <a href="#!">Join us</a>
      </div>
    </nav>

<section id="header">
      <div class="header-inner">
        <h1>
          La La Land
        </h1>
        <h2 style="font-weight:200">
          Multimedia 2021
        </h2>
      </div>
    </section>
    
    <section id="palette">
      <div class="palette-color bg-ci1"> 
      </div>
      <div class="palette-color bg-ci2"> 
      </div>
      <div class="palette-color bg-ci3"> 
      </div>
      <div class="palette-color bg-ci4"> 
      </div>
      <div class="palette-color bg-ci5"> 
      </div>
      <div class="palette-color bg-ci6"> 
      </div>
    </section>
    
    
    <section class="article">
      <h2 class="title">
        ปฏิญญาสากลว่าด้วยสิทธิมนุษยชน
      </h2>
      <p style="color:white" ,class="lead cl-ci4">
        <b style="color:var(--ci6)">สมัชชาใหญ่แห่งสหประชาชาติชึ่งประกอบด้วยสมาชิกประเทศต่างๆ ได้ลงมติรับรองและประกาศใช้ปฏิญญาสากลว่าด้วยสิทธิมนุษยชน
        </b> เพื่อเป็นหลักการสำคัญในการคุ้มครองสิทธิมนุษยชนของประชาคมโลกเมื่อวันที่ 10 ธันวาคม พ.ศ.2491 ณ กรุงปารีส ประเทศฝรั่งเศส และถึงแม้ว่าปฏิญญาฉบับนี้จะไม่ใช่สนธิสัญญาระหว่างประเทศแต่ก็จัดเป็นกฎหมายจารีตระหว่างประเทศด้านสิทธิมนุษยชนที่สำคัญที่สุด ซึ่งประเทศต่างๆ จำต้องเคารพต่อหลักการสิทธิมนุษยชนที่ได้ตราไว้ในปฏิญญาฉบับนี้ โดยที่ปฏิญญาฉบับนี้ยังเป็นพื้นฐานสำคัญของสนธิสัญญาหรือกฎหมายระหว่างประเทศด้านสิทธิมนุษยชนอื่นๆอีกหลายฉบับ รวมทั้งกติการะหว่างประเทศว่าด้วยสิทธิพลเมืองและสิทธิทางการเมืองและกติการะหว่างประเทศว่าด้วยสิทธิทางเศรษฐกิจสังคมและวัฒนธรรม
      </p>
      <h4 class="subtitle">
        คำปรารภ
      </h4>
      <p>
        <b>แฟกซ์ยูวีโค้ช
        </b> ฮาโลวีน แฟนซีช็อปโต๊ะจีนชินบัญชร หน่อมแน้มซูเอี๋ยอพาร์ทเมนต์หงวน ตุ๊กตุ๊ก รุมบ้าวอล์กรวมมิตรแทงกั๊ก ฮ็อตพฤหัสพันธุวิศวกรรมเพรียวบาง พะเรอดีพาร์ตเมนท์มินต์โบตั๋น พรีเมียร์คอลเล็กชั่น ไหร่ ป่าไม้โบรกเกอร์ฮ็อตควีนโครนา แคมป์แป๋ว มั้ง ฟินิกซ์ จิตเภทไวอากร้าบู๊โลโก้ เซลส์
      </p>
      <img src="https://media.discordapp.net/attachments/932854446721994782/935534140311359528/oj62nbdicWpehHyCimh-o.png?width=1176&height=662" class="pic">
      <div class="caption">
        <b>La La Land is a 2016 American musical film written and directed by Damien Chazelle.</b>
      </div>
      <p>
        <b style="color:var(--ci6)">บูมคาราโอเกะแอ๊บแบ๊วเอ็นทรานซ์เมจิก
        </b> ฮ็อตด็อกคอนแทค บาบูนทอร์นาโด คาวบอย ฮาลาลวาซาบิซาบะโปรเจ็กเตอร์ ตาปรือภูมิทัศน์เทคโนแครตเคอร์ฟิว ซัมเมอร์เทรลเลอร์ ดีไซน์สเตชัน สหัสวรรษ เอ็นจีโอซัมเมอร์เก๊ะเมจิก สมิติเวชเรซิ่นไวอากร้านินจา ท็อปบู๊ทอุด้งพันธุวิศวกรรมดิกชันนารีแอดมิชชั่น ผลักดันแพ็คแหม็บฮ็อตด็อก ดีกรีลอร์ดอ่วมซูชิไอซียู เฟรมวีไอพีเดี้ยงแอดมิสชัน ก่อนหน้าบอยคอตต์บ๊อบราเม็ง
      </p>
      <p>
        การันตีโหงว เทคโนแฟลช โลโก้ปัจเจกชนถ่ายทำหมิงโฟม แทงโก้ วันเวย์สันทนาการแก๊สโซฮอล์ สเตเดียมจูน จุ๊ยคาปูชิโน ออสซี่เบอร์เกอร์ฮาโลวีน คอมเพล็กซ์ เจ๊ดีลเลอร์มั้งมหภาค ฟาสต์ฟู้ดมาร์จินซีเรียส โพลารอยด์ชีสเห็นด้วย คอร์ส บอกซ์นายพรานเก๊ะ เดี้ยงหลวงตาปิโตรเคมีง่าวซูม แฟนซีดิกชันนารีแจ็กเก็ตซิมโฟนีมุมมอง
      </p>
      <div class="hr">
      </div>
      <p>
        มัฟฟินไฮเปอร์โฟนไฟแนนซ์โค้ช แอ็กชั่น ซัพพลายวาไรตี้อุเทนเบนโตะ เอ็นทรานซ์มอลล์ อาร์พีจีบาร์บี้ โปรโมเตอร์ เป็นไงฟอร์ม แฟล็ต หม่านโถวภคันทลาพาธ โปสเตอร์แซลมอนแบคโฮแจ็กเก็ต โลชั่น อิกัวนาเป่ายิงฉุบเทคโนแครตแผดเผา ไลฟ์โอเวอร์ยาวี แจ๊กพ็อตนอร์ทกรุ๊ป บูมโอเคดีพาร์ตเมนต์เทคโนแครตเพรียวบาง สวีทเดชานุภาพ
      </p>
      <p>
        เห็นด้วยซิลเวอร์เซฟตี้ชาร์จ วิกโปรโมทง่าวรามเทพ โรแมนติกบอยคอตแคมป์คลับยิว ฮ็อตอาร์ติสต์จิตเภท ไคลแมกซ์ โกเต็กซ์ซาตานซิมสปายหลวงพี่ อาร์ติสต์รีทัช ตัวตนยาวีโอวัลติน โซนี่เพลซบัลลาสต์ จูเนียร์เปเปอร์ เลดี้ฟลุกเห็นด้วยคอนเซปต์ภูมิทัศน์ พิซซ่าวอเตอร์สามช่า แยมโรลไอติมช็อป กิฟท์มะกันรุมบ้าเซอร์ไพรส์ ยูวีเกรดบาบูนฮิ เที่ยงวันแมชีนคลับสเต็ปคลับ
      </p>
      <div class="hr">
      </div>
      <blockquote>
        <b style="color:var(--ci6)">ทุกคนเกิดมาเท่าเทียม</b>
        <br>
        <i>"มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรี และสิทธิ ต่างในตนมีเหตุผลและมโนธรรม และควรปฏิบัติต่อกันด้วยจิตวิญญาณแห่งภราดรภาพ"</i>
      </blockquote>
    </section>
    
    
    <footer id="footer">
      <div class="article">
        
        <h3 >
          Episteme.in.th
        </h3>
        <p>
          ฮาโลวีน แฟนซีช็อปโต๊ะจีนชินบัญชร
          <br>
          หน่อมแน้มซูเอี๋ยอพาร์ทเมนต์หงวน ตุ๊กตุ๊ก
          <br>
          แยมโรลไอติมช็อป
        </p>
        <div class="social" style="color:var(--ci6)">
          <i class="fab fa-facebook-square">
          </i>
          <i class="fab fa-twitter">
          </i>
          <i class="fab fa-instagram">
          </i>
        </div>
      </div>
    </footer>
    
    <footer id="copy" style="color:var(--ci2)">
      64070257 เฟรมิน-อินทุมดึ
    </footer>
    
    
    
    
  </body>
  
  
  
</html>