/
index.html
202 lines (179 loc) · 9.25 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
<!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" />
<title>The Startup</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="mobile-first-demo/styles/style.css" />
</head>
<body>
<header>
<h2>Lustrum</h2>
<h1>De Voorhoede bestaat 10 jaar!</h1>
<img src="https://www.datocms-assets.com/6524/1658236322-lustrum_logo_png.png" class="logo">
</header>
<main>
<section class="intro">
<img src="https://www.datocms-assets.com/6524/1654255896-copy-of-voorhoede-borrel-2020-1.jpg" class="intro-img">
<div class="intro-headers">
<h3 class="intro-title">De toekomst van front-end</h3>
<h4 class="intro-text">Op 1 oktober 2022 bestaat De Voorhoede alweer 10 jaar: een lustrum! De afgelopen jaren is onze organisatie flink gegroeid: in kantoor, kennis en collega’s. Er is veel veranderd. Niet alleen bij De Voorhoede, maar ook op front-end gebied. Natuurlijk hebben we ook heel veel plannen voor de komende jaren. Blik met ons terug op de eerste 10 jaar en kijk mee naar onze versepllingen voor de toekomst.</h4>
</div>
</section>
<section class="facts-and-numbers">
<h2>Cijfers & facts: Voorhoede facts </h2>
<ul>
<li><span>10</span>jaar de voorhoede</li>
<li><span>1</span>CTO</li>
<li><span>2</span>kantoren in Delft & Amsterdam</li>
<li><span>30</span>collega's in dienst</li>
<li><span>7</span>tech leads</li>
<li><span>85</span>blogs geschreven</li>
<li><span>500</span>projecten opgeleverd</li>
<li><span>33</span>bomen geplant</li>
<li><span>19</span>meetups georganiseerd</li>
<li><span>8</span>masterclasses gegeven</li>
<li><span>136</span>Code classes</li>
<li><span>87</span>Code talks</li>
</ul>
</section>
<section class="middle">
<img src="https://www.datocms-assets.com/6524/1651831740-sam_8931.jpg" class="middle-img">
<h3 class="middle-title">Onze visie op frontend</h3>
<p class="middle-text">Dit jaar bestaat De Voorhoede 10 jaar. In al die jaren is front-end gegroeid van een niche naar een onderdeel van alles. Wij vinden het erg leuk om koplopers te zijn en kijken nu naar wat de toekomst van front-end ons gaat brengen.</p>
<button class="button button1"><a href="https://www.voorhoede.nl/en/blog/future-front-end-replaceable-inadequate-innovative"><p>Lees alles over de toekomst van front-end</p></a></button>
</section>
<section class="jasper">
<div class="img-wrapper">
<img src="https://www.datocms-assets.com/6524/1602158368-jasper27a4573-1.jpg" class="img-3">
</div>
<h3 class="jasper-title">De grote droom van Jasper:</h3>
<p class="jasper-text">''Het klinkt weinig ambitieus, maar ik hoop dat we vooral dit kunnen blijven doen, wat we doen. Als hecht en gespecialiseerd team een impact maken binnen het vakgebied. En voorop lopen in de beste front-end oplossingen.''</p>
<button class="button button2"><a href="https://www.voorhoede.nl/en/blog/10-jaar-interview-jasper/"><p>Lees het hele interview</p></a></button>
</section>
<div class="timeline">
<div class="container left">
<div class="content">
<h3>1 oktober 2012</h3>
<h2>Oprichting De Voorhoede</h2>
<p></p>
</div>
</div>
<div class="container right">
<div class="content">
<h3>01 juli 2013</h3>
<h2>Eerste Web App voor TV</h2>
<p>Ziggo SGUI met jQueryMX</p>
<img src="https://www.datocms-assets.com/6524/1656341389-bl65gancyaiv9hu.jpeg" class="timeline-img">
</div>
</div>
<div class="container left">
<div class="content">
<h3>01 juni 2014</h3>
<h2>Eerste Single Page App</h2>
<p>TBA CommTrac met Angular.JS</p>
</div>
</div>
<div class="container right">
<div class="content">
<h3>13 maart 2016</h3>
<h2>Begonnen met lesgeven op de Hogeschool van Amsterdam</h2>
<p>Minors gericht op webdevelopment</p>
<img src="https://www.datocms-assets.com/6524/1656341338-cdgfayxw8aaepae.jpeg" class="timeline-img">
</div>
</div>
<div class="container left">
<div class="content">
<h3>17 augustus 2016</h3>
<h2>Onze eerste Meetup</h2>
<p>Onze eerste meetup georganiseerd: Front-end Forward in Amsterdam</p>
</div>
</div>
<div class="container right">
<div class="content">
<h3>07 november 2016</h3>
<h2>Eerste code class</h2>
<p>Collega's leren elkaar nieuwe dingen</p>
<img src="https://www.datocms-assets.com/6524/1656341294-cw-akzzw8aas4vt.jpeg" class="timeline-img">
</div>
</div>
<div class="container left">
<div class="content">
<h3>01 januari 2019</h3>
<h2>Eerste kantoor in Delft</h2>
<p>We namen intrek in de coworkingspace van Vakhuiswerk</p>
</div>
</div>
<div class="container right">
<div class="content">
<h3>21 januari 2020</h3>
<h2>Opening nieuw kantoor Delft"</h2>
<p>Onze eigen plek aan de Koornmarkt</p>
<img src="https://www.datocms-assets.com/6524/1653893865-copy-of-img_20210705_141212.jpg" class="timeline-img">
</div>
</div>
<div class="container right">
<div class="content">
<h3>21 september 2021</h3>
<h2>Opening nieuw kantoor Amsterdam</h2>
<p>Samen met Hike One hebben we nu een kantoor in de Houthavens</p>
<img src="https://www.datocms-assets.com/6524/1653893718-copy-of-dsc05264.jpg" class="timeline-img">
</div>
</div>
</div>
<section class="pictures-column">
<h2>Een reis door de tijd</h2>
<img src="https://www.datocms-assets.com/6524/1653893535-copy-of-img_2627-fefw_voorhoede.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1652260840-img_20220117_114859.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1653893584-copy-of-photo-03-03-2016-13-50-52.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1626447055-img2346-nog-meer-final.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1653893610-copy-of-2016-10-01-photo-00000006.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1651831476-voorhoede-weekendje-2019-16.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1651831472-voorhoede_weekend_2021_1060095-23.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1653893842-copy-of-whatsapp-image-2018-09-30-at-12-42-27.jpeg" class="images">
<img src="https://www.datocms-assets.com/6524/1653893635-copy-of-foto-25-05-18-10-36-41.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1651831466-dsc_1471.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1653893658-copy-of-cn_nz_fxeaazmdy.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1653893699-copy-of-dsc_1295.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1651831747-voorhoede_weekend_2021_1060094-22.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1653893757-copy-of-img_5003.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1653893893-copy-of-img_7647.jpg" class="images">
<img src="https://www.datocms-assets.com/6524/1654260572-copy-of-sam_9717.jpg" class="images">
</section>
<section class="form-yellow">
<h2>Hiep Hiep Hoera!</h2>
<h3>Je felicitatie sturen via ons formulier, dat kan!</h3>
</section>
<section class="form">
<form>
<label for="fname">Mijn naam is: </label><br>
<input type="text" placeholder="Naam" name="fname"><br>
<label for="lname">Mijn email adres:</label><br>
<input type="email" name="lname" placeholder="Email"><br><br>
<label for="lname">Mijn bericht:</label><br>
<input type="text" name="lname" placeholder="Felicitatie"><br><br>
<input type="versturen" value="Versturen →">
</form>
</section>
<section class="messages">
<h2>Felicitaties</h2>
<div class="message1">
<h3>''Gefeliciteerd met jullie 10 jaar! Op nog vele jaren!''</h3>
<p>door Koop</p>
</div>
<div class="message1">
<h3>''Vanaf het begin er bij geweest. Op naar de volgende 10''</h3>
<p>door Declan</p>
</div>
<div class="message1">
<h3>“Gefeliciteerd!”</h3>
<p>door Jasper</p>
</div>
</section>
</main>
</body>
</html>