MT2021-A2 64070086 โล-ภูมิปัญญา

✨ lmnewbie

<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>La La Land
    </title>
    <style>
      /*
      font-family: 'Chonburi', cursive;
      font-family: 'IBM Plex Sans Thai Looped', sans-serif;
      font-family: 'Noto Sans Thai', sans-serif; 
      */
      body{
        --ci1:hsl(238, 100%, 10%);
        --ci2:hsl(251, 65%, 25%);
        --ci3:hsl(239, 91%, 21%);
        --ci4:hsl(235, 69%, 34%);
        --ci5:hsl(44, 100%, 57%);
        --ci6:hsl(10, 90%, 50%);
        background:linear-gradient(to right , #9ac0fe, #0f4bff);
        margin:0;
        font-family:sans-serif;
        color:#357;
        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{
        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;
      }
      nav .site{
        width:4rem;
        margin-left:1rem;
      }
      nav .nav-items{
        height:100%;
        width:calc(100% - 5rem);
        display:flex;
        justify-content:flex-end;
      }
      nav a{
        height:100%;
        display:inline-flex;
        align-items:center;
        padding:0 1em ;
        font-weight:bold;
        transition:all .2s;
      }
      nav a:hover{
        color:white;
        background:var(--ci2);
      }
      .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/433971488840876064/937023212305387560/unknown.png);
        background-size:cover;
        background-position:center;
        color:#8fafff;
        display:flex;
        background-attachment:fixed;
        position:relative;
      }
      .header-inner{
        background-image:
          linear-gradient(to bottom,#0004,#000c);
        width:100%;
        height:100%;
        justify-content:center;
        align-items:center;
        display:flex;
        flex-flow:column wrap;
        font-family: 'Chonburi', cursive;
      }
      .header-inner h1,.header-inner h2{
        margin:0;
      }
      .header-inner h2{
        font-size:2em;
        color:#6b95ff;
      }
      #palette{
        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:16px;
        margin-left:1.5em;
        border:.5em solid #fff;
        /*         box-sizing:border-box; */
        box-shadow:0px 5px 10px #0002;
      }
      .palette-color
      .palette-color:first-child{
        margin:0;
      }
      .article{
        max-width:900px;
        margin:auto;
        padding:2em;
        color:#9ac0fe;
		
      }
      .title{
        color:var(--ci5);
        background:var(--ci4);
        padding:0.4em .5em;
        display:inline-block;
        font-size:2em;
        font-family: 'Noto Sans Thai', sans-serif;
        font-family: 'Chonburi', cursive;
      }
      .subtitle{
        font-size:1.5em;
        color:var(--ci4);
        font-family: 'Noto Sans Thai', sans-serif;
        font-family: 'Chonburi', cursive;
        
      }
      .text{
			color:hsl(239, 91%, 21%);
      }
      .lead{
      }
      .pic{
        width:100%;
        border-radius:15px;
        box-shadow:0px 5px 10px #0005;
        margin:1em 0 2em;
      }
      .hr{
        display:block;
        width:200px;
        background:var(--ci5);
        height:5px;
        margin:auto;
      }
      #footer{
        background:var(--ci3);
        background-image:linear-gradient(to top,#0000,#0004), url(https://cdn.discordapp.com/attachments/433971488840876064/937023212305387560/unknown.png);
        padding:2em 1 3em;
        color:#fffb;
        background-size:cover;
        background-position:top center;
        font-family: 'Noto Sans Thai', sans-serif;
      }
      #copy{
        background:#0042ad;
        color:white;
        padding:1em 0;
        text-align:center;
        font-size:.8em;
        font-weight:700;
        color:336dff;
        font-family: 'Noto Sans Thai', sans-serif;
      }
      .social{
        font-size:2em;
      }
      .caption{
        text-align:center;
        font-style:italic;
        color:var(--ci5);
        margin-bottom:2em;
        font-family: 'Noto Sans Thai', sans-serif;
      }
      #click{
		 color:#9ac0fe;
      }
      blockquote {
        margin:2em;
        background: #f4f5f5;
        padding: 1em;
        font-size: 1.3em;
        border-left: 10px solid var(--ci5);
        font-family: 'Noto Sans Thai', sans-serif;
        color:#0243cf;
      }
    </style>
  </head>
  <body>
    <nav>
      <div class="site">
        <i class="fas fa-school logo">
        </i>
      </div>
      <div class="nav-items">
        <a href="https://en.wikipedia.org/wiki/Frozen_(franchise)">About
        </a>
        <a href="https://www.youtube.com/playlist?list=PLiNVoBckLqLl_JQOaClFM0iCyg0MOFCN9">Music
        </a>
        <a href="https://www.hotstar.com/th/search?q=frozen">Watch on Disney+ 
        </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">
        Frozen
      </h2>
      <p class="lead cl-ci4">
        <b>Frozen หรือ ผจญภัยแดนคำสาปราชินีหิมะ เป็นภาพยนตร์เพลงแนวแฟนตาซี-คอเมดี้ประเภทคอมพิวเตอร์แอนิเมชั่นสามมิติในปี 2013
        </b> จัดทำโดย Walt Disney Animation Studios และจัดจำหน่ายโดย Walt Disney Pictures ภาพยนตร์เรื่องนี้ซึ่งได้แรงบันดาลใจจากเรื่องเล่าเรื่องราชินีหิมะของฮันส์ คริสเตียน แอนเดอร์เซน นับเป็นภาพยนตร์แอนิเมชันลำดับที่ 53 ของภาพยนตร์ในชุดแอนิเมชันคลาสสิกของวอลท์ดิสนีย์ โดยเล่าเรื่องเจ้าหญิงผู้กล้าที่ผจญภัยไปกับคนขายน้ำแข็ง(คริสตอฟฟ์) กวางเรนเดียร์ และมนุษย์หิมะ (โอลาฟ) ผู้ที่ถูกสร้างขึ้นตั้งแต่สมัยตอนที่เอลซ่าและอันนายังเป็นเด็ก เพื่อค้นหาพี่สาวที่ห่างเหินซึ่งมีพลังน้ำแข็งที่ทำให้อาณาจักรตกอยู่ภายใต้ฤดูหนาวชั่วนิรันดร์โดยไม่ได้ตั้งใจและไม่รู้ตัวว่าได้ทำอะไรลงไป
      </p>
      <h4 class="subtitle">
        เนื้อเรื่อง
      </h4>
      <p class = "text">
        <b>“เอลซ่า”
        </b> ว่าที่ราชินีของอาณาจักรผู้มีพลังอำนาจแห่งหิมะ สามารถเยือกแข็งทุกสิ่งได้ ทว่าความหวาดกลัวในพลังนั้นทำให้เอลซ่าเก็บเงียบเอาไว้ตลอดมาด้วยความเจ็บปวด จนกระทั่งความจริงถูกเปิดเผยต่อหน้าประชาชนในอาณาจักร เอลซ่าซึ่งถูกตราหน้าว่าเป็นแม่มดจึงได้หนีหายไป ตั้งแต่นั้นเป็นต้นมาอาณาจักรแอเรนเดลล์ก็ต้องตกอยู่ภายใต้คำสาปหิมะอันเยือกเย็นและโหดร้ายตลอดกาล
      </p>
      <img src="https://cdn.discordapp.com/attachments/433971488840876064/937023212305387560/unknown.png" class="pic">
      <div class="caption">
        <b>La La Land is a 2016 American musical film written and directed by Damien Chazelle.</b>
      </div>
      <p class = "text">
        <b>“แอนนา” </b>สาวน้อยช่างฝัน น้องสาวของเอลซ่า จึงได้มีความพยายามที่จะพาเอลซ่ากลับมาเพื่อแก้ไขทุกอย่างให้กลับมาเป็นเหมือนเดิม เธอจึงร่วมมือกับ <b>“คริสตอฟ”</b> มนุษย์ภูเขาผู้กล้าหาญ และ <b>“โอลาฟ”</b> ตุ๊กตาหิมะตัวป้อมพูดได้ซึ่งถูกสร้างโดยเอลซ่า ทั้งสามร่วมผจญภัยในการเดินทางครั้งยิ่งใหญ่เพื่อที่จะตามหาเอลซ่าและยุติคำสาปน้ำแข็งอันหนาวเหน็บที่ปกคลุมอาณาจักรแห่งนี้มาอย่างยาวนาน
      </p>
      <p class = "text">
        การผจญภัยสุดหฤโหดภายใต้สภาวะอากาศอันโหดร้ายดั่งเทือกเขาเอเวอร์เรส การเผชิญหน้ากับสัตว์ในตำนานและมนตราในทุกย่างก้าว แอนนาและคริสตอฟต้องฝ่าฝันและเอาชนะทุกอย่างที่มาขัดขวางการปกป้องอาณาจักรจากการล่มสลาย และพาเอลซ่ากลับมาให้ได้
      </p>
      <div class="hr">
      </div>
      <p class = "text">
        Walt Disney Animation Studios ขอเสนอเรื่องราวมหากาพย์การผจญภัยที่สนุกสนาน น่าตื่นตาตื่นใจ และแฝงอารมณ์ขัน ใน <b>“Frozen ผจญภัยแดนคำสาปราชินีหิมะ” </b>โดยผลงานกำกับการแสดงโดย คริส บัค จากอนิเมชั่นเรื่อง Tarzan และ Surf's Up อำนวยการสร้างโดย ปีเตอร์ เดล เวคโค จาก Winnie the Pooh และ The Princess and the Frog ที่คนไทยน่าจะคุ้ยเคยกันเป็นอย่างดี และให้เสียงพากย์โดยนักแสดงสาวที่มีทั้งงานภาพยนตร์ ทีวี และละครเวที อย่าง คริสเทน เบลล์ ในบท แอนนา สาวช่างฝันที่ต้องพบกับการผจญภัยครั้งสำคัญในชีวิตเพื่อพาพี่สาวอันเป็นที่รักกลับคืนมา และยุติคำสาปที่กำลังครอบงำอาณาจักรบ้านเกิด และนักแสดงเจ้าของรางวัลโทนี่ อวอร์ด อีดิน่า เมนเซล ในบท เอลซ่า ราชินีหิมะผู้เป็นจุดเริ่มต้นของคำสาป
      </p>
      <p class = "text">
        และที่เด็ดกว่านั้น ภาพยนตร์เรื่องนี้ได้เพลงประกอบจากฝีมือของสุดยอดนักแต่งเพลงผู้ยิ่งใหญ่แห่งบรอดเวย์โรเบิร์ต โลเปซ และ คริสเทน แอนเดอร์สัน โลเปซ อีกด้วย นับว่าเป็นผลงานอลังการทั้งเรื่องราว การสร้าง รวมไปถึงเพลงประกอบภาพยนตร์
      </p>
      <div class="hr">
      </div>
      <blockquote>
        <b>ฉันรู้นะว่าความรักคืออะไร
        </b>
        <br>
        "ความรักคือการห่วงใย ใส่ใจใครสักคนด้วยใจจริง มากกว่าตัวเขาเอง"
      </blockquote>
    </section>
    <footer id="footer">
      <div class="article">
        <h3>
          Morning  R
        </h3>
        <p>
          ตั้งแต่ผมได้ดูฉากแรกของเรื่อง La La Land 
          <br>
          ทำให้ผมนึกถึงภาพยนตร์เรื่อง Frozen ขึ้นมาเลยเนื่องจาก
          <br>
          การที่เป็นภาพยนตร์มิวสิคัลเหมือนกันจึงอยากแนะนำให้ทุกคนได้ไปดู
          <br>
        	 รับรองว่าสนุกกว่าที่ทุกคนคิดแน่นอนครับ
          <br>
          <a href = 'https://www.youtube.com/watch?v=k0fYAgwYncY&ab_channel=DisneyThaiSong' id="click">
          ไปดูกันเถอะ!!!!!
        </a>
        </p>
        <div class="social">
          <a href = 'https://www.facebook.com/DisneyFrozen'  id = 'click'>
             <i class="fab fa-facebook-square">
          </i>
          </a>
       	<a href = 'https://www.instagram.com/disneyfrozen/'  id = 'click'>
           <i class="fab fa-instagram">
          </i>
          </a>
        </div>
      </div>
    </footer>
    <footer id="copy">
      64070073 พีค-พัสกร
    </footer>
  </body>
</html>