Menu (half)verstopt

Medior PHP Developer

Functie omschrijving We are looking for a dutch native speaker Wil jij als developer werken bij een interne organisatie en de eigen software verder helpen ontwikkelen? Lees dan snel verder! In deze functie ga je werken als PHP Developer en de interne software en applicaties verder ontwikkelen. In het kort houdt dit in: Je gaat de interne applicaties en software verder optimaliseren. Verder bouw je verschillende API's en koppelingen tussen systemen. Je gaat het CRM-systeem door middel van PHP verder ontwikkelen. Ook ga je collega's ondersteunen bij vragen over de software en applicaties. Bedrijfsprofiel Dit bedrijf is actief in het

Bekijk vacature »

Fullstack Software Developer

Bedrijfsomschrijving Functieomschrijving Java ontwerpen, bouwen en testen (T-shaped). Als senior ontwikkelaar ben je bekend in zowel de back-end als de frontend van een applicatie. Angular, Continious Delivery / Integration. Een ervaren iemand die de leiding kan nemen, een weg vindt in nieuwe situaties, en in oude applicaties. Initiatiefrijk, bekend met de (technische) omgevingen die we bij duo gebruiken, niet te beroerd om collegaâ€™s te helpen. Als senior programmeur in staat om op te treden als lead programmeur. Ondersteunt de testers bij de testautomatisering en minder ervaren programmeurs bij dagelijks werkzaamheden. Dit laatste met name op het gebied van Angular. Achtergrond

Bekijk vacature »

SQL Developer

Functie omschrijving We are looking for a dutch native speaker Jij gaat in deze functie aan de slag met uitdagende projecten en het creÃ«ren van maatwerk software, vooral middels SQL. Iedere klant/project is weer anders, maar dat maakt dit bedrijf en de functie erg uniek & uitdagend. Verder heb je de volgende taken: Ontwikkelen en ontwerpen van SQL databases. T-SQL wordt hierbij gebruikt als programmeer laag; Optimalisatie van query's, voor een verbeterde efficiency; Begeleiden van junior developers, mits je dit leuk vindt; Heb je meer interesse in een rol als consultant, dan is dit ook mogelijk. Je heb hier meer

Bekijk vacature »

C# developer

Functie Als ervaren Software Engineer wordt jij verantwoordelijk voor het bedenken en ontwikkelen van technische (maatwerk) oplossingen voor onze klanten en dit samen met de klant af te stemmen. Jij wordt o.a. verantwoordelijk voor de doorontwikkeling het software pakket welke voor ons enorm belangrijk is. Dit pakket zorgt er namelijk voor dat wij complete productielijnen kunnen aansturen en monitoren. Daarnaast heb jij actief contact met onze hoofdvestiging om het software achter een van onze systemen te verbeteren en te herschrijven. Momenteel zijn onze C# applicaties geschreven met o.a. Winforms. Echter hebben wij de actieve ambitie om dit te gaan herschrijven

Bekijk vacature »

Software developer - C Sharp

Functie omschrijving Heb jij interesse in het programmeren en ontwikkelen van software? En heb jij enige ervaring met Oracle databases en PL/SQL? Wij zijn voor een leuke opdrachtgever in omgeving Naaldwijk op zoek naar een software ontwikkelaar die graag werkt met C#, JAVA of Oracle. Wij zoeken iemand die breed inzetbaar is en die aan veel verschillende applicaties wilt werken. Als software developer werk je met je collega's samen in een leuk en informeel team aan het (her)ontwerpen van bedrijfssystemen. Je houdt je bezig met het ontwikkelen van REST API's en je onderhoudt applicaties in Oracle PL/SQL en APEX. Vind

Bekijk vacature »

Junior Front end developer

Functie Jij als developer gaat ons helpen onze producten verder te ontwikkelen en in te zetten in de markt. Op dit moment bestaat ons SaaS product uit 3 componenten die zowel los als in een pakket gekocht kunnen worden. Het gaat hier om een online kaartapplicatie, een workflow tool en een monitoring tool. Momenteel zijn wij 3 jaar geleden gestart met de ontwikkeling. De tech-stack waarmee we werken is voornamelijk Javascript, Vue.js en Python. Daarnaast gebruiken wij FaundaDB als database en werken we veel met GIS applicaties. De uitdaging die we momenteel hebben is dat we momenteel een intern team

Bekijk vacature »

Ervaren C#.NET programmeur

Functieomschrijving Voor een moderne werkgever in regio Prinsenbeek zijn wij op zoek naar een ervaren C#.NET programmeur die graag de uitdaging aangaat. Je houdt je bezig met het ontwikkelen van maatwerk webapplicaties voor diverse klanten, waarbij complexe processen optimaal worden ondersteund. Verder ziet jouw takenpakket er als volgt uit: Ontwikkelen en onderhouden van C#.NET-applicaties; Schrijven van hoogwaardige, herbruikbare codes; Schrijven van technische documentatie en gebruikershandleidingen; Bijdragen aan het ontwerp en de architectuur van softwaretoepassingen; Troubleshooten en oplossen van bugs in softwaretoepassingen; Werken met databases en dataopslagoplossingen; Implementeren van beveiligingsoplossingen en het waarborgen van de beveiliging van applicaties en gegevens. Bedrijfsprofiel

Bekijk vacature »

Delphi developer

Functie Als Delphi developer ga jij aan de slag in een team met twee andere ervaren Delphi programmeurs waaronder de Hoofd programmeur. Als team zijn jullie verantwoordelijk voor de doorontwikkeling van jullie bestaande applicatie. Daarnaast zijn jullie verantwoordelijk voor het onderhouden van deze applicatie en het oplossen van eventuele bugs. Eisen - HBO werk en denk niveau; - Minimaal Ã©Ã©n jaar ervaring met Delphi; - Goede beheersing van de Nederlandse taal in woord en geschrift; - Jij bent zelfstandig, maar kan ook in team verband werken. Aanbod - â‚¬3000,-- â‚¬4000,- op basis van jouw kennis en ervaring; - 8% vakantiegeld;

Bekijk vacature »

Traineeship Full Stack .NET Developer

Dit ga je doen Start op 7 augustus 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 hier

Bekijk vacature »

Java Developer

Functieomschrijving Are you an experienced Java Developer who wants to be challenged? Then this is your job! As a Java Developer, you are co-responsible for building custom applications within our extensive IT landscape. Development takes place on both the back-end side (Spring/JEE). Together with the IT department, you are responsible for the daily adjustments and expansions of our IT systems. In addition, you will work in small scrum teams using the Agile methodologies. Besides the realization of our in-house systems, you are responsible for the roll-out of the application (version) as well as the operational support after going live. Team

Bekijk vacature »

Front end developer

Functie Het team bestaat uit User Experience designers, Data Scientists en Software Engineers met passie voor hun vak. De consultants en ontwikkelaars werken volgens de Design Thinking methode waarbij de eerste stappen van ontwerp en ontwikkeling zullen samenkomen in een proof of concept. Nadat is vastgesteld dat de oplossing voldoet aan de belangrijkste behoeftes worden producten of services gevalideerd door middel van korte iteraties. Hiermee zorgen ze ervoor dat het werk voldoet aan de technische vereisten en gebruikersbehoefte. Door het inzetten van de nieuwste technologieÃ«n die toekomstbestendig zijn weten ze klanten omver te blazen. Ook geven en organiseren ze veel

Bekijk vacature »

Fullstack developer - medior

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en zou jij graag bij een platte maar informele organisatie willen werken? Voor een mooi softwarebedrijf in omgeving Ridderkerk zijn wij op zoek naar versterking voor op de afdeling Software Development! Als Fullstack developer wordt je bij dit bedrijf onderdeel van de volledige ontwikkeling van requirement tot oplevering! Werkzaamheden Jouw focus ligt op de front end en alles wat daarbij komt kijken. Je gaat ontwerpen, ontwikkelen, testen en valideren. Je zult voornamelijk werken met React.js en Typescript. Maar ook Javascript, HTML en CSS komen aanbod. Daarnaast zal je ook regelmatig met

Bekijk vacature »

PHP Software Developer

Functie omschrijving Op zoek naar een nieuwe uitdaging binnen PHP? Lees dan snel verder! Wij zoeken een ervaren PHP developer die binnen een organisatie gaat functioneren als verlengstuk van de klant. Wij zoeken voor deze iemand die technisch complexe zaken met enthousiasme en plezier aanvliegt. Verder moet je instaat zijn om je tijd goed te managen omdat je aan meerdere projecten tegelijkertijd werkt. Je werkt met de nieuwste technieken en tijdens deze uitdaging werk je veel samen met de front-end developers van deze organisatie. Wij zoeken iemand die zichzelf graag uitdaagt en altijd de beste wilt zijn. Bedrijfsprofiel Waar ga

Bekijk vacature »

Back-end Developer

Functieomschrijving Heb jij kort geleden jouw HBO ICT diploma in ontvangst mogen nemen? Of ben je toe aan een nieuwe uitdaging? Voor een gewaardeerde werkgever in regio Oosterhout zijn wij op zoek naar een back-end developer. Kennis of ervaring met C# & SQL is een must! Je bent verantwoordelijk voor de beheer en ontwikkeling van de software; Je draagt bij aan de implementatie van aanpassingen, verbeteringen en aanvullingen in de C# based applicaties; Je test de software en ontwikkelt deze door; Je houdt je bezig met het ontwikkelen van nieuwe functionaliteiten; Je brengt de aanpassingssuggesties van klanten in kaart, om

Bekijk vacature »

Front end developer binnen het onderwijs

Functie Het doel van dit team is om te zorgen dat de studenten altijd op de hoogte zijn van relevante informatie en de mogelijkheid hebben om online vragen te stellen. Hiervoor hebben ze een portal ontwikkeld. De app is echt een greenfield project met een eigen inrichting middels cloud. De ontwikkeling wordt gedaan door gebruik te maken van oa. Javascript, React, CSS, Next.js, GraphQL in een Azure Cloud omgeving. Daarnaast gebruiken ze tooling als Figma, storybook, Jest en Github. De complexiteit in deze rol zit hem in het feit dat data uit verschillende bronsystemen komt waarbij er zowel gekoppeld wordt

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