-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
445 lines (441 loc) · 34.1 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
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
<!doctype html>
<html class="scroll-smooth" lang="de">
<head>
<link rel="icon" type="image/x-icon" href="assets/favicon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Alles, was du über deine zukünftige Karriere bei L21s schon immer wissen wolltest.">
<meta charset="UTF-8">
<title>Karriere bei L21s</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
pink: '#E43292',
violette: '#5237fc',
gray: '#e3e3e3',
textgray: '#585858',
bggray: '#F7F7F7'
}
}
}
}
</script>
<style>
::-webkit-scrollbar {
width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(88, 88, 88, 0.7);
border-radius: 12px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #585858;
}
html {
font-family: "Helvetica Now Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
</style>
</head>
<body class="text-white bg-white overflow-x-hidden">
<section id="header">
<div class="relative bg-gradient-to-br from-violette to-pink">
<video autoplay loop muted src="assets/file.webm" class="absolute top-0 left-0 object-cover w-full h-full"></video>
<div class="w-full top-0 z-10 flex flex-col h-full">
<nav class="absolute left-1/2 -translate-x-1/2 flex w-full flex-row items-center justify-between p-8 max-w-[1800px]">
<a href="https://l21s.de">
<img loading="lazy" src="assets/img.webp" width="85" height="64" alt="Logo L21s">
</a>
<div class="flex flex-row gap-8 items-center">
<a href="#projekte" class="text-md xl:block hidden hover:underline">Projekte</a>
<a href="#technologien" class="text-md xl:block hidden hover:underline">Technologien</a>
<a href="#teamaufstellung" class="text-md xl:block hidden hover:underline">Zusammenarbeit</a>
<a href="#learning" class="text-md xl:block hidden hover:underline">Weiterbildung</a>
<a href="#remote" class="text-md xl:block hidden hover:underline">Remote</a>
<a href="#bewerbungsprozess" class="text-md xl:block hidden hover:underline">Bewerbungsprozess</a>
<a href="#onboarding" class="text-md xl:block hidden hover:underline">Onboarding</a>
<a href="#offeneStellen" class="rounded-full border-2 p-2 px-4 text-md transition duration-500 hover:bg-white border-white md:hover:text-textgray text-center">Jetzt bewerben</a>
</div>
</nav>
<div class="flex flex-col pt-24 pb-24 md:pt-32 lg:pt-40 2xl:pt-48 md:pb-0 h-full flex-grow max-w-[1800px] w-full mx-auto">
<div class="flex flex-col gap-4 lg:gap-16 p-8 md:p-0 flex-grow justify-evenly md:justify-start md:items-center">
<div class="relative flex flex-col justify-center items-center text-center gap-8 w-full">
<h1 class="font-bold text-3xl text-center md:text-7xl">Karriere bei L21s</h1>
<h2 class="md:text-2xl">Falls du mehr über L21s erfahren möchtest, bist du hier genau richtig.
<br class="hidden md:block">Wir zeigen dir Schritt für Schritt, was dich bei L21s erwartet.</h2>
<iframe loading="lazy" class="translate-y-8 rounded-xl drop-shadow-md md:h-[32rem] md:w-[80%] lg:w-[70%] 2xl:h-[40rem]" width="100%" height="278" src="https://www.youtube-nocookie.com/embed/v2gKLt1Q5EM?controls=1&rel=0" title="YouTube video player" frameborder="0" allow="" allowfullscreen></iframe>
<a href="#projekte" class="translate-y-8 md:hidden rounded-full border-2 p-2 px-4 text-md text-center">Zu den Projekten</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="md:flex md:flex-col xl:grid md:grid-rows-5 lg:grid-cols-3 md:py-8 md:px-8 md:pt-24 md:gap-8 max-w-[1800px] mx-auto">
<section id="projekte">
<div class="bg-white text-violette md:bg-inherit flex flex-col h-full md:min-h-0">
<div class="flex flex-col py-6 flex-grow md:p-8 md:bg-bggray md:rounded-2xl">
<div class="flex flex-col gap-8 p-8 flex-grow justify-evenly md:p-0 md:justify-between">
<div class="flex flex-col justify-center gap-8">
<div class="flex flex-col gap-2">
<div class="flex flex-row md:flex-col md:items-start items-center md:gap-2">
<img class="-translate-x-1" loading="lazy" src="assets/planning_normal.gif" alt="Projekte" width="40" height="40">
<h1 class="text-2xl">Unsere Projekte</h1>
</div>
<p class="text-textgray">
Was für Probleme lösen wir bei L21s? Wie sieht ein typischer Kunde von uns aus?
Wann entscheidet man sich für eine Zusammenarbeit mit L21s und
welche Aufträge wollen wir vielleicht eher ungern bearbeiten?
<br><br>Till hat die Antworten auf alle diese Fragen:
</p>
</div>
</div>
<iframe loading="lazy" class="rounded-2xl drop-shadow-md" width="100%" height="278" src="https://www.youtube-nocookie.com/embed/opL4u_gi5VY?controls=1&rel=0" title="YouTube video player" frameborder="0" allow="" allowfullscreen></iframe>
<a href="#offeneStellen" class="md:hidden rounded-full border-2 p-2 px-4 text-md text-center">Jetzt bewerben</a>
</div>
</div>
</div>
</section>
<div class="relative hidden md:grid md:row-start-1 md:col-start-2 md:col-span-2 group">
<div class="absolute top-0 left-0 text-white transition duration-500 rounded-2xl w-full h-full
bg-gradient-to-br from-violette/50 to-transparent opacity-0 group-hover:opacity-100
flex flex-col p-8">
<span class="text-xl font-bold">Das Team am Tisch nach unserem Rhetoriktraining</span>
<span>Spring Break 2023 | Maria Alm, Österreich</span>
</div>
<img loading="lazy" src="assets/das-team-am-tisch-nach-unserem-rhetoriktraining.webp" alt="Das Team am Tisch nach unserem Rhetoriktraining" class="hidden object-cover w-full h-full aspect-video self-center rounded-2xl md:block">
</div>
<section id="technologien">
<div class="md:row-start-2 md:col-start-2 bg-violette text-white md:text-violette md:bg-inherit flex flex-col h-full md:min-h-0">
<div class="flex flex-col py-6 flex-grow md:p-8 md:bg-bggray md:rounded-2xl">
<div class="flex flex-col gap-8 p-8 flex-grow justify-evenly md:p-0 md:justify-between">
<div class="flex flex-col justify-center gap-2">
<div class="flex flex-col gap-2">
<div class="flex flex-row md:flex-col md:items-start items-center md:gap-2">
<img class="-translate-x-1 hidden md:block" loading="lazy" src="assets/coding_normal.gif" alt="Technologien" width="40" height="40">
<img class="-translate-x-1 md:hidden" loading="lazy" src="assets/coding_white.gif" alt="Technologien" width="40" height="40">
<h1 class="text-2xl">Technologien</h1>
</div>
<p class="md:text-textgray">
Welche Technologien verwenden wir eigentlich bei L21s? Wie wählen wir die richtige Technologie für unsere Kundenprojekte aus? Arbeiten wir eher Fullstack oder in Silos getrennt nach Frontend und Backend?
<br><br>Dein zukünftiger Kollege Tung kann dir mehr erzählen:
</p>
</div>
</div>
<iframe loading="lazy" class="rounded-2xl drop-shadow-md" width="100%" height="278" src="https://www.youtube-nocookie.com/embed/ld6-olsFYPY?controls=1&rel=0" title="YouTube video player" frameborder="0" allow="" allowfullscreen></iframe>
<a href="#offeneStellen" class="md:hidden rounded-full border-2 p-2 px-4 text-md text-center">Jetzt bewerben</a>
</div>
</div>
</div>
</section>
<div class="relative hidden md:grid md:row-start-2 md:col-start-1 md:col-span-1 group">
<div class="absolute top-0 left-0 text-white transition duration-500 rounded-2xl w-full h-full
bg-gradient-to-br from-violette/50 to-transparent opacity-0 group-hover:opacity-100
flex flex-col p-8">
<span class="text-xl font-bold">Schlechtes Wetter bremst uns nicht aus</span>
<span>Weihnachtsfeier 2022 | WhatAGame, Berlin</span>
</div>
<img loading="lazy" src="assets/schlechtes-wetter-bremst-uns-nicht-aus.webp" alt="Schlechtes Wetter bremmst uns nicht aus" class="hidden object-cover w-full h-full aspect-video self-center rounded-2xl md:block">
</div>
<section id="teamaufstellung">
<div class="bg-white text-violette md:bg-inherit flex flex-col h-full md:min-h-0">
<div class="flex flex-col py-6 flex-grow md:p-8 md:bg-bggray md:rounded-2xl">
<div class="flex flex-col gap-8 p-8 flex-grow justify-evenly md:p-0 md:justify-between">
<div class="flex flex-col justify-center gap-8">
<div class="flex flex-col gap-2">
<div class="flex flex-row md:flex-col md:items-start items-center md:gap-2">
<img class="-translate-x-1" loading="lazy" src="assets/presentation.gif" alt="Zusammenarbeit & Teams" width="40" height="40">
<h1 class="text-2xl">Zusammenarbeit & Teams</h1>
</div>
<p class="text-textgray">
Wie groß sind die Teams, die bei uns ein Kundenprojekt bearbeiten? Machen wir einen Unterschied zwischen Beratern und Programmierern? Wie verstehen wir agile Arbeitsweisen? Wie fördern wir Austausch über Teams hinweg?
<br><br>Junior Software Engineer Philippe hat den Durchblick:
</p>
</div>
</div>
<iframe loading="lazy" class="rounded-2xl drop-shadow-md" width="100%" height="278" src="https://www.youtube-nocookie.com/embed/M3j0SfpdpgI?controls=1&rel=0" title="YouTube video player" frameborder="0" allow="" allowfullscreen></iframe>
<a href="#offeneStellen" class="md:hidden rounded-full border-2 p-2 px-4 text-md text-center">Jetzt bewerben</a>
</div>
</div>
</div>
</section>
<div class="relative hidden md:grid md:row-start-2 md:col-start-3 md:col-span-1 group">
<div class="absolute top-0 left-0 text-white transition duration-500 rounded-2xl w-full h-full
bg-gradient-to-br from-violette/50 to-transparent opacity-0 group-hover:opacity-100
flex flex-col p-8">
<span class="text-xl font-bold">Abkühlen mit Wasserski</span>
<span>Sommerevent 2023 | Wasserski Langenfeld, Köln</span>
</div>
<img loading="lazy" src="assets/abkuehlen-mit-wasserski.webp" alt="Abkühlen mit Wasserski" class="hidden object-cover w-full h-full aspect-video self-center rounded-2xl md:block">
</div>
<div class="relative hidden md:grid md:row-start-3 md:col-start-1 md:col-span-2 group">
<div class="absolute top-0 left-0 text-white transition duration-500 rounded-2xl w-full h-full
bg-gradient-to-br from-violette/50 to-transparent opacity-0 group-hover:opacity-100
flex flex-col p-8">
<span class="text-xl font-bold">Entspannen auf dem Hochkönig</span>
<span>Spring Break 2023 | Hochkönig, Österreich</span>
</div>
<img loading="lazy" src="assets/entspannen-auf-dem-hochkoenig.webp" alt="Entspannen auf dem Hochkönig" class="hidden object-cover w-full h-full aspect-video self-center rounded-2xl md:block">
</div>
<div class="relative hidden md:grid md:row-start-4 md:col-start-2 md:col-span-2 group">
<div class="absolute top-0 left-0 text-white transition duration-500 rounded-2xl w-full h-full
bg-gradient-to-br from-violette/50 to-transparent opacity-0 group-hover:opacity-100
flex flex-col p-8">
<span class="text-xl font-bold">Zeitvertreib im Zug</span>
<span>Spring Break 2023 | ICE</span>
</div>
<img loading="lazy" src="assets/zeitvertreib-im-zug.webp" alt="Zeitvertreib im Zug" class="hidden object-cover w-full h-full aspect-video self-center rounded-2xl md:block">
</div>
<section id="learning">
<div class="bg-violette text-white md:text-violette md:bg-inherit flex flex-col h-full md:min-h-0">
<div class="flex flex-col py-6 flex-grow md:p-8 md:bg-bggray md:rounded-2xl">
<div class="flex flex-col gap-8 p-8 flex-grow justify-evenly md:p-0 md:justify-between">
<div class="flex flex-col justify-center gap-8">
<div class="flex flex-col gap-2">
<div class="flex flex-row md:flex-col md:items-start items-center md:gap-2">
<img loading="lazy" class="-translate-x-1 hidden md:block" alt="Learning & Weiterbildung" src="assets/online_learning_normal.gif" width="40" height="40">
<img loading="lazy" class="-translate-x-1 md:hidden" alt="Learning & Weiterbildung" src="assets/online_learning_white.gif" width="40" height="40">
<h1 class="text-2xl">Learning & Weiterbildung</h1>
</div>
<p class="md:text-textgray">
Wie integrieren wir berufliche Weiterbildung in unseren Projektalltag? Was für Angebote und Möglichkeiten bieten wir darüber hinaus, damit unsere Engineers immer am Zahn der Zeit sind?
<br><br>Unser Senior Software Engineer Sebastian coached täglich sein Team und kann daher aus erster Hand berichten:
</p>
</div>
</div>
<iframe loading="lazy" class="rounded-2xl drop-shadow-md" width="100%" height="278" src="https://www.youtube-nocookie.com/embed/PC-1SBUhjrM?controls=1&rel=0" title="YouTube video player" frameborder="0" allow="" allowfullscreen></iframe>
<a href="#offeneStellen" class="md:hidden rounded-full border-2 p-2 px-4 text-md text-center">Jetzt bewerben</a>
</div>
</div>
</div>
</section>
<div class="relative hidden md:grid md:row-start-5 md:col-start-1 md:col-span-1 group">
<div class="absolute top-0 left-0 text-white transition duration-500 rounded-2xl w-full h-full
bg-gradient-to-br from-violette/50 to-transparent opacity-0 group-hover:opacity-100
flex flex-col p-8">
<span class="text-xl font-bold">Gemeinsames Abendessen in Maria Alm</span>
<span>Spring Break 2023 | Maria Alm, Österreich</span>
</div>
<img loading="lazy" src="assets/gemeinsames-abendessen-in-maria-alm.webp" alt="Gemeinsames Abendessen" class="hidden object-cover w-full h-full aspect-video self-center rounded-2xl md:block">
</div>
<section id="remote">
<div class="bg-white text-violette md:bg-inherit flex flex-col h-full md:min-h-0">
<div class="flex flex-col py-6 flex-grow md:p-8 md:bg-bggray md:rounded-2xl">
<div class="flex flex-col gap-8 p-8 flex-grow justify-evenly md:p-0 md:justify-between">
<div class="flex flex-col justify-center gap-8">
<div class="flex flex-col gap-2">
<div class="flex flex-row md:flex-col md:items-start items-center md:gap-2">
<img class="-translate-x-1" loading="lazy" src="assets/video-conference.gif" alt="100% Remote" width="40" height="40">
<h1 class="text-2xl">100 % Remote</h1>
</div>
<p class="text-textgray">
Wie sieht unser 100 % Remote-Setup aus? Brauche ich dafür eigene Hardware? Was ist, wenn mein Internet ausfällt? Seht ihr euch auch mal im echten Leben?
<br><br>Dominic arbeitet im Sommer regelmäßig von seinem Hausboot und lebt Remote wie kein Zweiter:
</p>
</div>
</div>
<iframe loading="lazy" class="rounded-2xl drop-shadow-md" width="100%" height="278" src="https://www.youtube-nocookie.com/embed/eEMu0NZvFYM?controls=1&rel=0" title="YouTube video player" frameborder="0" allow="" allowfullscreen></iframe>
<a href="#offeneStellen" class="md:hidden rounded-full border-2 p-2 px-4 text-md text-center">Jetzt bewerben</a>
</div>
</div>
</div>
</section>
<div class="relative hidden md:grid md:row-start-5 md:col-start-3 md:col-span-1 group">
<div class="absolute top-0 left-0 text-white transition duration-500 rounded-2xl w-full h-full
bg-gradient-to-br from-violette/50 to-transparent opacity-0 group-hover:opacity-100
flex flex-col p-8">
<span class="text-xl font-bold">Beim Tischkicker-Turnier nach unserer Kartfahrt</span>
<span>Sommerfest 2022 | Köln</span>
</div>
<img loading="lazy" src="assets/beim-tischkicker-turnier-nach-unserer-kartfahrt.webp" alt="Beim Tischkicker-Turnier" class="hidden object-cover w-full h-full aspect-video self-center rounded-2xl md:block">
</div>
<section id="bewerbungsprozess">
<div class="bg-violette text-white md:text-violette md:bg-inherit flex flex-col h-full md:min-h-0">
<div class="flex flex-col py-6 flex-grow md:p-8 md:bg-bggray md:rounded-2xl">
<div class="flex flex-col gap-8 p-8 flex-grow justify-evenly md:p-0 md:justify-between">
<div class="flex flex-col justify-center gap-8">
<div class="flex flex-col gap-2">
<div class="flex flex-row md:flex-col md:items-start items-center md:gap-2">
<img class="-translate-x-1 hidden md:block" loading="lazy" src="assets/job_normal.gif" alt="Bewerbungsprozess" width="40" height="40">
<img class="-translate-x-1 md:hidden" loading="lazy" src="assets/job_white.gif" alt="Bewerbungsprozess" width="40" height="40">
<h1 class="text-2xl">Bewerbungsprozess</h1>
</div>
<p class="md:text-textgray">
Wie konzipiert man einen Bewerbungsprozess, der möglichst nah am echten Job ausgerichtet ist? Was erwarten wir von dir, wenn du dich bei L21s vorstellst? Wie kannst du dich vorbereiten? Was kannst du von uns erwarten?
<br><br>Unser Gründer Tobias legt die Karten auf den Tisch:
</p>
</div>
</div>
<iframe loading="lazy" class="rounded-2xl drop-shadow-md" width="100%" height="278" src="https://www.youtube-nocookie.com/embed/vfQuD7B-E2M?controls=1&rel=0" title="YouTube video player" frameborder="0" allow="" allowfullscreen></iframe>
<a href="#offeneStellen" class="md:hidden rounded-full border-2 p-2 px-4 text-md text-center">Jetzt bewerben</a>
</div>
</div>
</div>
</section>
<div class="relative md:row-start-6 md:col-start-1 md:col-span-2 group hidden md:grid">
<div class="absolute top-0 left-0 text-white transition duration-500 rounded-2xl w-full h-full
bg-gradient-to-br from-violette/50 to-transparent opacity-0 group-hover:opacity-100
flex flex-col p-8">
<span class="text-xl font-bold">Im Videocall mit einem Versicherungskunden</span>
<span>Leaf Peeping 2022 | Mallorca</span>
</div>
<img loading="lazy" src="assets/im-videocall-mit-einem-versicherungskunden.webp" alt="Im Videocall mit einem Versicherungskunden" class="hidden object-cover w-full h-full aspect-video self-center rounded-2xl md:block">
</div>
<section id="onboarding">
<div class="bg-white text-violette md:bg-inherit flex flex-col h-full md:min-h-0">
<div class="flex flex-col flex-grow py-6 md:p-8 md:bg-bggray md:rounded-2xl">
<div class="flex flex-col gap-8 p-8 flex-grow justify-evenly md:p-0 md:justify-between">
<div class="flex flex-col justify-center gap-8">
<div class="flex flex-col gap-2">
<div class="flex flex-row md:flex-col md:items-start items-center md:gap-2">
<img class="-translate-x-1" loading="lazy" src="assets/startup.gif" alt="Onboarding" width="40" height="40">
<h1 class="text-2xl">Onboarding</h1>
</div>
<p class="text-textgray">
Wie sieht das Onboarding und die Einarbeitung bei L21s aus? Was passiert vor deinem Start, an deinem ersten Tag, in der ersten Woche und darüber hinaus? Wie stellen wir sicher, dass du dich wohlfühlst und alles hast, was du zum Arbeiten brauchst?
<br><br>Das Operations Team holt dich an Bord:
</p>
</div>
</div>
<iframe loading="lazy" class="rounded-2xl drop-shadow-md" width="100%" height="278" src="https://www.youtube-nocookie.com/embed/8SI3602jLzQ?controls=1&rel=0" title="YouTube video player" frameborder="0" allow="" allowfullscreen></iframe>
<a href="#offeneStellen" class="md:hidden rounded-full border-2 p-2 px-4 text-md text-center">Unsere offenen Stellen</a>
</div>
</div>
</div>
</section>
<div class="relative hidden md:grid md:row-start-7 md:col-start-2 md:col-span-2 group">
<div class="absolute top-0 left-0 text-white transition duration-500 rounded-2xl w-full h-full
bg-gradient-to-br from-violette/50 to-transparent opacity-0 group-hover:opacity-100
flex flex-col p-8">
<span class="text-xl font-bold">Das L21s-Team nach erfolgreichen Skifahrten und Après-Ski!</span>
<span>Spring Break 2023 | Maria Alm, Österreich</span>
</div>
<img loading="lazy" src="assets/das-l21s-team-nach-erfolgreichen-skifahrten-und-apres-ski.webp" alt="Das L21s-Team nach erfolgreichen Skifahrten und Après-Ski!" class="hidden object-cover w-full h-full aspect-video self-center rounded-2xl md:block">
</div>
</div>
<section id="offeneStellen">
<div class="relative min-h-screen h-full lg:min-h-full bg-gradient-to-br from-violette to-pink">
<video autoplay loop muted src="assets/file.webm" class="absolute top-0 left-0 z-0 object-cover w-full h-full"></video>
<div class="relative w-full top-0 left-0 z-10 flex flex-col h-full max-w-[1800px] mx-auto">
<div class="flex flex-col py-12 px-8 gap-16 h-full">
<h1 class="text-3xl lg:text-5xl text-center font-bold">Konnten wir dich überzeugen?</h1>
<div class="flex flex-col gap-8 lg:flex-row h-full">
<div class="flex flex-col gap-4 lg:w-1/3">
<div class="flex flex-col gap-2">
<h2 class="text-2xl">Junior Software Engineer</h2>
<p>(M/W/D)</p>
</div>
<div class="flex flex-row gap-4 flex-wrap">
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">100 % Remote</span>
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">20 h / Woche</span>
</div>
<p class="flex-grow">
Du studierst Informatik oder ein anderes Fach mit IT-Schwerpunkt? Als Junior Engineer bei L21s kannst du neben deinem Studium nicht nur Geld verdienen, sondern auch wertvolle Erfahrungen in der Softwareentwicklung sammeln.
</p>
<a href="https://l21s-gmbh.jobs.personio.de/job/818778?display=de" class="rounded-full border-2 p-2 px-4 text-center lg:self-start lg:mt-8 transition duration-500 hover:bg-white border-white lg:hover:text-textgray">
Jetzt bewerben
</a>
</div>
<div class="lg:w-[4px] w-full bg-white/50 rounded-full"></div>
<div class="flex flex-col gap-4 lg:w-1/3">
<div class="flex flex-col gap-2">
<h2 class="text-2xl">Software Engineer</h2>
<p>(M/W/D)</p>
</div>
<div class="flex flex-row gap-4 flex-wrap">
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">100 % Remote</span>
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">Vollzeit</span>
</div>
<p class="flex-grow">
Du hast dein Studium oder deine Ausbildung bereits hinter dir und idealerweise schon ein paar Projekte im Berufsleben abgeschlossen – dann freuen wir uns auf deine Bewerbung als Software Engineer in unserem Team.
</p>
<a href="https://l21s-gmbh.jobs.personio.de/job/818778?display=de" class="rounded-full border-2 p-2 px-4 text-center lg:self-start lg:mt-8 transition duration-500 hover:bg-white border-white lg:hover:text-textgray">
Jetzt bewerben
</a>
</div>
<div class="lg:w-[4px] w-full bg-white/50 rounded-full"></div>
<div class="flex flex-col gap-4 lg:w-1/3">
<div class="flex flex-col gap-2">
<h2 class="text-2xl">Senior Software Engineer</h2>
<p>(M/W/D)</p>
</div>
<div class="flex flex-row gap-4 flex-wrap">
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">100 % Remote</span>
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">Vollzeit</span>
</div>
<p class="flex-grow">
Digitalproduktentwicklung durchgespielt? Kann gut sein, dass die Rolle als Senior Software Engineer bei L21s dein nächster Schritt ist! Bewirb dich als Senior, wenn du dir zutraust ein Produkt Fullstack eigenverantwortlich zu entwickeln.
</p>
<a href="https://l21s-gmbh.jobs.personio.de/job/790050?display=de" class="rounded-full border-2 p-2 px-4 text-center lg:self-start lg:mt-8 transition duration-500 hover:bg-white border-white lg:hover:text-textgray">
Jetzt bewerben
</a>
</div>
<div class="lg:w-[4px] w-full bg-white/50 rounded-full"></div>
<div class="flex flex-col gap-4 lg:w-1/3">
<div class="flex flex-col gap-2">
<h2 class="text-2xl">(Senior) Consultant</h2>
<p>(M/W/D)</p>
</div>
<div class="flex flex-row gap-4 flex-wrap">
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">in Berlin oder Remote</span>
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">Vollzeit</span>
</div>
<p class="flex-grow">
Du bist kein Programmierer, brennst aber trotzdem für Digitalisierung? Dann bist du in unserem neu gegründeten Consulting Bereich genau richtig! Als Consultant bereitest du technische Fragestellungen verständlich auf und berätst das Top-Management.
</p>
<a href="https://l21s-gmbh.jobs.personio.de/job/1843069?language=de" class="rounded-full border-2 p-2 px-4 text-center lg:self-start lg:mt-8 transition duration-500 hover:bg-white border-white lg:hover:text-textgray">
Jetzt bewerben
</a>
</div>
<!-- <div class="lg:w-[4px] w-full bg-white/50 rounded-full"></div>
<div class="flex flex-col gap-4 lg:w-1/3">
<div class="flex flex-col gap-2">
<h2 class="text-2xl">Lead Engineer</h2>
<p>(M/W/D)</p>
</div>
<div class="flex flex-row gap-4 flex-wrap">
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">100 % Remote</span>
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">Vollzeit</span>
</div>
<p class="flex-grow">
Als Lead Engineer leitest du ein Team von 3-4 Entwicklern und bist operativer Ansprechpartner für alle Belange unseres Kunden. Wenn 60 % hands-on coding und 40 % Projektleitung dein Traumjob sind, dann bist du hier richtig.
</p>
<a href="https://l21s-gmbh.jobs.personio.de/job/870861?language=de&display=de" class="rounded-full border-2 p-2 px-4 text-center lg:self-start lg:mt-8 transition duration-500 hover:bg-white border-white lg:hover:text-textgray">
Jetzt bewerben
</a>
</div> -->
<!-- <div class="lg:w-[4px] w-full bg-white/50 rounded-full hidden"></div>
<div class="flex flex-col gap-4 lg:w-1/3 hidden">
<div class="flex flex-col gap-2">
<h2 class="text-2xl">Werkstudent:in People & Culture</h2>
<p>(M/W/D)</p>
</div>
<div class="flex flex-row gap-4 flex-wrap">
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">in Berlin</span>
<span class="rounded-full bg-white/20 py-2 px-4 min-w-fit">20h / Woche</span>
</div>
<p class="flex-grow">
Als Werkstudent:in People & Culture bei L21s unterstützt du das Management- und Operations-Team in den Bereichen People & Culture sowie Feel-Good und übernimmst Aufgaben wie Bewerberbetreuung und Teamevent-Organisation mit Organisationstalent und Kommunikationsfähigkeiten.
</p>
<a href="https://l21s-gmbh.jobs.personio.de/job/1189604?language=de&display=de" class="rounded-full border-2 p-2 px-4 text-center lg:self-start lg:mt-8 transition duration-500 hover:bg-white border-white lg:hover:text-textgray">
Jetzt bewerben
</a>
</div> -->
</div>
</div>
</div>
</div>
</section>
<footer class="w-full bg-violette text-[12px] flex flex-row gap-4 py-1 px-2 justify-end">
<a href="https://www.l21s.de/impressum">Impressum</a>
<a href="https://www.l21s.de/datenschutz">Datenschutz</a>
</footer>
</body>
</html>