Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pompompurin Valentine 💛</title>

<style>
body {
        margin: 0;
            font-family: 'Arial', sans-serif;
                background: linear-gradient(180deg,#ffd1dc,#fff3b0);
                    overflow-x: hidden;
                        text-align: center;
}

.container {
        padding: 20px;
}

h1 {
        font-size: 2rem;
            font-weight: 900;
                color: #5c3b1e;
                    margin-top: 20px;
}

.buttons {
        margin-top: 25px;
}

button {
        padding: 14px 28px;
            border: none;
                border-radius: 25px;
                    font-size: 18px;
                        font-weight: bold;
                            margin: 10px;
                                cursor: pointer;
}

#yesBtn {
        background: #ff8fab;
            color: white;
}

#noBtn {
        background: #ffe066;
            color: #5c3b1e;
                position: absolute;
}

#loveSection {
        display: none;
            margin-top: 30px;
}

#loveSection h2 {
        font-size: 1.8rem;
            color: #d6336c;
}

#letterBox {
        display: none;
            background: white;
                padding: 18px;
                    border-radius: 20px;
                        margin-top: 20px;
                            box-shadow: 0 0 10px rgba(0,0,0,.2);
                                font-size: 16px;
}

.record {
        margin-top: 20px;
            font-size: 40px;
                cursor: pointer;
}

.heart {
        position: fixed;
            font-size: 20px;
                animation: float 6s linear infinite;
}

@keyframes float {
        0% {transform: translateY(100vh);}
            100% {transform: translateY(-10vh);}
}

img {
        width: 220px;
            margin-top: 15px;
}
</style>
</head>

<body>

<div class="
}
}
}
}
}
}
}
}
}
}
}
}
}
}
Editor is loading...