generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 4
/
about.html
290 lines (277 loc) · 17.5 KB
/
about.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
290
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Great Wall of Gratitude</title>
<!-- Favicon Includes-->
<link rel="shortcut icon" href="./favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="./favicon.ico">
<link rel="icon" type="image/svg+xml" sizes="any" href="./assets/favicon/favicon.svg">
<link rel="icon" type="image/png" sizes="160x160" href="./assets/favicon/favicon-160x160.png">
<link rel="icon" type="image/png" sizes="96x96" href="./assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="64x64" href="./assets/favicon/favicon-64x64.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">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/favicon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="./assets/favicon/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="144x144" href="./assets/favicon/favicon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="./assets/favicon/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="114x114" href="./assets/favicon/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="./assets/favicon/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="72x72" href="./assets/favicon/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="60x60" href="./assets/favicon/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="57x57" href="./assets/favicon/favicon-57x57.png">
<!-- Load local fonts before loading css -->
<style>
@font-face {
font-family: 'Poppins';
src: url('./assets/fonts/Poppins-Light.ttf');
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('./assets/fonts/Poppins-ExtraBold.ttf');
font-weight: 800;
font-display: swap;
}
</style>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- Page Header -->
<header class="header">
<div class="container header-content">
<div class="branding">
<a class="logo" href="./" aria-label="link to Home Page"><img src="./assets/images/logo-white.svg" width="116"
height="36" alt="The Great Wall of Gratitude"></a>
</div>
<input id="mobile-menu-toggle" type="checkbox">
<label class="hamburger" for="mobile-menu-toggle" aria-label="menu">
<span></span>
<span></span>
<span></span>
</label>
<nav class="navigation">
<ul class="menu">
<li><a aria-label="link to Home Page" href="./index.html">The Great Wall</a></li>
<li><a class="active" aria-label="link to About Page" href="./about.html">About</a></li>
<li><a aria-label="link to Contact Page" href="./contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="page">
<div class="about-us-section">
<div class="container py-5">
<div class="row">
<div class="col-md-8">
<!-- Text -->
<h1 class="heading-light mb-4">About Us</h1>
<p class="lead pink-background fs-5">Welcome to the Great Wall of Gratidudes! Here at
Gratidudes, we're on a mission
to build a community rooted in gratitude, positivity, and mutual support. Our team is a vibrant tapestry
of individuals united by the belief that kindness and appreciation can transform lives. Together, we're
dedicated to constructing a powerful monument of gratitude where every brick represents a moment of
shared
joy, inspiration, and connection. Join us as we fortify our collective spirit and spread waves of
positivity across the world.</p>
</div>
<div class="col-md-4 d-flex justify-content-center align-items-center">
<!-- Image -->
<img src="./assets/images/logo-white.svg" alt="Gratidudes Image" class="img-fluid">
</div>
</div>
</div>
</div>
<div class="team-member-section card-deck">
<div class="members">
<h2 class="mb-4 text-center mt-5">Gratidudes Team Members</h2>
<div class="container mt-5">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card container-fluid" style="background-color: #FA6D48;">
<img src="./assets/static/images/Vernell.webp" class="card-img-top" alt="Vernell Image">
<div class="card-body">
<h5 class="card-title" style="color: rgb(255, 255, 255);">Vernell</h5>
<div class="card-text">
<p style="color: rgb(255, 255, 255);">A lifelong learner, drawing from a varied skill set in
systems integration, low-voltage electrical interfaces, telecom, audio, and data systems,
stepping into the world of development to help businesses reach their target customers and
communicate with them more effectively.
Interested in connecting with anyone that coaches, mentors, supports, or helps to inspire
engineers, at any level.</p>
<a href="https://www.linkedin.com/in/vernellclark/" target="_blank" rel="noopener"
aria-label="Vernell's LinkedIn"><i class="fab fa-linkedin fa-2x"
style="color: rgb(255, 255, 255)"></i></a>
<a href="https://github.com/VCGithubCode/" target="_blank" rel="noopener" aria-label="Vernell's GitHub"><i
class="fab fa-github fa-2x" style="color: rgb(255, 255, 255)"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card container-fluid" style="background-color: #FA6D48;">
<img src="./assets/static/images/Jaqi.png" class="card-img-top" alt="Jaqi image">
<div class="card-body">
<h5 class="card-title" style="color: rgb(255, 255, 255);">Jacqueline</h5>
<div class="card-text">
<p style="color: rgb(255, 255, 255);">I am curious with a strong motivation to understand the
whole
picture and see flows and events from a larger perspective. My interest is in creating smooth
flows,
coordinating and optimising operations. At the moment I am studying, adding knowledge of
programming
and AI. Using HTML, CSS, JavaScript, Python and more & learning more every day. </p>
<a href="https://www.linkedin.com/in/jacqueline-kalmar/" target="_blank" rel="noopener"
aria-label="Jaqi's LinkedIn"><i class="fab fa-linkedin fa-2x"
style="color: rgb(255, 255, 255)"></i></a>
<a href="https://github.com/JaqiKal" target="_blank" rel="noopener" aria-label="Jaqi's GitHub"><i
class="fab fa-github fa-2x" style="color: rgb(255, 255, 255)"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card container-fluid" style="background-color: #FA6D48;">
<img src="./assets/static/images/Amir.jpg" class="card-img-top" alt="Amir Image">
<div class="card-body">
<h5 class="card-title" style="color: rgb(255, 255, 255);">Amirhossein</h5>
<div class="card-text">
<p style="color: rgb(255, 255, 255);">In addition to my passion for material science, I am also
deeply
engaged in the world of software development. With a keen interest in Data Science and Machine
Learning. My goal is to bring together the best of both worlds; material science and software
development; for innovative solutions that drive technological advancements.</p>
<a href="https://www.linkedin.com/in/amirhosseinbayani/" target="_blank" rel="noopener"
aria-label="Amirhossein's LinkedIn"><i class="fab fa-linkedin fa-2x"
style="color: rgb(255, 255, 255)"></i></a>
<a href="https://github.com/teman67/" target="_blank" rel="noopener" aria-label="Amirhossein's GitHub"><i
class="fab fa-github fa-2x" style="color: rgb(255, 255, 255)"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card container-fluid" style="background-color: #FA6D48;">
<img src="./assets/static/images/Emma.png" class="card-img-top" alt="Emma image">
<div class="card-body">
<h5 class="card-title" style="color: rgb(255, 255, 255);">Emma</h5>
<div class="card-text">
<p style="color: rgb(255, 255, 255);">I am currently studying Full Stack Development part-time
with
Code Institute, with the goal of pursuing a career in tech. I was a science teacher,
specialising
in
Chemistry and Physics, for 10 years. This included a
middle-leader role as KS3 lead. I studied for a science undergraduate degree in Chemistry before
undertaking my teaching diploma. I
then completed my Masters degree in Education with a focus on Gender in Science Education.
</p>
<a href="https://www.linkedin.com/in/emma-lamont/" target="_blank" rel="noopener" aria-label="Emmas's LinkedIn"><i
class="fab fa-linkedin fa-2x" style="color: rgb(255, 255, 255)"></i></a>
<a href="https://github.com/elamont174" target="_blank" rel="noopener" aria-label="Emmas's GitHub"><i
class="fab fa-github fa-2x" style="color: rgb(255, 255, 255)"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card container-fluid" style="background-color: #FA6D48;">
<img src="./assets/static/images/Mikaela.jpg" class="card-img-top" alt="Mikaela Image">
<div class="card-body">
<h5 class="card-title" style="color: rgb(255, 255, 255);">Mikaela</h5>
<div class="card-text">
<p style="color: rgb(255, 255, 255);">By day, I'm a compassionate nurse committed to caring for
others. But when night falls, I transition into the world of programming, where I find both
challenge and fulfillment. Proficient in HTML, CSS, and JavaScript, I thrive on the logical
puzzles inherent in coding. My ultimate goal is to become a full-stack software developer,
bridging my nursing background with my programming skills to create meaningful solutions that
positively impact lives every day.</p>
<a href="https://www.linkedin.com/in/mikaela-virtucio-b01962274/" target="_blank"rel="noopener"
aria-label="Mikaela's LinkedIn"><i class="fab fa-linkedin fa-2x"
style="color: rgb(255, 255, 255)"></i></a>
<a href="https://github.com/mikavir" target="_blank" rel="noopener" aria-label="Mikaelas's LinkedIn"><i
class="fab fa-github fa-2x" style="color: rgb(255, 255, 255)"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card container-fluid" style="background-color: #FA6D48;">
<img src="./assets/static/images/Patrick.png" class="card-img-top" alt="Patrick Image">
<div class="card-body">
<h5 class="card-title" style="color: rgb(255, 255, 255);">Patrick</h5>
<div class="card-text">
<p style="color: rgb(255, 255, 255);">I am a self-taught website designer with more than 12 years of experience in the field. Now, I am shifting my focus towards becoming a front-end software engineer while also embracing the complexities of the backend, as I work towards a full-stack diploma. My passion for coding and problem-solving drives me to excel in both design and development. I relish the opportunity to collaborate with others who share a commitment to creating solutions and advancing technology.</p>
<a href="https://www.linkedin.com/in/patrickhladun/" target="_blank" rel="noopener"
aria-label="Patrick's LinkedIn"><i class="fab fa-linkedin fa-2x"
style="color: rgb(255, 255, 255)"></i></a>
<a href="https://github.com/patrickhladun" target="_blank" rel="noopener" aria-label="Patrick's LinkedIn"><i
class="fab fa-github fa-2x" style="color: rgb(255, 255, 255)"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card container-fluid" style="background-color: #FA6D48;">
<img src="./assets/static/images/Ray.png" class="card-img-top" alt="Raymond Image">
<div class="card-body">
<h5 class="card-title" style="color: rgb(255, 255, 255);">Raymond</h5>
<div class="card-text">
<p style="color: rgb(255, 255, 255);">I approach software development as a full stack developer
with
the same fervour and passion as I have for the past 10 years as a professional classical
musician.
Notable technologies I use are Python, Django and Flask, alongside standard development
technologies
such as HTML, CSS, Javascript and Bootstrap.
I love projects which merge my avid interests in both backend and frontend technologies,
alongside
solid UX and UI principals.</p>
<a href="https://www.linkedin.com/in/raymond-brien-97861a97/" target="_blank" rel="noopener"
aria-label="Raymond's LinkedIn"><i class="fab fa-linkedin fa-2x"
style="color: rgb(255, 255, 255)"></i></a>
<a href="https://github.com/RaymondBrien" target="_blank" rel="noopener" aria-label="Raymond's GitHub"><i
class="fab fa-github fa-2x" style="color: rgb(255, 255, 255)"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-4">
<div class="card container-fluid" style="background-color: #FA6D48;">
<img src="./assets/static/images/Lauren.png" class="card-img-top" alt="Lauren Image">
<div class="card-body">
<h5 class="card-title" style="color: rgb(255, 255, 255);">Lauren</h5>
<div class="card-text">
<p style="color: rgb(255, 255, 255);">
Lauren's contributions as a team player have been truly exceptional. Her expertise as a web developer shines through in her work on designing our 404 page and contact page. Despite juggling multiple commitments, she consistently went above and beyond to assist the team, demonstrating remarkable dedication and initiative.</p>
<a href="http://www.linkedin.com/in/lauren-yeung-553134262" target="_blank" rel="noopener" aria-label="Lauren's LinkedIn"><i
class="fab fa-linkedin fa-2x" style="color: rgb(255, 255, 255);"></i></a>
<a href="https://github.com/Lauren21717" target="_blank" rel="noopener" aria-label="Lauren's GitHub"><i
class="fab fa-github fa-2x" style="color: rgb(255, 255, 255);"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer py-4">
<div class="container">
<p class="text-center">Created to Spread Happiness</p>
<p class="text-center"> World Happiness Day 😁</p>
<p class="text-center">© The Great Wall of Gratitude 2024</p>
</div>
</footer>
</body>
</html>