QE1(64070227) (Copy 12679)

✨ Wiwat Liangkobkit

<!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>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap" rel="stylesheet">

.party{
        position: absolute;
        top: -130px;
        right:300px;
      }

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

body {
            height: 100vh;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: sans-serif;
            background-color: #3B4049;
        }

.wrapper {
            height: 200px;
            width: 300px;
            background-color: #3760C9;
            position: relative;
            display: flex;
            justify-content: center;
            z-index: 0;
        }

.lid {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            border-right: 150px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 150px solid transparent;
            transform-origin: top;
            transition: transform 0.25s linear;
        }

/* Lid when closed */
        .lid.one {
            border-top: 100px solid #658ced;
            transform: rotateX(0deg);
            z-index: 3;
            transition-delay: 0.75s;
        }

/* Lid when opened */
        .lid.two {
            border-top: 100px solid #3760C9;
            transform: rotateX(90deg);
            z-index: 1;
            transition-delay: 0.5s;
        }

.envelope {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            border-top: 100px solid transparent;
            border-right: 150px solid #C4DFF0;
            border-bottom: 100px solid #C4DFF0;
            border-left: 150px solid #a4d4f2;
            z-index: 3;
        }

.letter {
            position: absolute;
            top: 0;
            width: 80%;
            height: 80%;
            background-color: white;
            border-radius: 15px;
            z-index: 2;
            transition: 0.5s;
        }

.letter p {
            text-align: center;
            font-size: 30px;
            margin-top: 30px;
            color: #3B4049;
        }

/* .wrapper:hover .letter {
            transform: translateY(-50px);
            transition-delay: 0.5s;
        } */
    </style>
    <script async src='/cdn-cgi/bm/cv/669835187/api.js'></script>
</head>

<body>

</div>

<center>
                <button onclick="biglecture();"
                    style="padding: 20px; background-color: transparent; border: none; font-family: 'Kanit', sans-serif; font-size: 30px; color: #3760C9"
                    id="few4">Click Here !!</button>
            </center>
            <button onclick="biglecture();" style="display: none" id="few5">Click Here !!</button>

</div>
    </div>
</div>
    <script>
        function clicklecture() {
            document.getElementById('few1').style = 'transform: rotateX(90deg); transition-delay: 0s;'
            document.getElementById('few2').style = 'transform: rotateX(180deg); transition-delay: 0s;'
            document.getElementById('few3').style = 'transform: translateY(-50px); transition-delay: 0.5s;'
            console.log('few2');
        }

function biglecture() {
            document.getElementById('few3').style = 'width: 100vh; height: 50vh; transform: translateY(-160px); z-index: 10000; background-image: url("https://cdn.discordapp.com/attachments/932854342938157106/941342248421957672/04-01-10.png"); background-size: cover;'
            document.getElementById('few4').style = 'display: none;'
            document.getElementById('few5').style = 'display: block;'
            document.getElementById('few123').style = 'display: block;'
            faceour();
        }

function faceour() {
            const data = [
                { name: 'winface', img: 'https://cdn.discordapp.com/attachments/938456699885473803/941730245759877140/3017ecdfbdc48c96.png',width:'59px', top: '207px', right: '481px' },
                { name: 'sunnyface', img: 'https://media.discordapp.net/attachments/942048300301967420/942049638045859870/IMG_2898-removebg-preview.png', width: '61px', top: '205px', right: '50px' },
                { name: 'kiwface', img: 'https://cdn.discordapp.com/attachments/942048300301967420/942049752441323591/b260748a81455711.png',width:'60px', top: '122px', right: '175px' },
                { name: 'zenface', img: 'https://cdn.discordapp.com/attachments/942048300301967420/942049752231604274/5451f81068392673.png',width:'64px', top: '221px', right: '638px' },
                { name: 'plamface', img: 'https://cdn.discordapp.com/attachments/942048300301967420/942049639736176700/61294e8af225e6dd.png', width:'88px', top: '190px', right: '300px' },
                { name: 'pimface', img: 'https://cdn.discordapp.com/attachments/942048300301967420/942049639203483648/sspim.png',width:'101px', top: '150px', right: '888px' },
                { name: 'proface', img: 'https://cdn.discordapp.com/attachments/942048300301967420/942049751669538826/0738ec8c692203a5.png',width:'88px', top: '105px', right: '333px' },
                { name: 'somoface', img: 'https://cdn.discordapp.com/attachments/942048300301967420/942049638654042182/o.png',width:'88px', top: '117px', right: '761px' },
                { name: 'planktonface', img: 'https://cdn.discordapp.com/attachments/942048300301967420/942049639505469490/1604a60a3539dbcd.png',width:'62px', top: '208px', right: '790px' },
                { name: 'namngernface', img: 'https://cdn.discordapp.com/attachments/881607228304531517/942052544010674236/IMG_2912-removebg-preview.png',width:'88px', top: '163px', right: '214px' },
                { name: 'ingfahface', img: 'https://cdn.discordapp.com/attachments/942048300301967420/942049638335258624/b656c95e06a7c8b6.png',width:'63px', top: '178px', right: '634px' },
                { name: 'niewface', img: 'https://cdn.discordapp.com/attachments/942048300301967420/942049751942172762/bfc208df8d6f51db.png',width: '88px', top: '180px', right: '476px' },
                { name: 'getface', img: 'https://cdn.discordapp.com/attachments/881607228304531517/942054460035833886/6928DAAD-A466-41DD-B5BC-DF9565A80B5C.png',width:'59px', top: '257px', right: '193px' },
                { name: 'phoomface', img: 'https://media.discordapp.net/attachments/942048300301967420/942049752676171836/96075041-F82A-4DDE-9FB7-EE9ED74321AB.png',width:'64px', top: '256px', right: '323px' },
            ];

for (let i = 0; i <= data.length; i++) {
                document.getElementById("few123").innerHTML += ` 
                <img namefew="${data[i]["name"]}" style="position: absolute; width: ${data[i]["width"]}; z-index: 10; top: ${data[i]["top"]}; right: ${data[i]["right"]};" src="${data[i]['img']}" alt="FewZa007" >`;
            }
        }

</script>

</html>