<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Proposal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {background:#ffd6e8; display:flex; flex-direction:column; justify-content:center; align-items:center; height:100vh; font-family:sans-serif; text-align:center;}
button {margin:10px; padding:15px 25px; font-size:22px; border:none; border-radius:10px; cursor:pointer;}
#yes {background:#ff85c0;}
#no {background:#bbb;}
#effects {font-size:50px; display:none; margin-top:20px;}
</style>
</head>
<body>
<h1 style="font-size:40px;">WILL YOU BE MY GIRLFRIEND?</h1>
<button id="yes">YES</button>
<button id="no">NO</button>
<div id="effects">ππΈππ¦πβ¨</div>
<script>
document.getElementById("yes").onclick = function(){
document.getElementById("effects").style.display="block";
document.querySelector("h1").innerText = "YAAAY! π";
};
document.getElementById("no").onclick = function(){
document.querySelector("h1").innerText = "Oh... π";
};
</script>
</body>
</html>