Ethan-Shauni-/index.html at main · ethanhillman/Ethan-Shauni- · 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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ethan & Shauni ❤️</title>
        <link rel="stylesheet" href="styles.css">
        <!-- warm serif for headings + rounded friendly body font -->
        <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Quicksand:wght@300;400;600&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <h1>Ethan & Shauni ❤️</h1>
        </header>

        <!-- Hero banner to use space under the title and highlight the Anniversary -->
        <div class="hero" role="region" aria-label="Anniversary hero">
          <div class="hero-inner">
            <div class="hero-badge">
              <span class="badge-title">Anniversary</span>
              <span id="heroDate" class="badge-date">Jan 18, 2026</span>
            </div>
            <p class="hero-sub">Two hearts, one journey</p>
          </div>
        </div>

        <!-- Decorative accents (pure CSS SVG backgrounds) -->
        <div class="decor decor-top-left" aria-hidden="true"></div>
        <div class="decor decor-bottom-right" aria-hidden="true"></div>

<main>
    <section id="countdown" aria-live="polite">
      <div id="timer">0d 00:00:00</div>
      <label for="startDate" class="ann-label">Anniversary</label>
      <input id="startDate" type="date" value="2026-01-18" disabled aria-disabled="true">
    </section>

    <section id="about">
      <h2>About us</h2>
      <p>Ethan and Shauni 2 clueless teenagers trying to make their way in this life and they choose to do it together. Now this Love story isn't just sunshine and rainbows we had our plenty of hardships that shaped us into the people we are now. We both are very different but when we are together we are more unique than ever. If you ask us about each other the most your going to get is a smile going to one ear to the other, a bond that can't be explained. The Best of friends and the Best of Lovers... Ethan and Shauni!</p>
    </section>

    <section id="quotes">
      <h2>Quotes</h2>
      <blockquote id="quote">“You saw the parts of me I hide from the world the doubts, the fears, the unfinished pieces and you stayed. You didn’t try to fix me or change me. You just loved me. And that’s everything.”</blockquote>
    </section>

    <section id="gallery" aria-label="Gallery">
      <h2>Memories</h2>
      <div id="photoList" role="list"></div>
    </section>

    <section id="live" aria-label="Live Action">
      <h2>Live Action</h2>
      <div id="videoList" role="list"></div>
    </section>

</main>

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