generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 2
/
team.html
308 lines (297 loc) · 18.6 KB
/
team.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
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Bootstrap 5-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Import Futura from Adobe Fonts-->
<link rel="stylesheet" href="https://use.typekit.net/hdw8ydb.css">
<!--AOS Animations -->
<script src="https://unpkg.com/[email protected]/dist/aos.js">
</script>
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css">
<title>INKLUSION</title>
</head>
<body>
<!--header-->
<header class="bg-light pb-5">
<!-- Navigation -->
<nav class="navbar fixed-top bg-light navbar-expand-lg shadow-lg">
<div class="container-fluid">
<!-- Logo -->
<a class="navbar-brand" href="index.html" id="logo"><i class="fa-solid fa-droplet"></i><span
class="rainbow-text">INK</span>LUSION</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-label="Go to the homepage" href="index.html">Home</a>
</li>
<li class="gallery-dropdown dropdown">
<a class="nav-link dropdown-toggle" href="#" id="galleryDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Gallery
</a>
<div class="gallery-dropdown-menu dropdown-menu" aria-labelledby="galleryDropdown">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Claude Cahun artwork"
href="index.html#gallery">View All</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Claude Cahun artwork"
href="index.html#cahun">Claude Cahun</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Gluck artwork"
href="index.html#gluck">Gluck</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Beauford Delaney artwork"
href="index.html#delaney">Beauford Delaney</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Frida Kahlo artwork"
href="index.html#kahlo">Frida Kahlo</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Francis Bacon artwork"
href="index.html#bacon">Francis Bacon</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Andy Warhol artwork"
href="index.html#warhol">Andy Warhol</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Robert Mapplethorpe artwork"
href="index.html#mapplethorpe">Robert Mapplethorpe</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Keith Haring artwork"
href="index.html#haring">Keith Haring</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Catherine Opie artwork"
href="index.html#opie">Catherine Opie</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<a class="dropdown-item" aria-label="Go to the Zanele Muholi artwork"
href="index.html#muholi">Zanele Muholi</a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" aria-label="Go to the team page" href="team.html">Team</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-nav btn-modal" data-bs-toggle="modal"
data-bs-target="#resourceModal">Get Involved</button>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--./header-->
<section class="team p-3 p-lg-5" id="team-section">
<!--container for team page starts here-->
<div class="container-fluid jumbotron">
<div class="row team-row">
<div class="col-12 text-center">
<h1 class="section-header">Meet the Team</h1>
<p class="team-quote my-3 my-lg-4">“Coming together is a beginning. Keeping together is progress.
Working together is success.” - Henry Ford</p>
</div>
<div class="d-flex justify-content-center center text-center">
<hr>
</div>
</div>
<!--grid for team cards will go here-->
<div class="row text-center justify-content-center p-xxl-5 mt-2">
<div class="card col-lg-4 col-sm-6 mt-2" id="team-card">
<img src="assets/images/team-pictures/stephanie.jpg" class="card-img-top" alt="stephanie-pic">
<div class="card-body">
<h5 class="card-title">Stephanie Ashdown</h5>
<p>
<a class="link" href="https://www.linkedin.com/in/stephanie-ashdown/" target="_blank">
<i class="fab fa-linkedin me-3 my-3"></i></a>
<a href="https://github.com/Stephanie-Ash" target="_blank"> <i class="fab fa-github"></i>
</a>
</p>
<p class="team-quotes">"I put the + in the LGBTQIA+"</p>
</div>
</div>
<div class="card col-lg-4 col-sm-6 mt-2" id="team-card-1">
<img src="assets/images/team-pictures/fimber.jpg" class="card-img-top" alt="fimber-pic">
<div class="card-body">
<h5 class="card-title">Fimber Uchenna</h5>
<p>
<a href="https://www.linkedin.com/in/fimber-uchenna/" target="_blank">
<i class="fab fa-linkedin me-3 my-3"></i></a>
<a href="https://github.com/uchenna631" target="_blank"><i class="fab fa-github"></i></a>
</p>
<p class="team-text-small">"Never be bullied into silence. Never allow yourself to be made a
victim. Accept no one’s definition of your life; define yourself." — Harvey Fierstein</p>
</div>
</div>
<div class="card col-lg-4 col-sm-6 mt-2" id="team-card-2">
<img src="assets/images/team-pictures/allisa.jpg" class="card-img-top" alt="darlyn-pic">
<div class="card-body">
<h5 class="card-title">Alissa Troiano</h5>
<p>
<a href="https://www.linkedin.com/in/alissatroiano/" target="_blank">
<i class="fab fa-linkedin me-3 my-3"></i></a>
<a href="https://github.com/alissatroiano" target="_blank"><i class="fab fa-github"></i></a>
</p>
<p class="team-text-small">“I am not gay, but if I were, I would be the first one running out of
the closet.” — Dolly Parton</p>
</div>
</div>
<div class="card col-lg-4 col-sm-6 mt-2" id="team-card-3">
<img src="assets/images/team-pictures/sherry.png" class="card-img-top" alt="sherry-pic">
<div class="card-body">
<h5 class="card-title">Sherry Andrews Bhutia</h5>
<p>
<a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin me-3 my-3"></i></a>
<a href="https://github.com/CodeConnoisseur74" target="_blank"><i class="fab fa-github"></i></a>
</p>
<p class="team-text-small">"When you put love out in the world it travels, and it can touch
people and reach people in ways that we never even expected." — Laverne Cox</p>
</div>
</div>
<div class="card col-lg-4 col-sm-6 mt-2" id="team-card-4">
<img src="assets/images/team-pictures/zabeena.jpg" class="card-img-top" alt="zabeena-pic">
<div class="card-body">
<h5 class="card-title">Zabeena Sherzoie</h5>
<p>
<a href="https://www.linkedin.com/in/zabeena-sherzoie-660871232/" target="_blank">
<i class="fab fa-linkedin me-3 my-3"></i></a>
<a href="https://github.com/ZabeenaSherzoie" target="_blank"><i
class="fab fa-github"></i></a>
</p>
<p class="team-text-small">"We have to do it because we can no longer stay invisible. We have to
be visible. We should not be ashamed of who we are." — Sylvia Rivera</p>
</div>
</div>
</div>
</div>
</section>
<!-- Resources Modal -->
<div class="modal fade" id="resourceModal" tabindex="-1" aria-labelledby="resourceModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="resourceModalLabel">Learn, Donate, Create</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="mb-1">Whether you're a LGBTQIA+ artist youself or are keen to meet and support those who
are, the
below sites are a great way to start connecting with the LGBTQIA+ creative community.</p>
<ul class="resources">
<li>
<a href="http://www.alliesinarts.org/" target="_blank" rel="noopener"
aria-label="Visit the Allies in Arts website (opens in a new tab)">Allies in Arts</a>
</li>
<li>
<a href="https://www.queer-art.org/" target="_blank" rel="noopener"
aria-label="Visit the Queer Ary website (opens in a new tab)">Queer Art</a>
</li>
<li>
<a href="https://queercircle.org/" target="_blank" rel="noopener"
aria-label="Visit the Queercircle website (opens in a new tab)">Queercircle</a>
</li>
<li>
<a href="https://www.queerdesign.club/" target="_blank" rel="noopener"
aria-label="Visit the Queer Design club website (opens in a new tab)">Queer Design
Club</a>
</li>
<li>
<a href="https://www.instagram.com/arthoecollective/" target="_blank" rel="noopener"
aria-label="Visit the Art Hoe Collective Instagram (opens in a new tab)">Art Hoe
Collective</a>
</li>
<li>
<a href="https://www.instagram.com/btfacollective/" target="_blank" rel="noopener"
aria-label="Visit the Black Trans Femmes in the Arts Instagram (opens in a new tab)">Black
Trans Femmes in the Arts</a>
</li>
<li>
<a href="https://curiousarts.org.uk/" target="_blank" rel="noopener"
aria-label="Visit the Curious Arts website (opens in a new tab)">Curious Arts</a>
</li>
<li>
<a href="https://docs.google.com/spreadsheets/u/0/d/1wVeTJqrzetRUryrJUN8Ep93Kb-Kf7e_A7fIT-iuLTVo/htmlview#gid=177453409"
target="_blank" rel="noopener"
aria-label="Visit the Queer Creatives Community Directory (opens in a new tab)">Queer
Creatives Community Directory</a>
</li>
<li>
<a href="https://www.queerartprojects.co.uk/" target="_blank" rel="noopener"
aria-label="Visit the Queer Art Projects website (opens in a new tab)">Queer Art
Projects</a>
</li>
<li>
<a href="https://qyac.org.uk/" target="_blank" rel="noopener"
aria-label="Visit the Queer Youth Art Collective website (opens in a new tab)">Queer
Youth Art Collective</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="my-4 footer container-fluid">
<div class="clearfix text-center footer-logo">
<a class="navbar-brand" href="index.html" id="foot-logo"><i class="fa-solid fa-droplet"></i><span
class="rainbow-text">INK</span>LUSION</a>
</div>
<ul class="nav justify-content-center">
<li class="nav-item"><a href="index.html" class="nav-link px-2">Home</a></li>
<li class="nav-item"><a href="index.html#gallery" class="nav-link px-2">Gallery</a></li>
<li class="nav-item"><a href="team.html" class="nav-link px-2">Team</a></li>
<li class="nav-item"><button type="button" class="btn btn-modal" data-bs-toggle="modal"
data-bs-target="#resourceModal">Get Involved</button></li>
</ul>
<ul class="nav justify-content-center justify-content-sm-end">
<li class="nav-item"><a href="https://www.facebook.com/Code.InstituteIRL/" target="_blank"
class="nav-link px-2 text-muted"><i class="fa-brands fa-facebook"></i></a></li>
<li class="nav-item"><a href="https://twitter.com/codeinstitute" target="_blank"
class="nav-link px-2 text-muted"><i class="fa-brands fa-twitter"></i></a></li>
<li class="nav-item"><a href="https://www.linkedin.com/school/code-institute/mycompany/" target="_blank"
class="nav-link px-2 text-muted"><i class="fa-brands fa-linkedin"></i></a></li>
<li class="nav-item"><a href="https://github.com/Code-Institute-Community/ci-hackathon-app" target="_blank"
class="nav-link px-2 text-muted"><i class="fa-brands fa-github"></i></a></li>
</ul>
<p class="text-center text-muted"><small>© 2022 Code Institutes Pride Hackathon Team - CTRL ALT Elite</small>
</p>
</footer>
<!-- Bootstrap 5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/2408548ad3.js" crossorigin="anonymous"></script>
<script>
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle, { toggle: false })
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.toggle() })
})
</script>
<!--Custom JS-->
<script src="assets/js/script.js"></script>
</body>
</html>