diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..fbfbb50
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,7 @@
+services:
+ nginx:
+ image: nginx
+ volumes:
+ - ./:/usr/share/nginx/html/
+ ports:
+ - "8080:80"
\ No newline at end of file
diff --git a/images/11/1.jpeg b/images/11/1.jpeg
new file mode 100644
index 0000000..d091afb
Binary files /dev/null and b/images/11/1.jpeg differ
diff --git a/images/11/10.jpeg b/images/11/10.jpeg
new file mode 100644
index 0000000..36d90c7
Binary files /dev/null and b/images/11/10.jpeg differ
diff --git a/images/11/11.jpeg b/images/11/11.jpeg
new file mode 100644
index 0000000..eefb707
Binary files /dev/null and b/images/11/11.jpeg differ
diff --git a/images/11/12.jpeg b/images/11/12.jpeg
new file mode 100644
index 0000000..e75571e
Binary files /dev/null and b/images/11/12.jpeg differ
diff --git a/images/11/13.jpeg b/images/11/13.jpeg
new file mode 100644
index 0000000..debdb7c
Binary files /dev/null and b/images/11/13.jpeg differ
diff --git a/images/11/14.jpeg b/images/11/14.jpeg
new file mode 100644
index 0000000..acb768c
Binary files /dev/null and b/images/11/14.jpeg differ
diff --git a/images/11/15.jpeg b/images/11/15.jpeg
new file mode 100644
index 0000000..77da5c8
Binary files /dev/null and b/images/11/15.jpeg differ
diff --git a/images/11/16.jpeg b/images/11/16.jpeg
new file mode 100644
index 0000000..529939b
Binary files /dev/null and b/images/11/16.jpeg differ
diff --git a/images/11/17.jpeg b/images/11/17.jpeg
new file mode 100644
index 0000000..bcf7674
Binary files /dev/null and b/images/11/17.jpeg differ
diff --git a/images/11/18.jpeg b/images/11/18.jpeg
new file mode 100644
index 0000000..bec25eb
Binary files /dev/null and b/images/11/18.jpeg differ
diff --git a/images/11/19.jpeg b/images/11/19.jpeg
new file mode 100644
index 0000000..2b6cede
Binary files /dev/null and b/images/11/19.jpeg differ
diff --git a/images/11/2.jpeg b/images/11/2.jpeg
new file mode 100644
index 0000000..a168a74
Binary files /dev/null and b/images/11/2.jpeg differ
diff --git a/images/11/20.jpeg b/images/11/20.jpeg
new file mode 100644
index 0000000..2d8af57
Binary files /dev/null and b/images/11/20.jpeg differ
diff --git a/images/11/3.jpeg b/images/11/3.jpeg
new file mode 100644
index 0000000..69d64be
Binary files /dev/null and b/images/11/3.jpeg differ
diff --git a/images/11/4.jpeg b/images/11/4.jpeg
new file mode 100644
index 0000000..3c10db9
Binary files /dev/null and b/images/11/4.jpeg differ
diff --git a/images/11/5.jpeg b/images/11/5.jpeg
new file mode 100644
index 0000000..0e80fce
Binary files /dev/null and b/images/11/5.jpeg differ
diff --git a/images/11/6.jpeg b/images/11/6.jpeg
new file mode 100644
index 0000000..52766f4
Binary files /dev/null and b/images/11/6.jpeg differ
diff --git a/images/11/7.jpeg b/images/11/7.jpeg
new file mode 100644
index 0000000..242416e
Binary files /dev/null and b/images/11/7.jpeg differ
diff --git a/images/11/8.jpeg b/images/11/8.jpeg
new file mode 100644
index 0000000..2d1fea3
Binary files /dev/null and b/images/11/8.jpeg differ
diff --git a/images/11/9.jpeg b/images/11/9.jpeg
new file mode 100644
index 0000000..9710034
Binary files /dev/null and b/images/11/9.jpeg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7031512
--- /dev/null
+++ b/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+ Base-bones HTML5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..ef1ed02
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,17 @@
+events { worker_connections 1024; }
+
+http {
+
+ upstream app_servers { # Create an upstream for the web servers
+ server server1:80; # the first server
+ server server2:80; # the second server
+ }
+
+ server {
+ listen 80;
+
+ location / {
+ proxy_pass http://app_servers; # load balance the traffic
+ }
+ }
+}
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..43cdc5b
--- /dev/null
+++ b/script.js
@@ -0,0 +1,68 @@
+/* Randomize array in-place using Durstenfeld shuffle algorithm */
+function shuffleArray(array) {
+ for (var i = array.length - 1; i > 0; i--) {
+ var j = Math.floor(Math.random() * (i + 1));
+ var temp = array[i];
+ array[i] = array[j];
+ array[j] = temp;
+ }
+}
+
+document.addEventListener("DOMContentLoaded", function(){
+
+ const maxImage = 20;
+
+ const img11 = [...document.querySelectorAll('.img-11')];
+
+ function getOptions(){
+ let options = Array.from(Array(maxImage).keys());
+ options.shift(); // remove zero
+ shuffleArray(options);
+ return options;
+ }
+
+ let options = getOptions();
+;
+ // preload all images
+ options.forEach((option) => {
+ const img = new Image();
+ img.src = `./images/11/${options[0]}.jpeg`;
+ });
+
+ // set initial images
+ for(let i = 0; i < img11.length; i++){
+ img11[i].style.backgroundImage = `url(./images/11/${options[i]}.jpeg)`;
+ const hidden = img11[i].childNodes[0];
+ hidden.classList.add('show');
+ }
+
+ function animate(){
+
+ // select random tile
+ const tile = Math.floor(Math.random() * img11.length);
+
+ let options = getOptions();
+
+ // filter out the already shown images to avoid duplicates
+ const existing = img11.map((img) => parseInt(img.style.backgroundImage.split('.jpeg')[0].split('11/')[1]));
+ options = options.filter((option) => !existing.includes(option));
+
+ // animate the tile
+ const hidden = img11[tile].childNodes[0];
+
+ hidden.addEventListener('transitionend', function() {
+ this.removeEventListener('transitionend',arguments.callee, false);
+
+ img11[tile].style.backgroundImage = `url(./images/11/${options[0]}.jpeg)`;
+ hidden.classList.add('show');
+
+ setTimeout(animate, 1000);
+
+ }, false);
+
+ hidden.classList.remove('show');
+ }
+
+ setTimeout(animate, 1000);
+
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0f42487
--- /dev/null
+++ b/style.css
@@ -0,0 +1,38 @@
+html, body{
+ height: 100%;
+ width: 100%;
+ margin: 0px 0px 0px 0px;
+ padding: 0px 0px 0px 0px;
+ background-color: white;
+}
+
+.center{
+ display: grid;
+ justify-content: center;
+ align-content: center;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: repeat(4, 3fr);
+ height: 100vh;
+ max-width: 70vh;
+ margin: auto;
+ box-sizing: border-box;
+}
+
+.center > div {
+ background-image: url(./images/11/1.jpeg);
+ background-size: cover;
+ background-position: center;
+}
+
+
+div.hidden {
+ opacity: 1;
+ transition: opacity 0.6s linear;
+ background-color: lightgray;
+ width:100%;
+ height: 100%;
+}
+
+.show {
+ opacity: 0 !important;
+ }
\ No newline at end of file