Week 1, A-Thx (Copy 688) (Branch 703) (Copy 730) (Copy 1212)

Week 1, A-Thx (Copy 688) (Branch 703) (Copy 730) (..

✨ นายธนเดช แซ่ฉั่ว

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#eee;
        margin:2em;
        font-family:sans-serif;
        background: wheat;
      }
      .namecard{
        width:90%;
        margin:auto;
        text-align:center;
        background:black;
        padding:1em;
      }
      .gcard{
		  display:flex;
        width: 100%;
        height: 30vh;

}
      .ncard{
		  width:50%;
        background:linear-gradient(to bottom right, hsl(30, 100%, 45%), hsl(30, 100%, 65%));
        border-radius:15px;
/*         color:black; */
        margin: 11px;
        text-align: center;
        border-radius:0;
		  animation-name: goes;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-time-function: ease-in;
        animation-direction: alternate;
      }
/*       .title{
      color:;
      } */
      a{
       color:white;
       font-size:14;
      }
      a:hover{
		color:red;
        transition:0.5s
      }
      p{	
        color:white;
        text-shadow: 1px 1px black;
        font-size: 16;
      }
      h4{
		color:white;
      text-shadow: 1px 1px black;
      }
        @keyframes goes{
	0%{
    border-radius: 0;
  }
  25%{
    border-radius: 0;
    border-top-left-radius: 50%;
  }
  50%{
    border-radius: 0;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
  }
  75%{
    border-radius: 0;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
        }
  100%{
    border-radius: 0;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
  }
        
      } 
    </style>
  </head>
  <body>
  

    <div class="gcard">
      <div class="ncard title"><h4>
        Trda Ampornprasert
        </h4>
       <p class="title">
         ทำงานไม่ค่อยเป็นครับ
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trda Ampornprasert</a></div> 
      <div class="ncard title"><h4>
        Narumol Thongchue
        </h4><p class="title">
         คนเบลอ
      </p>
      <a href="https://www.facebook.com/angpao.narumol">Angpao</a></div> 
    </div>
    <div class="gcard">  
      <div class="ncard title"><h4>
        Tiwat Parkpoompisal
        </h4><p class="title">
        จีน
      </p>
      <a href="https://www.facebook.com/Jeantiwat">Jean</a></div> 
      <div class="ncard title"><h4>
        เบ้นซ์
        </h4><p class="title">
         ผมธนาดุล เสริมเผือก ฝากตัวด้วยครับ
      </p>
      <a href="https://www.facebook.com/thanadul.benzsanza">เบ๊นซ์</a></div> 
    </div>
    <div class="gcard">
      <div class="ncard title"><h4>
        Thanadat Sacchua
        </h4><p class="title">
         ยินดีที่ได้รู้จักครับ
      </p>
      <a href="https://www.facebook.com/profile.php?id=100003016183718">thanadat</a></div>  
      <div class="ncard title"><h4>
        Nida
        </h4><p class="title">
         สวัสดีค่ะ
      </p>
      <a href="https://www.facebook.com/ndkri2">nida</a></div>  
    </div>
    <div class="gcard">
      <div class="ncard title"><h4>
        Pheem
        </h4><p class="title">
         สวัสดีครับฝากตัวด้วยครับ
      </p>
      <a href="https://www.facebook.com/peemkongphop">peem</a></div>  
      <div class="ncard title"><h4>
        Tanavich Laksana
        </h4><p class="title">
         mind
      </p>
      <a href="https://www.facebook.com/tanavich.laksana">Tanvich</a></div>  
    </div>
  </body>
</html>