flagstone-project/index.html at main · verytee/flagstone-project · 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="assets/images/logohead.webp">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Google 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=Open+Sans:wght@400;600;700&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="assets/css/styles.css">

    <title>Early Menopause Mental Health Support</title>
</head>
<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-body-tertiary shadow-sm">
    <div class="container">
        <a class="navbar-brand d-flex align-items-center gap-1" href="#index">
            <img src="assets/images/logohead.webp" alt="Early Menopause Aware Logo" width="30" height="35">
            <span><span class="teal">Early</span><span class="brown">Menopause</span>Aware</span>
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation menu">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 text-center">
                <li class="nav-item"><a class="nav-link active" href="#hero">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#effects">Effects</a></li>
                <li class="nav-item"><a class="nav-link" href="#coping">Coping</a></li>
                <li class="nav-item"><a class="nav-link" href="#links">Support</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Hero Section -->
<section id="hero" class="position-relative">
    <img src="assets/images/hero.webp" class="hero-img" alt="Woman looking thoughtful and supported">
    <div class="hero-overlay d-flex flex-column justify-content-center align-items-center text-center">
        <!-- Hidden h1 for accessibility but visually not required with the hero image -->
        <h1 class="visually-hidden">Supporting Mental Health During Early Menopause</h1>
        <a href="#links" class="btn btn-primary mt-3">Get Support Now</a>
    </div>
</section>

<main class="pb-5">

<!-- Effects Section -->
<section id="effects" class="container section py-3">
    <h2 class="display-12 text-center mb-4">Here to help with some of the common effects the Early Menopause can have on Mental Health, such as,</h2>

    <div class="row g-4">
        <div class="col-12 col-md-4">
            <div class="card shadow-sm effect-card">
                <img src="assets/images/effect3.webp" class="card-img-top" alt="A woman doubting if she is good enough for a promotion">
                <div class="card-body">
                    <h3 class="sub-heading">Low Self-Esteem</h3>
                    <p>Whether you are experiencing menopause before 45 or premature menopause before 40, the impact on your mental health is real, and so is the support available to you. Feelings of inadequacy, self-doubt, and diminished confidence can surface unexpectedly, making everyday challenges feel heavier. Recognising these emotions and seeking compassionate guidance can help rebuild resilience, restore self-worth, and remind you that your identity extends far beyond this transition.</p>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="card shadow-sm effect-card">
                <img src="assets/images/effect2.webp" class="card-img-top" alt="A woman walking her dog at the park">
                <div class="card-body">
                    <h3 class="sub-heading">Mood Changes</h3>
                    <p>Hormonal shifts can lead to irritability, sadness, anxiety, or emotional overwhelm. You are not alone, and you deserve support. These fluctuations may strain relationships, disrupt work, or leave you feeling isolated, yet they are a natural part of the journey. By acknowledging the changes and accessing tailored coping strategies, you can regain balance, nurture emotional stability, and discover renewed strength in managing life's ups and downs.</p>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-4">
            <div class="card shadow-sm effect-card">
                <img src="assets/images/effect1.webp" class="card-img-top" alt="A woman siting in thought with tea">
                <div class="card-body">
                    <h3 class="sub-heading">Brain Fog</h3>
                    <p>Difficulty concentrating, memory lapses, and mental fatigue are common and can deeply affect your day-to-day life. Tasks that once felt effortless may suddenly seem overwhelming, leaving you frustrated or disconnected. This cognitive haze is a recognised symptom of early menopause, but it does not define your capabilities. With practical tools, affirmations, and supportive guidance, you can sharpen focus, ease frustration, and reclaim confidence in your mental clarity.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Coping Section -->
<section id="coping" class="container section py-3">
    <h2 class="display-12 text-center mb-4">Navigating early menopause doesn't have to feel isolating and there are ways to help you feel better, such as,</h2>

    <div class="row g-4">
        <div class="col-md-4">
            <div class="card shadow-sm">
                <img src="assets/images/support1.webp" class="card-img-top" alt="Two women talking together">
                <div class="card-body">
                    <h3 class="sub-heading">Sharing With Others</h3>
                    <p>Speaking with trusted and supportive friends and family, or a therapist, can help you process emotions and feel supported. Opening up about your experiences reduces isolation, builds understanding, and creates space for empathy. Honest conversations can strengthen relationships, provide perspective, and remind you that you are not facing early menopause alone. By sharing openly, you invite encouragement, compassion, and practical advice that can ease the mental load and foster resilience.

                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card shadow-sm">
                <img src="assets/images/support2.webp" class="card-img-top" alt="Woman reading">
                <div class="card-body">
                    <h3 class="sub-heading">Healthy Routines</h3>
                    <p>Regular sleep, gentle movement, nutritious food, and hydration can stabilise mood and energy. Establishing consistent routines helps regulate your body’s rhythms and creates a sense of control during unpredictable changes. Prioritising rest, balanced meals, and mindful exercise supports both physical and emotional wellbeing. These small, daily habits build a foundation of stability, reduce stress, and promote clarity, making it easier to navigate the challenges of early menopause with confidence and strength.

                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm">
                <img src="assets/images/support3.webp" class="card-img-top" alt="Woman doing yoga">
                <div class="card-body">
                    <h3 class="sub-heading">Hormone Therapy</h3>
                    <p>Discussing the possibility of HRT, which can support both physical and emotional symptoms caused by hormonal changes. Consulting with a healthcare professional ensures you understand the benefits, risks, and alternatives available. Hormonal therapy may ease mood swings, reduce anxiety, and improve overall quality of life. Exploring these options empowers you to make informed decisions about your health, while recognising that personalised treatment can restore balance and provide reassurance during this transitional stage.

                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Support Links -->
<section id="links" class="py-3">
    <div class="container">
        <h2 class="display-12 text-center mb-4">There are tools, treatments, and communities for when things are difficult.</h2>
        <h3 class="sub-heading text-center mb-4">Click the buttons below to access support services.</h3>
        <div class="row g-3 text-center">
            <div class="col-md-3 col-6">
                <a href="https://www.nhs.uk/nhs-services/mental-health-services/" target="_blank" class="btn btn-outline-primary w-100">NHS Support</a>
            </div>
            <div class="col-md-3 col-6">
                <a href="https://www.mind.org.uk/" target="_blank" class="btn btn-outline-primary w-100">Mind UK</a>
            </div>
            <div class="col-md-3 col-6">
                <a href="https://www.womens-health-concern.org/" target="_blank" class="btn btn-outline-primary w-100">Women's Health</a>
            </div>
            <div class="col-md-3 col-6">
                <a href="https://menopausesupport.co.uk/" target="_blank" class="btn btn-outline-primary w-100">Menopause Support</a>
            </div>
            <div style="margin: 20px 0">
  <div class="emergency"></div><p><strong>If you are in crisis:</strong> If you feel at immediate risk or cannot stay safe, please reach out immediately.</p>
  <a href="https://www.gov.uk/contact-police" target="_blank" class="btn btn-danger">
     Call 999</a>
            </div>
        </div>
    </div>
</section>

    <!-- Affirmations Section -->

<section id="positive-affirmations">
    <h2 class="mb-4 text-center display-6">Positive Affirmations</h2>
    <div class="container my-5">
        <div class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#positive-affirmations" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#positive-affirmations" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#positive-affirmations" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <!-- Affirmation 1 -->
                <div class="carousel-item active">
                    <div class="row align-items-center">
                        <div class="col-md-4 text-center">
                            <img src="assets/images/wanderfull.webp" class="rounded-circle" alt="a photograph of Wander Full" style="width: 200px; height: 200px; object-fit: cover;">
                        </div>
                        <div class="col-md-8">
                            <blockquote class="blockquote">
                                <p>“My journey may have begun earlier than expected, yet I carry resilience, I deserve compassion, and I claim space to heal, grow, and thrive. I am glad for the understanding and support, that gave me the strength to embrace this chapter fully.”</p>
                                <footer class="blockquote-footer mt-3">Wander Full</footer>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <!-- Affirmation 2 -->
                <div class="carousel-item">
                    <div class="row align-items-center">
                        <div class="col-md-4 text-center">
                            <img src="assets/images/mei-wong.webp" class="rounded-circle" alt="a photograph of Mei Wong" style="width: 200px; height: 200px; object-fit: cover;">
                        </div>
                        <div class="col-md-8">
                            <blockquote class="blockquote">
                                <p>"My feelings are valid, important, and worthy of recognition, and while early menopause is part of my journey, it does not define who I am. I choose strength, compassion, and the freedom to embrace my identity beyond this transition."</p>
                                <footer class="blockquote-footer mt-3">Mei Wong</footer>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <!-- Affirmation 3 -->
                <div class="carousel-item">
                    <div class="row align-items-center">
                        <div class="col-md-4 text-center">
                            <img src="assets/images/claire.webp" class="rounded-circle" alt="a photograph of Claire Voyant" style="width: 200px; height: 200px; object-fit: cover;">
                        </div>
                        <div class="col-md-8">
                            <blockquote class="blockquote">
                                <p>“I am becoming more aware of my needs, and I am worthy of support that helps me feel seen and understood. By honouring my journey, I remind others that they too deserve compassion, guidance, and the strength to seek the help they need.”</p>
                                <footer class="blockquote-footer mt-3">Claire Voyant</footer>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#positive-affirmations" data-bs-slide="prev" aria-label="Previous affirmation">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#positive-affirmations" data-bs-slide="next" aria-label="Next affirmation">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>

</section>

</main>

<!-- Footer -->
<footer class="text-center py-3 bg-light mt-auto">
    <span class="teal">© Early</span><span class="brown">Menopause</span>Aware
    <a href="#hero">
  <img src="assets/images/logohead.webp" alt="Logo" width="25" height="30">
</a> <!-- Logo linking to top -->
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- JavaScript code to ensure the Bootstrap mobile navbar collapses when navigating to in-page links -->
<script>
    document
        .querySelectorAll(".navbar-collapse .nav-link")
        .forEach((link) => {
            link.addEventListener("click", function (e) {
                let section = document.querySelector(e.target.getAttribute("href"));
                if (section) {
                    e.preventDefault(); // Prevent default anchor click behavior
                    let navbarHeight = document.querySelector(".navbar-toggler").offsetHeight;
                    window.scroll({
                        top: section.offsetTop - navbarHeight, // Adjust for navbar height
                        behavior: "smooth",
                    });
                    document
                        .querySelector(".navbar-collapse")
                        .classList.remove("show"); // Collapse navbar
                }
            });
        });
</script>

</body>
</html>