-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (178 loc) · 7.97 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>honesta11y</title>
<meta name="description" content="Accessibility for humans." />
<meta property="og:image" content="https://siteimage.jpg">
<meta property="og:url" content="http://index.html">
<!-- CSS lives here -->
<link href="css/main.css" rel="stylesheet">
<link href="css/a11y.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,800,900|Roboto:300,400,500,700|Open+Sans:300,400,700|Material+Icons' rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<!-- scripts live here -->
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<section class="hero is-link is-medium is-bold">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<p class="is-size-3 has-text-white has-text-weight-bold">honesta11y.</p>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<a class="button is-white is-outlined" target="_blank" href="https://davidbkay.github.io/honestally">
<span class="icon">
<i class="far fa-meh"></i>
</span>
<span>
About Me
</span>
</a>
</p>
<p class="control">
<a class="button is-white is-outlined" href="https://github.com/davidbkay/honesta11y">
<span class="icon">
<i class="fab fa-github"></i>
</span>
<span>Github</span>
</a>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container">
<div class="column is-6 is-offset-1">
<p class="is-size-1 is-size-4-touch has-text-primary">
<span class="has-text-white has-text-weight-bold">Accessibility</span> isn't that hard.</p>
<p class="is-size-4 is-size-6-touch has-text-primary">It's time to build applications everyone can use. It's time for
applications to be <span class="has-text-white has-text-weight-bold">'born accessible'</span> instead
of having accessibility added as an afterthought.
</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-3">
<p class="is-size-3">Why it's
<span class="has-text-weight-bold has-text-info">important.</span>
</p>
<p class="is-size-6 has-text-link">Don't think about accessibility much? Then you're not one of the almost
<a class="has-text-weight-bold has-text-info">60 MILLION</a>
Americans that live with a disability on a daily basis.
</p>
</div>
<div class="column is-3">
<p class="is-size-3">Why should I
<span class="has-text-weight-bold has-text-danger">care?</span>
</p>
<p class="is-size-6 has-text-link">This isn't about doing favors. This is about giving everyone the opportunity
to access content and services. Oh, and it's most likely <span class="has-text-weight-bold has-text-danger">THE LAW</span>
where you work.
</p>
</div>
<div class="column is-3">
<p class="is-size-3">But <span class="has-text-weight-bold has-text-success">I'm</span> not disabled!
</p>
<p class="is-size-6 has-text-link">So? Someone you know likely is. And you didn't even notice because of
some sort of accessibility aid they didn't tell you about.
</p>
</div>
</div>
</div>
</section>
<section class="section is-medium is-light">
<div class="container">
<div class="columns">
<div class="column">
<article class="tile notification is-child is-primary" style="box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<p class="title has-text-weight-bold">Leaders</p>
<p class="subtitle">Demand accessibility.</p>
<div class="content">
Tips to initiate, plan, implement and sustain accessibility in your digital services.
</div>
<a class="button is-link is-medium is-fullwidth has-text-white">Learn More</a>
</article>
</div>
<div class="column">
<article class="tile notification is-child is-success" style="box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<p class="title has-text-weight-bold">Designers</p>
<p class="subtitle">'Born accessible' design.</p>
<div class="content">
Use typography, colors, contrast, layout and interactivity for accessibility.
</div>
<a class="button is-link is-medium is-fullwidth has-text-white">Learn More</a>
</article>
</div>
<div class="column">
<article class="tile notification is-child is-warning" style="box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<p class="title has-text-weight-bold">Developers</p>
<p class="subtitle">Making it all work.</p>
<div class="content">
Write accessible code that conveys meaning, structure and interactivity.
</div>
<a class="button is-link is-medium is-fullwidth has-text-white">Learn More</a>
</article>
</div>
<div class="column">
<article class="tile notification is-child is-info" style="box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<p class="title has-text-weight-bold">Resources</p>
<p class="subtitle">People smarter than me.</p>
<div class="content">
If you just CAN'T get enough information about accessibility, see here.
</div>
<a class="button is-link is-medium is-fullwidth has-text-white">Learn More</a>
</article>
</div>
</div>
</div>
</section>
<section class="section is-white is-medium">
<div class="container has-text-centered">
<h1 class="title is-2">Inspiration & Friends</h1>
<nav class="columns is-vcentered is-centered">
<div class="column is-8">
<div class="level">
<div class="level-item">
<img src="https://bulma.io/images/bulma-logo.png" width="200px">
</div>
<div class="level-item">
<img src="https://18f.gsa.gov/assets/img/logos/18f-logo.svg" width="100px">
</div>
<div class="level-item">
<img src="./static/img/mrmrs.png" width="150px">
</div>
<div class="level-item">
<img src="https://webaim.org/media/logo.png" width="200px">
</div>
</div>
</div>
</nav>
</div>
</section>
<script async type="text/javascript" src="../js/bulma.js"></script>
</body>
</html>