generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
289 lines (261 loc) · 18.6 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
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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Metas -->
<meta name="description" content="The Bust IT: Cancer Without Borders site, a website to raise awareness about breast gender within the transgender community.">
<meta name="keywords" content="hackathon, breast, cancer, coding, code, institute">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://vanessacleary.github.io/W-I-T-IT-LAB-Breast-Cancer-Awareness/">
<meta name="robots" content="index, follow">
<title>Bust IT: Cancer Without Borders</title>
<!-- Facebook, LinkedIn, Google -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Bust IT: Cancer Without Borders" />
<meta property="og:description" content="The Bust IT: Cancer Without Borders site, a website to raise awareness about breast gender within the transgender community." />
<meta name="image" property="og:image" content="assets/docs/finalsite.png" />
<meta property="og:image:alt" content="The Bust IT: Cancer Without Borders site on a range of devices" />
<meta property="og:url" content="https://vanessacleary.github.io/W-I-T-IT-LAB-Breast-Cancer-Awareness/" />
<meta property="og:site_name" content="Bust IT: Cancer Without Borders" />
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Bust IT: Cancer Without Borders">
<meta name="twitter:description" content="The Bust IT: Cancer Without Borders site, a website to raise awareness about breast gender within the transgender community.">
<meta name="twitter:image" content="assets/docs/finalsite.png">
<meta name="twitter:image:alt" content="The Bust IT: Cancer Without Borders site on a range of devices">
<!-- Local stylesheets -->
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<!-- email JS -->
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script>
(function(){
emailjs.init("user_YIcIZfQpFVO1lE0J5li0u");
})();
</script>
</head>
<body>
<!--Header section-->
<header>
<div class="brand">
<a href="index.html" class="tap-target">
<img src="assets/images/logo-cools.png" alt="Logo icon of all genders">
</a>
</div>
<div class="logo">
<h2>Bust IT: Cancer Without Borders</h2>
</div>
<div class="menu-bar tap-target" role="button" id="nav-burger">
<span class="sr-only">Open the navigation menu</span>
<i class="fas fa-bars fa-2x tap-target bar-icon"></i>
</div>
<nav class="menu" id="menu">
<div class="menu-bar" role="button" id="close-icon">
<span class="sr-only">Close the navigation menu</span>
<i class="fas fa-times fa-2x tap-target close-icon"></i>
</div>
<ul class="overlay-content">
<li class="list-item"><a href="index.html">Home</a></li>
<li class="list-item"><a href="#awareness-section">Awareness</a></li>
<li class="list-item"><a href="#support-section">Support</a></li>
<li class="list-item"><a href="#resources-section">Resources</a></li>
<li class="list-item"><a href="#contact-section">Contact</a></li>
</ul>
</nav>
</header>
<!-- Main section -->
<main id="home" class="footer-allowance">
<section class="hero-image">
<div class="hero-text">
<h1>Bust IT: Cancer Without Borders</h1>
</div>
</section>
<h1 class="readable-width text-center title">Bust IT: Cancer Without Borders</h1>
<section id="about-us" class="section-margin">
<h2 id="about-us-title" class="title">About Us</h2>
<article class="text-center">
<h3>Bust IT: Cancer Without Borders</h3>
<p class="article-content">Bust IT: Cancer Without Borders is an organisation who are bringing awareness to the transgender community about breast cancer. </p>
<p class="article-content">We aim to educate people on their risk factor for breast cancer and signpost to additional support and resources they may find useful.</p>
<p class="article-content">Education is our main priority – we want everyone, regardless of gender to feel capable of performing a breast/chest check every month and to know the early warning signs of breast cancer.</p>
<p class="article-content">We like to utilise the massive advances technology has made over the last few years allowing people to visualise the human form in a way that was previously impossible – this is perfect for people who are visual learners.</p>
<p class="article-content">We provide an email reminder service to encourage people to check their breasts/chest every month – a key factor to spotting the early signs of breast cancer. </p>
</article>
<img src="assets/images/group-of-people.jpg" alt="Stylised illustration of a group of people of various genders">
</section>
<section id="awareness-section" class="section-margin">
<h2 class="sr-only">A section to encourage awareness of the human torso</h2>
<article id="awareness">
<h2 id="awareness-title" class="section-title">Awareness</h2>
<section id="utils-content" class="section-margin">
<h3 class="text-center">Interactive 3D models</h3>
<p class="section-content">
This website utilises interactive 3D models to break down the
barrier of the human form and highlight the torso/breast.
</p>
<p class="section-content">
By default, these models are non-interactive with slight
rotation to support the information they pertain to.
We believe in giving power to our users, so if you would
like to view the 3D models in all their glory and de-mystify
the human form, you can enable Interactive controls.
Alternatively, if you do not like the rotation of the
models, and prefer a static feel to a website, then you can
also disable the rotation.
</p>
<p class="section-content">
Keep an eye on these User Controls in the near future,
more features will be added to enhance the functionality
that the User has at their disposal. We want to bring
light to this topic using Modern Technology and Science!
</p>
</section>
<section id="utils-controls" class="section-margin">
<h3 class="text-center">Click to enable/disable:</h3>
<div class="utils-buttons">
<button class="utils-control-button tap-target" id="interactive-controls">Interactive Controls</button>
<button class="utils-control-button tap-target" id="auto-rotate">Model Auto-Rotation</button>
</div>
</section>
<section class="section-margin">
<h3 class="text-center m-top-bottom">Human Form viewed by 3D Technology</h3>
<div id="awareness-content-1">
<model-viewer
id="female-model-viewer"
class="tap-target"
auto-rotate
loading="eager"
field-of-view="30deg"
environment-image="assets/models/moonless_golf_1k.jpeg"
alt="A 3D model of a female body's torso"
src="assets/models/fem-torso-transLights1.gltf">
</model-viewer>
<p class="section-content">
Breast cancer is when cells in your breast change and
grow in an abnormal way, and sometimes can create tumours.
In Ireland alone, roughly 3,600 women and 40 men are
diagnosed with it each year.
But what about Transgender people? Transgender people
undergo lengthy processes to become who they want to be,
and although rates of Breast cancer in Transgender people
are lower than the general Cisgender population, they
are still at risk.
</p>
</div>
</section>
<section class="section-margin">
<h3 class="text-center m-top-bottom">Utilising Digital to view the Human Trunk</h3>
<div id="awareness-content-2">
<p class="section-content">
Research done in the past few years has identified that Transgender
people who undergo hormone treatment have an increased risk of
Breast cancer.
These studies found that Transgender Women were around 47 times more
likely to develop Breast cancer than Cisgender Men.
These studies also demonstrated that Transgender Men had a far
reduced risk of Breast cancer than Cisgender Women, although it
is still not completely understood why.
</p>
<model-viewer
id="male-model-viewer"
class="tap-target"
auto-rotate
loading="eager"
field-of-view="30deg"
environment-image="assets/models/moonless_golf_1k.jpeg"
alt="A 3D model of a female body's torso"
src="assets/models/male-torso-transLights1.gltf">
</model-viewer>
</div>
</section>
</article>
</section>
<section id="support-section" class="section-margin">
<h2 class="sr-only">A section to sign up for monthly reminders to check for signs of cancer</h2>
<article id="support">
<h2 id="support-title" class="section-title">Support</h2>
<p class="article-content text-center">Sign up to recieve monthly check up reminders. The Transgender Community and Allies can use this automated service below to assist in getting regular reminders and schedules to do self-checks.
Using our technical expertise and research into Breast Cancer in the Transgender Community and Allies, we hope to bridge the gap on this topic by going digital.
</p>
<div class="support">
<form id="support-form" class="inline-form" onsubmit="return sendMail(this);">
<label class="sr-only" for="email">Email: </label>
<input type="email" id="email" name="email" placeholder="Add your email address..." required>
<button type="submit" value="Submit">Send</button>
</form>
</div>
</article>
</section>
<section id="resources-section">
<div class="resources-grid">
<h2 class="section-title text-center">Resources</h2>
<div>
<h2 class="text-center">Have I got Breast Cancer?</h2>
<ul class="resource-lists">
<li class="section-content"><a href="https://breastcancernow.org/about-us/news-personal-stories/transgender-people-breast-cancer" target="_blank" rel="noopener"> Transgender people & Breast cancer</a></li>
<li class="section-content"><a href="https://preventbreastcancer.org.uk/about-breast-cancer/transgender-breast-awareness/" target="_blank" rel="noopener" > Signs & Symptoms</a></li>
<li class="section-content"><a href="https://deannacarina.github.io/BCAwareness/index.html" target="_blank" rel="noopener" > The Breast Review</a></li>
<li class="section-content"><a href="https://b-care-wit.herokuapp.com/" target="_blank" rel="noopener" > B-Care</a></li>
<li class="section-content"><a href="https://positively-pink.herokuapp.com/home" target="_blank" rel="noopener"> Bosom Buddies</a></li>
</ul>
</div>
<div>
<h2 class="text-center">Diagnosed with Breast Cancer?</h2>
<ul class="resource-lists">
<li class="section-content"><a href="https://breastcancernow.org/information-support/facing-breast-cancer/diagnosed-breast-cancer" target="_blank" rel="noopener" > Cancer grades and sizes</a></li>
<li class="section-content"><a href="https://breastcancernow.org/information-support/facing-breast-cancer/diagnosed-breast-cancer/prognosis" target="_blank" rel="noopener" > Prognosis</a></li>
<li class="section-content"><a href="https://breastcancernow.org/information-support/have-i-got-breast-cancer/am-i-risk/breast-cancer-in-families" target="_blank" rel="noopener" > Breast cancer, genes & family history</a></li>
<li class="section-content"><a href="https://breastcancernow.org/information-support/publications/download-order" target="_blank" rel="noopener"> Information for you</a></li>
</ul>
</div>
<div>
<h2 class="text-center">Survive and Thrive</h2>
<ul class="resource-lists">
<li class="section-content"><a href="https://breast-cancer-club.herokuapp.com/" target="_blank" rel="noopener"> Breast Cancer Club</a></li>
<li class="section-content"><a href="https://breastcancernow.org/information-support/facing-breast-cancer/living-beyond-breast-cancer/life-after-breast-cancer-treatment" target="_blank" rel="noopener"> Post treatment</a></li>
<li class="section-content"><a href="https://breastcancernow.org/information-support/facing-breast-cancer/living-beyond-breast-cancer/life-after-breast-cancer-treatment" target="_blank" rel="noopener"> Positive Living</a></li>
<li class="section-content"><a href="https://breastcancernow.org/information-support/facing-breast-cancer/living-beyond-breast-cancer/life-after-breast-cancer-treatment" target="_blank" rel="noopener"> Virtual Support Hub</a></li>
</ul>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact-section" class="contact section-margin">
<h2 class="section-title contact-title">Contact Us</h2>
<div class="container contact-us">
<h3 class="text-center">Say hi, or ask us a question</h3>
<br>
<form id="contact-form" onsubmit="return sendMail(this);">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" placeholder="Your full name..." required>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your email address..." required>
<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Write something..." required></textarea>
<button type="submit" value="Submit">Submit</button>
</form>
</div>
</section>
</main>
<footer>
<a href="privacy.html">Privacy Policy</a>
<a href="accessibility.html">Accessibility</a>
<!-- Auto-updating copyright -->
<p class="copyright">Copyright © Team Chat 'til Late <span id="copyright"></span></p>
</footer>
<!-- External Libraries/Frameworks JS scripts -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<!-- Local scripts -->
<script src="assets/js/script.js" async></script>
<!-- Email Script -->
<script src="assets/js/sendEmail.js"></script>
<script src="assets/js/copyright-nav.js"></script>
</body>
</html>