Trda week1-presentation test

✨ TADA ANPORNPRASERT

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:wheat;
        margin:2em;
        font-family:sans-serif;
      }
      .namecard{
        width:50%;
        margin:50px;
        text-align:center;
        background:linear-gradient(to bottom right, hsl(30, 100%, 45%), hsl(30, 100%, 65%));
        box-shadow: 4px 4px  hsl(30, 100%, 20%);
        padding:2em;
        border-radius: 0;
		  animation-name: goes;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-iteration-count: 2;
        animation-time-function: ease-in;
        animation-direction: alternate;

}
      @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%;
  }
        
      }
      .title{
      color:white;
      text-shadow: 1px 1px black
      }
      a:hover{
        color:green;
      }
    </style>
  </head>
  <body>
    
    <div class="namecard">
      <h1 class="title">
        Trda Ampornprasert
      </h1>
      <p class="title">
        1
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trdamp</a>
    </div>
    <div class="namecard">
      <h1 class="title">
        12
      </h1>
      <p class="title">
        1
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trdamp</a>
    </div>
    <div class="namecard">
      <h1 class="title">
        12
      </h1>
      <p class="title">
        1
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trdamp</a>
    </div>
    <div class="namecard">
      <h1 class="title">
        12
      </h1>
      <p class="title">
        1
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trdamp</a>
    </div>
    <div class="namecard">
      <h1 class="title">
        12
      </h1>
      <p class="title">
        1
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trdamp</a>
    </div>
    <div class="namecard">
      <h1 class="title">
        12
      </h1>
      <p class="title">
        1
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trdamp</a>
    </div>
    <div class="namecard">
      <h1 class="title">
        12
      </h1>
      <p class="title">
        1
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trdamp</a>
    </div>
    <div class="namecard">
      <h1 class="title">
        12
      </h1>
      <p class="title">
        1
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trdamp</a>
    </div>
    <div class="namecard">
      <h1 class="title">
        12
      </h1>
      <p class="title">
        1
      </p>
      <a href="https://www.facebook.com/tada.ampornprasert">Trdamp</a>
    </div>
    
  </body>
</html>