เหลือเปลื่ยน background ทำไม่เป็นอะ (Copy 11673) (Branch 11704) (Copy 11729) (Branch 11733) (Copy 11840)

เหลือเปลื่ยน background ทำไม่เป็นอะ (Copy 11673) (..

✨ PONGSIRI SUWANNASILP

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qe</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@500&display=swap');
        * {
            margin: 0;
            padding: 0;
        }
        .pic {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            position: relative;
            margin-top: 250px;
            max-width: 700px;
            transform: skewY(-10deg);
        }
        .container .nametag {
            margin-left: 100px;
            position: relative;
            height: 180px;
            width: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-origin: bottom;
            transform: skewX(45deg);
            border: 5px solid black;
            font-size: 1em;
            font-family: 'Source Serif 4', sans-serif;
            font-weight: 1000;
        }
        .container .nametag .tryhover {
            transition: 1s;
            text-transform: uppercase;
        }
        .container .nametag:hover .tryhover:nth-child(1) {
            transform: translate(150px, -150px);
            border: 5px solid black;
            height: 180px;
            width: 400px;
            margin-bottom: 150px;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

.container .nametag:hover .tryhover:nth-child(2) {
            transform: translate(75px, -75px);
            border: 3.5px solid black;
            margin-bottom: 75px;
            height: 180px;
            width: 400px;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

h2 {
            position: relative;
            font-size: 3.5em;
            font-family: 'Mochiy Pop P One', sans-serif;
        }

.contact {
            transform-origin: top;
            transform: skewX(45deg);
        }

.ppp {
            width: 500px;
            font-size: 1.6em;
            font-family: 'Mochiy Pop P One', sans-serif;
            font-family: 'Mitr', sans-serif;
        }

.container .contact .button {
            transform-origin: top;
            background: transparent;
            display: inline-block;
            transform: skewX(-45deg);
            position: relative;
            margin-top: 10px;
            padding: 10px 30px;
            border: 2px solid black;
            text-decoration: none;
            letter-spacing: 2px;
            font-size: 1em;
            cursor: pointer;
        }
        
        .close {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
        }
        .content{
            background-position: center;
            background-size: cover;
            width: 400px;
            height: 480px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            border-radius: 10px;
        }
        .main.blur{
            filter: blur(15px);
        }
        .popup{
            display: none;
        }
        .popup1.open,.popup2.open,.popup3.open,.popup4.open,.popup5.open,.popup6.open,.popup7.open,.popup8.open,.popup9.open,.popup10.open,.popup11.open,.popup12.open,.popup13.open{
            display: block;
        }
        .content1{
            background-image: url('https://cdn.discordapp.com/attachments/861974571753799700/939010373292539995/IMG_0353.png');
        }
        .content2{
            background-image: url('https://cdn.discordapp.com/attachments/932854342938157106/938784310390050866/IMG_0605.jpg');
        }
        .content3{
            background-image: url('https://cdn.discordapp.com/attachments/932854342938157106/938728819412590632/165571263_2936078013385429_2815196158344099416_n.jpg');
        }
        .content4{
            background-image: url('https://cdn.discordapp.com/attachments/932854342938157106/938448366935900220/IMG_5722.png');
        }
        .content5{
            background-image: url('https://cdn.discordapp.com/attachments/932854342938157106/938447531162079272/131996620_2135999193204042_7612105911633343476_n.png');
        }
        .content6{
            background-image: url('https://cdn.discordapp.com/attachments/932854342938157106/938782748288614491/image0.jpg');
        }
        .content7{
            background-image: url('https://cdn.discordapp.com/attachments/861974571753799700/939010277230391336/IMG_20220203_192843.png');
        }
        .content8{
            background-image: url('https://cdn.discordapp.com/attachments/861974571753799700/939014916365508638/103747E7-84D2-498F-960A-9089A0B8DF0E.jpg');
        }
        .content9{
            background-image: url('https://cdn.discordapp.com/attachments/861974571753799700/939010404615602236/image0.png');
        }
        .content10{
            background-image: url('https://cdn.discordapp.com/attachments/861974571753799700/939010342657343528/50EECEF5-7F53-46F1-9441-E13692A1867B.png');
        }
        .content11{
            background-image: url('https://cdn.discordapp.com/attachments/872799055682621480/938729833096155156/Q_252021_210206_16.jpg');
        }
        .content12{
            background-image: url('https://cdn.discordapp.com/attachments/939030354214404126/939030431557386240/E671D634-00BB-422E-8E5B-8B0F8B0C74D4.jpg');
        }
        .content13{
            background-image: url('https://cdn.discordapp.com/attachments/932854342938157106/939074984293310484/IMG_2909.png');
        }
    </style>

</head>

<body>
    <div class="popup popup1">
        <div class="close" onclick="hidePopup1()"></div>
        <div class="content content1"></div>
    </div>
    <div class="popup popup2">
        <div class="close" onclick="hidePopup2()"></div>
        <div class="content content2"></div>
    </div>
    <div class="popup popup3">
        <div class="close" onclick="hidePopup3()"></div>
        <div class="content content3"></div>
    </div>
    <div class="popup popup4">
        <div class="close" onclick="hidePopup4()"></div>
        <div class="content content4"></div>
    </div>
    <div class="popup popup5">
        <div class="close" onclick="hidePopup5()"></div>
        <div class="content content5"></div>
    </div>
    <div class="popup popup6">
        <div class="close" onclick="hidePopup6()"></div>
        <div class="content content6"></div>
    </div>
    <div class="popup popup7">
        <div class="close" onclick="hidePopup7()"></div>
        <div class="content content7"></div>
    </div>
    <div class="popup popup8">
        <div class="close" onclick="hidePopup8()"></div>
        <div class="content content8"></div>
    </div>
    <div class="popup popup9">
        <div class="close" onclick="hidePopup9()"></div>
        <div class="content content9"></div>
    </div>
    <div class="popup popup10">
        <div class="close" onclick="hidePopup10()"></div>
        <div class="content content10"></div>
    </div>
    <div class="popup popup11">
        <div class="close" onclick="hidePopup11()"></div>
        <div class="content content11"></div>
    </div>
    <div class="popup popup12">
        <div class="close" onclick="hidePopup12()"></div>
        <div class="content content12"></div>
    </div>
    <div class="popup popup13">
        <div class="close" onclick="hidePopup13()"></div>
        <div class="content content13"></div>
    </div>
    <div class="main">
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070231</a>
                    <a class='tryhover' style="margin-right: 15px;">WIRANYUPA</a>
                    <a class='tryhover'>PETCH-IN</a>
                </div>
                <h2>NIEW</h2>
                <div class='contact'>
                    <p class='ppp'>ขอโทษที่นอนดึก เลยตื่นมารักเธอในวันที่สายเกินไป</p>
                    <div class='button' onclick="showPopup1()">click here</div>
                </div>
            </div>
        </div>
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070232</a>
                    <a class='tryhover' style="margin-right: 15px;">WIWAT</a>
                    <a class='tryhover'>LIANGKOBKIT</a>
                </div>
                <h2>WIN</h2>
                <div class='contact'>
                    <p class='ppp'>สวยงามเเต่ไม่เติบโต.</p>
                    <div class='button' onclick="showPopup2()">click here</div>
                </div>
            </div>
        </div>
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070193</a>
                    <a class='tryhover' style="margin-right: 15px;">Pongsiri</a>
                    <a class='tryhover'>Suwannasilp</a>
                </div>
                <h2>PALM</h2>
                <div class='contact'>
                    <p class='ppp'>Don’t give up on your dreams. Keep sleeping.</p>
                    <div class='button' onclick="showPopup3()">click here</div>
                </div>
            </div>
        </div>
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070255</a>
                    <a class='tryhover' style="margin-right: 15px;">Anthicha</a>
                    <a class='tryhover'>Prapasrikavin</a>
                </div>
                <h2>INGFAH</h2>
                <div class='contact'>
                    <p class='ppp'>แรกๆคิมิโนะโต๊ะ หลังๆใจผมสลายฮะมุง</p>
                    <div class='button' onclick="showPopup4()">click here</div>
                </div>
            </div>
        </div>
    
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070195</a>
                    <a class='tryhover' style="margin-right: 15px;">Pornpinit</a>
                    <a class='tryhover'>Nongna</a>
                </div>
                <h2>MACK</h2>
                <div class='contact'>
                    <p class='ppp'>เพราะรักมันทำร้ายเลยย้ายมาทำรถ เพราะรักมันรันทดเลยทำรถประชดรัก</p>
                    <div class='button' onclick="showPopup5()">click here</div>
                </div>
            </div>
        </div>
    
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070207</a>
                    <a class='tryhover' style="margin-right: 15px;">Pakin</a>
                    <a class='tryhover'>Kaophuthai</a>
                </div>
                <h2>TA</h2>
                <div class='contact'>
                    <p class='ppp'>หล่อเท่สมาร์ทปราดเปรียวเสียอย่างเดียวเยี่ยวม่วง</p>
                    <div class='button' onclick="showPopup6()">click here</div>
                </div>
            </div>
        </div>
    
    
    
    
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070189</a>
                    <a class='tryhover' style="margin-right: 15px;">Punnawich</a>
                    <a class='tryhover'>Sittisue</a>
                </div>
                <h2>PLANKTON</h2>
                <div class='contact'>
                    <p class='ppp'>อยากชูนิ้วกลางให้ทุกเรื่อง แต่ทำได้แค่ชูมือขึ้นแล้วหมุนๆชูมือขึ้นโบกไปมา กางแขนขึ้นและลง
                    </p>
                    <div class='button' onclick="showPopup7()">click here</div>
                </div>
            </div>
        </div>
    
    
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070252</a>
                    <a class='tryhover' style="margin-right: 15px;">Aphisara</a>
                    <a class='tryhover'>Sonthi</a>
                </div>
                <h2>NAMNGERN</h2>
                <div class='contact'>
                    <p class='ppp'>ใจเราไม่ดำหรอก ขอบตาต่างหากที่ดำ</p>
                    <div class='button' onclick="showPopup8()">click here</div>
                </div>
            </div>
        </div>
    
    
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070233</a>
                    <a class='tryhover' style="margin-right: 15px;">Weerawit</a>
                    <a class='tryhover'>Monlao</a>
                </div>
                <h2>PHUM</h2>
                <div class='contact'>
                    <p class='ppp'>ไม่หล่อให้สาวเหลียวแต่กินเตี๋ยวให้สาวเลี้ยง</p>
                    <div class='button' onclick="showPopup9()">click here</div>
                </div>
            </div>
        </div>
    
    
    
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070214</a>
                    <a class='tryhover' style="margin-right: 15px;">Metanuch</a>
                    <a class='tryhover'>Boonthai</a>
                </div>
                <h2>PRO</h2>
                <div class='contact'>
                    <p class='ppp'>ปากไม่แดงไม่มีแรงเรียน</p>
                    <div class='button' onclick="showPopup10()">click here</div>
                </div>
            </div>
        </div>
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070212</a>
                    <a class='tryhover' style="margin-right: 15px;">Phuri</a>
                    <a class='tryhover'>Siripool</a>
                </div>
                <h2>Q</h2>
                <div class='contact'>
                    <p class='ppp'>คำพูดต้มยำการกระทำต้มจืด</p>
                    <div class='button' onclick="showPopup11()">click here</div>
                </div>
            </div>
        </div>
    
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070240</a>
                    <a class='tryhover' style="margin-right: 15px;">Suphanat</a>
                    <a class='tryhover'>Anumat</a>
                </div>
                <h2>GET</h2>
                <div class='contact'>
                    <p class='ppp'>It just a bad day not a bad life</p>
                    <div class='button' onclick="showPopup12()">click here</div>
                </div>
            </div>
        </div>
    
    
    
    
        <div class='pic' style="margin-bottom:20px;">
            <div class='container'>
                <div class='nametag'>
                    <a class='tryhover' style="margin-right: 15px;">64070186</a>
                    <a class='tryhover' style="margin-right: 15px;">Piya</a>
                    <a class='tryhover'>Chaiyanit</a>
                </div>
                <h2>SUNNY</h2>
                <div class='contact'>
                    <p class='ppp'>ไม่มีสติ แต่มีสะตัง</p>
                    <div class='button' onclick="showPopup13()">click here</div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const popup1 = document.querySelector('.popup1'),
        popup2 = document.querySelector('.popup2'),
        popup3 = document.querySelector('.popup3'),
        popup4 = document.querySelector('.popup4'),
        popup5 = document.querySelector('.popup5'),
        popup6 = document.querySelector('.popup6'),
        popup7 = document.querySelector('.popup7'),
        popup8 = document.querySelector('.popup8'),
        popup9 = document.querySelector('.popup9'),
        popup10 = document.querySelector('.popup10'),
        popup11 = document.querySelector('.popup11'),
        popup12 = document.querySelector('.popup12'),
        popup13 = document.querySelector('.popup13'),
        blur = document.querySelector('.main')
        function showPopup1() {
            popup1.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup1() {
            popup1.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup2() {
            popup2.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup2() {
            popup2.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup3() {
            popup3.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup3() {
            popup3.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup4() {
            popup4.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup4() {
            popup4.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup5() {
            popup5.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup5() {
            popup5.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup6() {
            popup6.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup6() {
            popup6.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup7() {
            popup7.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup7() {
            popup7.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup8() {
            popup8.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup8() {
            popup8.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup9() {
            popup9.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup9() {
            popup9.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup10() {
            popup10.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup10() {
            popup10.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup11() {
            popup11.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup11() {
            popup11.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup12() {
            popup12.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup12() {
            popup12.classList.remove('open');
            blur.classList.remove('blur');
        }
        function showPopup13() {
            popup13.classList.add('open');
            blur.classList.add('blur');
        }
        function hidePopup13() {
            popup13.classList.remove('open');
            blur.classList.remove('blur');
        }
    </script>
</body>

</html>