HW (Copy 2142)

✨ นายพิชญ์รัฐ ไพบูลย์ธรรม

<!DOCKTYPE html>
<html>
  <head>
    <title>Write It Doown</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
      * {
        margin: 0px;
        padding: 0px;
        font-family: 'Kanit', sans-serif;
      }

body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 0vh;
        background-image: url(https://cdn.discordapp.com/attachments/596358584720424964/810054414424473620/Night.png.jpg);
        background-position: center;
        
        overflow: hidden;
      }

ul {
        position: relative;
        display: flex;
        flex-direction: row-resize;
      }
      
      img {
        border-radius: 20%;
        height: 50px;
        width: 45px;
      }
      
      ul li {
        list-style: none;
      }
      
      ul li:before {
        content: attr(data-text);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 6em;
        font-weight: 700;
        pointer-events: none;
        opacity: 0;
        letter-spacing: 20px;
        transition: 0.5s;
        white-space: nowrap;
      }
      
      ul li:hover:before {
        opacity: 0.5;
        letter-spacing: 0px;
      }
      
      ul li a {
        position: relative;
        display: inline-block;
        padding: 6px 15px;
        text-decoration: none;
        background: #2196f3;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        overflow: hidden;
        transition: 0.5s;
        z-index: 1;
      }
      
      ul:hover li a {
        opacity: 0;
      }
      
      ul li a:hover {
        transform: scale(1.4);
        z-index: 1000;
        background: #ff3f81;
        opacity: 1;
      }
      
      ul li a:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100;
        width: 80px;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
        transform: skewx(35deg);
        transition: 0s;
      }
      
      ul li a:hover:before {
        left: calc(100% + 100px);
        transition: 0.5s;
        transition-delay: 0.2s;
      }
      
      .ta {
        background: #ff3f81;
      }
    </style>
  </head>
  <body>
    <ul>
      <div id="TA" class="TeachAssis" onclick="click_to_ta()">
        <li data-text="P'Getty"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804285723998027795/69653667_2375011315901280_500956309571502080_n.png?width=536&height=670"> Team P'Getty</a></li>
      </div>
      <div id="no1" class="student">
        <li data-text="Mon-Baramate"><a href="#"><img src="https://scontent.fphs1-1.fna.fbcdn.net/v/t1.0-9/135183315_3594030464019566_8941486842549344117_n.jpg?_nc_cat=104&ccb=2&_nc_sid=09cbfe&_nc_eui2=AeFbjy4QlpLxnaEVumKnHnfNYXQJuQDMLXlhdAm5AMwtedAWfDhYDqn-zcl4udriI-y5Y7Ya5utFnmfhH8Rav64b&_nc_ohc=3Ea3gDF-2FcAX9rt6VK&_nc_ht=scontent.fphs1-1.fna&oh=e02ba333d9bb9fc924c807c38d6dc0e2&oe=603669FE"> ม่อน-บารเมษฐ</a></li>
      </div>
      <div id="no1" class="student">
        <li data-text="Mek-Pitcharath"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804288201258172436/20201229_170535.jpg?width=503&height=670"> เมฆ-พิชญ์รัฐ</a></li>
      </div>
      <div id="no1" class="student">
        <li data-text="Mon"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804287213995163648/18077274_1462339440499018_7956443005464867827_o.png?width=670&height=670"> อิท-อิทธิพร</a></li>
      </div>
      <div id="no1" class="student">
        <li data-text="Mon"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804296460249989170/IMG_20210128_170658.jpg?width=502&height=670"> เอิร์ธ-ภาณุเดช</a></li>
      </div>
      <div id="no1" class="student">
        <li data-text="Mon"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804286580654080050/535152_949772968463273_979417037250064316_n.png"> พี-รพีพัฒ</a></li>
      </div>
      <div id="no1" class="student">
        <li data-text="Mon"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804285565994008576/60817556_2276122199383025_5248249722732281856_o.png?width=666&height=670"> เอิร์ธ-ภคิน</a></li>
      </div>
      <div id="no1" class="student">
        <li data-text="Mon"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804287684986142770/143498263_341755650209655_2682430825503147251_n.jpg?width=810&height=670"> ภู-ยศนันทน์</a></li>
      </div>
      <div id="no1" class="student">
        <li data-text="Mon"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804286177036992562/133359581_409996020194717_2530853215216715779_n.png"> พั้นช์-พีรดนย์</a></li>
      </div>
      <div id="no1" class="student">
        <li data-text="Mon"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804288981860220928/unknown.png"> สิน-อิงควัฒน์</a></li>
      </div>
    </ul>
  </body>
  <script>
    function click_to_ta(){
      if (document.getElementById("TA").className == "TeachAssis"){
        document.getElementById("TA").innerHTML="<div class='rank'>Rank : พี่หัว Party</div>";
        document.getElementById("TA").classList.add();
        document.getElementById("TA").classList.remove("TeachAssis");
      }else {
        document.getElementById("TA").classList.add("TeachAssis");
        document.getElementById("TA").innerHTML="";
      }
    }
  </script>
</html>