Week1 – แนะนำตัว Team SSPIM (Branch 631) (Copy 795) (Copy 800)

Week1 – แนะนำตัว Team SSPIM (Branch 631) (Co..

✨ นางสาวขวัญพิชชา อิ่มโดด

<html>
  <head>
    <title>Let's Start</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      .team {
        color:white;
        text-align: center;
        font-size: 80px;
        color: hsl(60 100% 90% / 1);
        text-shadow: 4px -4px #888888; 
      }
      
		.sspim {
        color: hsl(60 100% 90% / 1);
        text-shadow: 4px -4px #888888;
        margin-top: -60px;
        text-align: center;
        font-size: 35px;
        text-decoration: none;
      }
      
      .sspim:hover {
        animation: shake 0.5s;
        animation-iteration-count: infinite;
      }
      @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
      }
      
      img {
            width: 6rem;
            height: 6rem;
            margin: -20 auto;
            border-radius: 50%;
            transform: scale(1);
            transition: .5s;
            box-shadow: 0px 0px 20px rgb(182, 182, 182);
        }
        
        img:hover {
            transform: scale(1.2);
        }
      
      h3 {margin-top: 30;}
      h4 {margin-top: 36px;}
     
      body {
         font-family:sans-serif;
         cursor: url("https://cdn.discordapp.com/attachments/798209387389911051/798896480286933042/asdasdasdas.png"),auto;
			background-image :url(https://i.pinimg.com/originals/65/18/45/651845051eb626caf00f3e1a2e16c557.gif);
        	margin:2em;
        	background-attachment: fixed;
      }
      
      .namecard{
        width:190px;
        height:180px;
        margin:auto;
        text-align:center;
        border-radius:30%;
        background:#f9f4e1;
  		  padding: 50px;
  		  box-shadow: 18px -13px #888888;
      }
      
      .namecard:hover {
        animation: shake 0.5s;
        animation-iteration-count: infinite;
		}
      
      @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
      }
      
      .title{
      	color:#F9B5A2;
         font-size: 35;
      }
      
      .number{
        font-size:20px;
        color: hsl(180 100% 40% / 1);
        text-shadow: 0px 0px 10px;
        margin-top: -20;      
      }
      
      img:hover {
        animation: shake 0.5s;
        animation-iteration-count: infinite;
      }
      
      .fa {
        padding: 10px;
        font-size: 30px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
        margin-top: -10;
      }

.fa:hover {
        opacity: 0.7;
      }
      
      .fa-instagram {
        background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
        color: white;
        }
      
      .fa-facebook {
        background: #3B5998;
        color: white;
        margin-left: 10px;
      }
    </style>
  
  </head>
  <body>
    
    <h1 class="team">Team D.</h1>
    <h1 class="sspim">
      <a href="https://www.instagram.com/sspim/" class="sspim">@sspim</a>
    </h1>
    
  	<h3></h3>
    

    <div class="namecard">
      <img src="https://scontent.xx.fbcdn.net/v/t1.15752-0/p206x206/140417286_165591308335401_2508126878152463231_n.jpg?_nc_cat=103&ccb=2&_nc_sid=58c789&_nc_ohc=uYTA6XbtjsoAX-CzIVw&_nc_oc=AQnVRcACO3RwZ-sjRHrZBsGVDHCCJecvL9HAOdqdlK7H1pX31w5tP4Xmv1Q96IYN7ZGCcHdXpJgpkpRhQlr4zZLJ&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&tp=6&oh=4112a1bf15c26ee26899efcbd9842ec4&oe=602BF3EC">   
      <h1 class="title">
        <marquee direction="left">Tang</marquee>
      </h1>
      <p class="number">63070044</p>
      <a href="https://www.instagram.com/tangg_/" class="fa fa-instagram"></a><a href="https://www.facebook.com/profile.php?id=100004591847994" class="fa fa-facebook"></a>
    </div>
    
    <h4></h4>
    
   
    <div class="namecard">
      <img src="https://scontent.xx.fbcdn.net/v/t1.15752-0/p206x206/140182084_2187409221392577_323778485819324831_n.jpg?_nc_cat=106&ccb=2&_nc_sid=58c789&_nc_ohc=pIUuqKLDaycAX_Gg-wT&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&tp=6&oh=5013a0c8af9ce013633054e703b6132e&oe=602C5A86">
      <h1 class="title">
        <marquee direction="left">Tan</marquee>
      </h1>
      <p class="number">63070133</p>
      <a href="https://www.instagram.com/tanwasmadebyclouds/" class="fa fa-instagram"></a><a href="https://www.facebook.com/Tanbhw" class="fa fa-facebook"></a>
    </div>
    
    <h4></h4>
    

    <div class="namecard">
      <img src="https://scontent.xx.fbcdn.net/v/t1.15752-0/p206x206/138553748_732942590985598_9021342601148719641_n.png?_nc_cat=106&ccb=2&_nc_sid=58c789&_nc_ohc=2Abs9kAxn9MAX9AAgXy&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&_nc_tp=30&oh=59433c50b2665352958bcbf79d704e6a&oe=602B5055">
      <h1 class="title">
        <marquee direction="left">Game</marquee>
      </h1>
      <p class="number">63070165</p>
      <a href="https://www.instagram.com/gameporopori/" class="fa fa-instagram"></a><a href="https://m.facebook.com/moogame.za" class="fa fa-facebook"></a>
    </div>
    
    <h4></h4>
    

    <div class="namecard">
      <img src="https://scontent.xx.fbcdn.net/v/t1.15752-0/p206x206/139405524_251689379757740_3494443298662243555_n.png?_nc_cat=110&ccb=2&_nc_sid=58c789&_nc_ohc=pglHTvQhQRQAX-5MVPo&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&_nc_tp=30&oh=71eabf55de0b47d456f316b06d5f809f&oe=602D48D5">
      <h1 class="title">
        <marquee direction="left">First</marquee>
      </h1>
      <p class="number">63070158</p>
      <a href="https://www.instagram.com/firstfiirstfiiirstfiiiirst/" class="fa fa-instagram"></a><a href="https://www.facebook.com/first.fiesta99/" class="fa fa-facebook"></a>
    </div>
    
    <h4></h4>
    

    <div class="namecard">
      <img src="https://scontent.xx.fbcdn.net/v/t1.15752-0/s206x206/138721919_1535609213305138_7772672539712003763_n.png?_nc_cat=105&ccb=2&_nc_sid=58c789&_nc_ohc=AbvvbNcRGw0AX949rsf&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&_nc_tp=30&oh=d040848673f9ac9ef9608a151f18a8a5&oe=602D58A0">
      <h1 class="title">
        <marquee direction="left">Pop</marquee>
      </h1>
      <p class="number">63070052</p>
      <a href="https://www.instagram.com/nutthidapops_/" class="fa fa-instagram"></a><a href="https://www.facebook.com/profile.php?id=100004956210034" class="fa fa-facebook"></a>
    </div>
    
    <h4></h4>
    

    <div class="namecard">
      <img src="https://scontent.xx.fbcdn.net/v/t1.15752-0/s206x206/139064897_1125607811208855_9064048093949979483_n.jpg?_nc_cat=110&ccb=2&_nc_sid=58c789&_nc_ohc=v4C0nMsVHt8AX9Q4j5C&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&tp=7&oh=c60c78a85aa080b1d83faa301907156d&oe=602C1C2F">
      <h1 class="title">
       <marquee direction="left">Praewtoi</marquee>
      </h1>
      <p class="number">63070147</p>
      <a href="https://www.instagram.com/ramitahawaiian/" class="fa fa-instagram"></a><a href="https://www.facebook.com/profile.php?id=100007807692789" class="fa fa-facebook"></a>
    </div>
    
    <h4></h4>
    

    <div class="namecard">
      <img src="https://scontent.xx.fbcdn.net/v/t1.15752-0/p173x172/139871845_417557609302469_4753198986131293576_n.jpg?_nc_cat=108&ccb=2&_nc_sid=58c789&_nc_ohc=kx-KOuki3H0AX8NOYai&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&tp=6&oh=0940d7fcc49a8d8a42577d8f47b9fd74&oe=602DB762">
      <h1 class="title">
        <marquee direction="left">Pimdy</marquee>
      </h1>
      <p class="number">63070048</p>
      <a href="https://www.instagram.com/pxmdy_win/" class="fa fa-instagram"></a><a href="https://www.facebook.com/pimdy.win/" class="fa fa-facebook"></a>
    </div>
    
    <h4></h4>
    

    <div class="namecard">
      <img src="https://scontent.xx.fbcdn.net/v/t1.15752-0/p206x206/139508865_2770138333283819_3274884758163238801_n.png?_nc_cat=106&ccb=2&_nc_sid=58c789&_nc_ohc=A0H06n89p_oAX8WFnWh&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&_nc_tp=30&oh=e97a135b78962ceaeaef8c6343b26b38&oe=602D5759">
      <h1 class="title">
        <marquee direction="left">Paifuii</marquee>
      </h1>
      <p class="number">63070014</p>
      <a href="https://www.instagram.com/paifuiiii/" class="fa fa-instagram"></a><a href="https://www.facebook.com/profile.php?id=100001876720795" class="fa fa-facebook"></a>
    </div>
    
    <h4></h4>
    

    <div class="namecard">
      <img src="https://scontent.xx.fbcdn.net/v/t1.15752-0/p206x206/139441327_749139152380697_360762769788270012_n.png?_nc_cat=101&ccb=2&_nc_sid=58c789&_nc_ohc=2t1BZjUGwjoAX_hDMrm&_nc_oc=AQmC4CKQUqzlYpmHVy2gtBZtJmHRnXnlH0OwWCRvlmVqfNgD_-zxDXlh1GhB81OefQ1eDJ4ZQiUNr7Nl_Z6QuB1v&_nc_ad=z-m&_nc_cid=0&_nc_ht=scontent.xx&_nc_tp=30&oh=dafcd3bd31264f807d0d86c2d36ec59e&oe=602CDDD4">
      <h1 class="title">
        <marquee direction="left">Pimmoo</marquee>
      </h1>
      <p class="number">63070119</p>
      <a href="https://www.instagram.com/ppymcn/" class="fa fa-instagram"></a><a href="https://www.facebook.com/pimchanok.boonthongnum" class="fa fa-facebook"></a>
    </div>
   </body>
</html>