MT2021-A2 64070001 ฟิว-กมล (Copy 11298)

✨ chocolate

<html>

.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: hsl(0deg 0% 100%)
        }

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: 100%;
            font-family: 'Lobster', sans-serif;
            display: flex;
            font-size: 20px;
            justify-content: center;
            background-color: hsl(0deg 0% 5%)
        }

nav a {
            height: 100%;
            display: inline-flex;
            align-items: center;
            padding: 0 1em;
            font-weight: bold;
            transition: all .2s;
            color: hsl(0deg 0% 64%) !important;

}

nav a:hover {
            color: white !important;
            background: var(--ci2);
        }

.logo {
            font-size: 2rem;
            color: var(--ci3);
        }

.test {
            color: hsl(0deg 0% 64%) !important;
        }

#header {
            height: 50vw;
            font-size: 4vw;
            box-sizing: border-box;
            text-align: center;
            background-image:
                url(https://media.discordapp.net/attachments/932833028185686047/936174068707782716/unknown.png);
            background-size: cover;
            background-position: center;
            color: #fff9;
            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: 'Lobster', cursive;
        }

.header-inner h1,
        .header-inner h2 {
            margin: 0;
        }

.header-inner h2 {
            font-size: 2em;
        }

#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: 9px;
            margin-left: 1.5em;
            border: .5em solid hsl(0deg 0% 7%);
            /*         box-sizing:border-box; */
            box-shadow: 0px 5px 10px #0002;
            transition: all 0.4s;
            border-radius: 20px;
        }

.palette-color .palette-color:first-child {
            margin: 0;
        }

.palette-color:hover{
            transform: scale(1.3);
        }

.article {
            max-width: 900px;
            margin: auto;
            padding: 2em;
        }

.title {
            cursor: context-menu;
            color: var(--ci4);
            background: hsl(359deg 3% 9%);
            padding: 0.4em .5em;
            display: inline-block;
            font-size: 2em;
            border-radius: 10px;
            transition: all 0.4s;
            font-family: 'Kanit', sans-serif;
        }

.title:hover{
            transform: scale(1.1);
        }

.subtitle {
            font-size: 1.4em;
            color: var(--ci2);
            font-family: 'Kanit', sans-serif;
        }

.lead {
            font-family: 'Kanit', sans-serif;
        }

.pic {
            width: 100%;
            border-radius: 15px;
            box-shadow: 0px 5px 10px #0005;
            margin: 1em 0 2em;
            transition: all 0.4s;
        }

.pic:hover {
            transform: scale(1.05);
        }

.hr {
            display: block;
            width: 200px;
            background: var(--ci1);
            height: 4px;
            margin: auto;
        }

#footer {
            background: var(--ci3);
            background-image: linear-gradient(to top, #0000, #0004), url(https://media.discordapp.net/attachments/932833028185686047/936174068707782716/unknown.png);
            padding: 2em 1 3em;
            color: #fffb;
            background-size: cover;
            background-position: top center;
            font-family: 'Kanit', sans-serif;

}

#copy {
            background: var(--ci6);
            color: hsl(0deg 0% 96%);
            padding: 1em 0;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            color: var(--ci4);
            font-family: 'Kanit', sans-serif;

}

::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: hsl(0deg 0% 96%);
        }

::-webkit-scrollbar {
            width: 10px;
            background-color: hsl(0deg 0% 96%);
        }

::-webkit-scrollbar-thumb:hover {
            background-color: var(--ci1);
        }

::-webkit-scrollbar-thumb {
            background-color: var(--ci4);
        }

.social {
            font-size: 2em;
        }

.caption {
            text-align: center;
            font-style: italic;
            color: var(--ci4);
            margin-bottom: 2em;
            font-family: 'Kanit', sans-serif;

}

.ci3colortext {
            color: var(--ci3)
        }

.ci2colortext {
            color: var(--ci2)
        }

blockquote {
            cursor: context-menu;
            margin: 2em;
            background: hsl(0, 5%, 4%);
            padding: 1em;
            font-size: 16px;
            border-left: 10px solid var(--ci1);
            font-family: 'Kanit', sans-serif;
        }

/* blockquote:hover {
            transform: scale(1.05);
        } */

</style>
</head>

<i class="fas fa-ghost" style="font-size: 35px;"></i>
            </a>
            <a href="#!">About
            </a>
            <a href="#!">Join us
            </a>
        </div>
    </nav>

<section id="header">
        <div class="header-inner">
            <h1 class="test" id="name" style="    text-shadow: 12px 5px #000000;">
            </h1>
            <h2 class="cl-ci4" 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">
            Lorem ipsum - ลอเรม อิปซัม
        </h2>
        <p class="lead test">
            <b>สมัชชาใหญ่แห่งสหประชาชาติชึ่งประกอบด้วยสมาชิกประเทศต่างๆ
                ได้ลงมติรับรองและประกาศใช้ปฏิญญาสากลว่าด้วยสิทธิมนุษยชน
            </b> เพื่อเป็นหลักการสำคัญในการคุ้มครองสิทธิมนุษยชนของประชาคมโลกเมื่อวันที่ 10 ธันวาคม พ.ศ.2491 ณ กรุงปารีส
            ประเทศฝรั่งเศส
            และถึงแม้ว่าปฏิญญาฉบับนี้จะไม่ใช่สนธิสัญญาระหว่างประเทศแต่ก็จัดเป็นกฎหมายจารีตระหว่างประเทศด้านสิทธิมนุษยชนที่สำคัญที่สุด
            ซึ่งประเทศต่างๆ จำต้องเคารพต่อหลักการสิทธิมนุษยชนที่ได้ตราไว้ในปฏิญญาฉบับนี้
            โดยที่ปฏิญญาฉบับนี้ยังเป็นพื้นฐานสำคัญของสนธิสัญญาหรือกฎหมายระหว่างประเทศด้านสิทธิมนุษยชนอื่นๆอีกหลายฉบับ
            รวมทั้งกติการะหว่างประเทศว่าด้วยสิทธิพลเมืองและสิทธิทางการเมืองและกติการะหว่างประเทศว่าด้วยสิทธิทางเศรษฐกิจสังคมและวัฒนธรรม
        </p>
        <h4 class="subtitle">
            คำปรารภ
        </h4>
        <blockquote>
            <p class="cl-ci4">
                <b>แฟกซ์ยูวีโค้ช
                </b> ฮาโลวีน แฟนซีช็อปโต๊ะจีนชินบัญชร หน่อมแน้มซูเอี๋ยอพาร์ทเมนต์หงวน ตุ๊กตุ๊ก รุมบ้าวอล์กรวมมิตรแทงกั๊ก
                ฮ็อตพฤหัสพันธุวิศวกรรมเพรียวบาง พะเรอดีพาร์ตเมนท์มินต์โบตั๋น พรีเมียร์คอลเล็กชั่น ไหร่
                ป่าไม้โบรกเกอร์ฮ็อตควีนโครนา แคมป์แป๋ว มั้ง ฟินิกซ์ จิตเภทไวอากร้าบู๊โลโก้ เซลส์
            </p>
        </blockquote>

<img src="https://media.discordapp.net/attachments/932833028185686047/936174068707782716/unknown.png"
            class="pic">
        <div class="caption">
            La La Land is a 2016 American musical film written and directed by Damien Chazelle.
        </div>
        <p class="cl-ci3">
            <b>บูมคาราโอเกะแอ๊บแบ๊วเอ็นทรานซ์เมจิก
            </b> ฮ็อตด็อกคอนแทค บาบูนทอร์นาโด คาวบอย ฮาลาลวาซาบิซาบะโปรเจ็กเตอร์ ตาปรือภูมิทัศน์เทคโนแครตเคอร์ฟิว
            ซัมเมอร์เทรลเลอร์ ดีไซน์สเตชัน สหัสวรรษ เอ็นจีโอซัมเมอร์เก๊ะเมจิก สมิติเวชเรซิ่นไวอากร้านินจา
            ท็อปบู๊ทอุด้งพันธุวิศวกรรมดิกชันนารีแอดมิชชั่น ผลักดันแพ็คแหม็บฮ็อตด็อก ดีกรีลอร์ดอ่วมซูชิไอซียู
            เฟรมวีไอพีเดี้ยงแอดมิสชัน ก่อนหน้าบอยคอตต์บ๊อบราเม็ง
        </p>
        <p class="cl-ci3">
            การันตีโหงว เทคโนแฟลช โลโก้ปัจเจกชนถ่ายทำหมิงโฟม แทงโก้ วันเวย์สันทนาการแก๊สโซฮอล์ สเตเดียมจูน จุ๊ยคาปูชิโน
            ออสซี่เบอร์เกอร์ฮาโลวีน คอมเพล็กซ์ เจ๊ดีลเลอร์มั้งมหภาค ฟาสต์ฟู้ดมาร์จินซีเรียส โพลารอยด์ชีสเห็นด้วย คอร์ส
            บอกซ์นายพรานเก๊ะ เดี้ยงหลวงตาปิโตรเคมีง่าวซูม แฟนซีดิกชันนารีแจ็กเก็ตซิมโฟนีมุมมอง
        </p>
        <div class="hr">
        </div>
        <p class="cl-ci1">
            มัฟฟินไฮเปอร์โฟนไฟแนนซ์โค้ช แอ็กชั่น ซัพพลายวาไรตี้อุเทนเบนโตะ เอ็นทรานซ์มอลล์ อาร์พีจีบาร์บี้ โปรโมเตอร์
            เป็นไงฟอร์ม แฟล็ต หม่านโถวภคันทลาพาธ โปสเตอร์แซลมอนแบคโฮแจ็กเก็ต โลชั่น อิกัวนาเป่ายิงฉุบเทคโนแครตแผดเผา
            ไลฟ์โอเวอร์ยาวี แจ๊กพ็อตนอร์ทกรุ๊ป บูมโอเคดีพาร์ตเมนต์เทคโนแครตเพรียวบาง สวีทเดชานุภาพ
        </p>
        <p class="test">
            เห็นด้วยซิลเวอร์เซฟตี้ชาร์จ วิกโปรโมทง่าวรามเทพ โรแมนติกบอยคอตแคมป์คลับยิว ฮ็อตอาร์ติสต์จิตเภท ไคลแมกซ์
            โกเต็กซ์ซาตานซิมสปายหลวงพี่ อาร์ติสต์รีทัช ตัวตนยาวีโอวัลติน โซนี่เพลซบัลลาสต์ จูเนียร์เปเปอร์
            เลดี้ฟลุกเห็นด้วยคอนเซปต์ภูมิทัศน์ พิซซ่าวอเตอร์สามช่า แยมโรลไอติมช็อป กิฟท์มะกันรุมบ้าเซอร์ไพรส์
            ยูวีเกรดบาบูนฮิ เที่ยงวันแมชีนคลับสเต็ปคลับ
        </p>
        <div class="hr">
        </div>
        <blockquote>
            <p class="cl-ci4">

<b>ทุกคนเกิดมาเท่าเทียม
                </b>
                <br>
                มนุษย์ทั้งปวงเกิดมามีอิสระและเสมอภาคกันในศักดิ์ศรี และสิทธิ ต่างในตนมีเหตุผลและมโนธรรม
                และควรปฏิบัติต่อกันด้วยจิตวิญญาณแห่งภราดรภาพ
            </p>

</blockquote>
    </section>
    <footer id="footer">
        <div class="article">
            <h3>
                Episteme.in.th
            </h3>
            <p>
                ฮาโลวีน แฟนซีช็อปโต๊ะจีนชินบัญชร
                <br>
                หน่อมแน้มซูเอี๋ยอพาร์ทเมนต์หงวน ตุ๊กตุ๊ก
                <br>
                แยมโรลไอติมช็อป
            </p>
            <div class="social">
                <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" >
        64070001 ฟิว-กมล
    </footer>

function typing() {
            if (i < text.length) {
                document.getElementById("name").innerHTML += text.charAt(i);
                i++;
                setTimeout(typing, 400);
            }
        }
        typing();
    </script>
</body>

</html>