generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (141 loc) · 8.02 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Mental Health Wellbeing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Information about living with Bipolar Affective Disorder and links to support websites.">
<meta name="keywords" content="mental health, Bipolar, mindfulness, Wellbeing, wellness">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://kit.fontawesome.com/369330feb7.js" crossorigin="anonymous"></script>
<script src="assets/js/wrap.js"></script>
<link rel="stylesheet" href="assets/css/wellness.css">
</head>
<body>
<header>
<a id="logo" href="index.html">
<h1> <span class="fullhead-text"><i class="fa-regular fa-head-side-heart"></i> Wellness Recovery Action Plan</span>
<span class="abbr-text"><i class="fa-regular fa-head-side-heart"></i> W.R.A.P.</span></h1>
</a>
<label for="nav-toggle" class="nav-toggle-label"><i class="fa-solid fa-bars"></i></label>
<input type="checkbox" id="nav-toggle" name="nav-toggle">
<nav>
<ul id="menu">
<li><a href="#home" onclick="closeMe();"><i class="fa-sharp-duotone fa-solid fa-house"></i> Home</a></li>
<li><a href="#living-with" onclick="closeMe();" class="current"><i class="fa-solid fa-cloud-sun-rain"></i> Living With...</a></li>
<li><a href="#sign-up" onclick="closeMe();"><i class="fa-sharp-duotone fa-solid fa-right-to-bracket"></i> Join for a chat</a></li>
</ul>
</nav>
</header>
<!-- Showcase -->
<!-- Masthead-->
<section id="home" class="hero">
<div class="hero-container">
<!-- Hero Heading-->
<h2 class="hero-heading">Wellness Recovery Action Plan</h2>
<!-- Icon Divider-->
<i class="fas fa-star"></i>
<!-- Hero Subheading-->
<h2 class="hero-subheading">
For people living with Bipolar Affective Disorder
</h2>
</div>
</section>
<!-- Main -->
<main id="content-wrap">
<section class="main-text">
<div id="offset-hero">
<div>
<h2 class="main-heading">Wellness Recovery Action Plan</h2>
The Wellness Recovery Action Plan (WRAP) is a personalized plan that helps individuals maintain their mental health and wellness.
<h3>Here are the main points of a WRAP:</h3>
<strong>Wellness Toolbox:</strong> A list of skills and strategies to maintain wellness and get back on track if needed. These tools can include activities like exercise, creative endeavors, and relaxation techniques.<br>
<br>
<strong>Daily Maintenance Plan:</strong> A daily structure incorporating wellness tools. It describes how you look and feel when you're well, daily activities to maintain wellness, and activities to support overall wellbeing.<br>
<br>
<strong>Triggers and Action Plan:</strong> Identifies external events that might cause distress and outlines appropriate responses.<br>
<br>
<strong>Early Warning Signs and Action Plan:</strong> Recognizes subtle signs that things might be going off track and provides a plan to address them before they become major issues.<br>
<br>
<strong>Crisis Plan:</strong> Establishes a plan for when things are breaking down, detailing who to contact, information to provide, and steps supporters can take to help you through a crisis.<br>
<br>
<strong>Post-Crisis Plan:</strong> A guide for recovery after a crisis, reflecting on what was learned and how to move forward.<br>
<br>
Developing a WRAP involves identifying personal resources, building a strong support system, and committing to an ongoing process of self-awareness and improvement.
</div>
<div class="set-middle">
<img src="assets/images/hand-lightbulb.webp" class="figure" alt="thinking">
</div>
<div>
Meanwhile, the NHS provides comprehensive information on treatment options, coping strategies, and where to seek urgent help.
Additionally, websites like Bipolar UK offer forums and support groups where you can connect with others who understand
what you're going through.
</div>
</div>
</section>
<hr>
<section id="living-with" class="main-text">
<div>
<h2><i class="fa-solid fa-cloud-sun-rain"></i> Living With...</h2>
Remember, you're not alone, and there are resources out there to help!
</div>
<div class="set-middle">
<img src="assets/images/chat.webp" class="figure" alt="chat with a friend">
</div>
<div>
<h3>Useful information</h3>
<ul class="link-tree">
<li><a href="https://www.mind.org.uk
" class="ext-link">Mind</a> - Provides advice and support for those experiencing mental health problems.</li>
<li><a href="https://www.meandmymind.nhs.uk/getting-help/mental-health-websites" class="ext-link">Me and My Mind</a> - Lists several mental health charities and helplines in the UK, including the Samaritans and Rethink Mental Illness.</li>
<li><a href="https://www.nhs.uk/mental-health" class="ext-link">NHS Mental Health</a> - Comprehensive information on mental health services, conditions, and self-help strategies.</li>
<li><a href="https://www.mentalhealth.org.uk" class="ext-link">Mental Health Foundation</a> - Offers information and support for anyone with mental health problems or learning disabilities</li>
<li><a href="https://www.sane.org.uk/" class="ext-link">SANE</a> - National mental health charity that offers emotional support, guidance, and information.</li>
<li><a href="https://www.rethink.org/" class="ext-link">Rethink Mental Illness</a> - Provides support and advice for those with mental health problems, including dedicated helplines</li>
</ul>
</div>
</section>
<hr>
<section id="sign-up" class="main-text">
<form id="signup-form-bg" action="https://formdump.codeinstitute.net" method="POST">
<div class="set-middle" id="signup-form-body">
<div>
<div>
<div>
<h2><i class="fa-sharp-duotone fa-solid fa-right-to-bracket"></i> Join us for a chat</h2>
</div>
<div>
<label for="email">Email</label><br>
<input name="email" id="email" class="text-input" required><br>
<label for="username">Username</label><br>
<input name="username" id="username" class="text-input" required>
</div>
<div class="terms-div">
<a href="#" class="terms-link">Terms and Conditions</a><br>
<label for="chk-terms">I agree to these terms.</label>
<input type="checkbox" name="chk-terms" id="chk-terms" required>
</div>
<div class="set-middle">
<input type="submit" class="join-button" value="Have a chat">
</div>
</div>
</div>
</div>
</form>
</section>
<section id="hero2">
<h2 class="hero-container">There is light at the end of the tunnel</h2>
</section>
</main>
<!-- close main container -->
<footer id="footer">
<div class="row">
<p class="set-middle">
Copyright © Oliver Hughes 2025
</p>
</div>
</footer>
<!-- / Footer-->
</body>
</html>