50 lines
1.8 KiB
HTML
50 lines
1.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>Will you be my Valentine?</title>
|
||
|
|
<link rel="stylesheet" href="main.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="bg" aria-hidden="true"></div>
|
||
|
|
<canvas id="sakura" aria-hidden="true"></canvas>
|
||
|
|
|
||
|
|
<main class="wrap">
|
||
|
|
<section class="card" id="mainCard">
|
||
|
|
<div id="askScreen">
|
||
|
|
<h1 id="title">Will you be my Valentine?</h1>
|
||
|
|
|
||
|
|
<img class="gif" id="gifImg" alt="Cute gif" />
|
||
|
|
|
||
|
|
<div class="btnRow" id="btnRow">
|
||
|
|
<button id="yesBtn" type="button">Yes</button>
|
||
|
|
<button id="noBtn" type="button">No</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="subtitle" id="subtitle"></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="success" id="successScreen">
|
||
|
|
<h2>Yesss! 💗</h2>
|
||
|
|
<p>I knew that you'd be mine!</p>
|
||
|
|
<img class="gif" alt="Celebration gif"
|
||
|
|
src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExOWpxbjdkejJjd3hydzlseTFxc2VvYTg3aDR2MTk3aXhuc3RidG52eiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/6CdI7BikMdZT2jRLF7/giphy.gif" />
|
||
|
|
<div class="hearts" aria-hidden="true">
|
||
|
|
<div class="heart"></div>
|
||
|
|
<div class="heart"></div>
|
||
|
|
<div class="heart"></div>
|
||
|
|
<div class="heart"></div>
|
||
|
|
<div class="heart"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script src="main.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|