Week 1 (Branch 516) (Copy 594)
✨ Chaowat Intarapanit
<html> <head> <title>Let's Start </title> <style> @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:2em; font-family:"Anuphan"; } .namecard{ --cl:0; --clt:50; width:50%; margin:auto; text-align:center; background:white; padding:2em; margin-top:5%; border-radius:25px; box-shadow: 0px 5px 5px hsl(var(--cl),0%,70%); transition:box-shadow .3s ease-in-out, width .3s; } .namecard::before{ content:" "; transition:.3s; position:fixed; width:100%; height:100vh; background:var(--cl); top:0; left:0; z-index:-1; } .namecard:hover::before{ background:hsl(var(--cl),100%,70%); } .namecard:nth-child(1) { --cl:0; } .namecard:nth-child(2) { --cl:45; } .namecard:nth-child(3) { --cl:90; } .namecard:nth-child(4) { --cl:135; } .namecard:nth-child(5) { --cl:180; } .namecard:nth-child(6) { --cl:225; } .namecard:nth-child(7) { --cl:270; } .namecard:nth-child(8) { --cl:315; } .namecard:hover{ width:60%; box-shadow: 0 5px 20px hsl(var(--cl),70%,70%); } .title{ color:hsl(var(--cl),100%,25%); } a{ color:hsl(var(--cl),100%,30%); transition:font-size 0.4s; } a:hover{ color:hsl(var(--cl),100%,50%); font-size:20px; } .left{ padding-left:15px; } .icon{ transition:0.3s } .icon:hover{ width:70; } </style> </head> <body> <!-- ให้แนะนำตัวเองพร้อมใส่ลิงค์ไปเฟสบุ๊คพี่ๆ --> <div class="namecard"> <h1 class="title"> Chaowat Intarapanit </h1> <img src="https://scontent.fbkk2-7.fna.fbcdn.net/v/t1.0-9/123370157_3320530698063923_9129479807416427520_o.jpg?_nc_cat=106&ccb=2&_nc_sid=09cbfe&_nc_eui2=AeE7gcGaG30F9DYbj0qRfS2ZmAtmcLNs2gSYC2Zws2zaBB76P7IhvGiBvudKRzDbwrOv49fTfwpt_itowcCRwC4h&_nc_ohc=qupCLl_1Fk4AX-zDR3_&_nc_ht=scontent.fbkk2-7.fna&oh=16421a71c5cab73a898f7bcd4f5a6a97&oe=602392D9" width="50%"> <p> ที่ใจเราสั่นมันเป็นเพราะกาแฟ หรือเป็นเพราะ”แฟก๊ะ” </p> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111398.svg?token=exp=1610532431~hmac=8a00c125d533c82a377b72bb1cf4be9d" width="50px"class="icon"></a> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111463.svg?token=exp=1610532603~hmac=05ed723e10027fd159af83552267e569" width="50px" class="left icon"></a> <a><img src="https://images-ext-1.discordapp.net/external/0ErDk7PC2OChhKrETqlGcpWfFrDpbNuIvGy07zeXZfc/%3Fssl%3D1/https/i2.wp.com/www.aomsintopup.com/wp-content/uploads/2016/08/line-icon.png" width="53px" class="left icon"></a><a><img src="https://www.flaticon.com/svg/vstatic/svg/733/733609.svg?token=exp=1610533467~hmac=72be8f9fa678cce50ac1232900e9e05e" width="50px" class="left icon"></a> </div> <div class="namecard"> <h1 class="title"> Tanadon Parosin </h1> <img src="https://i.imgur.com/d6LhqzN.jpeg" width="50%"> <p> เด็กในตี้น่ารักทุ้กคนนน ยินดีที่ได้รู้จักค้าบ </p> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111398.svg?token=exp=1610532431~hmac=8a00c125d533c82a377b72bb1cf4be9d" width="50px"class="icon"></a> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111463.svg?token=exp=1610532603~hmac=05ed723e10027fd159af83552267e569" width="50px" class="left icon"></a> <a><img src="https://images-ext-1.discordapp.net/external/0ErDk7PC2OChhKrETqlGcpWfFrDpbNuIvGy07zeXZfc/%3Fssl%3D1/https/i2.wp.com/www.aomsintopup.com/wp-content/uploads/2016/08/line-icon.png" width="53px" class="left icon"></a><a><img src="https://www.flaticon.com/svg/vstatic/svg/733/733609.svg?token=exp=1610533467~hmac=72be8f9fa678cce50ac1232900e9e05e" width="50px" class="left icon"></a> </div> <div class="namecard"> <h1 class="title"> Theeraphat Samboonruang </h1> <img src="https://images-ext-2.discordapp.net/external/aqQoRmylWw4iNmTq-tSblDafokHMxusMEVM5k0mLr-M/https/i.imgur.com/KrWzdHh.jpg?width=744&height=564" width="50%"> <p> วัยรุ่นสร้างตัว พ่อแม่จ้างมาเรียน </p> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111398.svg?token=exp=1610532431~hmac=8a00c125d533c82a377b72bb1cf4be9d" width="50px"class="icon"></a> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111463.svg?token=exp=1610532603~hmac=05ed723e10027fd159af83552267e569" width="50px" class="left icon"></a> <a><img src="https://images-ext-1.discordapp.net/external/0ErDk7PC2OChhKrETqlGcpWfFrDpbNuIvGy07zeXZfc/%3Fssl%3D1/https/i2.wp.com/www.aomsintopup.com/wp-content/uploads/2016/08/line-icon.png" width="53px" class="left icon"></a><a><img src="https://www.flaticon.com/svg/vstatic/svg/733/733609.svg?token=exp=1610533467~hmac=72be8f9fa678cce50ac1232900e9e05e" width="50px" class="left icon"></a> </div> <div class="namecard"> <h1 class="title"> Thirawee Thitiwattanakonsiri </h1> <img src="https://scontent.fbkk2-8.fna.fbcdn.net/v/t1.0-9/51001621_1477222262412532_7519532839512047616_n.jpg?_nc_cat=100&ccb=2&_nc_sid=09cbfe&_nc_eui2=AeEw71qnWeaYuNx5lve63e_yucIvh6J8byW5wi-HonxvJd6wJ1whqjpzCDrknqurAtdcyPo-Qn_yspsJKUfn_VOf&_nc_ohc=Y_ldjrSBm1MAX83cTp5&_nc_ht=scontent.fbkk2-8.fna&oh=5572d35a5caaa4ad9916c2499954aefa&oe=6025E362" width="50%"> <p> ครับ </p> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111398.svg?token=exp=1610532431~hmac=8a00c125d533c82a377b72bb1cf4be9d" width="50px"class="icon"></a> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111463.svg?token=exp=1610532603~hmac=05ed723e10027fd159af83552267e569" width="50px" class="left icon"></a> <a><img src="https://images-ext-1.discordapp.net/external/0ErDk7PC2OChhKrETqlGcpWfFrDpbNuIvGy07zeXZfc/%3Fssl%3D1/https/i2.wp.com/www.aomsintopup.com/wp-content/uploads/2016/08/line-icon.png" width="53px" class="left icon"></a><a><img src="https://www.flaticon.com/svg/vstatic/svg/733/733609.svg?token=exp=1610533467~hmac=72be8f9fa678cce50ac1232900e9e05e" width="50px" class="left icon"></a> </div> <div class="namecard"> <h1 class="title"> Tanatporn Ratsamisuriya </h1> <img src="https://images-ext-2.discordapp.net/external/Uw5YSm2tui771FHREd_A6VjVZvmZMkffQcNwWNlxlZE/https/i.imgur.com/tEQVpRU.jpg?width=564&height=564" width=" 50%"> <p> เด็กในตี้น่ารักทุ้กคนนน ยินดีที่ได้รู้จักค้าบ </p> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111398.svg?token=exp=1610532431~hmac=8a00c125d533c82a377b72bb1cf4be9d" width="50px"class="icon"></a> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111463.svg?token=exp=1610532603~hmac=05ed723e10027fd159af83552267e569" width="50px" class="left icon"></a> <a><img src="https://images-ext-1.discordapp.net/external/0ErDk7PC2OChhKrETqlGcpWfFrDpbNuIvGy07zeXZfc/%3Fssl%3D1/https/i2.wp.com/www.aomsintopup.com/wp-content/uploads/2016/08/line-icon.png" width="53px" class="left icon"></a><a><img src="https://www.flaticon.com/svg/vstatic/svg/733/733609.svg?token=exp=1610533467~hmac=72be8f9fa678cce50ac1232900e9e05e" width="50px" class="left icon"></a> </div> <div class="namecard"> <h1 class="title"> Napat Aungtanagul </h1> <img src="https://i.imgur.com/TDH6g6Q.jpeg" width="50%"> <p> เด็กในตี้น่ารักทุ้กคนนน ยินดีที่ได้รู้จักค้าบ </p> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111398.svg?token=exp=1610532431~hmac=8a00c125d533c82a377b72bb1cf4be9d" width="50px"class="icon"></a> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111463.svg?token=exp=1610532603~hmac=05ed723e10027fd159af83552267e569" width="50px" class="left icon"></a> <a><img src="https://images-ext-1.discordapp.net/external/0ErDk7PC2OChhKrETqlGcpWfFrDpbNuIvGy07zeXZfc/%3Fssl%3D1/https/i2.wp.com/www.aomsintopup.com/wp-content/uploads/2016/08/line-icon.png" width="53px" class="left icon"></a><a><img src="https://www.flaticon.com/svg/vstatic/svg/733/733609.svg?token=exp=1610533467~hmac=72be8f9fa678cce50ac1232900e9e05e" width="50px" class="left icon"></a> </div> <div class="namecard"> <h1 class="title"> Natapon Wangkham </h1> <img src="https://i.imgur.com/dwnMnOC.jpg" width="50%"> <p> เด็กในตี้น่ารักทุ้กคนนน ยินดีที่ได้รู้จักค้าบ </p> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111398.svg?token=exp=1610532431~hmac=8a00c125d533c82a377b72bb1cf4be9d" width="50px"class="icon"></a> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111463.svg?token=exp=1610532603~hmac=05ed723e10027fd159af83552267e569" width="50px" class="left icon"></a> <a><img src="https://images-ext-1.discordapp.net/external/0ErDk7PC2OChhKrETqlGcpWfFrDpbNuIvGy07zeXZfc/%3Fssl%3D1/https/i2.wp.com/www.aomsintopup.com/wp-content/uploads/2016/08/line-icon.png" width="53px" class="left icon"></a><a><img src="https://www.flaticon.com/svg/vstatic/svg/733/733609.svg?token=exp=1610533467~hmac=72be8f9fa678cce50ac1232900e9e05e" width="50px" class="left icon"></a> </div> <div class="namecard"> <h1 class="title"> Napat Phobutdee </h1> <img src="https://i.imgur.com/RWHh02A.jpg" width="50%"> <p> เด็กในตี้น่ารักทุ้กคนนน ยินดีที่ได้รู้จักค้าบ </p> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111398.svg?token=exp=1610532431~hmac=8a00c125d533c82a377b72bb1cf4be9d" width="50px"class="icon"></a> <a><img src="https://www.flaticon.com/svg/vstatic/svg/2111/2111463.svg?token=exp=1610532603~hmac=05ed723e10027fd159af83552267e569" width="50px" class="left icon"></a> <a><img src="https://images-ext-1.discordapp.net/external/0ErDk7PC2OChhKrETqlGcpWfFrDpbNuIvGy07zeXZfc/%3Fssl%3D1/https/i2.wp.com/www.aomsintopup.com/wp-content/uploads/2016/08/line-icon.png" width="53px" class="left icon"></a><a><img src="https://www.flaticon.com/svg/vstatic/svg/733/733609.svg?token=exp=1610533467~hmac=72be8f9fa678cce50ac1232900e9e05e" width="50px" class="left icon"></a> </div> </body> </html>