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>