The Simple Web (Copy 13582)

✨ PAN MTH

<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">
    <style>
        body{
            background-color: #171717;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .box{
            position: relative;
            /* left: calc(100%-80%);
            bottom: calc(100%-70%); */
            background-image: url("https://media.discordapp.net/attachments/929983498108932118/944126216129105940/output-onlinejpgtools.jpg?width=853&height=480");
            background-size: cover;
            width: 1280px;
            height: 720px;
            background-color: white;
            border-radius: 15px;
        }
        #toggle-1{
            position:absolute;
            bottom:3%;
            right:8%;
            background:black;
            padding:.5em;
            border-radius:4px;
            cursor:pointer;
            color:white;
            /* text-shadow: 1px 0px 1px white; */
            font-family: 'Roboto Condensed', sans-serif;
            /* transform: rotateZ(90deg);  */
            border-radius:2px;
            border: 10px solid;
            border-image-slice: 1;
            border-width: 2px;
            border-image-source: linear-gradient(to right, gray, white);
        }
        #toggle-2{
            position:absolute;
            bottom:50%;
            right:50%;
            background:transparent;
            padding:.5em;
            cursor:pointer;
            color:white;
            /* text-shadow: 1px 0px 1px black; */
            font-family: 'Roboto Condensed', sans-serif;
            /* transform: rotateZ(90deg);  */
            border-radius:50px;
            border: 10px solid;
            border-image-slice: 1;
            border-width: 2px;
            border-image-source: linear-gradient(to right, hsl(0, 100%, 50%), hsl(30, 100%, 50%), hsl(60, 100%, 50%), hsl(90, 100%, 50%), hsl(120, 100%, 50%), hsl(150, 100%, 50%), hsl(180, 100%, 50%), hsl(210, 100%, 50%), hsl(240, 100%, 50%), hsl(270, 100%, 50%), hsl(300, 100%, 50%));

/* border-image-source: linear-gradient(to left, hsl(0, 100%, 50%), hsl(30, 100%, 50%), hsl(60, 100%, 50%), hsl(90, 100%, 50%), hsl(120, 100%, 50%), hsl(150, 100%, 50%), hsl(180, 100%, 50%), hsl(210, 100%, 50%), hsl(240, 100%, 50%), hsl(270, 100%, 50%), hsl(300, 100%, 50%)); */
        }
        #song{
          position: absolute;
          top: 40px;
          right: 900px;
          z-index: 30000;
   	    }
        .name{
            color: white;
            position: absolute;
            top:0%;
            right: 2%;
            font-family: 'Roboto Condensed', sans-serif;
        }
    </style>
    <script>
        function light_on(){
            document.querySelector(".box").style.backgroundImage = "url('https://media.discordapp.net/attachments/929983498108932118/944126220075950110/image_2022-02-18_135721.png?width=853&height=480')"
            document.querySelector(".box").style.transition= "background 2s ease-out";
        }
        function light_off(){
            document.querySelector(".box").style.backgroundImage = "url('https://media.discordapp.net/attachments/929983498108932118/944126216129105940/output-onlinejpgtools.jpg?width=853&height=480')"
            document.querySelector(".box").style.transition= "background 2s ease-out";
        }
  
    </script>
</head>
<body>
    <div class="box">
        <div class="name">
            <h1>ILoveUIHateU</h1>
        </div>
        <button id="toggle-2" onclick="light_on()">
            Light On
        </button>
    </div>
</body>
</html>