Color Wheel (Branch 418)
✨ APHATSARA MORATSATHIAN
<html> <head> <title>Let's Start </title> <style> body{ font-family:"Anuphan"; } @font-face { font-family: "Anuphan"; src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-Light.woff2') format('woff2'); font-weight: 200; } @font-face { font-family: "Anuphan"; src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-Regular.woff2') format('woff2'); font-weight: 500; } @font-face { font-family: "Anuphan"; src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-SemiBold.woff2') format('woff2'); font-weight: 700; } @font-face { font-family: "Anuphan"; src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-Bold.woff2') format('woff2'); font-weight: 900; } body{ background:#eee; margin:1em; } .namewrap{ width:400px; margin:1em auto; } .namecard{ width:100%; background:red; padding-top:100%; position:relative; border-radius:30px; box-shadow:0px 5px 15px #0003; border:10px solid #fff; background-image:url(https://i.imgur.com/y4V6MOI.jpeg); background-size:cover; background-position:center; } .label{ background:#0005; position:absolute; bottom:1em; right:1em; width:calc(100% - 2em); padding:1em; box-sizing:border-box; text-align:center; border-radius:10px; background:linear-gradient(to right,#fe5487,#a33bf7) } .name{ font-size:1.5rem; } .slogan{ } .reset{ padding:0; margin:0; color:white; } tag{ display:block; width:3em; text-align:center; position:absolute; background:red; top:1em; color:white; padding:.5em 1.5em; font-weight:bold; border-radius:100px; } tag.a{ left:1em; background:linear-gradient(to right,#f0ab00,#f0cf00) } tag.b{ right:1em; background:linear-gradient(to right,#30fee1,#2bc51c) } </style> </head> <body> <div class="namewrap"> <div class="namecard"> <tag class="a">Mek </tag> <tag class="b">เมฆ </tag> <div class="label"> <h2 class="name reset"> Panuwat Kongchansawang </h2> <h5 class="slogan reset"> Aroi </h5> <div> <a href="https://www.facebook.com/panuwat.kongjansawang.5/" target="_blank"> <img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="img-iconfb"> </a> <a href="https://www.instagram.com/mekatra_ralomkringlomtokbunny/" target="_blank"> <img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="img-icon"> </a> </div> </div> </div> </div> <div class="namewrap"> <div class="namecard"> <tag class="a">Babe </tag> <tag class="b">เบ๊บ </tag> <div class="label"> <h2 class="name reset"> Supaphol Kodtom </h2> <h5 class="slogan reset"> What goes around, comes around. </h5> <div> <a href="https://www.facebook.com/profile.php?id=100007612094964" target="_blank"> <img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="img-iconfb"> </a> <a href="https://www.instagram.com/supaphol_k/" target="_blank"> <img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="img-icon"> </a> </div> </div> </div> </div> <div class="namewrap"> <div class="namecard"> <tag class="a">Ing </tag> <tag class="b">อิงค์ </tag> <div class="label"> <h2 class="name reset"> Santakorn Wongsiripa </h2> <h5 class="slogan reset"> -uhgdup0giupo ;'g;upo.sPj เอ้าลืมเปลี่ยนภาษา </h5> <div> <a href="https://www.facebook.com/ing.santakorn" target="_blank"> <img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="img-iconfb"> </a> <a href="https://www.instagram.com/ing.cr1ms/" target="_blank"> <img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="img-icon"> </a> </div> </div> </div> </div> <div class="namewrap"> <div class="namecard"> <tag class="a">Ram </tag> <tag class="b">ราม </tag> <div class="label"> <h2 class="name reset"> Rammakorn Wongjun </h2> <h5 class="slogan reset"> ถ้าเธอชอบเขา เราจะเผาป่า </h5> <div> <a href="https://www.facebook.com/Rammakorn" target="_blank"> <img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="img-iconfb"> </a> <a href="https://www.instagram.com/ramramkorn/" target="_blank"> <img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="img-icon"> </a> </div> </div> </div> </div> <div class="namewrap"> <div class="namecard"> <tag class="a">Top </tag> <tag class="b">ท๊อป </tag> <div class="label"> <h2 class="name reset"> Peerawit Kongkitkul </h2> <h5 class="slogan reset"> เขียนโปรแกรมเจอแต่ bug แต่พอเจอเธอปั้บ อยากจะรักเธอจังเลย </h5> <div> <a href="https://www.facebook.com/peerawit.kongkitkul" target="_blank"> <img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="img-iconfb"> </a> <a href="https://www.instagram.com/peera_toppppp/" target="_blank"> <img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="img-icon"> </a> </div> </div> </div> </div> <div class="namewrap"> <div class="namecard"> <tag class="a">Folk </tag> <tag class="b">โฟล์ค </tag> <div class="label"> <h2 class="name reset"> Panithan Kongthong </h2> <h5 class="slogan reset"> Fox Friends!!! </h5> <div> <a href="https://www.facebook.com/profile.php?id=100002370433315" target="_blank"> <img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="img-iconfb"> </a> <a href="https://www.instagram.com/" target="_blank"> <img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="img-icon"> </a> </div> </div> </div> </div> <div class="namewrap"> <div class="namecard"> <tag class="a">Kaem </tag> <tag class="b">แก้ม </tag> <div class="label"> <h2 class="name reset"> Santhita Krajangwongpaisan </h2> <h5 class="slogan reset"> with this pair of nike I still can't do it </h5> <div> <a href="https://www.facebook.com/santhitaaa" target="_blank"> <img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="img-iconfb"> </a> <a href="https://www.instagram.com/santhitaaa" target="_blank"> <img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="img-icon"> </a> </div> </div> </div> </div> <div class="namewrap"> <div class="namecard"> <tag class="a">Neay </tag> <tag class="b">เนย </tag> <div class="label"> <h2 class="name reset"> Rujrawee Meela </h2> <h5 class="slogan reset"> การลืมที่ยากที่สุดก็คือ"การลืมตาตื่นขึ้นมาในตอนเช้า </h5> <div> <a href="https://www.facebook.com/rujrawee.meela/" target="_blank"> <img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="img-iconfb"> </a> <a href="https://www.instagram.com/neaynarak123/" target="_blank"> <img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="img-icon"> </a> </div> </div> </div> </div> <div class="namewrap"> <div class="namecard"> <tag class="a">Por </tag> <tag class="b">ปอ </tag> <div class="label"> <h2 class="name reset"> Aphatsara Moratsathian </h2> <h5 class="slogan reset"> The future depends on what we do in the present. </h5> <div> <a href="https://www.facebook.com/polove092/" target="_blank"> <img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="img-iconfb"> </a> <a href="https://www.instagram.com/_porrr_/" target="_blank"> <img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="img-icon"> </a> </div> </div> </div> </div> </body> </html>