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

เหลือเปลื่ยน 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>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Prompt:wght@400;500&family=Redressed&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Prompt:wght@400;500&family=Satisfy&display=swap');

* {
            padding: 0;
            margin: 0;
            text-decoration: none;
            box-sizing: border-box;
            font-family: 'Akaya Telivigala', cursive;
            color: #752140;
        }

:root {
            --pad: 20;
            --color: 16.5;
            --size: 25;
            --space: 1;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
        }

.text {
            letter-spacing: calc(var(--space) * 1px);
            width: 300px;
            background-color: hsl(calc(var(--color) * 20), 78%, 60%);
            padding: calc(var(--pad) * 2px);
            font-size: calc(var(--size) * 1px);
            text-align: center;
            border-radius: 15%;
            box-shadow: 10px 10px 10px hsla(calc(var(--color) * 20), 100%, 40%, .5),
                -10px -10px 10px hsla(calc(var(--color) * 20), 100%, 40%, .5),
                -10px 10px 10px hsla(calc(var(--color) * 20), 100%, 40%, .5),
                10px -10px 10px hsla(calc(var(--color) * 20), 100%, 40%, .5)
        }

nav {
            position: fixed;
            display: flex;
            padding: 20px;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #dc8b9d;
            z-index: 2;
        }

.bt {
            display: flex;
            flex-direction: column;
            align-items: center;
            top: 20px;
            font-size: 20px;
            right: 20px;
        }

.logo {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            font-size: 24px;
            font-weight: 700;
            font-family: 'Satisfy', cursive;
            background: #f8e2eb;
            border-radius: 10px;
        }

.menu {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            width: 100%;

}

input {
            -webkit-appearance: none;
            height: 10px;
            width: 100%;
            margin-top: 3px;
            background-color: #faccde;
            outline: none;
            border-radius: 15px;
        }

input::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 12px;
            width: 12px;
            border-radius: 1px;
            transform: rotate(45deg);
            background-color: #e21868;
            position: relative;
            border: 2px solid #fff;
        }
    </style>
</head>

<body>
    <nav>
        <div class="logo">
            Ingfah love palm
        </div>
        <div class="menu">
            <div class="bt color">
                <p>Change color</p>
                <input type="range" min="10" max="30" step="1" value="20" id="color">
            </div>
            <div class="bt pad">
                <p>Change padding</p>
                <input type="range" min="10" max="30" step="1" value="20" id="pad">
            </div>
            <div class="bt size">
                <p>Change font size</p>
                <input type="range" min="10" max="20" step="1" value="15" id="size">
            </div>
            <div class="bt space">
                <p>Change space</p>
                <input type="range" min="0" max="2" step=".1" value="1" id="space">
            </div>
        </div>
    </nav>
    <div class="text">Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm
        Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm Ingfah Palm
        Ingfah Palm</div>
    <script>
        const lovepalm = document.querySelector(":root"),
            lovepalmmakmak = document.querySelector("#pad"),
            lovepalmmakmakjub = document.querySelector("#color"),
            lovepalmtisuddd = document.querySelector("#size"),
            lovepalmtisudnailokk = document.querySelector("#space")
        lovepalmmakmak.addEventListener("input", e => {
            lovepalm.style.setProperty("--pad", e.target.value)
        })
        lovepalmmakmakjub.addEventListener("input", e => {
            lovepalm.style.setProperty("--color", e.target.value)
        })
        lovepalmtisuddd.addEventListener("input", e => {
            lovepalm.style.setProperty("--size", e.target.value)
        })
        lovepalmtisudnailokk.addEventListener("input", e => {
            lovepalm.style.setProperty("--space", e.target.value)
        })
    </script>
</body>

</html>