-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
206 lines (172 loc) · 12.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
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bread and Butter</title>
<link rel="icon" type="image/x-icon" href="assets/Overig/favicon.png">
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/stylesheet.css">
<script src="script/script.js" defer></script>
</head>
<body>
<header>
<img src="assets/Overig/just-logo.svg" class="just-logo" tabindex="0">
<!-- source universe.io -->
<label for="theme" class="theme">
<input id="theme" class="theme-toggle"
type="checkbox" role="switch" name="theme" value="dark">
<!-- waarom worden deze niet transparant op de achtergrond? -->
<img src="assets-student/moon.svg" class="moonicon" tabindex="1" alt="darkmode togglebutton">
<img src="assets-student/sun.svg" class="sunicon" tabindex="2" alt="lightmode togglebutton">
</label>
<button id="zones">
<p>CSS-zones</p>
</button>
<button id="grayscale">
<p>Grayscale</p>
</button>
<div class="togglebttn">
<img src="assets-student/moon.svg" width="32px" tabindex="3" alt="darkmode togglebutton">
<img src="assets-student/sun.svg" width="32px" tabindex="4" alt="lightmode togglebutton">
</div>
</header>
<section class="banner">
<div class="slideshowfront" tabindex="5" alt="slideshow of Bread and Butter Event">
</div>
<img src="assets/Overig/b&b-white.svg" class="logo" alt="Logo Dark Mode" tabindex="6" alt="slideshow of Bread and Butter Event">
</section>
<section class="hidden" tabindex="7">
<h1 tabindex="8">The Future of <span>Accesibitily<span></h1>
<p tabindex="9">On November 28, we hosted our first Bread & Butter event—a moment to share insights and connect with clients. This edition focused on “The Future of Accessibility”, featuring a workshop by the inspiring <span> Fresco Sam-Sin </span> and a talk from Tizian Fendt, UX Designer at JUST.</p>
<p tabindex="10"> Together, we explored innovative ideas and actionable strategies to make accessibility a priority in today’s ever-evolving world. Stay tuned for our next Bread & Butter event, where we’ll continue fostering meaningful conversations and empowering our community with knowledge. </p>
</section>
<section class="hidden" tabindex="11">
<h2>Why accessiblity matters</h2 tabindex="12">
<p tabindex="13">Accessibility matters because 1.3 billion people worldwide, including 2 million in the Netherlands, experience significant disabilities, and over half of Dutch smartphone users rely on accessibility settings to navigate their devices. </p>
</section>
<section class="hidden" class="quote" tabindex="14">
<div class="hidden textballoon" tabindex="15">
<h2 tabindex="16">Digital Accessibility improves the experience for all users, not just those with disabilities.</h2>
<p tabindex="17">Tizian Fendt, UX designer at JUST</p>
</div>
<img class="sample" src="assets-student/61ffd1e68159f61573be4a90_portfolio-hero.jpg" tabindex="18" alt="Tizian Fendt presentatie">
</section>
<section class="hidden" class="mindsetshift" tabindex="19">
<h2 tabindex="20">Why we need a minset shift</h2>
<p tabindex="21">Neglecting to prioritize accessibility not only excludes a significant portion of your audience but also means missing out on a range of advantages that can greatly enhance your digital presence. Accessible design leads to a better overall user experience for everyone, as it ensures your website is intuitive and easy to navigate. It also often results in faster loading times, as accessibility improvements typically streamline functionality and optimize performance. Additionally, websites that prioritize accessibility tend to rank higher on Google, as search engines reward sites with better usability and structure. This improved SEO translates to greater visibility, helping you reach more potential customers. Ultimately, by embracing accessibility, you not only foster inclusivity but also enjoy higher conversion rates, as more users can engage seamlessly with your content or services.</p>
</section>
<section class="photocarrousel" tabindex="22">
<h2 tabindex="23">Photo Library</h2>
<!-- all photos -->
<div class="navigation">
<img src="assets/Svg's/Arrow.svg" alt="Arrow sticker" class="arrow-left" tabindex="24">
<div class="nothing" tabindex="25"></div>
<div class="carrousel">
<article id="photo1">
<img src="assets/Images/0a090e44-2dbc-4675-a7ac-ae48399152b2.JPG" width="500px" id="1" tabindex="26" alt="Tizian Fendt presents">
<p>Tizian Fendt, UX designer at JUST talking about why accessibility matters.</p>
</article>
<article id="photo2">
<img src="assets/Images/1aa98921-a025-4ee3-a34c-808cdfea5533.JPG" width="500px" id="2" tabindex="27" alt="Annika Geurtsen opens event">
<p>Annika Geurtsen, strategist and partner at JUST opening the event.</p>
</article>
<article id="photo3">
<img src="assets/Images/1cd49476-e5b4-441a-9373-59b9d6469489.JPG" width="500px" id="3" tabindex="28" alt="Full house at studio">
<p>Full house at our studio.</p>
</article>
<article id="photo4">
<img src="assets/Images/4ee27e5b-c719-4d25-b718-e815a5aac952.JPG" width="500px" id="4" tabindex="29" alt="Annika and Fresco prepares event">
<p>Annika and Fresco prepping the event.</p>
</article>
<article id="photo5">
<img src="assets/Images/4f3858a1-4599-4bd7-9325-164715a760b8.JPG" width="500px" id="5" tabindex="30" alt="Tizian Fendt presents]">
<p>Tizian Fendt, UX designer at JUST talking about why accessibility matters.</p>
</article>
<article id="photo6">
<img src="assets/Images/59ff4d18-363f-4ae9-bfac-c07a89d65514.JPG" width="500px" id="6" tabindex="31" alt="San-Sin brought nice objects">
<p>Fresco San-Sin brought some nice objects to start a conversation and explain accessibility.</p>
</article>
<article id="photo7">
<img src="assets/Images/a31863f5-ab8d-4261-bec0-00ee5cab3ebf.JPG" width="500px" id="7" tabindex="32" alt="Nice objects">
<p>Fresco San-Sin brought some nice objects to start a conversation and explain accessibility.</p>
</article>
<article id="photo8">
<img src="assets/Images/bb089490-7800-44b8-a39a-38845efc7642.JPG" width="500px" id="8" tabindex="33" alt="Bread and Butter with soup and drinks">
<p>And of course we also arranged some nice bread, butter, soup and drinks..</p>
</article>
<article id="photo9">
<img src="assets/Images/de44e76e-a491-47d3-b3c2-ab071a32952f.JPG" width="500px" id="9" tabindex="34" alt="accessibility of old fire alarm">
<p>Fresco San-Sin talking about the accessibility of an old fire alarm.</p>
</article>
</div>
<div class="nothing" tabindex="35"></div>
<img src="assets/Svg's/Arrow.svg" alt="Arrow sticker" class="arrow-right" tabindex="36">
</div>
</section>
<section class="hidden" class="next-events" tabindex="37">
<h2 tabindex="38">Join our next events</h2>
<p tabindex="39">Do you want to join our next Bread & Butter event? Leave your email and we’ll keep you up to date.</p>
<form class="email" tabindex="40">
<label for="email" tabindex="41"> Enter your Email</label>
<input type="email" name="email" id="email" required maxlength="32" tabindex="42">
<!-- invalid -->
<span id="invalid" class="message" refer>I'm sorry but the email is incorrect</span>
<!-- succes -->
<span id="success" class="message-success">Great we will keep you updates!</span>
</form>
</section>
<!-- All stickers -->
<article class="stickerselection">
<img src="assets/Svg's/!!!.svg" alt="exclamation mark sticker">
<img src="assets/Svg's/100�.svg" alt="100 procent sticker">
<img src="assets/Svg's/Accessible.svg" alt="Good Design sticker">
<img src="assets/Svg's/Agenda.svg" alt="Agenda sticker">
<img src="assets/Svg's/Cheers.svg" alt="Cheers sticker">
<img src="assets/Svg's/Coffee Time.svg" alt="Coffee Time Sticker">
<img src="assets/Svg's/End with Magic.svg" alt="End with Magic Sticker">
<img src="assets/Svg's/errow-warning.svg" alt="Errow Warning Sticker">
<img src="assets/Svg's/Feedback Please.svg" alt="Feedback Please Sticker">
<img src="assets/Svg's/Happy Face.svg" alt="Happy Face Sticker">
<img src="assets/Svg's/Hashtag.svg" alt="Hashtag Sticker">
<img src="assets/Svg's/High Five.svg" alt="Highfive Sticker">
<img src="assets/Svg's/Hive Mind.svg" alt="Hive Mind Sticker">
<img src="assets/Svg's/Let's do it.svg" alt="Let's do it Sticker">
<img src="assets/Svg's/Let's Start.svg" alt="Let's start Sticker">
<img src="assets/Svg's/Let's talk.svg" alt="Let's talk Sticker">
<img src="assets/Svg's/Newbie.svg" alt="Newbie Sticker">
<img src="assets/Svg's/Questionmark.svg" alt="Question mark Sticker">
<img src="assets/Svg's/Quiz.svg" alt="Quiz Sticker">
<img src="assets/Svg's/Recap.svg" alt="recap Sticker">
<img src="assets/Svg's/Sad Face.svg" alt="Sad Face Sticker">
<img src="assets/Svg's/Start with Logic.svg" alt="Start with logic Sticker">
<img src="assets/Svg's/Yesss.svg" alt="Yes Sticker">
</article>
<div class="randomizedstickers">
<article class="hidden random-sticker-1" tabindex="43">
<img src="assets/Svg's/Hashtag.svg" alt="Hashtag Sticker">
</article>
<article class="hidden random-sticker-2" tabindex="44">
<img src="assets/Svg's/Let's Start.svg" alt="Let's start Sticker">
</article>
<article class="hidden random-sticker-3" tabindex="45">
<img src="assets/Svg's/Coffee Time.svg" alt="Coffee Time Sticker">
</article>
<article class="hidden random-sticker-4" tabindex="46">
<img src="assets/Svg's/Happy Face.svg" alt="Happy Face Sticker">
</article>
<article class="hidden random-sticker-5" tabindex="47">
<img src="assets/Svg's/Newbie.svg" alt="Newbie Sticker">
</article>
</div>
<footer>
<div class="infocards">
<a href="mailto:[email protected]" tabindex="48">[email protected] </a>
<a href="callto:+31 (0)88 587 8000" tabindex="49">+31 (0)88 587 8000 </a>
</div>
<div class="hidden logofooter">
<img src="assets/Overig/just-logo.svg" width="100px" tabindex="50">
</div>
</footer>
</body>
</html>