Week 1 – A-Arin (Branch 486)

✨ KRITTIN KLINKAEW

<html>
  <head>
    <title>Let's Start</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap");
      * {
        margin: auto;
        box-sizing: border-box;
        font-family: "Poppins", kanit;
      }
      body {
        min-height: 100vh;
        background-color: #161623;
      }
      /*Circle1*/
      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%);
      }
      /*Circle2*/
      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 of card*/
      .container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 1200px;
        flex-wrap: warp;
        z-index: 1;
      }
      .container h1 {
        margin-top: 30px;
        color: #fff;
        position: relative;
        font-size: 3em;
        font-weight: 900;
      }
      .container h1 span {
        color: #ff022c;
      }
      .container h1 a {
        color: #ff022c;
        text-decoration: none;
        transition: 0.5s;
      }
      .container h1 a:hover {
        color: #ff3456;
      }
      /*Card profile*/
      .card {
        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;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(5px);
      }
      /*Card hover*/
      .card:hover {
        cursor: default;
      }
      .card:hover .content {
        transform: translatey(-140px);
        opacity: 1;
      }
      .card:hover .avatar {
        transform: translatey(-300px);
        opacity: 1;
        width: 100%;
      }
      /*Card content*/
      .content {
        padding: 20px;
        text-align: center;
        transform: translatey(300px);
        transition: 0.5s;
      }
      .content h2 {
        position: fixed;
        font-size: 30vh;
        top: -130px;
        right: 2px;
        color: rgba(255, 255, 255, 0.05);
      }
      .content h3 {
        font-size: 1.8em;
        color: #fff;
      }
      .content p {
        font-size: 1.2em;
        color: #fff;
        font-weight: 300;
      }
      .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);
      }
      .content a:hover {
        cursor: pointer;
      }
      .content i {
        font-size: 20px;
        color: blue;
        transition: 0.5s;
      }
      .avatar {
        padding: 2rem;
        transform: translatey(50px);
        transition: 0.5s;
      }

.avatar img {
        display: flex;
        width: 200px;
        height: 200px;
        border-radius: 100%;
        object-fit: cover;
        object-position: center;
      }
    </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> [
        <a target="_blank" href="https://www.facebook.com/arinnaline/"
          >P'Arin</a
        >
        ]
      </h1>
    </div>
    <div class="container">
      <div class="card">
        <div class="avatar">
          <img
            src="https://media.discordapp.net/attachments/798205810017697816/798920638302912639/image0.jpg?width=679&height=677"
          />
        </div>
        <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="avatar">
          <img
            src="https://media.discordapp.net/attachments/798205810017697816/798919872158367744/131402601_3556186077832537_4991270875350056266_o.png?width=676&height=676"
          />
        </div>
        <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="avatar">
          <img
            src="https://media.discordapp.net/attachments/798205810017697816/798919907613605938/image0.jpg?width=676&height=676"
          />
        </div>
        <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="avatar">
          <img
            src="https://media.discordapp.net/attachments/798205810017697816/798920894650122301/image0.png?width=674&height=676"
          />
        </div>
        <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="avatar">
          <img
            src="https://media.discordapp.net/attachments/798205810017697816/798920560402497606/122539390_2031503893658428_5783119528537781331_n.png?width=676&height=676"
          />
        </div>
        <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="avatar">
          <img
            src="https://media.discordapp.net/attachments/798205810017697816/798919795898581013/100810887_2314791875497151_5837764323757260800_n.png"
          />
        </div>
        <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="avatar">
          <img
            src="https://media.discordapp.net/attachments/798205810017697816/798920717953531934/image0.jpg?width=508&height=677"
          />
        </div>
        <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="avatar">
          <img
            src="https://media.discordapp.net/attachments/798205810017697816/798920565981052999/received_1185776464965908.jpeg?width=901&height=676"
          />
        </div>
        <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>