-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
194 lines (170 loc) · 9.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project WaterAid</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="appstyle.css">
<!-- Use Karla Font-->
<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=Karla:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<!-- All HTML and CSS code related to building of navigation bar across index.html, ourImpact.html and appstyle.css
were implemented with reference to this tutorial: https://www.youtube.com/watch?v=FEmysQARWFU&ab_channel=KevinPowell. -->
<img src="assets/logo.png" alt="logo" class="logo">
<nav>
<ul>
<li><a id="home" href="./index.html">About Us</a></li>
<li><a id="ourImpact" href="./ourImpact.html">Our Impact</a></li>
</ul>
</nav>
<script>
document.getElementById("home").classList.add('clicked')
document.querySelectorAll('nav a').forEach(function(element) {
element.addEventListener('click', function(event) {
// Remove the 'clicked' class from all links
document.querySelectorAll('nav a').forEach(function(el) {
el.classList.remove('clicked');
});
// Add the 'clicked' class to the clicked link
this.classList.add('clicked');
});
});
</script>
</div>
</header>
<!-- This is the container layout for whole body-->
<div class="container">
<!-- First Row for 'Who We Are'-->
<div class="row">
<!-- Within "Who We Are" section, create another container with two columns-->
<div class="container">
<div class="row row-equal">
<div class="col-5 col-equal">
<div id="Who-we-are" class="content-equal">
<h2> Who we are </h2>
<p class="non-card-p"> We're an international not-for-profit organisation, determined to make clean water, decent toilets and good hygiene normal for everyone, everywhere. </p>
</div>
</div>
<div class="col-7 col-equal">
<div class="content-equal">
<img src="assets/who-we-are-img.png" alt="Who-we-are" class="img-fluid" class="who-we-are-img">
</div>
</div>
</div>
</div>
</div>
<!-- Second Row for 'What We Do'-->
<!-- Code used to implement card component was referenced from this URL: https://www.w3schools.com/howto/howto_css_cards.asp -->
<div class="row">
<!-- Within "What We Do" section, create another container with three rows and
in last two rows have three columns-->
<div class="container">
<div class="row">
<div class="col-12">
<h2>What we do</h2>
<p class="non-card-p">We work with our supporters, partners and local communities to make clean water, decent toilets and good hygiene normal for everyone, everywhere.</p>
</div>
</div>
<div class="row mb-3"> <!-- First row of Cards-->
<div class="col-4 d-flex">
<div id="card1" class="card flex-fill"> <!-- Card 1-->
<a href="https://www.wateraid.org/uk/what-we-do/water" class='card-link' target="_blank" rel="noopener noreferrer"></a>
<img src="assets/clean-water.png" alt="Clean Water" style="width:100%" class="card-img">
<div class="card-text-container">
<h4><b>Clean Water</b></h4>
<p class="card-para">Supporters like you have helped us reach over 28.5 million people with clean water around the world, but we won’t stop until everyone, everywhere has it.</p>
</div>
</div>
</div>
<div class="col-4 d-flex">
<div id="card2" class="card flex-fill"> <!-- Card 2-->
<a href="https://www.wateraid.org/uk/what-we-do/toilets" class='card-link' target="_blank" rel="noopener noreferrer"></a>
<img src="assets/decent-toilets.png" alt="Decent Toilets" style="width:100%" class="card-img">
<div class="card-text-container">
<h4><b>Decent Toilets</b></h4>
<p class="card-para">It’s a little-known fact that 1 in 5 people don't have their own toilet. Slowly, we're making progress, but with your help, we can speed things up.
</p>
</div>
</div>
</div>
<div class="col-4 d-flex">
<div id="card3" class="card flex-fill"> <!-- Card 3-->
<a href="https://www.wateraid.org/uk/what-we-do/hygiene" class='card-link' target="_blank" rel="noopener noreferrer"></a>
<img src="assets/good-hygiene.png" alt="Good Hygiene" style="width:100%" class="card-img">
<div class="card-text-container">
<h4><b>Good Hygiene</b></h4>
<p class="card-para">Together with clean water and decent toilets, good hygiene practices can dramatically improve – and even save – people’s lives.</p>
</div>
</div>
</div>
</div>
<div class="row mb-3"> <!-- Second Row of Cards-->
<div id="card4" class="col-4 d-flex">
<div class="card flex-fill"> <!-- Card 4 -->
<a href="https://www.wateraid.org/uk/what-we-do/climate-change" class='card-link' target="_blank" rel="noopener noreferrer"></a>
<img src="assets/climate-change.jpg" alt="Climate Change" style="width:100%" class="card-img">
<div class="card-text-container">
<h4><b>Climate Change</b></h4>
<p class="card-para">We work with communities who've been hit hardest by climate change to make sure they have a reliable supply of water and decent toilets, whatever the weather.
</p>
</div>
</div>
</div>
<div class="col-4 d-flex">
<div id="card5" class="card flex-fill"> <!-- Card 5 -->
<a href="https://www.wateraid.org/uk/what-we-do/women-and-girls" class='card-link' target="_blank" rel="noopener noreferrer"></a>
<img src="assets/women&girls.jpg" alt="Women&Girls" style="width:100%" class="card-img">
<div class="card-text-container">
<h4><b>Women and Girls</b></h4>
<p class="card-para">Women and girls are disproportionately affected by a lack of clean water, decent toilets and good hygiene.
</p>
</div>
</div>
</div>
<div class="col-4">
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Original chatbot; but account free trial could not be extended -->
<!-- <script>
window.watsonAssistantChatOptions = {
integrationID: "968b9eef-f7db-44b7-b75c-fbadaa32f0f6", // The ID of this integration.
region: "eu-gb", // The region your integration is hosted in.
serviceInstanceID: "5c4ea9ae-703a-4748-a0d3-4018b11d86bb", // The ID of your service instance.
onLoad: async (instance) => { await instance.render(); }
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";
document.head.appendChild(t);
});
</script> -->
<!-- Code used to embed Watson Assistant chatbot was provided by IBM within the Watson Assistant software platform -->
<script>
window.watsonAssistantChatOptions = {
integrationID: "44b80259-9816-46f6-8e84-97eb8e5a6c66", // The ID of this integration.
region: "eu-gb", // The region your integration is hosted in.
serviceInstanceID: "94c3397f-a237-4060-913f-1df89ff8c727", // The ID of your service instance.
onLoad: async (instance) => { await instance.render(); }
};
setTimeout(function(){
const t=document.createElement('script');
t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";
document.head.appendChild(t);
});
</script>
</body>
</html>