DapperFoxes/index.html at master · emscape/DapperFoxes · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sean & Emily's Wedding</title>
    <meta name="description" content="Welcome to Sean and Emily's wedding website. Join us for our special day!">

    <!-- Open Graph Tags for Social Media Sharing -->
    <meta property="og:title" content="Sean & Emily's Wedding">
    <meta property="og:description" content="Welcome to Sean and Emily's wedding website. Join us for our special day!">
    <meta property="og:image" content="https://www.thedapperfoxes.com/images/kiss.JPG">
    <meta property="og:url" content="https://www.thedapperfoxes.com/">
    <meta property="og:type" content="website">

    <!-- Favicon -->
    <link rel="icon" href="foxes-favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="foxes-favicon.ico" type="image/x-icon">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="container header__container">
            <a href="index.html" class="header__logo">S & E</a>

            <nav class="nav">
                <button class="nav__toggle" aria-label="Toggle navigation">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>

                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="index.html" class="nav__link">Home</a>
                    </li>
                    <li class="nav__item">
                        <a href="poll.html" class="nav__link">Location Poll</a>
                    </li>
                    <li class="nav__item">
                        <a href="photos.html" class="nav__link">Photos</a>
                    </li>
                    <li class="nav__item">
                        <a href="events.html" class="nav__link">Events</a>
                    </li>
                    <li class="nav__item">
                        <a href="rsvp.html" class="nav__link">RSVP</a>
                    </li>
                    <li class="nav__item">
                        <a href="registry.html" class="nav__link">Registry</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <h1 class="hero__title">Sean & Emily</h1>
            <p class="hero__subtitle">We're getting married!</p>
            <a href="poll.html" class="btn btn--primary">Help Us Choose Our Wedding Location</a>
        </div>
    </section>

    <!-- Our Story Section -->
    <section class="section">
        <div class="container">
            <h2 class="section__title">Our Story</h2>
            <div class="story">
                <div class="story__content">
                    <p>Like all modern romances, it began with a pandemic happy hour Zoom and a love for good conversation. 💻🍷</p>
                    <p>Emily was a Minnesota girl at heart, temporarily living out of a suitcase and wondering how life had landed her in an unexpected corner of the country. Originally from the UK, Sean had been rooted in Los Angeles for over a decade, writing books, sipping tea, and somehow making dry wit feel like a warm hug. What started as online hangouts quickly turned into in-person chemistry—and before long, things got wonderfully real. ✈️❤️</p>
                    <div class="story__photos">
                        <div class="story__photo">
                            <img src="images/Wedding Website/PXL_20220130_013300197.jpg" alt="Emily and Sean" class="story__img">
                        </div>
                        <div class="story__photo">
                            <img src="images/Wedding Website/PXL_20230220_195752589.jpg" alt="Emily and Sean together" class="story__img">
                        </div>
                    </div>
                    <p>For the next couple of years, Emily crisscrossed the country for months at a time, balancing airports, work, and knitting needles with only mild turbulence. Eventually, love (and logistics) brought her to LA for good.</p>
                    <p>From the very beginning, Fiona—Sean’s daughter and our in-house matchmaker—seemed to know where this was going. On our very first day hanging out together, she grabbed each of our hands and kept trying to put them together. 👧🏽💞🫱🏼‍🫲🏽 She was right, of course.</p>
                    <div class="story__photos">
                        <div class="story__photo">
                            <img src="images/Wedding Website/6390495A-C527-4A14-8620-BC9B27A47CA9.jpg" alt="Family photo" class="story__img">
                        </div>
                        <div class="story__photo">
                            <img src="images/Wedding Website/IMG_20211010_192019807.jpg" alt="Family celebration" class="story__img">
                        </div>
                    </div>
                    <p>Now, we're writing a new chapter as a family: full of laughter, learning, co-parenting, creativity, and the quiet certainty that we've found home in each other. 🏡✨</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Proposal Story Section -->
    <section class="section">
        <div class="container">
            <h2 class="section__title">💍 She Knew. He Kneeled. Fiona Approved.</h2>

            <div class="story">
                <div class="story__content">
                    <p>Baldwin Hills Scenic Overlook wasn't just a pretty backdrop. 🌄 It was the place where, early in their story, Sean realized something quietly enormous: he didn't just want to keep talking to Emily—he wanted to kiss her. 😘 Later, when she came back to LA as his girlfriend, they returned to that same spot and kissed properly, with all the clarity that comes from being on the same page.</p>

                    <div class="story__photos" style="display: flex; justify-content: center; margin: 2rem auto; text-align: center;">
                        <div class="story__photo" style="max-width: 80%;">
                            <img src="images/kiss.JPG" alt="The kiss at Baldwin Hills Overlook" class="story__img" style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
                        </div>
                    </div>

                    <p>So when they planned to take some family photos there with Fiona, Emily already had a hunch. The box, the setting, the timing—it all lined up. 🗃️🕰️ Sean, to his credit, still gave it his all: one knee, one ring, and one very proud kid standing between them, grinning like the mastermind she is. 👧🏽💍🦊</p>

                    <div class="story__photos" style="display: flex; justify-content: center; margin: 2rem auto; text-align: center;">
                        <div class="story__photo" style="max-width: 80%;">
                            <img src="images/Wedding Website/IMG_4277.JPG" alt="Sean kneeling with Fiona looking on" class="story__img" style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
                        </div>
                    </div>

                    <p>Fiona was the only one truly surprised—which is poetic, considering she tried to make them hold hands the very first day they met. 🫱🏼‍🫲🏽❤️</p>

                    <div class="story__photos" style="display: flex; justify-content: center; margin: 2rem auto; text-align: center;">
                        <div class="story__photo" style="max-width: 80%;">
                            <img src="images/Wedding Website/IMG_4352.JPG" alt="Sean, Emily, and Fiona smiling after the proposal" class="story__img" style="width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
                        </div>
                    </div>

                    <p>No flash mobs. No skywriting. Just a quiet, perfect moment in a place that already meant everything, shared by the people who made it unforgettable. ✨</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Sections -->
    <section class="section section--alt">
        <div class="container">
            <div class="features" style="display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-lg); text-align: center;">
                <div class="features__item">
                    <h3>Location Poll</h3>
                    <p>Help us decide where to hold our wedding!</p>
                    <a href="poll.html" class="btn">Vote Now</a>
                </div>

                <div class="features__item">
                    <h3>Photo Gallery</h3>
                    <p>Share and view photos of our journey together.</p>
                    <a href="photos.html" class="btn">View Photos</a>
                </div>

                <div class="features__item">
                    <h3>Events & Travel</h3>
                    <p>Details about our wedding celebrations.</p>
                    <a href="events.html" class="btn">Learn More</a>
                </div>

                <div class="features__item">
                    <h3>RSVP</h3>
                    <p>Let us know if you'll be joining our celebration.</p>
                    <a href="rsvp.html" class="btn">Respond</a>
                </div>

                <div class="features__item">
                    <h3>Registry</h3>
                    <p>Information about our wedding registry.</p>
                    <a href="registry.html" class="btn">View Registry</a>
                </div>
            </div>
        </div>
    </section>


    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p class="footer__text">Sean & Emily's Wedding</p>
            <p>&copy; 2025 DapperFoxes. All rights reserved.</p>
        </div>
    </footer>

    <!-- Scripts -->
    <script src="js/main.js"></script>
</body>
</html>