generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
200 lines (189 loc) · 12.4 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="The Mental Health Awareness Organization (MHA Org) helps spread awareness and shed light to different mental health problems, the various ways to cope with them, how to help others who might be struggling, and how to spread awareness yourself.">
<meta name="keywords" content="Mental, Health, Awareness, Help, Depression, Anxiety, PTSD">
<meta name="author" content="Madyar Kozhakhmetov">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap link below -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- FontAwesome link below -->
<script src="https://use.fontawesome.com/5d5a7b196b.js"></script>
<!-- Google Fonts link below -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<!-- Favicon link below -->
<link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">
<!-- CSS link below -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<title>Mental Health Awareness Organization</title>
</head>
<body>
<header>
<aside>
<div id="covid-19-awareness">
<a href="https://www.who.int/emergencies/diseases/novel-coronavirus-2019" target="_blank" class="mha-link" aria-label="Link to the WHO COVID-19 Home page">
<i class="fa fa-info-circle" aria-hidden="true"></i>COVID-19 resources<i class="fa fa-angle-right"></i></a>
</div>
</aside>
<nav class="navbar navbar-expand-lg my-0 navbar-light" id="custom-nav-css"> <!-- navbar uses bootstrap code seen as seen in https://getbootstrap.com/docs/4.0/components/navbar/ -->
<div class="container-fluid">
<a class="navbar-brand active" href="index.html" id="custom-navbar-brand-mobile-responsiveness">
<img src="assets/images/hugging.png" class="d-inline-block align-top" alt="Mental Health Awareness Organization logo" loading="lazy">
MHA Organization
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="nav navbar-nav mx-auto">
<li><a class="nav-link mha-nav" href="educate-yourself.html">Educate Yourself</a></li>
<li><a class="nav-link mha-nav" href="help-yourself.html">Help Yourself</a></li>
<li><a class="nav-link mha-nav" href="help-others.html">Help Others</a></li>
<li><a class="nav-link mha-nav" href="spread-the-word.html">Spread the Word</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link mha-nav" href="sign-in.html">Sign In <span id="mha-navbar-right-space"> | </span> Sign Up</a></li>
</ul>
</div>
</div>
</nav>
</header>
<section class="mental-health-main-information-home">
<div class="hero-text">
<div><span class="mha-hero-underline">Mental Health</span></div> <!-- the div was added to create a custom bottom margin -->
<a href="educate-yourself.html" aria-label="Link to the 'Educate Yourself' page">What is it?</a><br>
<a href="help-yourself.html" aria-label="Link to the 'Help Yourself' page">How can you help yourself?</a><br>
<a href="help-others.html" aria-label="Link to the 'Help Others' page">How can you help others?</a><br>
</div>
<div class="mha-get-started">
<a href="sign-up.html" aria-label="Link to the 'Sign Up' page"><div class="get-started-button">Get started</div></a>
<a href="spread-the-word.html" class="start-spreading-awareness" aria-label="Link to the 'Spread the Word' page">Start spreading awareness<i class="fa fa-angle-right"></i></a>
</div>
</section>
<section class="hero-image-home">
<div class="hero-image"> <!-- hero image background coloring structure found on stackoverflow. check README.md file for further information -->
<img src="assets/images/man-battling-mental-health.jpg" alt="Man battling with mental health issues" loading="lazy">
</div>
<div class="content">
<h1>"You wake up every morning to fight the same demons that left you so tired the night before."</h1>
<p id="message-summary">We set out to hear the stories of the many men and women who battle with mental health problems everyday.</p>
<a href="educate-yourself.html#stories" aria-label="Link to the 'Story' section of the 'Educate Yourself' page"><p id="callout-hero-image">Listen to their stories<i class="fa fa-angle-right"></i></p></a>
</div>
</section>
<section class="mental-health-more-information-home">
<!-- Main types of mental health issues: Depression, Anxiety, PTSD -->
<div class="depression-home">
<div class="depression-image">
<img src="assets/images/depression.jpg" id="depressed-man" alt="Picture of a man struggling with depression." loading="lazy">
</div>
<div class="depression-text">
<h1>Guidance on how to manage depression.</h1>
<p>Depression is a mood disorder that causes a persistent feeling of sadness and loss
of interest. You may have trouble doing normal day-to-day activities, and sometimes
you may feel as if life isn't worth living.</p>
<a href="help-yourself.html#depression" aria-label="Link to the 'Depression' text in the 'Help Yourself' page"><p>Learn about dealing with depression<i class="fa fa-angle-right"></i></p></a>
</div>
</div>
<div class="anxiety-home">
<div class="anxiety-image">
<img src="assets/images/anxiety.jpg" id="anxious-woman" alt="Picture of a woman dealing with anxiety." loading="lazy">
</div>
<div class="anxiety-text">
<h1>Guidance on how to manage anxiety.</h1>
<p>Anxiety is a feeling of uneasiness, usually defined as an overreaction to a situation
that is only subjectively seen as menacing. It is often accompanied by restlessness, fatigue
and problems in concentration.</p>
<a href="help-yourself.html#anxiety" aria-label="Link to the 'Anxiety' text in the 'Help Yourself' page"><p>Learn about dealing with anxiety<i class="fa fa-angle-right"></i></p></a>
</div>
</div>
<div class="ptsd-home">
<div class="ptsd-image">
<img src="assets/images/ptsd.jpg" id="woman-with-PTSD" alt="Picture of a woman dealing with PTSD." loading="lazy">
</div>
<div class="ptsd-text">
<h1>Guidance on how to manage PTSD.</h1>
<p>Post-traumatic stress disorder is a condition that's triggered by a
terrifying event — either experiencing it or witnessing it. Symptoms may
include flashbacks, nightmares, and uncontrollable thoughts about the event.</p>
<a href="help-yourself.html#ptsd" aria-label="Link to the 'PTSD' text in the 'Help Yourself' page"><p>Learn about dealing with PTSD<i class="fa fa-angle-right"></i></p></a>
</div>
</div>
</section>
<section class="mental-health-awareness-newsletter-home">
<div class="newsletter">
<div class="newsletter-callout">
<h1>Receive mental health guidance from professionals.</h1>
<p>Join our email list to receive monthly news about events from our community,
support articles, written testimonials, tips from industry professionals, and more.</p>
</div>
<div class="newsletter-form">
<form action="https://formdump.codeinstitute.net/" target="_blank" method="post" autocomplete="on">
<label for="email">Enter your email here</label>
<input type="email" id="email" name="email" required placeholder="Enter your email address." aria-label="An input field where you can enter your email">
<input type="submit" value="Sign up now" aria-label="Register button">
</form>
</div>
</div>
</section>
<section class="hero-image-home-2">
<img src="assets/images/community.jpg" class="full-size-image" alt="Image of a group hugging each other as a sign of community and collaboration." loading="lazy">
</section>
<section class="mental-health-awareness-community-home">
<div class="community-callout-text">
<h1 class="mha-heading">Let's fight mental health stigma together.</h1>
<p class="mha-paragraph">Join our Mental Health Awareness community and educate yourselves as
well as others around you about the different mental health issues worldwide.</p>
<div class="mha-get-started">
<a href="sign-up.html"><div class="get-started-button" aria-label="Link to the 'Sign Up' page">Get started</div></a>
</div>
</div>
</section>
<section class="mental-health-emergency">
<h1>Get real support from real people.</h1>
<div class="mental-health-emergency-content">
<div class="call-emergency">
<h1>Call an emergency lifeline.</h1>
<p>The lifeline provides 24/7, free, and confidential support for people in
distress and who are thinking of hurting themselves.</p>
<a href="help-yourself.html#suicide-hotline-resources" aria-label="Link to the 'Suicide Hotlines' section of the 'Help Yourself' page"><p>Call them here<i class="fa fa-angle-right"></i></p></a>
</div>
<div class="support-center">
<h1>Support Center.</h1>
<p>Access helpful tips, articles, videos, and more resources to get help when
confronting your mental health struggles.</p>
<a href="help-yourself.html#help-yourself-resources" aria-label="Link to the 'Resources' section of the 'Help Yourself' page">
<p>Visit our support center<i class="fa fa-angle-right"></i></p>
</a>
</div>
</div>
</section>
<footer>
<div class="black-background"></div>
<div class="top-footer">
<div class="top-left">
<img src="assets/images/us-flag.png" id="flag" alt="Flag of the United States of America." loading="lazy">
English
</div>
<div class="top-right">
<a href="https://twitter.com/" target="_blank" aria-label="Link to the Twitter home page"><i class="fa fa-twitter"></i></a>
<a href="https://www.facebook.com/" target="_blank" aria-label="Link to the Facebook home page"><i class="fa fa-facebook-f"></i></a>
<a href="https://www.instagram.com/" target="_blank" aria-label="Link to the Instagram home page"><i class="fa fa-instagram"></i></a>
</div>
</div>
<div class="bottom-footer">
<div class="bottom-left">
© 2020 Mental Health Awareness Organization
</div>
<div class="bottom-right">
<span>Privacy Notice</span><br>
<span>Terms of Service</span>
</div>
</div>
</footer>
<!-- Bootstrap Javascript bundle -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>