index.html
kaart.css
flip.css
flip.js
snow.css
music.js
marquee.css
lights.css
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/* speciaal kerst lettertype 'Beyond Wonderland' laden */
@import url('https://fonts.cdnfonts.com/css/beyond-wonderland');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/* ### Basis van een openklappende kaart */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/*
Voor de open/sluit animatie zijn 4 tussenstapjes, die met CSS classes aangegeven worden:
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
.snowflakes {
position: fixed;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
document.addEventListener("DOMContentLoaded", function () {
const kaart = document.getElementById("kaart");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
/* Marquee is een lichtkrant, deze gaat van rechts naar links */
.marquee {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
.lights {
width: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Adding or removing images is disabled during broadcasting. You'll be able to update images again once the broadcast session is over.

Images

Image Library

Images listed here are available to use in your code in this trinket. Click the Image Library button to include more or upload new images.

How To Use Images

Images can be reference using a relative url.

For example, if you upload an image named "amazing.png", you can reference it in an image tag like this: 

<img src="amazing.png">

You may also use it in css or in javascript with the same "amazing.png" path.

Sorry, we had a problem displaying your page.

Try clicking Autorun or Run again and if it continues let us know.