My Party (Branch 10141) (Copy 10299)

✨ นางสาวกัลยกร ยี่นาง

<!DOCTYPE html>
<html>
  <head>
    <title>ไร่ขิงพี่เหน่ง</title>
    <link rel = "icon" href="http://pngimg.com/uploads/ginger/ginger_PNG16794.png" type="image/x-icon">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Libre+Baskerville:wght@700&family=Prompt:wght@300&display=swap');
      ::-webkit-scrollbar {
        width: 20px;
      }
      ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey; 
        border-radius: 10px;
      }
      ::-webkit-scrollbar-thumb {
        background: #fff; 
        border-radius: 10px;
      }
      body {
        align-items: center;
        justify-content: center;
        display: flex;
        font-family: 'Gamja Flower', cursive;
        background: #3b5d9a;
        //background-image: linear-gradient(180deg, #3a5b96 0%, #94abbd 100%);
        //background: #f5f5f5;
        //background-image: url('https://cdn.discordapp.com/attachments/812749326543487058/933414554531168306/white-crumpled-paper-texture-background.jpg');
        //background-image: url('https://i0.wp.com/luamaralstudio.com/wp-content/uploads/2019/10/textura-papel-background-paper-texture-11.png?resize=980%2C1279');
        //background-attachment: fixed;
        //background-size: 100% 200%;;
      }
      .container {
        margin-top: 50px;
        margin-bottom: 50px;
        border-radius: 30px;
        background: #fff;
        width: 1500px;
        height: 1450px;
      }
      .container1 {
        display: grid;
        grid-template-columns: auto auto auto auto auto;
        justify-content: center;
        grid-gap: 25px;
        margin-top: 50px;
        margin-bottom: 50px;
      }
      .gradient-border {
        --border-width: 3px;
        position: relative;
        justify-content: center;
        text-align: center;
        width: 250px;
        height: 400px;
        background: #fff;
        transition: 0.5s;
        border-radius: 15px;
        box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}
      .gradient-border::after {
        position: absolute;
        content: "";
        top: calc(-1 * var(--border-width));
        left: calc(-1 * var(--border-width));
        z-index: -1;
        width: calc(100% + var(--border-width) * 2);
        height: calc(100% + var(--border-width) * 2);
        background: linear-gradient(60deg, #ecd59f, #d3e7ee, #ecd59f);
        border-radius: 15px;
        background-size: 300% 300%;
        background-position: 0 5;
        animation: moveGradient 2s alternate infinite;
}
      .gradient-border:hover{
        transform:scale(1.1) translatey(-5%);
        box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
      }
      @keyframes moveGradient {
      50% {
      background-position: 100% 50%;
  }
}
      .gradient-border .img {
        transition: 0.5s;
      }
      .gradient-border:hover .img {
        transform: translateY(0) scale(1.1);
      }
      #title {
        width: 1500px;
        height: 500px;
        background-image: url('https://cdn.discordapp.com/attachments/812749326543487058/933493098737172511/viateur-hwang--By1_DpPsBk-unsplash.jpg');
        border-radius: 30px;
      }
      .text {
        font-family: 'Libre Baskerville', serif;
        letter-spacing: 4px;
        text-align: center;
        line-height: 120px;
        font-size: 60px;
        color: #ecd59f;
        padding: 15px;
      }
      .gradient-border h2 {
        font-size: 20px;
        color: #3a3c75;
        letter-spacing: 2px;
        margin-bottom: 1em;
        background: #ecd59f;
      }
      .gradient-border h3 {
        font-size: 18px;
        color: #4c4c4c;
        letter-spacing: 1px;
        margin-top: 1em;
      }
      a {
        color: #3a3c75;
        font-size: 1.5em;
        transition:all .2s;
        text-decoration: none;
      }
      a:hover{
        transform:scale(1) translatey(-5%);
        box-shadow:0px 30px 15px #0231;
        opacity:.5;
      }
      .person {
        display: flex;
        align-items: center;
      }
      .container-img {
        width: 105px;
        height: 230px;
        transform: scale(0.5);
      }
      .container-inner {
        clip-path: path(
          "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z"
        );
        position: relative;
        transform-origin: 50%;
        top: -250px;
      }
      .img1 {
        left: 55px;
        top: 164px;
        width: 300px;
      }
      .img2 {
        left: 30px;
        top: 164px;
        width: 340px;
      }
      .img3 {
        left: 35px;
        top: 160px;
        width: 302px;
      }
      .img4 {
        left: 35px;
        top: 160px;
        width: 300px;
      }
      .img5 {
        left: 35px;
        top: 160px;
        width: 320px;
      }
      .img6 {
        left: 20px;
        top: 155px;
        width: 340px;
      }
      .img7 {
        left: 30px;
        top: 175px;
        width: 350px;
      }
      .img8 {
        left: 12px;
        top: 150px;
        width: 360px;
      }
      .img9 {
        left: 0px;
        top: 152px;
        width: 380px;
      }
      .img10 {
        left: 15px;
        top: 134px;
        width: 372px;
      }
      .circle {
        border-radius: 50%;
        cursor: pointer;
        height: 380px;
        left: 10px;
        position: absolute;
        top: 210px;
      }
      .img {
        pointer-events: none;
        position: relative;
        transform-origin: 50% bottom;
      }
      marquee {
        height: 30px;
        align-items: center;
        display: flex;
        padding: 30px;
        color: #fff;
        font-family: 'Prompt', sans-serif;
        letter-spacing: 3px;
      }
      </style>
    </head>
  <body>
    <div class="container">
    <div id="title">
      <div class="text"><h1>A-Neng<br>Party</h1></div>
      
    </div>
    <div class="container1">
    <div class="gradient-border">

<h2>CHOATCHDA<br>AUPAYOKIN</h2>
      <h3>PP👺</h3>
      <a href="https://www.facebook.com/profile.php?id=100016087664506" target="_blank">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/ppchoatchda/" target="_blank">
        <i class="fab fa-instagram">
        </i>
      </a>
      <a href="https://github.com/Choatchda">
        <i class="fab fa-github">
        </i>
      </a>
    </div>

<div class="gradient-border">
      
      <div class="person">
        <div class="container-img">
          <div class="container-inner">
            <img class="circle" src="https://cdn.discordapp.com/attachments/933591523189215235/933593554603876373/1ec328eebce6c59c9eb2fbc3e3b880be.jpg">
            <img class="img img2" src="https://cdn.discordapp.com/attachments/933591523189215235/933591562384998410/87940387_2505199046463616_4597255585442824192_n-removebg-preview_1.png">
          </div>
        </div>
      </div>
      
          <h2>THANAPAT<br>SUPATTANANON</h2>
      <h3>NEW🎮</h3>
      <a href="https://www.facebook.com/profile.php?id=100009206363428" target="_blank">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/newnajaa/?hl=en" target="_blank">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="https://github.com/64070043">
        <i class="fab fa-github">
        </i>
      </a>
    </div>

<h2>NUTAYA<br>NITIAPAITHAM</h2>
      <h3>KENG🎄</h3>
      <a href="https://www.facebook.com/profile.php?id=100001763048020" target="_blank">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/nutaya.k/" target="_blank">
        <i class="fab fa-instagram">
        </i>
      </a>
      <a href="https://github.com/Nutaya" target="_blank">
        <i class="fab fa-github">
        </i>
      </a>
    </div>

<h2>KANLAYAKORN<br>YEENANG</h2>
      <h3>MhuuKrob🥓</h3>
      <a href="https://www.facebook.com/profile.php?id=100004291367649" target="_blank">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/ilovemhuukrob/" target="_blank">
        <i class="fab fa-instagram">
        </i>
      </a>
      <a href="https://github.com/ilovemhuukrob" target="_blank">
        <i class="fab fa-github">
        </i>     </a>
    </div>

<h2>PITCHAYUT<br>SRIMUANG</h2>
      <h3>BOSSSERX</h3>
      <a href="https://www.facebook.com/pitchayut.srimuang.5" target="_blank"">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/bossserx/ target="_blank"">
        <i class="fab fa-instagram">
        </i>
      </a>
      <a href="https://github.com/bossserx" target="_blank">
        <i class="fab fa-github">
        </i>
      </a>

</div>

<h2>CHAYANONT<br>SUPAKIT</h2>
      <h3>OAT📷</h3>
      <a href=" https://www.facebook.com/oat12021/" target="_blank">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/oat_chayanont/" target="_blank">
        <i class="fab fa-instagram">
        </i>
      </a>
      <a href="https://github.com/OatChayanont" target="_blank">
        <i class="fab fa-github">
        </i>
      </a>
    </div>

<h2>PHUNSA<br>RONGYUED</h2>
      <h3>BOOK</h3>
      <a href="https://www.facebook.com/phunsa.rongyued">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/balalookie/">
        <i class="fab fa-instagram">
        </i>
      </a>
      <a href="https://github.com/phunsa2546">
        <i class="fab fa-github">
        </i>
      </a>
    </div>

<h2>NATCHAPHON<br>TANGSATIDPORN</h2>
      <h3> BILLY⚡ </h3>
      <a href="https://www.facebook.com/profile.php?id=100009597362504 " target="_blank">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/_bew_san/" target="_blank">
        <i class="fab fa-instagram">
        </i>
      </a>
      <a href="https://github.com/Bill0405" target="_black">
        <i class="fab fa-github">
        </i>
      </a>
    </div>

<h2>CHANAKARN<br>SUTTHIKUL</h2>
        <h3>FERN🦔</h3>
      <a href="https://www.facebook.com/chanakan.sutthkul/" target="_blank">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/sutthkul/" target="_blank">
        <i class="fab fa-instagram">
        </i>
      </a>
      <a href="https://github.com/64070018" target="_blank">
        <i class="fab fa-github">
        </i>
      </a>
    </div>

<h2>PERAVIT<br>KRITCHAKAJ</h2>
      <h3>DEW💦</h3>
      <a href="https://www.facebook.com/peravit.kritchakaj.1/" target="_blank">
        <i class="fab fa-facebook">
        </i>
      </a>
      <a href="https://www.instagram.com/dew_pk_/?hl=en" target="_blank">
        <i class="fab fa-instagram">
        </i>
      </a>
      <a href="https://github.com/PeravitK" target="_blank">
        <i class="fab fa-github">
        </i>
      </a>
    </div>
    </div>
    </div>
  </div>

</body>
</html>