HW (Branch 2144)

✨ Yotsanan Kladklak

<!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: #442574;
        overflow: hidden;
      }

ul {
        position: relative;
        display: flex;
        flex-direction: row;
      }
      
      img {
        border-radius: 20%;
        height: 50px;
        width: 45px;
      }
      
      ul li {
        list-style: none;
      }
      
      ul li:before {
        content: attr(data-text);
        position: absolute;
        top: 3%;
        left: 20%;
        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: 2px 20px;
        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;
      }
    </style>
  </head>
  <body>
    <ul>
      <div id="Leader" class="BigBoss">
        <li data-text="Big Boss P'Jabont"><a href="#"><img src="https://scontent.fphs4-1.fna.fbcdn.net/v/t1.0-9/93520242_10219841843149529_6244240891939127296_n.jpg?_nc_cat=106&ccb=3&_nc_sid=09cbfe&_nc_ohc=MdHPvKNL3XsAX9XDR15&_nc_ht=scontent.fphs4-1.fna&oh=d827aba89ab0ebff44c8c669d45fc04c&oe=604E2921"><br>P'Jabont</a></li>
      </div>
      <div id="TA" class="TeachAssis">
        <li data-text="P'Getty-Narawich"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804285723998027795/69653667_2375011315901280_500956309571502080_n.png?width=536&height=670"><br>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"><br>ม่อน-บารเมษฐ</a></li>
      </div>
      <div id="no2" 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"><br>เมฆ-พิชญ์รัฐ</a></li>
      </div>
      <div id="no3" class="student">
        <li data-text="It-Ittiporn"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804287213995163648/18077274_1462339440499018_7956443005464867827_o.png?width=670&height=670"><br>อิท-อิทธิพร</a></li>
      </div>
      <div id="no4" class="student">
        <li data-text="Earths-Panudej"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804296460249989170/IMG_20210128_170658.jpg?width=502&height=670"><br>เอิร์ธ-ภาณุเดช</a></li>
      </div>
      <div id="no5" class="student">
        <li data-text="Pee-Rapeepat"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804286580654080050/535152_949772968463273_979417037250064316_n.png"><br>พี-รพีพัฒ</a></li>
      </div>
      <div id="no6" class="student">
        <li data-text="Earth-Pakin"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804285565994008576/60817556_2276122199383025_5248249722732281856_o.png?width=666&height=670"><br>เอิร์ธ-ภคิน</a></li>
      </div>
      <div id="no7" class="student">
        <li data-text="Phu Yotsanan"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804287684986142770/143498263_341755650209655_2682430825503147251_n.jpg?width=810&height=670"><br>ภู-ยศนันทน์</a></li>
      </div>
      <div id="no8" class="student">
        <li data-text="Punch-Peeradon"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804286177036992562/133359581_409996020194717_2530853215216715779_n.png"><br>พั้นช์-พีรดนย์</a></li>
      </div>
      <div id="no9" class="student">
        <li data-text="Sin-Ingkawat"><a href="#"><img src="https://media.discordapp.net/attachments/798210410868113408/804288981860220928/unknown.png"><br>สิน-อิงควัฒน์</a></li>
      </div>
    </ul>
  </body>
</html>