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>