HW-WEEK1

✨ SASITHORN SRIJUN

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ไร่ของพี่เหน่ง</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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=Itim&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@700&display=swap');

* {
            margin: 0;
            box-sizing: border-box;
        }

body {
            /* 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;
        }

.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: 70%;
            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;
            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;
            margin:1em 0;
        }

.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;
        }
        .flip-card-inner {
            position: relative;
            width: 200px;
            height: 300px;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        .flip-card-inner:hover{
            transform: rotateY(180deg);
        }

.flip-card-front {
            background: linear-gradient(#DDF8F4, #eefbf2, #fff);
            color: black;
            opcity:0;
            position: absolute;
            width: 200px;
            height: 300px;
            overflow: hidden;
            backface-visibility: hidden;
            padding-right: 10px;
            padding-left: 10px;
        }

.flip-card-back {
            background-color: white;
            color: black;
            transform: rotateY(180deg);
            position: absolute;
            width: 200px;
            height: 300px;
            overflow: hidden;
        }

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

.card-back {
            width: 200px;
            height: auto;
            overflow: hidden;
            transition: all .6s;
        }

.flex-box {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 60px;
        }

.item {
            /* display: block; */
            padding-left: 30px;
            padding-right: 30px;
            margin-bottom: 70px;
        }

p {
            margin-bottom: .6em;
            margin-top: .5em;
        }

.flip-card {
            box-shadow: 0px 7px 0px #ff6c00, 0px 14px 0px #0232, 0px 0px 30px #0232;
            border-radius: 20px;
            overflow: hidden;
            border: 2px solid black;
            backface-visibility: hidden;
            transition: all .6s;
        }
        .flip-card:hover{
          transform:scale(1.1) translatey(-5%);
          transition: all .6s;
        }
        .card-footer{
          height:2rem;
          background-color: #81dd6d;
          display: flex;
          align-items:center;
          justify-content:center;
          font-size:28px;
        }
        .card-footer:hover{
          background-color:#57934b; 
          transition: all .6s;
        }
        a{
          color:white;
          padding-left:7.5px;
          padding-right:7.5px;
          font-size: 0.8em;
        }
        a:hover{
         color:#fffbc0; 
         transition: all .6s;
        }
        h2 {
          margin-top:10px;
        }
        h5{
          margin-top:5px;
          height:32px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .line{
          margin:.5rem 2rem;
          height:2px;
          background:#81dd6d;
        }
          .ta {
          height:250px;
          padding-bottom:40px;
          display:flex;
          align-items:center;
          justify-content:center;
          margin-bottom:1.5em;
        }
        .ta-card {
          box-shadow: 0px 7px 0px #ff6c00, 0px 14px 0px #0232, 0px 0px 30px #0232;
          border-radius: 20px;
          overflow: hidden;
          border: 2px solid black;
          background: linear-gradient(#DDF8F4, #eefbf2, #fff);
          backface-visibility: hidden;
          height:200px;
          width:200px;
          border-radius:20px;
          transition: all .6s;
          color:#000;
        }
        .ta-card:hover{
         width:450px;
         height:200px;
         transition: all .6s;
        }

#text-ta{
          float: right;
          opacity: 0;
          transition: all 1s;
          margin-top:20px;
          height: 200px;
          width:240px;
        }
        .ta-card:hover #text-ta{
          opacity: 1;
          transition: all 3s;
        }
        #pic-ta {
          width: 200px;
          height: 200px;
          overflow: hidden;
        }
        h3{
          display: flex;
          align-items: center;
          justify-content: center;
        }
        h6{
          font-size:3em;
          margin-top:20px;
          display: flex;
          align-items: center;
          justify-content: center;
          animation-name: forplay;
          animation-duration: 5s;
          animation: h6 .5s infinite alternate;
          transition: all .5s;
        }
        @keyframes h6 {
          from {
            transform: rotate(5deg);
          }

to {
            transform: rotate(-5deg);
          }
        }
        .ta-contact{
          height:2em;
          margin-top:5px;
          display: flex;
          align-items:center;
          justify-content:center;
          font-size:35px;
        }
        .ta-contact > a{
          color:black;
        }
        .ta-contact > a:hover{
          color:#8F8D8C;
        }
    </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>

<div class="text-box">
        <div class="text-1">✨ Welcome to RaiKhing ✨</div>
    </div>
    <div class="ta">
      <div class="ta-card">
        <img src="https://cdn.discordapp.com/attachments/880663429600411738/934139403406835733/N1.png" id="pic-ta">
        <div id="text-ta">
            <h3>ผู้จัดการสวนสาขา B</h3>
            <h6>P'Neng 🐶</h6>
            <div class="ta-contact">
                    <a href="https://www.google.com/">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.google.com/" >
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://www.google.com/" >
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://www.google.com/" >
                      <i class="fab fa-github-square"></i>
                    </a>
                </div>
        </div>
      </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>
                          <h2>🌾 เติ้ล 🌾</h2>
                          <div class="line"></div>
                          <h4>วชิรพล กลิ่นเกษร</h4>
                          <h5>ชาวสวน NO.1</h5>
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654783951245352/pneng4.png"
                            class="card-back">
                    </div>
                </div>
                <div class="card-footer">
                    <a href="https://www.facebook.com/wachirapol2545">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.instagram.com/wachirapolklinkasorn/">
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="mailto:wachirapol2545@gmail.com">
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://github.com/wachirapol2002">
                      <i class="fab fa-github-square"></i>
                    </a>
                 </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>
                          <h2>🌾 น้ำแข็ง 🌾</h2>
                          <div class="line"></div>
                          <h4>วสุมดี ช่างสากล</h4>
                          <h5>ถ้าใจเราได้ มันก็ได้้</h5>
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654783124983808/pneng2.png"
                            class="card-back">
                    </div>
                </div>
                <div class="card-footer">
                    <a href="https://www.facebook.com/profile.php?id=100015225915343">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.instagram.com/illcyourice/">
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="mailto:64070100@kmitl.ac.th">
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://github.com/Itschokky">
                      <i class="fab fa-github-square"></i>
                    </a>
                </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>
                          <h2>🌾 ไหม 🌾</h2>
                          <div class="line"></div>
                          <h4>ศศิธร ศรีจันทร์</h4>
                          <h5>กินเนื้อแทนสิ <br>วัวมันกินผักไปให้แล้ว</h5>
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654783670247474/pneng3.png"
                            class="card-back">
                    </div>
                </div>
                <div class="card-footer">
                    <a href="https://www.facebook.com/sasithorn.srijun.mai">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.instagram.com/m.sstsj/">
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="mailto:64070106@kmitl.ac.th">
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://github.com/sasithornmai">
                      <i class="fab fa-github-square"></i>
                    </a>
                </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>
                          <h2>🌾 โช็ค 🌾</h2>
                          <div class="line"></div>
                          <h4>กฤตภาส ดวงครุฑ</h4>
                          <h5>คงจะมีแต่แชมพูเท่านั้นแหละที่เป็นห่วงผม</h5>
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654783951245352/pneng4.png"
                            class="card-back">
                    </div>
                </div>
                <div class="card-footer">
                      <a href="https://www.facebook.com/chokker.krittapas">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.google.com/">
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://www.google.com/">
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://github.com/Itschokky">
                      <i class="fab fa-github-square"></i>
                    </a>
                </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>
                          <h2>🌾 ฟา 🌾</h2>
                          <div class="line"></div>
                          <h4>จักรา นครจันทร์</h4>
                          <h5>youtu.be/dQw4w9WgXcQ</h5>
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654784219689010/pneng5.png"
                            class="card-back">
                    </div>
                </div>
                <div class="card-footer">
                    <a href="https://www.facebook.com/jakra.farza">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.instagram.com/farza03">
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="mailto:64070128@kmitl.ac.th">
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://www.github.com/farza03">
                      <i class="fab fa-github-square"></i>
                    </a>
                </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>
                          <h2>🌾 เมเจอร์์ 🌾</h2>
                          <div class="line"></div>
                          <h4>ชยุตรัฐ ศรีอุ้มสุข</h4>
                          <h5>5 นาที - LOSO【OFFICIAL MV】</h5>
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654785134067773/pneng8.png"
                            class="card-back">
                    </div>
                </div>
                <div class="card-footer">
                    <a href="https://www.facebook.com/JastKherZFB">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.google.com/">
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://www.google.com/">
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://www.google.com/">
                      <i class="fab fa-github-square"></i>
                    </a>
                </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>
                          <h2>🌾 กล้อง 🌾</h2>
                          <div class="line"></div>
                          <h4>ณัฐพล สุขไผ่ตา</h4>
                          <h5>เข้าเรียนทุกคาบ
                            <br>แต่ไม่ทราบอะไรเลย</h5>
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654784819482694/pneng7.png"
                            class="card-back">
                    </div>
                </div>
                <div class="card-footer">
                    <a href="https://www.facebook.com/nattapol.sukpaita.9">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.google.com/">
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://www.google.com/">
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://github.com/Natthaphon144tps://www.google.com/">
                      <i class="fab fa-github-square"></i>
                    </a>
                </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>
                          <h2>🌾 ณัฐ 🌾</h2>
                          <div class="line"></div>
                          <h4>ณัฐ ไทยวัฒนานนท์</h4>
                          <h5>อยากนอนคับ</h5>
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654784546848828/pneng6.png"
                            class="card-back">
                    </div>
                </div>
                <div class="card-footer">
                    <a href="https://www.facebook.com/Nut.Thai.1771">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.instagram.com/nt_twn/">
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="mailto:64070145@kmitl.ac.th">
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://github.com/NutThai">
                      <i class="fab fa-github-square"></i>
                    </a>
                </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>
                          <h2>🌾 ที 🌾</h2>
                          <div class="line"></div>
                          <h4>ธีระภพ เพ็ชรนิล</h4>
                          <h5>ชีวิตก็เหมือนความรัก แต่ถ้าคิดจะพัก คิดถึงคิทแคท</h5>
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <img src="https://cdn.discordapp.com/attachments/932857105000583198/933654784219689010/pneng5.png"
                            class="card-back">
                    </div>
                </div>
                <div class="card-footer">
                    <a href="https://www.facebook.com/teerapop.petch">
                      <i class="fab fa-facebook"></i>
                    </a>
                    <a href="https://www.instagram.com/trpxp.jpg/">
                      <i class="fab fa-instagram"></i>
                    </a>
                    <a href="https://www.google.com/">
                      <i class="fab fa-google-plus-square"></i>
                    </a>
                    <a href="https://github.com/PoligramX">
                      <i class="fab fa-github-square"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>