class B

✨ SASITHORN SRIJUN

<!DOCTYPE html>
<html>

<head>
	<title>ไร่ของพี่เหน่ง</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
    @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@700&display=swap');
		body {
			margin: 0;
      height:100%;
      font-family: 'Itim', cursive;
		}
    .gradient-bg {
      background:linear-gradient(60deg, #81dd6d, #fffbc0, #81dd6d);
      background-size: 300% 300%;
      animation: AnimationName 5s ease infinite;
    }
    @keyframes AnimationName {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }

.title-bar {
			background:linear-gradient(#fc9d00, #ff6c00);
			height: 60px;
      margin-bottom:1.5em;
		}

.title {
			color: #000;
			height: 60px;
			display: flex;
			align-items:center;
			justify-content:center;
		}

.circle {
			height: 20px;
			width: 20px;
      margin-right:30px;
      display: flex;
			align-items:center;
			justify-content:center;
      box-shadow:0px 0px 20px #fff;
		}

.title-text {
      background: #fff;
			height: 30px;
			width: 80%;
      border-radius: 20px;
    }

.title-text-slide {
      font-family: 'Itim', cursive;
      height: 30px;
      display: flex;
			align-items:center;
			justify-content:center;
      color:#000;
    }

.text-1{
      color: white;
      position: absolute;
      animation-name: forplay;
      animation-duration: 5s;
      margin-bottom:1em;
      animation: text-1 .5s infinite alternate ;
      transition: all .5s;
      font-size:2.5em;
      text-shadow:0px 2.5px 1px #666a;
      font-family: 'Gaegu', cursive;
    }
    @keyframes text-1{
      from{transform: rotate(5deg);}
      to{transform: rotate(-5deg);}
    }
    .text-box{
      height:100px;
      display: flex;
			align-items:center;
			justify-content:center;
    }

.footer-bar {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 60px;
      background:linear-gradient(#fc9d00, #ff6c00);
      color: white;
      display: flex;
      align-items:center;
      justify-content:center;
    }
    /*.frame{
          border-radius: 25px;
          padding: 10px;
          width: 200px;
          height: 290px;
          background: white;
          margin-right:1em;
          box-shadow:0px 7px 0px #0232;
          font-family: 'Itim', cursive;
    }
    .frame:hover{
      transform:rotate(-5deg);
    }*/

.flip-card-inner {
      position: relative;
      width: 200px;
      height: 300px;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg) scale(1.2);
      box-shadow:0px 0px 30px #fffa;
      border-radius: 20px;
    }
    .flip-card-front {
      background:linear-gradient(#DDF8F4 , #eefbf2, #fff);
      color: black;
      box-shadow:0px 7px 0px #ff6c00, 0px 14px 0px #0232;
      position: absolute;
      width: 200px;
      height: 300px;
      border-radius: 20px;
      overflow:hidden;
      border: 1px solid #000a;
      backface-visibility:hidden;
    }
        
    .flip-card-back {
      background-color: white;
      color: black;
      transform: rotateY(180deg);
      position: absolute;
      width: 200px;
      height: 300px;
      border-radius: 20px;
      overflow:hidden;
      border: 1px solid #000a;
    }

.card-pic{
      width: 70%;
      overflow:hidden;
      border-radius: 50%;
      transition:all .3s;
      border: 3px solid #FF9441;
      box-shadow: 0 0 0 2px #fff, 0 0 0 5px #81dd6d;
    }

.card-back{
      width:200px;
      height: auto;
      overflow:hidden;
      border-radius: 20px;
      transition:all .3s;
    }

.flex-box{
      display: flex;
      box-sizing: border-box;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 60px;
    }
    .item{
      display: block;
      box-sizing: border-box;
      padding-left: 30px;
      padding-right: 30px;
      margin-bottom: 70px;
    }
    p {
      margin-bottom:.6em;
      margin-top:.5em;
    }

</style>
</head>

<body class="gradient-bg">
		<div class="title-bar">
			<div class="title">
				<div class="circle">
          <img width=35px src="https://www.img.in.th/images/12d19daa109e148050600b116cab71ca.png" border="0">
        </div>
        <div class="circle">
          <img width=40px src="https://www.img.in.th/images/90356c74c508ba8d942b8c26e0dae268.png"  border="0">
        </div>
        	<div class="circle">
          <img width=33px src="https://www.img.in.th/images/bd3ea59dd663b698ce94bbaa20dc8e3f.png" border="0">
        </div>
        <div class="title-text">
          <div class="title-text-slide">
            <marquee behavior="scroll" direction="left">ไร่ขิงพี่เหน่ง น้องรักพี่เหน่งนัมเบอร์ 1 sectionB จงเจริญ ไร่ขิงพี่เหน่ง น้องรักพี่เหน่งนัมเบอร์ 1 sectionB จงเจริญ ไร่ขิงพี่เหน่ง น้องรักพี่เหน่งนัมเบอร์ 1 sectionB จงเจริญ ไร่ขิงพี่เหน่ง น้องรักพี่เหน่งนัมเบอร์ 1 sectionB จงเจริญ</marquee>
          </div>
        </div>
			</div>
		</div>
    <center>
    <div class="text-box">
      <div class="text-1">
        ✨ Welcome to RaiKhing ✨
      </div>
    </div>
    <div class="flex-box">
        <div class="item">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <p>🥦</p>
                        <img src="https://cdn.discordapp.com/attachments/932852565803143169/933647646185390140/1.png" class="card-pic">
                        <div>
                          <h1>ชื่อเล่น<h1

</div>
                    </div>
                    <div class="flip-card-back" >
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654782869110834/pneng1.png" class="card-back">
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <p>🧅</p>
                        <img src="https://cdn.discordapp.com/attachments/932852565803143169/933647648718716978/8.png" class="card-pic">
                    </div>
                    <div class="flip-card-back" >
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654783124983808/pneng2.png" class="card-back">
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <p>🌽</p>
                        <img src="https://cdn.discordapp.com/attachments/932852565803143169/933647647301058560/4.png" class="card-pic">
                    </div>
                    <div class="flip-card-back" >
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654783670247474/pneng3.png" class="card-back">
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <p>🌶</p>
                        <img src="https://cdn.discordapp.com/attachments/932852565803143169/933647648081207356/6.png" class="card-pic">
                    </div>
                    <div class="flip-card-back" >
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654783951245352/pneng4.png" class="card-back">
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <p>🫑</p>
                        <img src="https://cdn.discordapp.com/attachments/932852565803143169/933647648475463710/7.png" class="card-pic">
                    </div>
                    <div class="flip-card-back" >
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654784219689010/pneng5.png" class="card-back">
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <p>🍠</p>
                        <img src="https://cdn.discordapp.com/attachments/932852565803143169/933647647712083998/5.png" class="card-pic">
                    </div>
                    <div class="flip-card-back" >
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654785134067773/pneng8.png" class="card-back">
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <p>🍅</p>
                        <img src="https://cdn.discordapp.com/attachments/932852565803143169/933647646944550932/3.png" class="card-pic">
                    </div>
                    <div class="flip-card-back" >
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654784819482694/pneng7.png" class="card-back">
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <p>🥒</p>
                        <img src="https://cdn.discordapp.com/attachments/932852565803143169/933647646558670878/2.png" class="card-pic">
                    </div>
                    <div class="flip-card-back" >
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654784546848828/pneng6.png" class="card-back">
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="flip-card">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <p>🥕</p>
                        <img src="https://cdn.discordapp.com/attachments/855498475437555733/933689335612600320/9_2.png" class="card-pic">
                    </div>
                    <div class="flip-card-back" >
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654784219689010/pneng5.png" class="card-back">
                    </div>
                </div>
            </div>
        </div>
    </div>
    </center>
</body>

</html>