added all the files

assets/css/404.css

@@ -0,0 +1,75 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background: #282828;
+  overflow-y: auto;
+}
+
+p {
+  font-family: "Bevan", cursive;
+  font-size: 130px;
+  margin: 10vh 0 0;
+  text-align: center;
+  overflow-y: auto;
+  letter-spacing: 5px;
+  background-color: black;
+  color: transparent;
+  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  background-clip: text;
+}
+
+p span {
+  font-size: 1.2em;
+}
+
+code {
+  color: #bdbdbd;
+  text-align: left;
+  display: block;
+  overflow-y: auto;
+  font-size: 16px;
+  margin: 0 30px 25px;
+}
+
+code span {
+  color: #f0c674;
+}
+
+code i {
+  color: #b5bd68;
+}
+
+code em {
+  color: #b294bb;
+  font-style: unset;
+}
+
+code b {
+  color: #81a2be;
+  font-weight: 500;
+  overflow-y: auto;
+}
+
+a {
+  color: #8abeb7;
+  font-family: monospace;
+  font-size: 20px;
+  text-decoration: underline;
+  overflow-y: auto;
+  margin-top: 10px;
+  display: inline-block;
+}
+
+@media screen and (max-width: 880px) {
+  p {
+    font-size: 14vw;
+    overflow-y: auto;
+  }
+}
+

assets/css/vanilla-zoom.min.css

@@ -0,0 +1,37 @@
+.vanilla-zoom {
+  width: 100%;
+  /*display: flex;*/
+}
+
+.vanilla-zoom .sidebar {
+  /*flex-basis: 30%;*/
+  width: 100%;
+  display: flex;
+  /*flex-direction: column;*/
+}
+
+.vanilla-zoom .sidebar img.small-preview {
+  width: 60px;
+  margin-right: 5px;
+  cursor: pointer;
+  opacity: .5;
+}
+
+.vanilla-zoom .sidebar img.small-preview.active, .vanilla-zoom .sidebar img.small-preview:hover {
+  opacity: 1;
+}
+
+.vanilla-zoom .sidebar img.small-preview:last-child {
+  margin-right: 0;
+}
+
+.vanilla-zoom .zoomed-image {
+  width: 100%;
+  height: 300px;
+  flex: 1;
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: contain;
+  margin-bottom: 5px;
+}
+

assets/js/404.js

@@ -0,0 +1,21 @@
+function type(n, t) {
+    var str = document.getElementsByTagName("code")[n].innerHTML.toString();
+    var i = 0;
+    document.getElementsByTagName("code")[n].innerHTML = "";
+
+    setTimeout(function() {
+        var se = setInterval(function() {
+            i++;
+            document.getElementsByTagName("code")[n].innerHTML =
+                str.slice(0, i) + "|";
+            if (i == str.length) {
+                clearInterval(se);
+                document.getElementsByTagName("code")[n].innerHTML = str;
+            }
+        }, 10);
+    }, t);
+}
+
+type(0, 0);
+type(1, 600);
+type(2, 1300);

assets/js/theme.js

@@ -0,0 +1,11 @@
+// Custom theme code
+
+if (document.getElementsByClassName('clean-gallery').length > 0) {
+   baguetteBox.run('.clean-gallery', { animation: 'slideIn' });
+}
+
+if (document.getElementsByClassName('clean-product').length > 0) {
+    window.onload = function() {
+        vanillaZoom.init('#product-preview');
+    };
+}

assets/js/vanilla-zoom.js

@@ -0,0 +1,92 @@
+(function(window){
+    function define_library() {
+        var vanillaZoom = {};
+        vanillaZoom.init = function(el) {
+
+            var container = document.querySelector(el);
+            if(!container) {
+                console.error('No container element. Please make sure you are using the right markup.');
+                return;
+            }
+
+            var firstSmallImage = container.querySelector('.small-preview');
+            var zoomedImage = container.querySelector('.zoomed-image');
+
+            if(!zoomedImage) {
+                console.error('No zoomed image element. Please make sure you are using the right markup.');
+                return;
+            }
+
+            if(!firstSmallImage) {
+                console.error('No preview images on page. Please make sure you are using the right markup.');
+                return;
+            }
+            else {
+                // Set the source of the zoomed image.
+                zoomedImage.style.backgroundImage = 'url('+ firstSmallImage.src +')';
+                firstSmallImage.classList.add('active');
+            }   
+
+            // Change the selected image to be zoomed when clicking on the previews.
+            container.addEventListener("click", function (event) {
+                var elem = event.target;
+
+                if (elem.classList.contains("small-preview")) {
+                    
+                    var allSmallPreviews = container.querySelectorAll(".small-preview");
+                    
+                    allSmallPreviews.forEach(function (preview) {
+                        preview.classList.remove('active');
+                    })
+                    
+                    elem.classList.add('active');
+                    
+                    var imageSrc = elem.src;
+                    zoomedImage.style.backgroundImage = 'url('+ imageSrc +')';
+                }
+            });
+            
+            // Zoom image on mouse enter.
+            zoomedImage.addEventListener('mouseenter', function(e) {
+                this.style.backgroundSize = "250%"; 
+            }, false);
+
+
+            // Show different parts of image depending on cursor position.
+            zoomedImage.addEventListener('mousemove', function(e) {
+                
+                // getBoundingClientReact gives us various information about the position of the element.
+                var dimentions = this.getBoundingClientRect();
+
+                // Calculate the position of the cursor inside the element (in pixels).
+                var x = e.clientX - dimentions.left;
+                var y = e.clientY - dimentions.top;
+
+                // Calculate the position of the cursor as a percentage of the total width/height of the element.
+                var xpercent = Math.round(100 / (dimentions.width / x));
+                var ypercent = Math.round(100 / (dimentions.height / y));
+
+                // Update the background position of the image.
+                this.style.backgroundPosition = xpercent+'% ' + ypercent+'%';
+            
+            }, false);
+
+
+            // When leaving the container zoom out the image back to normal size.
+            zoomedImage.addEventListener('mouseleave', function(e) {
+                this.style.backgroundSize = "contain"; 
+                this.style.backgroundPosition = "left center"; 
+            }, false);
+
+        }
+        return vanillaZoom;
+    }
+
+    // Add the vanillaZoom object to global scope.
+    if(typeof(vanillaZoom) === 'undefined') {
+        window.vanillaZoom = define_library();
+    }
+    else{
+        console.log("Library already defined.");
+    }
+})(window);