Week 1 – A-Arin (Branch 490)

✨ Thanawat Jantawong

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
/*       body{
        background:#eee;
        margin:2em;
        font-family:sans-serif;
      }
      .namecard{
        width:50%;
        margin:auto;
        text-align:center;
        background:white;
        padding:2em;
        border-radius: 10px;
        box-shadow: 5px 5px graytext;
      }
      .title{
      color:black;
      }
      a{
        color:graytext;
      }
 */
      @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap');
      *{ 
		  margin: auto;
        padding:0;
        box-sizing: border-box;
        font-family: 'Poppins', kanit;
      }
      body{
/*         display: flex; */
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #161623;
      }
      body::before{
		  content: '';
        position: fixed;
        top: -250;
        right: 0;
        width: 140%;
        height: 170%;
        background: linear-gradient(#f00,#f0f);
        clip-path: circle(30% at right 70%);
      }
      body::after{
		  content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(#2196f3,#e91e63);
        clip-path: circle(20% at left 10%)
      }
      
      .container{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 1200px;
        flex-wrap: warp;
        z-index: 1;
      }
      .container .card{
        position: relative;
        width: 280px;
        height: 400px;
        margin: 30px;
        box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
        border-radius: 15px;
        background: rgba(255,255,255,0.1);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(255,255,255,0.5);
        border-left: 1px solid rgba(255,255,255,0.5);
        backdrop-filter: blur(5px);
      }
      .container .card .content{
        padding: 20px;
        text-align: center;
        transform: translatey(300px); 
        transition: 0.5s;
        
      }
      .container .card:hover .content{
        transform: translatey(0px); 
        opacity:1;
      }
      .container .card .content h2{
        position: fixed;
        justify-items:center;
        font-size: 30vh;
        top:-130px;
        right: 2px;
        text-align:center;
        color: rgba(255,255,255,0.05);
        pointer-events: none;
      }
      .container .card .content h3{
        font-size: 1.8em;
        color: #fff;
        z-index: 1;
      }
      .container .card .content p{
        font-size: 1em;
        color: #fff;
        font-weight: 300;
      }
      .container .card .content a{
        position: relative;
        display: inline-block;
        padding: 8px 8px;
        margin-top: 15px;
        background: #fff;
        color: #000;
        border-radius: 20px;
        text-decoration: none;
        font-weight: 500;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      }
      .container .card .content i{
        font-size: 20px;
        color: blue;
      }
      .container h1{
		  margin-top: 30px;
        color: #fff;
        position: relative;
        font-size: 3em; 
        font-weight: 900;
        z-index: 1;
        overflow: hidden;
      }
      .container h1:before{
		  content: '';
        position: absolute;
        left: 120%;
        width: 120%;
        height: 100%;
        background: linear-gradient(90deg,transparent 0%, #000 5%, #000 100%);
        animation: animate 5.5s linear forwards;
      }
      @keyframes animate{
        0%{
          left: 110%;
        }
        100%{
          left: -20%;
        }
      }
      .container h1 span{
        color: #ff022c;
      }
    </style>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
  </head>
  <body>
    

    <div class="container">
      <h1>
        Group <span>A</span> [ <span>P'Arin</span> ]
      </h1>
    </div>   
    <div class="container">
      <div class="card">
        <div class="content">
          <h2>
            A
          </h2>
          <h3>
            Poom ( ภูมิ )
          </h3>
          <p>
            Thanawat Jantawong
          </p>
          <a href="https://www.facebook.com/poom3times" target="_blank"><i class="fab fa-facebook"></i></a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="content">
          <h2>
            A
          </h2>
          <h3>
            Nuea ( เหนือ )
          </h3>
          <p>
            Krittin Klinkaew
          </p>
          <a href="https://www.facebook.com/profile.php?id=100003235388992" target="_blank"><i class="fab fa-facebook"></i>				</a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="content">
          <h2>
            A
          </h2>
          <h3>
            Big ( บิ๊ก )
          </h3>
          <p>
            Natanon Hanchana
          </p>
          <a href="https://www.facebook.com/nta.hcha" target="_blank"><i class="fab fa-facebook"></i></a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="content">
          <h2>
            A
          </h2>
          <h3>
            Ploy ( พลอย )
          </h3>
          <p>
            Karnsiri Phongsiyanuwat
          </p>
          <a href="https://www.facebook.com/ploy.krs.77" target="_blank"><i class="fab fa-facebook"></i></a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="content">
          <h2>
            A
          </h2>
          <h3>
            Phol ( พล )
          </h3>
          <p>
            Tathus Theerachuwiwat
          </p>
          <a href="https://www.facebook.com/tathus.phol.7/%22%3E" target="_blank"><i class="fab fa-facebook"></i></a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="content">
          <h2>
            A
          </h2>
          <h3>
            Tiger ( เสือ )
          </h3>
          <p>
            Noppawan Pakinsee
          </p>
          <a href="https://www.facebook.com/noppawan.007/" target="_blank"><i class="fab fa-facebook"></i></a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="content">
          <h2>
            A
          </h2>
          <h3>
            Kit ( กิต )
          </h3>
          <p>
            Kittipod Kitsuphabsirikul
          </p>
          <a href="https://www.facebook.com/profile.php?id=100008938629700" target="_blank"><i class="fab fa-facebook"></i></a>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card">
        <div class="content">
          <h2>
            A
          </h2>
          <h3>
            Yong ( หยง )
          </h3>
          <p>
            Thanee Laiteerapong
          </p>
          <a href="https://www.facebook.com/MheePanDaLt/" target="_blank"><i class="fab fa-facebook"></i></a>
        </div>
      </div>
    </div>
  </body>
</html>