Menu (half)verstopt

Medior/senior Front-end developer

Functie Je maakt deel uit van een DevOps Scrum team en werkt samen met back-end developers, test-engineers, interaction designers en een projectmanager. Er zijn verschillende groepen Scrum teams. Een roadmap team is jouw â€˜â€™thuisbasisâ€™â€™, daar wordt gewerkt aan doorontwikkeling van bestaande omgevingen voor een aantal klanten. Hiernaast zijn er projectteams waar nieuwe omgevingen worden gebouwd, of grote complexe wijzigingen worden doorgevoerd op bestaande omgevingen. Je kunt (afhankelijk van jouw wensen en doelen) dus afwisselend werken in beide teams. Hiernaast participeer je in het Chapter Front-end development waar gezamenlijk kennis en ervaring wordt gedeeld. Als Front-end developer is het jouw doel

Bekijk vacature »

Senior Front-end developer Consultancy

Functie Als front-end developer ga je aan de slag voor verschillende klanten, waarbij veel rekening wordt gehouden met waar je woont (dit is altijd binnen het uur), en word er gezocht naar een organisatie die past bij jou. Zowel qua persoonlijke ambities als de technische aansluiting. De opdrachten duren gemiddeld 1 Ã 2 jaar maar dit hangt ook af van je wensen. Je werkt in een teamverband voor een klant en zult nauw samenwerken met zowel eigen collegaâ€™s als die bij de klant werkzaam zijn. Ze zijn op zoek naar een technische front-end developer die ruime ervaring heeft in Ã©Ã©n

Bekijk vacature »

Java developer

Als Java Developer bij Sogeti ben je onderdeel van onze toonaangevende community die bestaat uit ruim 100 gepassioneerde professionals. In teamverband lever je mooie prestaties. Daarmee draag je aan bij de meerwaarde die wij leveren aan onze klanten. Geen werkdag is hetzelfde, je bent voortdurend bezig met het oplossen van allerlei complexe vraagstukken binnen bedrijfskritische systemen. Een voorbeeld hiervan is een cliÃ«nt-volgsysteem bij Reclassering Nederland. Andere klanten waar wij onder andere voor werken:â€¯KPN, Philips, Nationale-Nederlanden, Kamer van Koophandel, ABN AMRO, Bovemij, Arval en de Politie. Werken bij Sogeti Nieuwe ontwikkelingen volgen we op de voet en delen we binnen de

Bekijk vacature »

Cloud Developer

Cloud Developers opgelet! Bij Luminis zijn ze opzoek naar jou. Lees de vacature en solliciteer direct. Luminis is een software- en technologiebedrijf met meerdere vestigingen. Vanuit deze vestigingen werken 200 professionals aan technisch hoogwaardige oplossingen voor klanten zoals KLM, Nike en Bol.com. Ook ontwikkelt Luminis eigen oplossingen op het gebied van cloud, Internet of Things, data intelligence, e-sports en e-learning. Luminis onderscheidt zich door aantoonbaar voorop te lopen in technologie en innovatie. Luminis heeft drie kernpunten die verankerd zitten in alles wat we doen: het omarmen van nieuwe technologie, meesterschap en kennis delen. Functiebeschrijving First things first! Het is belangrijk

Bekijk vacature »

BizTalk/ Azure Developer

Dit ga je doen â€¢Understanding the scope of required functionality, translate them within context of way of working of the team into developed solutions, whilst safeguarding documentation; â€¢Planning based on assigned sprint tasks; â€¢Acting as an expert in estimation techniques and planning; â€¢Understanding your role in the agile process and act in this way; â€¢Facilitating internal communication and effective collaboration; â€¢Working closely with scrum master to handle backlogs and new requests; â€¢Providing information to the third parties about activities and needs for compliance. Hier ga je werken Our client is a leading organization focusing on animal nutrition, offering solutions that

Bekijk vacature »

Lasrobot Programmeur

Over de functie Off-line programmaâ€™s maken die het beste resultaat bij de lasrobot mogelijk maken De programmaâ€™s met behulp van teach verder optimaliseren Proactief meedenken over oplossingen en over de juiste invulling van lasmallen Het lasrobotproces zoveel mogelijk optimaliseren Over het bedrijf Onze opdrachtgever is gespecialiseerd in de engineering, productie en assemblage van samengestelde plaatwerkproducten en monodelen uit metaal. Onze klant werkt samen met het team aan de mooiste producten van de toekomst. Binnen dit bedrijf staat een sterk team van specialisten op het gebied van industrial design, mechanical engineering, in-house prototyping en all-round projectmanagement. Met daarbij uiteenlopende kennis in

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Junior Software Developer C# Verhuursector Verhuur

Samengevat: Wij ontwikkelen en leveren softwaresystemen voor de logistieke sector en de verhuursector. Ben jij geschikt als Junior Software Developer? Heb je ervaring met Delphi? Vaste baan: C# Software Developer Logistiek HBO â‚¬2.500 - â‚¬3.900 Deze werkgever is een software ontwikkelaar, gericht op software voor de logistieke sector. Deze werkgever heeft eigen producten ontwikkelen en leveren ook maatwerk. Ons bedrijf kent een boeiende en inspirerende werkomgeving met een open cultuur en mogelijkheden voor je verdere ontwikkeling. Bij bij hun werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om

Bekijk vacature »

Traineeship Full Stack .NET Developer

Dit ga je doen Start op 7 augustus 2023 bij de Experis Academy en ontwikkel jezelf tot een gewilde Full Stack .NET Developer. Maar hoe ziet het traineeship eruit en wat kun je verwachten? Periode 1 De eerste 3 maanden volg je fulltime, vanuit huis, een op maat gemaakte training in teamverband. Je leert belangrijke theorie en krijgt kennis van de benodigde vaardigheden en competenties die nodig zijn om de IT-arbeidsmarkt te betreden. Zowel zelfstandig als in teamverband voer je praktijkopdrachten op het gebied van front- en backend development uit. Wat er per week op het programma staat kun je

Bekijk vacature »

Oracle APEX developer

Wat je gaat doen: Als Oracle APEX ontwikkelaar bij DPA werk je samen met collegaâ€™s aan de meest interessante opdrachten. Je zult je ervaring met SQL, PL/SQL, JavaScript, HTML en CSS inzetten om wensen van opdrachtgevers te vertalen naar technische oplossingen. Je werk is heel afwisselend, omdat DPA zich niet beperkt tot een specifieke branche. Zo ben je de ene keer bezig binnen de zorgsector, de andere keer is dit bij de overheid. Wat we vragen: Klinkt goed? Voor deze functie breng je het volgende mee: Je hebt een hbo- of universitaire opleiding afgerond Je hebt 2 tot 5 jaar

Bekijk vacature »

(Junior) Back-end Ontwikkelaar

Functie omschrijving We are looking for a dutch native speaker Altijd al willen werken bij een organisatie, die maatwerk applicaties bouwt, die echt impact hebben in de maatschappij? Dit is je kans. Voor een kleine organisatie in de regio van Eindhoven ben ik op zoek naar een C# Ontwikkelaar. Jij gaat aan de slag met de ontwikkeling van maatwerk software en applicaties. Deze organisatie werkt voor grote organisaties in Nederland, maar ook voor het MKB. De projecten waar je aan gaat werken zijn erg divers, waardoor je werk uitdagend blijft en je erg veel kan leren. Verder ga je aan

Bekijk vacature »

.NET Developer Senior

Dit ga je doen Het ontwikkelen van backend applicaties in C#; Het maken van vele koppelingen met andere ERP-applicaties zoals JD Edwards en SAP; Je bent (mede) verantwoordelijk voor het opstellen van technisch ontwerpen voor de te ontwikkelen software oplossingen; Je bent gemiddeld 90% van je tijd inhouse oplossingen aan het ontwikkelen en testen. De overige 10% van je tijd ben je bij klanten op locatie om oplossingen te implementeren, klanten te begeleiden en de software verder te innoveren; Naast het zelfstandig ontwikkelen van software oplossingen ben je ook bezig met het waarborgen van je contacten bij de klant, het

Bekijk vacature »

Developer Full Stack

Functie omschrijving Developer gezocht! Ben jij een enthousiaste developer die graag wil bijdragen aan ontwikkelingen binnen een mooie organisatie? Solliciteer dan snel. Wij zijn op zoek naar een Full Stack Developer uit de regio Nijkerk die gaat bijdragen aan het door ontwikkelen, onderhouden en optimaliseren van een SaaS applicatie. Je moet beschikken over beheersing van zowel de Nederlandse als Engelse taal aangezien je samen met de klant gaat werken. Bedrijfsprofiel Je komt te werken binnen een echt familiebedrijf dat al sinds 1925 actief is binnen de FMCG branche. Het bedrijf heeft 40 medewerkers en er heerst een platte communicatiestructuur waarbij

Bekijk vacature »

Fasttrack learning & development voor Java dev

Wat je gaat doen: Wij zoeken enthousiaste en ambitieuze junior en medior ontwikkelaars die toe zijn aan de volgende stap in hun carriÃ¨re. Wij helpen je op je pad naar senior ontwikkelaar door ons fasttrack learning en development programma. Na een kort en intensief programma ga jij aan de slag bij klanten van DPA. Daarnaast krijg je veel ruimte om je te ontwikkelen als persoon en als specialist. De eerste maand gaan we aan de slag om je certificeringen te behalen waaronder OCP (Oracle Certified Professional). Daarnaast nemen we een deepdive in Spring Boot. Ook laten we je kennismaken met

Bekijk vacature »

.net developer

Hoi! Wij zijn auto.nl en wij verkopen auto's online. je bestelt bij ons een auto net zo makkelijk als een spijkerbroek. En bevalt ie niet? Dan stuur je 'm gewoon weer terug. En dat we dat goed doen bewijst onze hoge klanttevredenheid van een 9,3. Nu maken we de volgende stap bij auto.nl. We starten met fysieke winkels. Online zoeken, offline bekijken. Maar nog altijd, geen gedoe! Gewoon eerlijk, transparant en zonder zorgen een auto kopen.. Maar om dat waar te blijven maken en nÃ³g beter te worden, zoeken we uitbreiding van ons development team. Wat ga je precies doen?

Bekijk vacature »

John De Zon

06/07/2016 21:53:45

Hallo,
Mijn log in menu van mijn website zit een beetje "verstopt", ik zou niet weten waarom... Als je klikt op "Log in" dan krijg je het menu, maar je moet even scrollen vooraleer je iets kan ingeven. In de tekstvelden komt ook de tekst van de pagina zelf. Dit is de link naar mijn website: http://www.dreamworld.cf/new. Ik hoop dat iemand hier het antwoord op weet.

Alvast bedankt!

EDIT:

HTML CODE

Code (php)

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
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DreamWorld - <?php echo $title; ?></title>
    <link rel="stylesheet" type="text/css" href="../css/skeleton.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/fixed-navigation-bar.css"/>
</head>
<body>
<nav>
    <div id="wrap">
        <ul class="navbar">

            <li><a style="cursor: pointer;" href="../index.php"><img
                        style="padding-top: 15px; margin-left:30px; width:60px; height: auto;" src="../img/logo.png"></a>
            </li>

            <li><a class="nav-element" href="/"
                   style="<?php if ($home == true) { ?>color: rgba(255, 88, 109, 0.81); font-weight: bold; <?php } ?>">Home</a>
            </li>
            <li><a class="nav-element" href="/shop"
                   style="<?php if ($shop == true) { ?>color: rgba(255, 88, 109, 0.81); font-weight: bold; <?php } ?>">Shop</a>
            </li>
            <li><a class="nav-element" href="userarea/tickets.php"
                   style="<?php if ($tickets == true) { ?>color: rgba(255, 88, 109, 0.81); font-weight: bold; <?php } ?>">Tickets</a>
            </li>

                <li class="loginbutton">
                    <a style="<?php if ($login == true) { ?>color: rgba(255, 88, 109, 0.81); font-weight: bold; <?php } ?> cursor: pointer; color: white; width: auto; <?php if ($tickets == true) { ?>color: rgba(255, 88, 109, 0.81); font-weight: bold; <?php } ?>"><img
                            class="img" src="https://minotar.net/avatar/steve/30.png"> Log in</a></li>
        </ul>
        </li>
        </ul>
    </div>
</nav>


<div class="login">
    <div class="login-text">
        <h3><b>Log in</b></h3>
        <form action="userarea/login.php" method="POST">
            <input type="text" placeholder="MineCraft username" name="username"/>
            <br/>
            <input type="password" placeholder="Password" name="password"/>
            <br/>
            <input type="submit" name="submit" class="button" value="Log in"/>
        </form>

        <p>If you don't have an account, please click <a href="userarea/register.php">here</a>.</p>
    </div>
</div>


<header class="header">
    <div class="header-text">
        <h1 class="header-title"><b>Dream</b>World</h1>
        <div class="header-description">
            <i>Where <b>your</b> dreams become true.</i>
        </div>
    </div>
</header>


<div class="container">
    <section class="information">
        <h1 class="section-title">INFORMATION</h1>
        <div class="section-text">
            <p><b>DreamWorld</b> is different... The difference between us and most other server is that we want to
                offer
                something <b>new</b>. When we even think at a new gamemode, we will create it and optimize it to your
                likings!</p>
        </div>

        <hr/>
    </section>
</div>


<div class="container">
    <section class="server">
        <h1 class="section-title">SERVERS</h1>
</div>


<div class="survival-image">
    <div class="survival-image-extra">
        <div class="image-extra-text">
            <p>My name is Oliver Queen,</p>
            <p>for five years I was stranded on an island,</p>
            <p>with only one goal, <b>SURVIVE</b>.</p>
            <a class="button" href="../gamemodes/survival.php">Learn more</a>
        </div>
    </div>
</div>


<div class="pvp-image">
    <div class="pvp-image-extra">
        <div class="image-extra-text">
            <p>Be a pro, train like a pro! Discover PvP now!</p>
            <a class="button" href="../gamemodes/pvp.php">Learn more</a>
        </div>
    </div>
</div>


<div class="minigames-image">
    <div class="minigames-image-extra">
        <div class="image-extra-text">
            <p>Do you want to play some minigames?</p>
            <a class="button" href="../gamemodes/minigames.php">Learn more</a>
        </div>
    </div>
</div>


<div class="craftville-image">
    <div class="craftville-image-extra">
        <div class="image-extra-text">
            <p>Real life minecraft! Become rich!</p>
            <a class="button" href="../gamemodes/craftville.php">Learn more</a>
        </div>
    </div>
</div>


<div class="kingdom-image">
    <div class="kingdom-image-extra">
        <div class="image-extra-text">
            <p>Divide et impera, be king, be powerful!</p>
            <a class="button" href="../gamemodes/kingdom.php">Learn more</a>
        </div>
    </div>
</div>
<div class="container">
    <hr/>
</div>

</section>


<div class="container">
    <section class="staff">
        <h1 class="section-title">STAFF</h1>
        <div class="section-text">
            <p>You can find a list of <b>all</b> staff here! Hover over the images to see more details!</p>
        </div>

        <div class="staff-pics">
            
            <div class="row img-row">
                <figure class="columns three">
                    <img class="staff-img" src="img/Christophe6.png"/>
                    <div class="figcaption"><b>Owner</b> - Christophe6</div>
                </figure>

                <figure class="columns three">
                    <img class="staff-img" src="img/_DenMati_.png"/>
                    <div class="figcaption"><b>Admin</b> - _DenMati_</div>
                </figure>

                <figure class="columns three">
                    <img class="staff-img" src="img/dewitte2250.png"/>
                    <div class="figcaption"><b>Admin</b> - dewitte2250</div>
                </figure>
            </div>

            
            <div class="row img-row">
                <figure class="columns three">
                    <img class="staff-img" src="img/vandekerkhof.png"/>
                    <div class="figcaption"><b>Moderator</b> - vandekerkhof</div>
                </figure>

                <figure class="columns three">
                    <img class="staff-img" src="img/thomas02091999.png"/>
                    <div class="figcaption"><b>Helper</b> - thomas02091999</div>
                </figure>

                <figure class="columns three">
                    <img class="staff-img" src="img/FredCl_7.png"/>
                    <div class="figcaption"><b>Helper</b> - FredCl_7</div>
                </figure>
            </div>

            
            <div class="row img-row">
                <figure class="columns three">
                    <img class="staff-img" src="img/hannesvangeel.png"/>
                    <div class="figcaption"><b>Builder</b> - hannesvangeel</div>
                </figure>

                <figure class="columns three">
                    <img class="staff-img" src="img/JoppeLehman.png"/>
                    <div class="figcaption"><b>Builder</b> - JoppeLehman</div>
                </figure>
            </div>
        </div>
        <hr/>
    </section>
</div>

<?php
include "../new/inc/footer.php";
?>

[/CODE]

CSS:

[CODE]
/* GETTING OUR FONTS */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,800,700italic,700,600italic,600,500italic,500,400italic,900italic,900,800italic|Raleway);

/* RESET ALL VALUES */
* {
    margin: 0;
    padding: 0;
}

/* MAIN STYLE */
body {
    font: normal 18px/22px "Raleway", sans-serif;
    background-color: rgba(254, 127, 255, 0.04)
}

hr {
    color: black;
}

/* NAVBAR */
a {
    text-decoration: none;
    color: #0099FF;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

.fixed-nav-bar {
    box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.6);
}

/*HEADER*/
.header {
    height: 600px;
    background-image: url(../img/EpicPicture.png);
    background-size: contain;
    background-position: top center;
    background-attachment: fixed;
    background-repeat: repeat-x;
    margin-bottom: 0px;
}

.header-text {
    position: relative;
    top: 200px;
    text-align: center;
}

.header-text {
    top: 175px;
}

.header-title {
    font-size: 75px;
    color: ghostwhite;
}

.header-description {
    position: relative;
    top: 40px;
    color: ghostwhite;
    font-size: 25px;
}

p {
    margin-top: 5px;
}

/* LOG IN MENU */
.login {
    position: fixed;
    right: -260px;
    top: 100px;
    width: 260px;
    height: 350px;
    background: #DDD;
    opacity: 0;
    transition: opacity 0.3s linear 0s, right 0s linear 0s;
    cursor: pointer;
    background: black;
    border-radius: 25px;
}

.login-text {
    color: white;
    padding-left: 20px;
    padding-top: 15px;
    padding-right: 22px;
}

/* SECTIONS */
section {
    margin-top: 20px;
}

.section-title {
    font-size: 45px;
}

.survival-image {
    height: 400px;
    background-image: url(../img/Survival.png);
    background-position: top center;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    border-bottom: 1px solid black;
}

.survival-image-extra {
    background-color: rgba(0, 0, 0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*opacity: 0;*/
}

.pvp-image {
    height: 400px;
    background-image: url(../img/pvp1.png);
    background-position: top center;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    border-bottom: 1px solid black;
}

.pvp-image-extra {
    background-color: rgba(0, 0, 0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*opacity: 0;*/
}

.minigames-image {
    height: 400px;
    background-image: url(../img/bedwars2.png);
    background-position: top center;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    border-bottom: 1px solid black;
}

.minigames-image-extra {
    background-color: rgba(0, 0, 0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*opacity: 0;*/
}

.craftville-image {
    height: 400px;
    background-image: url(../img/craftville1.png);
    background-position: top center;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    border-bottom: 1px solid black;
}

.craftville-image-extra {
    background-color: rgba(0, 0, 0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*opacity: 0;*/
}

.kingdom-image {
    height: 400px;
    background-image: url(../img/kingdom1.png);
    background-position: top center;
    background-repeat: repeat-y;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    border-bottom: 1px solid black;
}

.kingdom-image-extra {
    background-color: rgba(0, 0, 0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*opacity: 0;*/
}

.image-extra-text {
    color: white;
    font-weight: 100;
    font-size: 50px;
}

.button {
    height: 60px;
    font-size: 20px;
    text-decoration: none;
    color: white;
    border: 1px solid white;
    padding: 10px 20px;
    transition: all 0.3s ease-in-out;
}

.button:hover {
    background-color: white;
    color: black;
}

/* STAFF */
figure {
    margin-bottom: 20px;
    position: relative;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

/* STAFF */
.is-showing {
    opacity: 1;
    transform: translateX(0px);
}

.staff-img {
    border: 1px solid black;
    width: 160px;
    transition: all 0.3s ease-in-out;
    display: block;
}

figure:hover {
    border: 0px;
    transform: scale(1.1);
}

.figcaption {
    position: absolute;
    left: -100%;
    bottom: 10px;
    background: black;
    color: white;
    padding: 2px 8px;
    max-width: 140px;
    font-size: 11px;
    transition: all 0.3s ease-in-out;
}

/* FOOTER */
footer {
    background: black;
    color: white;
    padding: 40px 0;
    bottom: 0;
    width: 100%;
}

.footer-items {
    max-width: 1000px;
    margin: 0 auto;
}

.footer-link {
    color: white;
}

input {
    color: #666;
}
[/CODE]

JS (jQuery):

[CODE]
// OPEN LOG IN MENU
$(".loginbutton").click(function() {
    console.log('Clicked');
    if($(".login").css("opacity") == 0) {
        console.log('1');
        $(".login").css({'opacity':'1'});
        $(".login").css({'right':'-20px'});
    } else {
        console.log('2');
        $(".login").css({'opacity':'0'});
        $(".login").css({'right':'-260px'});
    }
});
[/CODE]

Gewijzigd op 06/07/2016 22:17:30 door John De Zon