Week 1 (Branch 516)

✨ Tawan Thirawee

<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:#ddd;
        margin:2em;
        font-family:"Anuphan";
        cursor: url(https://i.imgur.com/6EdS32p.png), auto;
      }
      a{
      cursor: url(https://i.imgur.com/TSvJMbv.png),auto;
      }
      .namecard{
        --cl:0;
        --clt:50;
        width:450px;
        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:500px;
  		box-shadow: 0 5px 20px hsl(var(--cl),70%,70%);
		}
      .title{
        animation:di .5s infinite alternate;

color:hsl(var(--cl),100%,var(--l));
      }
      @keyframes di{
        from{color:hsl(var(--cl),100%,30%)}
        to{color:hsl(var(--cl),100%,60%)}
        
      }
      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:7px;
      }
      .icon{
      transition:0.3s;
      transform:scale(1);
      }
      .icon:hover{
        transform:scale(1.4);
      }
      .square{
		 width:100%;
        padding-top:100%;
        background-color:#ddd;
        border-radius:5px;
        background-size:cover;
        background-position:center;
        transition:0.3s;
      }
      .namecard:hover .square{
        padding-top:80%;
      }
    </style>
  </head>
  
  <body>
    
    <div class="namecard">
      <h1 class="title">
        Chaowat Intarapanit
      </h1>
      <div class="square" style="background-image:url(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)">
      </div>
      <p>
        ที่ใจเราสั่นมันเป็นเพราะกาแฟ หรือเป็นเพราะ”แฟก๊ะ”
      </p>
       <a href="https://www.facebook.com/chaowat.intarapanit"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="51px"class="left icon"></a>
<a href="https://www.instagram.com/goten_ar/"><img src="https://i.imgur.com/i4CIc04.png" width="50px" class="left icon"></a>
<a href="#"><img src="https://lh3.googleusercontent.com/proxy/FMf07KZUXn7ldU-WCY4nHMNLwSqzwtR27U5nJHxkN8B5OH5k6tiJbhPuAIhTiJmw_4x1F2yDLODvCspwYUZuiBJW62E" width="50px" class="left icon"></a><a href="#"><img src="https://i.imgur.com/SLFfsx2.png" width="51px" class="left icon"></a>
    </div>
    <div class="namecard">
      <h1 class="title">
        Tanadon Parosin
      </h1>
      <div class="square" style="background-image:url(https://i.imgur.com/d6LhqzN.jpeg)">
      </div>
      <p>
        ทำอะไรก็ได้ที่คุณชอบทำ
      </p>
      <a href="https://www.facebook.com/jumpboy.parosin/"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="50px"class="left icon"></a>
<a href="#"><img src="https://i.imgur.com/i4CIc04.png" width="50px" class="left icon"></a>
<a href="#"><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 href="#"><img src="https://i.imgur.com/SLFfsx2.png" width="51px" class="left icon"></a>
    </div>
    <div class="namecard">
      <h1 class="title">
        Theeraphat Samboonruang
      </h1>
      <div class="square" style="background-image:url(https://images-ext-2.discordapp.net/external/aqQoRmylWw4iNmTq-tSblDafokHMxusMEVM5k0mLr-M/https/i.imgur.com/KrWzdHh.jpg?width=744&height=564)">
      </div>
      <p>
        วัยรุ่นสร้างตัว พ่อแม่จ้างมาเรียน
      </p>
     <a href="https://www.facebook.com/theeraphat.samboonruang"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="50px"class="left icon"></a>
<a href="#"><img src="https://i.imgur.com/i4CIc04.png" width="50px" class="left icon"></a>
<a href="#"><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://i.imgur.com/SLFfsx2.png" width="51px" class="left icon"></a>
    </div>
    <div class="namecard">
      <h1 class="title">
        Thirawee Thitiwattanakonsiri
      </h1>
    <div class="square" style="background-image:url(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)">
      </div>
      <p>
      	สมองกับกระเป๋าตังก็โล่งเหมือนกันอะ
      </p>
      <a href="https://www.facebook.com/tawan.thirawee/"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="50px"class="left icon"></a>
<a href="#"><img src="https://i.imgur.com/i4CIc04.png" width="50px" class="left icon"></a>
<a href="#"><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 href="#"><img src="https://i.imgur.com/SLFfsx2.png" width="51px" class="left icon"></a>
    </div>
    <div class="namecard">
      <h1 class="title">
        Tanatporn Ratsamisuriya
      </h1>
      <div class="square" style="background-image:url(https://images-ext-2.discordapp.net/external/Uw5YSm2tui771FHREd_A6VjVZvmZMkffQcNwWNlxlZE/https/i.imgur.com/tEQVpRU.jpg?width=564&height=564)">
      </div>
      <p>
        หมดอะไรก็ได้ แต่อย่าหมดกำลังใจ
      </p>
   <a href="https://www.facebook.com/thanatporn.ploy/"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="50px"class="left icon"></a>
<a href="#"><img src="https://i.imgur.com/i4CIc04.png" width="50px" class="left icon"></a>
<a href="#"><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 href="#"><img src="https://i.imgur.com/SLFfsx2.png" width="51px" class="left icon"></a>
    </div>
    <div class="namecard">
      <h1 class="title">
        Napat Aungtanagul
      </h1>
      <div class="square" style="background-image:url(https://i.imgur.com/TDH6g6Q.jpeg)">
      </div>
      <p>
        เบื่อแล้วลูกอม อยากอมลูกปืน
      </p>
    <a href="https://www.facebook.com/profile.php?id=100003171883193"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="50px"class="left icon"></a>
<a href="#"><img src="https://i.imgur.com/i4CIc04.png" width="50px" class="left icon"></a>
<a href="#"><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 href="#"><img src="https://i.imgur.com/SLFfsx2.png" width="51px" class="left icon"></a>
    </div>
    <div class="namecard">
      <h1 class="title">
        Natapon Wangkham
      </h1>
      <div class="square" style="background-image:url(https://i.imgur.com/GCIn2XL.jpg)">
      </div>
      <p>
        อยากได้ลูกเสือ ต้องเข้าถ้ำเสือ
      </p>
     <a href="https://www.facebook.com/nataponwangkham"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="50px"class="left icon"></a>
<a href="#"><img src="https://i.imgur.com/i4CIc04.png" width="50px" class="left icon"></a>
<a href="#"><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 href="#"><img src="https://i.imgur.com/SLFfsx2.png" width="51px" class="left icon"></a>
    </div>
    <div class="namecard">
      <h1 class="title">
        Napat Phobutdee
      </h1>
      <div class="square" style="background-image:url(https://i.imgur.com/RWHh02A.jpg)">
      </div>
      <p>
        เบื่อแล้วนั่งเรียน อยากนั่งเคียงเธอ
      </p>
    <a href="https://www.facebook.com/yukimuraixa"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" width="50px"class="left icon"></a>
<a href="#"><img src="https://i.imgur.com/i4CIc04.png" width="50px" class="left icon"></a>
<a href="#"><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 href="#"><img src="https://i.imgur.com/SLFfsx2.png" width="51px" class="left icon"></a>
    </div>
  </body>
</html>