diff --git a/css/Goethe Bold.ttf b/css/GoetheBold.ttf
similarity index 100%
rename from css/Goethe Bold.ttf
rename to css/GoetheBold.ttf
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 86da1f6..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,25 +0,0 @@
-body {
-    min-height: 100vh; 
-    background-color: #130149;
-    text-align:center;
-}
-
-h1 {
-    font-size: 200px;
-    color: white;
-    margin-top: 200px;
-    margin-bottom: 20px;
-}
-
-
-h2 {
-    font-size: 20px;
-    color: white;
-
-}
-
-h3{
-    margin-top: 200px;
-}
-
-
diff --git a/css/style_index.css b/css/style_index.css
new file mode 100644
index 0000000..6faec66
--- /dev/null
+++ b/css/style_index.css
@@ -0,0 +1,41 @@
+@font-face {
+    font-family: 'goethe-bold', sans-serif;
+    src: url(GoetheBold.ttf);
+}
+
+body {
+    font-size: calc(1rem + 1vw);
+    min-height: 100vh;
+    background-color: #130149;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+h1 {
+    font-family: monospace;
+    font-size: calc(5rem + 3vw); /* Responsive font size for h1 */
+    color: white;
+    margin-top: 200px;
+    margin-bottom: 20px;
+}
+
+h2 {
+    font-family: monospace;
+    font-size: 1.6rem; /* Adjust the font size for h2 as needed for responsiveness */
+    color: white;
+}
+
+h3 {
+    font-size: 1rem; /* Adjust the font size for h3 as needed for responsiveness */
+    margin-top: 300px;
+}
+
+#header {
+    font-family: monospace;
+    font-size: calc(1.2rem + 0.5vw); /* Responsive font size for #header */
+    margin-top: 20px;
+    color: white;
+}
diff --git a/css/style_webweave.css b/css/style_webweave.css
new file mode 100644
index 0000000..f2f7af6
--- /dev/null
+++ b/css/style_webweave.css
@@ -0,0 +1,66 @@
+@font-face {
+    font-family: 'goethe-bold', sans-serif;
+    src: url(GoetheBold.ttf);
+}
+
+body {
+    font-size: calc(1rem + 1vw);
+    min-height: 100vh;
+    background-color: #131313;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+h1 {
+    font-family: monospace;
+    font-size: calc(5rem + 3vw); /* Responsive font size for h1 */
+    color: #e5e5e5;
+    margin-top: 200px;
+    margin-bottom: 20px;
+}
+
+h2 {
+    font-family: monospace;
+    font-size: 1.6rem; /* Adjust the font size for h2 as needed for responsiveness */
+    color: #e5e5e5;
+}
+
+h3 {
+    font-size: 1rem; /* Adjust the font size for h3 as needed for responsiveness */
+    margin-top: 300px;
+}
+
+#header {
+    font-family: monospace;
+    font-size: calc(1.2rem + 0.5vw); /* Responsive font size for #header */
+    margin-top: 20px;
+    color: #e5e5e5;
+}
+
+#image-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+}
+
+#image-container img {
+    max-width: 400px;
+    max-height: 400px;
+    cursor: pointer; /* Add pointer cursor to indicate images are clickable */
+}
+
+#start-text {
+    display: none; /* Hide the text initially */
+}
+
+#footer {
+    font-size: calc(1rem + 0.5vw); /* Responsive font size for #footer */
+    position: absolute;
+    bottom: 0;
+    left: 10px;
+    color: #313131;
+}
diff --git a/images/web0.jpg b/images/web0.jpg
new file mode 100644
index 0000000..4c6073c
Binary files /dev/null and b/images/web0.jpg differ
diff --git a/images/web1.jpg b/images/web1.jpg
new file mode 100644
index 0000000..c9e0600
Binary files /dev/null and b/images/web1.jpg differ
diff --git a/images/web10.jpg b/images/web10.jpg
new file mode 100644
index 0000000..9a7da8c
Binary files /dev/null and b/images/web10.jpg differ
diff --git a/images/web11.jpg b/images/web11.jpg
new file mode 100644
index 0000000..ed48088
Binary files /dev/null and b/images/web11.jpg differ
diff --git a/images/web12.jpg b/images/web12.jpg
new file mode 100644
index 0000000..ffea767
Binary files /dev/null and b/images/web12.jpg differ
diff --git a/images/web2.jpg b/images/web2.jpg
new file mode 100644
index 0000000..58798eb
Binary files /dev/null and b/images/web2.jpg differ
diff --git a/images/web3.jpg b/images/web3.jpg
new file mode 100644
index 0000000..8d48b1e
Binary files /dev/null and b/images/web3.jpg differ
diff --git a/images/web4.jpg b/images/web4.jpg
new file mode 100644
index 0000000..991a2a1
Binary files /dev/null and b/images/web4.jpg differ
diff --git a/images/web5.jpg b/images/web5.jpg
new file mode 100644
index 0000000..6abe9b7
Binary files /dev/null and b/images/web5.jpg differ
diff --git a/images/web6.jpg b/images/web6.jpg
new file mode 100644
index 0000000..fc87e90
Binary files /dev/null and b/images/web6.jpg differ
diff --git a/images/web7.jpg b/images/web7.jpg
new file mode 100644
index 0000000..d098bbe
Binary files /dev/null and b/images/web7.jpg differ
diff --git a/images/web8.jpg b/images/web8.jpg
new file mode 100644
index 0000000..94d7e6f
Binary files /dev/null and b/images/web8.jpg differ
diff --git a/images/web9.jpg b/images/web9.jpg
new file mode 100644
index 0000000..7827d5c
Binary files /dev/null and b/images/web9.jpg differ
diff --git a/index.html b/index.html
index 33bab41..9ee8307 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta name="viewport" content="initial-scale=1, maximum-scale=1">
 
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/style_index.css">
   <!-- Fonts -->
   <!-- <link rel="stylesheet" href="/fonts/worksans/stylesheet.css"> -->
 </head>
@@ -25,10 +25,9 @@
         Before you go in, let the code strip you of your body and go in with what it left behind. 
     </h2>
     </div>
-
     <h3>
-        <a href="https://www.tutorialspoint.com"><img src="images/christmas.png" alt="" width="400" height="400"></a>
-        <a href="https://www.tutorialspoint.com"><img src="images/hut.png" alt="" width="400" height="400"></a>
+        <a href="https://hub.xpub.nl/breadcube/backplaces/webweave.html"><img src="images/christmas.png" alt="" width="400" height="400"></a>
+        <a href="https://hub.xpub.nl/breadcube/backplaces/luddite.html"><img src="images/hut.png" alt="" width="400" height="400"></a>
     </h3>
  </div>
 
diff --git a/webweave.html b/webweave.html
index e69de29..f731cca 100644
--- a/webweave.html
+++ b/webweave.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>webweaving</title>
+    <link rel="stylesheet" href="css/style_webweave.css">
+</head>
+<body>
+    <p id="header">webweave by clicking on the image</p>
+    <div id="image-container"></div>
+   
+</body>
+<p id="footer">credits for the webweaving go to sea--shore.tumblr.com</p>
+<script>
+    const imageContainer = document.getElementById("image-container");
+    const startText = document.getElementById("start-text");
+    const header = document.getElementById("header");
+    const footer = document.getElementById("footer");
+    let currentIndex = 0;
+    let creditsDisplayed = false;
+    
+    function showNextImage() {
+        if (currentIndex < 13) {
+            const image = document.createElement("img");
+            image.src = `images/web${currentIndex}.jpg`;
+            image.alt = `Image ${currentIndex}`;
+            imageContainer.appendChild(image);
+            currentIndex++;
+
+            // Add a click event to each image to show the next one
+            image.addEventListener("click", showNextImage);
+        }
+        if (currentIndex === 13 && !creditsDisplayed) {
+            startText.style.display = "block"; // Show the text when all images are displayed.
+            footer.style.display = "block"; // Show the footer text at the bottom
+            creditsDisplayed = true;
+        }
+    }
+
+    // Initialize by clicking on the first image
+    showNextImage();
+</script>
+</html>