chent61.github.io/index.html at master · timoth-chen/chent61.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Hi Hi</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Big background stickers (LOCAL files) -->
  <div class="bg" aria-hidden="true">
    <img class="bg-img" style="--x:-8vw; --y:-10vh; --r:-12deg; --s:1.08; --d:6.8s"
      src="Labubu.png" alt="Labubu">
    <img class="bg-img" style="--x:calc(100vw - 38vw); --y:-8vh; --r:12deg; --s:1.03; --d:7.4s"
      src="Twinkle.png" alt="Twinkle Twinkle">
    <img class="bg-img" style="--x:-10vw; --y:calc(100vh - 52vh); --r:10deg; --s:1.12; --d:7.0s"
      src="Skullpanda.png" alt="Skullpanda">
    <img class="bg-img" style="--x:calc(100vw - 40vw); --y:calc(100vh - 52vh); --r:-10deg; --s:1.12; --d:7.6s"
      src="Hirono.png" alt="Hirono">
  </div>

  <!-- Confetti layer -->
  <div id="confetti" class="confetti" aria-hidden="true"></div>

  <!-- Screen 1 -->
  <main id="screen1" class="screen">
    <h1>Will you be my Valentine?</h1>

    <div class="line2">
      Bubble tea + movies + something booked 👀
      <span class="icons">🧋 🎬 💘 ✨</span>
    </div>

    <div class="stage">
      <div id="arena" class="arena">
        <button id="yesBtn" class="btn yes">Yes 💚</button>
        <button id="noBtn" class="btn no">No 💔</button>
      </div>
    </div>
  </main>

  <!-- Screen 2 -->
  <main id="screen2" class="screen hidden">
    <!-- White box content wrapper -->
    <section class="contentBox">
      <!-- Your photo sits in the TOP CORNER of this white box -->
      <img class="cornerPhoto" src="image.jpg" alt="Us" />

      <div class="big">YAYYYYY!!! 🥰💞</div>
      <p class="subtitle">Okay then… it’s official 💌</p>

      <div class="plan">
        <h2>Our mini date plan</h2>
        <ul>
          <li><b>Dinner</b> 🍽️</li>
          <li><b>Movie</b> 🎬</li>
          <li><b>Bubble tea</b> 🧋</li>
          <li><b>Reservation</b>: Saturday, Feb 14 at <b>6:30 PM</b> — for <b>Abrielle</b> 💖</li>
        </ul>
      </div>

      <div class="ctaRow">
        <a class="cta"
           href="https://www.opentable.com/book/view?rid=1317181&confnumber=42057&invitationId=39fbb192-0fa4-4c4a-a0f0-79a84726f25b"
           target="_blank" rel="noopener">
          Accept our reservation 💌
        </a>
      </div>
    </section>
  </main>

  <script src="script.js"></script>
</body>
</html>