Week 1 GroupA -TA Getty (Branch 773)

✨ นายภานุพงศ์ เฉลยรัตน์

<html>

<head>
    <title>Let's Start
    </title>
    <style>
        @font-face {
            font-family: "groupd";
            src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-Light.woff2') format('woff2');
            font-weight: 800;
        }
        
        body {
          	cursor: url(https://imgur.com/AcqMkHR.png), auto;
            margin: 2em;
            font-family: sans-serif;
            background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
            background-size: 100% 100%;
            animation: moveGradient 4s alternate infinite;
        }
        
        @keyframes moveGradient {
            50% {
                background-position: 10% 10%;
            }
        }
        
        .namecard {
            width: 50%;
            margin: 0 auto 3rem;
            text-align: center;
            background: white;
            padding: 2em;
            box-shadow: -10px -10px lightblue, 10px 10px violet;
        }
        
        .title {
            color: rgb(145, 106, 160);
        }
        
        .show-group {
            border-radius: 2rem;
            padding: 1rem;
            width: 20vw;
            margin: 0 auto 2rem;
            width: 50%;
            text-align: center;
            background: white;
            box-shadow: -10px -10px lightblue, 10px 10px violet;
        }
        
        p {
            font-family: "groupd";
            font-size: 1.5em;
            position: relative;
            top: 0;
            left: 0;
            transition: 2s;
            animation: MoveUpDown 1s linear infinite;
        }
        
        @keyframes MoveUpDown {
            0%,
            100% {
                top: -5px;
                text-decoration: underline;
            }
            50% {
                top: 5px;
                text-decoration: none;
            }
        }
        
        li {
            list-style: none;
        }
        
        a {
            cursor: url(https://imgur.com/AcqMkHR.png), auto;
            color: red;
            margin: .5rem;
            text-decoration: none;
            position: relative;
            top: 0px;
            left: 0px;
            transition: .5s;
            display: block;
            text-align: center;
            width: 25vw;
            margin: 1rem auto 0;
        }
        
        a:hover {
            cursor: url(https://imgur.com/AcqMkHR.png), auto;
            top: -5px;
            left: 5px;
        }
        
        img {
            width: 8rem;
            height: 8rem;
            margin: 0 auto;
            border-radius: 50%;
            transform: scale(1);
            transition: .5s;
            box-shadow: 10px 10px 30px rgb(182, 182, 182);
        }
        
        img:hover {
            transform: scale(1.2);
        }
        
        i {
            margin-right: 10px;
            font-size: 10px;
            width: 1rem;
            padding: .5rem;
            text-align: center;
            border-radius: 50%;
        }
        
        i#facebook {
            background-color: rgb(52, 133, 255);
            color: white;
        }
        
        i#ig {
            background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
            color: white;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    
    <div class="namecard">
        <h1 class="title" style="margin-bottom: 1.5rem;">
            Team P'Getty Group D
        </h1>
        <div class="show-group">
            <p style="font-size: 3em; margin-bottom: 1rem;">P'GET</p>
            <div class="gradient-border"><img src="https://scontent.fbkk19-1.fna.fbcdn.net/v/t1.0-9/19248149_1073344546142443_524590521684088607_n.jpg?_nc_cat=107&cb=846ca55b-ee17756f&ccb=2&_nc_sid=ad2b24&_nc_eui2=AeGx3zS75N2GEa_b_ImA6xm-MYfy3c5yHwIxh_LdznIfApzw66sG6b5kCatF_hItqwL3VGXGFQUf1nfxmRcyaM5q&_nc_ohc=Aa2zEsOjBHIAX_e3e3e&_nc_oc=AQlzZ1Y9bTc8dTV8H3i-UhZ4r_w9G_bUK1n3ZVivdgovzrttQkY4wRug4cxFPVv_v2A&_nc_ht=scontent.fbkk19-1.fna&oh=6ba14663282c6474b9447a1a32c70ccf&oe=60267760">
            </div>
            <div class="link-group ">
                <li><a href="https://web.facebook.com/narawich.phattaraphan "><i class="fa fa-facebook"
                            id="facebook"></i>FB : Narawich Phattaraphan</a></li>
                <li><a href="https://www.instagram.com/g_getx._/ "><i class="fa fa-instagram" id="ig"></i>IG : IG :
                        g_getx._</a></li>
            </div>
        </div>
    </div>

<div class="card-body ">
        <div class="show-group ">
            <p>เอ็ม พิสิฐไชย</p>
            <img src="https://scontent.fbkk2-3.fna.fbcdn.net/v/t1.0-9/135558998_3528759434016224_5685608112693758907_o.jpg?_nc_cat=111&ccb=2&_nc_sid=09cbfe&_nc_eui2=AeEC1gdK3IgbM9XXKUTy3NP9xl8jkVmkPzXGXyORWaQ_NeWiS7TtHGG2kLiYFK463YSct9j-atKXgBajWX5DiQNu&_nc_ohc=0-eJtOPTxykAX976VXD&_nc_ht=scontent.fbkk2-3.fna&oh=739f4af27aa29492af3bbc923e43fb39&oe=6022FF0E ">
            <div class="link-group ">
                <li><a href="https://www.facebook.com/mctplo.admplo/ "><i class="fa fa-facebook" id="facebook"></i>FB :
                        rueangwatanaphong pisitchai</a></li>
                <li><a href="https://www.instagram.com/pisitchai_m/ "><i class="fa fa-instagram" id="ig"></i>IG :
                        pisitchai_m</a></li>
            </div>
        </div>
        <div class="show-group ">
            <p>ภูฟ้า ภูฟ้า</p>
            <img src="https://bit.ly/2XyXLbh " class=" ">
            <div class="link-group ">
                <li><a href="https://www.facebook.com/phufa.rpsw/ "><i class="fa fa-facebook" id="facebook"></i>FB :
                        Phufa Rujipasawat</a></li>
                <li><a class="ig " href="https://www.instagram.com/phufa_rpsw/ "><i class="fa fa-instagram"
                            id="ig"></i>IG : Phufa_Rujipasawat</a></li>
            </div>
        </div>
        <div class="show-group ">
            <p>พี เมษา</p>
            <img src="https://images-ext-2.discordapp.net/external/xyD-SCXMOcpPpbEywGtO7ZBgVL6r5IS1RIuw6qPZOWw/https/i.imgur.com/aonNr2E.jpg?width=464&height=464 " class=" ">
            <div class="link-group ">
                <li><a href="https://www.facebook.com/mesa.manitsakulwong/ "><i class="fa fa-facebook" \
                            id="facebook"></i>FB : Mesa Manitsakulwong</a></li>
                <li><a class="ig " href="https://www.instagram.com/mesamesamesamesamesa/ "><i class="fa fa-instagram" \
                            id="ig"></i>IG : Mesa Manitsakulwong</a></li>
            </div>
        </div>
        <div class="show-group ">
            <p>ก้อง อธิชาติ</p>
            <img src="https://media.discordapp.net/attachments/798210377618948117/798906458275577886/IMG_20210110_223240_431.jpg?width=832&height=1040 " class=" ">
            <div class="link-group ">
                <li><a href="https://www.facebook.com/profile.php?id=100009491408332 "><i class="fa fa-facebook"
                            id="facebook"></i>FB : athichart chusri</a></li>
                <li><a class="ig " href="https://www.instagram.com/athichartttttt/ "><i class="fa fa-instagram "
                            id="ig"></i>IG : athichartttttt</a></li>
            </div>
        </div>
        <div class="show-group ">
            <p>บูม ภานุพงศ์</p>
            <img src="https://cdn.discordapp.com/attachments/798210377618948117/798892035846438942/70654525_234790257453359_6973341805530054656_n.jpg " class=" ">
            <div class="link-group ">
                <li><a href="https://www.facebook.com/boomza007 "><i class="fa fa-facebook " id="facebook"></i>FB : Lnw
                        Boom</a></li>
                <li><a href="https://www.instagram.com/o0lnwboom0o/ "><i class="fa fa-instagram " id="ig"></i>IG :
                        o0lnwboom0o</a></li>
            </div>
        </div>
        <div class="show-group ">
            <p>เฟรม พสุธา</p>
            <img src="https://cdn.discordapp.com/attachments/798938321014489098/798940275414269952/frame.jpg" class=" ">
            <div class="link-group ">
                <li><a href="https://www.facebook.com/pasuta.chanmanee/"><i class="fa fa-facebook " id="facebook"></i>FB : pasuta.chanmanee</a>
                </li>
                <li><a href="https://www.instagram.com/pasutachanmanee/"><i class="fa fa-instagram" id="ig"></i>IG : pasutachanmanee</a></li>
            </div>
        </div>
        <div class="show-group ">
            <p>คิม ภาสกร</p>
            <img src="https://images-ext-2.discordapp.net/external/DneovdUIfoeqsGNlaQrjWxxrpFM-1ClukUtFdZYKsjI/%3F_nc_cat%3D100%26ccb%3D2%26_nc_sid%3D09cbfe%26_nc_eui2%3DAeFCO4EIDD1flWVe7-s_0CLEZr-_n--Q-pRmv7-f75D6lJJ2r_8xWH5L8oPgDA8iAovAJCwP-di-IQm4QpFSe7zg%26_nc_ohc%3DzTWVaIHTDhEAX8jVF-r%26_nc_oc%3DAQkoaPSJ2sZQHLiddcbVweTtdMh2OmBJaPWI6kgorI68Zs1JeKSpKTGukffbDEM1rOg%26_nc_ht%3Dscontent.fbkk22-1.fna%26oh%3De2a1b6f8a31e865467428ad36b60b76a%26oe%3D602428F9/https/scontent.fbkk22-1.fna.fbcdn.net/v/t1.0-9/49938401_1848151808626689_4250297707681284096_n.jpg?width=460&height=464 "
                class=" ">
            <div class="link-group ">
                <li><a href="https://www.facebook.com/profile.php?id=100002956640662 "><i class="fa fa-facebook "
                            id="facebook"></i>FB : Passakorn
                        Kunpisut</a></li>
                <li><a href="https://www.instagram.com/zeverse.010/ "><i class="fa fa-instagram " id="ig"></i>IG :
                        zeverse.010</a></li>
            </div>
        </div>
        <div class="show-group ">
            <p>ต้นกล้า จักราภัทร</p>
            <img src="https://images-ext-1.discordapp.net/external/uJRVSdEHPUjq7X5BVczM8RXANSLGx5BrGFhCrdyW234/%3F_nc_cat%3D108%26ccb%3D2%26_nc_sid%3D174925%26_nc_eui2%3DAeEIAmPoIVaEnaVR4cIGHVjuuMgvLQrUJVi4yC8tCtQlWNDVENlNf9HUUyatr-i6VQlZzxd1sPO6g6yUY66ahyk_%26_nc_ohc%3DfWA7B2ufT20AX8cP0TV%26_nc_ht%3Dscontent.fbkk22-1.fna%26oh%3Df02b83c2c3251ee331bd762ab5b487cb%26oe%3D6026460B/https/scontent.fbkk22-1.fna.fbcdn.net/v/t31.0-8/17632033_1642951105734555_2079350470996331874_o.jpg?width=696&height=464 "
                class=" ">
            <div class="link-group ">
                <li><a href="https://www.facebook.com/chakraphat.sudjai/ "><i class="fa fa-facebook "
                            id="facebook"></i>FB : chakraphat sudjai</a></li>
                <li><a href="https://www.instagram.com/ttonklaz/ "><i class="fa fa-instagram " id="ig"></i>IG :
                        ttonklaz</a></li>
            </div>
        </div>
        <div class="show-group ">
            <p>ฟิวส์ วริศ</p>
            <img src="https://scontent.fbkk2-8.fna.fbcdn.net/v/t1.0-9/80787184_1463857800437119_4669590754627158016_n.jpg?_nc_cat=100&ccb=2&_nc_sid=174925&_nc_eui2=AeG41-N8m_PM7ifVFmMvCaaiqPguRFB3Nh6o-C5EUHc2HuTjqIragYQWMkI5iW3Or9i4AWE63XVrLvzbg_peEBKd&_nc_ohc=LUOMRXrMKjMAX_paVwr&_nc_ht=scontent.fbkk2-8.fna&oh=a105bd24a004e0aa7e1a70d63031ab41&oe=60253B82 "
                class=" ">
            <div class="link-group ">
                <li><a href="https://www.facebook.com/Warit.Absolute/ "><i class="fa fa-facebook " id="facebook"></i>FB
                        : Warit Amonthanapinyo</a></li>
                <li><a href="https://www.instagram.com/f_warit_2001/ "><i class="fa fa-instagram " id="ig"></i>IG :
                        f_warit_2001</a></li>
            </div>
        </div>
    </div>
</body>

</html>