Giter Club home page Giter Club logo

cute-proposal-idea's Introduction

# cute-proposal-idea
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>message for you</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: whitesmoke;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }

        .gif {
            height: 100%;
            width: 100%;
        }

        h2 {
            text-align: center;
            font-size: 1.5em;
            color: #e94d58;
            margin: 15px 0;
        }

        .btn-group {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }

        button {
            position: absolute;
            width: 150px;
            height: inherit;
            color: white;
            font-size: 1.2em;
            border-radius: 30px;
            outline: none;
            cursor: pointer;
            box-shadow: 0 2px 4px gray;
            border: 2px solid #e94d58;
            font-size: 1.2em;
        }

        button:nth-child(1) {
            margin-left: -200px;
            background: #e94d58;
        }

        button:nth-child(2) {
            margin-right: -200px;
            background: white;
            color: #e94d58;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h2 class="question">2024 boyfriend?</h2>
        <img class="gif" alt="gif" src="https://media.giphy.com/media/FTGah7Mx3ss04PcasF/giphy.gif"/>
        <div class="btn-group">
            <button class="yes-btn">Yes</button>
            <button class="no-btn">No</button>
        </div>
    </div>
    <script>
        const question = document.querySelector(".question");
        const gif = document.querySelector(".gif");
        const yesBtn = document.querySelector(".yes-btn");
        const noBtn = document.querySelector(".no-btn");

        yesBtn.addEventListener("click", () => {
          question.innerHTML = "Yay, I love you";
          gif.src = "https://media.giphy.com/media/UMon0fuimoAN9ueUNP/giphy.gif";
        });

        noBtn.addEventListener("mouseover", () => {
          const noBtnRect = noBtn.getBoundingClientRect();
          const maxX = window.innerWidth - noBtnRect.width;
          const maxY = window.innerHeight - noBtnRect.height;

          const randomX = Math.floor(Math.random() * maxX);
          const randomY = Math.floor(Math.random() * maxY);

          noBtn.style.left = randomX + "px";
          noBtn.style.top = randomY + "px";
        });
    </script>
</body>
</html>

cute-proposal-idea's People

Contributors

annfelicity avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.