forked from fac-13/plhh
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
320 lines (271 loc) · 16.3 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
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="en">
<head>
<title>Plhh</title>
<meta charset="UTF-8" />
<meta name="description" content="FAC first week project" />
<meta name="keywords" content="HTML,CSS,ACCESSIBILITY" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta author="Parissa Lawrence Helen Haydn" />
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="header__skiplinks" role="bypass the navigation menus for screen readers">
<a href="#about" class="skip-link">skip to main content</a>
</nav>
<header aria-label="site header area" id="top" class="header" role="site banner">
<h1 class="header__title">PLHH</h1>
<nav class="header__nav" role="main site navigation">
<div class="header__hamburger">
<input type="checkbox" id="menu-check" role="collapsible mobile first menu" />
<label for="menu-check"></label>
<ul class="header__list" role="page links list">
<li>
<a href="#about" class="header__item">About</a>
</li>
<li>
<a href="#team" class="header__item">Team</a>
</li>
<li>
<a href="#contact" class="header__item">Contact</a>
</li>
</ul>
</div>
</nav>
<nav class="fixed__nav" role="return to top navigation for mobile users">
<span class="back-to-top-icon"><a aria-label="back to page top button" href="#"><img src="assets/arrow-up-circle.svg" alt="arrow up button icon" /></a></span>
</nav>
</header>
<section aria-label="site about area" id="about" class="about">
<div class="inner-section">
<h2 class="section__title">About</h2>
<p aria-label="about our company blurb" class="section__text">PLHH met at
<a href="https://foundersandcoders.com/" target="_blank">Founders & Coders</a> in February 2018.<br /><br />We loved working together and formed a design agency built upon our core values and specialising in projects
for the non-profit sector.<br /><br />We can't wait to hear from you!</p>
<article aria-label="values card" class="card">
<header aria-label="values card header" class="card__header">
<figure>
<img src="assets/value-accessibility.svg" alt="this is a generic about icon image" title="accessible Icon" />
</figure>
<h3 class="card__name">Accessible</h3>
</header>
<main aria-label="values card body" class="card__body">
<p class="card__blurb">Accessibility is a fundamental value of PLHH. We believe internet users should be able to access content
no matter what their preferred device, their connection speed, or their use of assistive technologies.</p>
</main>
</article>
<article aria-label="values card" class="card">
<header aria-label="values card header" class="card__header">
<figure>
<img src="assets/value-fast.svg" alt="this is a generic about icon image" title="fast Icon" />
</figure>
<h3 class="card__name">Fast</h3>
</header>
<main aria-label="values card body" class="card__body">
<p class="card__blurb">We avoid using bloated frameworks and libraries and write lean code so that your sites and apps will
run at lightning speed - any time, anywhere!</p>
</main>
</article>
<article aria-label="values card" class="card">
<header aria-label="values card header" class="card__header">
<figure>
<img src="assets/value-secure.svg" alt="this is a generic about icon image" title="secure Icon" />
</figure>
<h3 class="card__name">Secure</h3>
</header>
<main aria-label="values card body" class="card__body">
<p class="card__blurb">Since we don't know how to build you a backend yet, you won't have any data to be stolen!</p>
</main>
</article>
<article aria-label="values card" class="card">
<header aria-label="values card header" class="card__header">
<figure>
<img src="assets/value-community.svg" alt="this is a generic about icon image" title="community Icon" />
</figure>
<h3 class="card__name">Community</h3>
</header>
<main aria-label="values card body" class="card__body">
<p class="card__blurb">We will publish your code on the web... Perhaps you don't want that, but the community loves it. Open
source facilitates best prectices for everybody.</p>
</main>
</article>
</div>
</section>
<section aria-label="team" id="team" class="team">
<div class="inner-section">
<h2 class="section__title">Team</h2>
<article aria-label="card" class="card">
<header aria-label="team member header" class="card__header">
<figure aria-label="" id="" class="card__avatar">
<img src="https://avatars3.githubusercontent.com/u/29815092?s=460&v=4" alt="this is a photo of Parissa" title="Team Member Avatar"
/>
</figure>
<h3 aria-label="team member name" class="card__name">Parissa</h3>
</header>
<main aria-label="team member body" class="card__body">
<h2 aria-label="team member role" class="card__role">Lead Developer</h2>
<p aria-label="team member statement" class="card__blurb">Line Commander - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</main>
<footer aria-label="team member footer" class="card__footer">
<ul aria-label="team member social media" class="card__social-media">
<li>
<a aria-label="team member github link" href="https://github.com/Parissai">
<i alt="github link" class="fab fa-github fa-2x"></i>
</a>
</li>
<li>
<a aria-label="team member freecodecamp link" href="https://www.freecodecamp.org/parissai">
<i alt="freecodecamp link" class="fab fa-free-code-camp fa-2x"></i>
</a>
</li>
<li>
<a aria-label="team member linkedin link" href="https://www.linkedin.com/">
<i alt="linkedin link" class="fab fa-linkedin fa-2x"></i>
</a>
</li>
</ul>
</footer>
</article>
<article aria-label="card" class="card">
<header aria-label="team member header" class="card__header">
<figure aria-label="" id="" class="card__avatar">
<img src="https://avatars0.githubusercontent.com/u/18592207?s=460&v=4" alt="this is a photo of Parissa" title="Team Member Avatar"
/>
</figure>
<h3 aria-label="team member name" class="card__name">Lawrence</h3>
</header>
<main aria-label="team member body" class="card__body">
<h2 aria-label="team member role" class="card__role">Lead Developer</h2>
<p aria-label="team member statement" class="card__blurb">RegExpert - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</main>
<footer aria-label="team member footer" class="card__footer">
<ul aria-label="team member social media" class="card__social-media">
<li>
<a aria-label="team member github link" href="https://github.com/LawEKS">
<i alt="github link" class="fab fa-github fa-2x"></i>
</a>
</li>
<li>
<a aria-label="team member freecodecamp link" href="https://www.freecodecamp.org/LawEKS">
<i alt="freecodecamp link" class="fab fa-free-code-camp fa-2x"></i>
</a>
</li>
<li>
<a aria-label="team member linkedin link" href="https://www.linkedin.com/">
<i alt="linkedin link" class="fab fa-linkedin fa-2x"></i>
</a>
</li>
</ul>
</footer>
</article>
<article aria-label="card" class="card">
<header aria-label="team member header" class="card__header">
<figure aria-label="" id="" class="card__avatar">
<img src="https://avatars3.githubusercontent.com/u/22300973?s=460&v=4" alt="this is a photo of Parissa" title="Team Member Avatar"
/>
</figure>
<h3 aria-label="team member name" class="card__name">Haydn</h3>
</header>
<main aria-label="team member body" class="card__body">
<h2 aria-label="team member role" class="card__role">Lead Developer</h2>
<p aria-label="team member statement" class="card__blurb">Accessibility - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</main>
<footer aria-label="team member footer" class="card__footer">
<ul aria-label="team member social media" class="card__social-media">
<li>
<a aria-label="team member github link" href="https://github.com/haydnba">
<i alt="github link" class="fab fa-github fa-2x"></i>
</a>
</li>
<li>
<a aria-label="team member freecodecamp link" href="https://www.freecodecamp.org/haydnba">
<i alt="freecodecamp link" class="fab fa-free-code-camp fa-2x"></i>
</a>
</li>
<li>
<a aria-label="team member linkedin link" href="https://www.linkedin.com/">
<i alt="linkedin link" class="fab fa-linkedin fa-2x"></i>
</a>
</li>
</ul>
</footer>
</article>
<article aria-label="card" class="card">
<header aria-label="team member header" class="card__header">
<figure aria-label="" id="" class="card__avatar">
<img src="https://avatars3.githubusercontent.com/u/25727036?s=460&v=4" alt="this is a photo of Parissa" title="Team Member Avatar"
/>
</figure>
<h3 aria-label="team member name" class="card__name">Helen</h3>
</header>
<main aria-label="team member body" class="card__body">
<h2 aria-label="team member role" class="card__role">Lead Developer</h2>
<p aria-label="team member statement" class="card__blurb">CSS Star - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</main>
<footer aria-label="team member footer" class="card__footer">
<ul aria-label="team member social media" class="card__social-media">
<li>
<a aria-label="team member github link" href="https://github.com/helenzhou6">
<i alt="github link" class="fab fa-github fa-2x"></i>
</a>
</li>
<li>
<a aria-label="team member freecodecamp link" href="https://www.freecodecamp.org/helenzhou6">
<i alt="freecodecamp link" class="fab fa-free-code-camp fa-2x"></i>
</a>
</li>
<li>
<a aria-label="team member linkedin link" href="https://www.linkedin.com/">
<i alt="linkedin link" class="fab fa-linkedin fa-2x"></i>
</a>
</li>
</ul>
</footer>
</article>
</div>
</section>
<section aria-label="site contact area" id="contact" class="contact">
<div class="inner-section">
<h2 class="section__title">Contact</h2>
<form action="https://formspree.io/your@email.com" class="contact__form" autocomplete="on" method="post">
<label for="firstname" class="form__label">First Name
<input name="First Name" id="firstname" type="text" placeholder="John" required/>
</label>
<label for="lastname" class="form__label">Last Name
<input id="lastname" name="Last Name" type="text" placeholder="Smith" required/>
</label>
<label for="email" class="form__label">Email
<input id="email" name="Email" type="email" placeholder="your@email.com" required/>
</label>
<label for="message" class="form__label form__message">Message
<textarea id="message" name="Message" type="text" form="contact" placeholder="Your message" required></textarea>
</label>
<div class="form__submit">
<label for="submit" class="is-hidden">Submit</label>
<button class="form__button" id="submit" name="Submit" type="submit" />Submit
</button>
</div>
</form>
<p aria-label="user client email option area" class="section__text contact__email">
Prefer email? Shoot us
<a href="mailto:hello@plhh.com?subject=Enquiry&body=First name:%0D%0ALast name:%0D%0AYour email address:%0D%0AMessage:">an email (hello@plhh.com)</a> instead and include your first name, last name, message and your email address
:)
</p>
</div>
</section>
<footer aria-label="site footer" id="footer" class="footer" role="page footer">
<section aria-label="site social media section" class="footer__links">
<ul>
<li><a aria-label="site github link" href="https://github.com/fac-13/plhh"><i class="fab fa-github"></i></a></li>
<li><a aria-label="site twitter link" href="https://twitter.com/PLHH"><i class="fab fa-twitter"></i></a></li>
<li><a aria-label="site facebook link" href="https://facebook.com/PLHH"><i class="fab fa-facebook"></i></a></li>
</ul>
</section>
<section aria-label="site copyright section" class="footer__copyright">
<p>© PLHH <span class="js-year"></span></p>
</section>
</footer>
<script src="script.js" type="text/javascript"></script>
</body>
</html>