Week1 – แนะนำตัว Team SSPIM (Branch 542)

✨ NATTHAWALEE JAMPASOD

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Let's Start
    </title>
    <style>
      body{
        background:linear-gradient(black,hsl(240,50%,50%),hsl(240,50%,75%));
        font-family:sans-serif;
        cursor: url(https://i.imgur.com/6kjIT6R.png),auto;
      }
      .fa-facebook{
		  background: #3B5998;
		  color: white;
        width:20px;
        padding:20px;
        border-radius:50%;
        font-size:20px;
		}
      .namecard{
        width:50%;
        margin:auto;
        margin-top:1em;
        margin-bottom:1em;
        text-align:center;
        padding:2em;
        transform:rotatey(0deg) scale(0.8);
        transition:1s;
        box-shadow:0px 0px 5px black;
      }
      .namecard:hover{
			transform:rotatey(360deg) scale(1.2);
         box-shadow:0px 10px 30px black;
      }
      .namecard:hover h3{
        opacity:1;
        transition-delay:0.8s;
      }
      .namecard:hover h1{
        opacity:1;
        transform:scale(1);
        transition-delay:0.4s;
      }
      .namecard:hover a{
        opacity:1;
        transition-delay:1.2s;
      }
      h1,h3,a{
      opacity:0;
      transition:1.3s;
      }
      .title{
      color:hsl(240,50%,50%);
      }
      a{
      color:#fefae0;
      text-decoration:none;
      }
    </style>
  </head>
  <body>
    <div class="namecard" style="background:hsl(37,98%,53%);">
      <h1 class="title">
        N'FAME
      </h1>
      <h3>
        63070011
          </h3>
      <a href="https://www.facebook.com/kunlanitframe/" class="fa fa-facebook"></a>
    </div>
    <div class="namecard" style="background:hsl(37,98%,55%);">
      <h1 class="title">
        N'MING
      </h1>
      <h3>
        63070027
      </h3>
      <a href="https://www.facebook.com/tarunee.madee.5/" class="fa fa-facebook"></a>
    </div>
    <div class="namecard" style="background:hsl(37,98%,57%);">
      <h1 class="title">
        N'FOOK
      </h1>
      <h3>
        63070034
          </h3>
      <a href="https://www.facebook.com/profile.php?id=100023616789388" class="fa fa-facebook"></a>
    </div>
    <div class="namecard" style="background:hsl(37,98%,59%);">
      <h1 class="title">
        N'WAVE
      </h1>
      <h3>
        63070054
          </h3>
      <a href="https://www.facebook.com/SinnerSw/" class="fa fa-facebook"></a>
    </div>
    <div class="namecard" style="background:hsl(37,98%,61%);">
      <h1 class="title">
        N'JUNGJING
      </h1>
      <h3>
        63070061
          </h3>
      <a href="https://www.facebook.com/natthawalee/" class="fa fa-facebook"></a>
    </div>
    <div class="namecard" style="background:hsl(37,98%,63%);">
      <h1 class="title">
        N'KEM
      </h1>
      <h3>
        63070071
          </h3>
      <a href="https://web.facebook.com/profile.php?id=100011298666835" class="fa fa-facebook"></a>
    </div>
    <div class="namecard" style="background:hsl(37,98%,65%);">
      <h1 class="title">
        N'AOF
      </h1>
      <h3>
        63070086
          </h3>
      <a href="https://web.facebook.com/superoof.th" class="fa fa-facebook"></a>
    </div>
    <div class="namecard" style="background:hsl(37,98%,67%);">
      <h1 class="title">
        N'TOEN
      </h1>
      <h3>
        63070090
          </h3>
      <a href="https://www.facebook.com/toen.teen/" class="fa fa-facebook"></a>
    </div>
  </body>
</html>