first commit

2 years ago · 399eb3c9ae
commit 399eb3c9ae
232 changed files with 4161 additions and 0 deletions
--- a/NOTES.ipynb
+++ b/NOTES.ipynb
@ -0,0 +1,57 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {
+    "tags": []
+   },
+   "source": [
+    "## NOTES\n",
+    "\n",
+    "https://hub.xpub.nl/sandbot/~clara/Project/"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "https://www.w3schools.com/howto/howto_js_slideshow.asp"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "https://www.w3docs.com/snippets/javascript/how-to-randomize-shuffle-a-javascript-array.html"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}
--- a/cloud.png
+++ b/cloud.png
--- a/crop/airport.jpg
+++ b/crop/airport.jpg
--- a/crop/bird.jpg
+++ b/crop/bird.jpg
--- a/crop/book.jpg
+++ b/crop/book.jpg
--- a/crop/bowl.jpg
+++ b/crop/bowl.jpg
--- a/crop/bread.jpg
+++ b/crop/bread.jpg
--- a/crop/brogle.jpg
+++ b/crop/brogle.jpg
--- a/crop/button.jpg
+++ b/crop/button.jpg
--- a/crop/cat.jpg
+++ b/crop/cat.jpg
--- a/crop/cat2.jpg
+++ b/crop/cat2.jpg
--- a/crop/cat3.jpg
+++ b/crop/cat3.jpg
--- a/crop/cat4.jpg
+++ b/crop/cat4.jpg
--- a/crop/catlion.gif
+++ b/crop/catlion.gif
--- a/crop/circle.jpg
+++ b/crop/circle.jpg
--- a/crop/dog.jpg
+++ b/crop/dog.jpg
--- a/crop/dog2.jpg
+++ b/crop/dog2.jpg
--- a/crop/dogtv.jpg
+++ b/crop/dogtv.jpg
--- a/crop/granny.jpg
+++ b/crop/granny.jpg
--- a/crop/joke.jpg
+++ b/crop/joke.jpg
--- a/crop/json.jpg
+++ b/crop/json.jpg
--- a/crop/lamp.jpg
+++ b/crop/lamp.jpg
--- a/crop/lion.jpg
+++ b/crop/lion.jpg
--- a/crop/lioncat.gif
+++ b/crop/lioncat.gif
--- a/crop/pen.jpg
+++ b/crop/pen.jpg
--- a/crop/pen2.jpg
+++ b/crop/pen2.jpg
--- a/crop/pen3.jpg
+++ b/crop/pen3.jpg
--- a/crop/pen4.jpg
+++ b/crop/pen4.jpg
--- a/crop/potato.jpg
+++ b/crop/potato.jpg
--- a/crop/pun.jpg
+++ b/crop/pun.jpg
--- a/crop/reader.jpg
+++ b/crop/reader.jpg
--- a/crop/sister.jpg
+++ b/crop/sister.jpg
--- a/crop/soup.jpg
+++ b/crop/soup.jpg
--- a/crop/sweetpotato.jpg
+++ b/crop/sweetpotato.jpg
--- a/crop/table.jpg
+++ b/crop/table.jpg
--- a/crop/thief.jpg
+++ b/crop/thief.jpg
--- a/crop/writer.jpg
+++ b/crop/writer.jpg
--- a/cursor.gif
+++ b/cursor.gif
--- a/index.html
+++ b/index.html
@ -0,0 +1,82 @@
+ <!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>a and a</title>
+
+    <link rel="stylesheet" type="text/css" href="start.css" />
+    
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+    
+    <style type="text/css">BODY {overflow-x: hidden;}</style>
+
+</head>
+    
+    <body>
+        
+<div class="topnav">
+  <a class="active" href="index.html">Home</a>
+  <a href="navigation/project.html">Project</a>
+  <a href="navigation/about.html">About</a>
+  <div class="sun"> <img src="subpages/design/corner.jpg"> </div>
+</div>
+        <h1 align="center">
+            a <a href="subpages/catlion.html"><img src="crop/catlion.gif"></a> and a <a href="subpages/bookpen.html"><img src="crop/lioncat.gif"></a>
+        </h1>
+
+<div class="grass"> <img src="subpages/design/grass.png"> </div>        
+    </body>
+          
+
+
+<script language="JavaScript1.2">
+
+var trailLength = 8 // The length of trail (8 by default; put more for longer "tail")
+var path = "cloud.png" // URL of your image
+
+var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
+var i,d = 0
+
+function initTrail() { // prepares the script
+	images = new Array() // prepare the image array
+	for (i = 0; i < parseInt(trailLength); i++) {
+		images[i] = new Image()
+		images[i].src = path
+	}
+	storage = new Array() // prepare the storage for the coordinates
+	for (i = 0; i < images.length*3; i++) {
+		storage[i] = 0
+	}
+	for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
+   document.write('<div class="mouse" id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>')	}
+	trail()
+}
+function trail() { // trailing function
+	for (i = 0; i < images.length; i++) { // for every div/layer
+		document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinate
+		document.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinate
+		d = d+2
+	}
+	for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
+		storage[i] = storage[i-2]
+	}
+	d = 0 // reset for future use
+	var timer = setTimeout("trail()",10) // call recursively 
+}
+function processEvent(e) { // catches and processes the mousemove event 
+	if (window.event) { // for IE
+		storage[0] = window.event.y+standardbody.scrollTop+10
+		storage[1] = window.event.x+standardbody.scrollLeft+10
+	} else {
+		storage[0] = e.pageY+12
+		storage[1] = e.pageX+12
+	}
+}
+
+	initTrail() 
+	document.onmousemove = processEvent // start capturing
+
+//-->
+</script>
--- a/navigation/.txt
+++ b/navigation/.txt
--- a/navigation/about.css
+++ b/navigation/about.css
@ -0,0 +1,27 @@
+/*NAVIGATION*/
+
+/*bar*/
+.topnav {
+  overflow: hidden;
+}
+
+/*style*/
+.topnav a {
+  float: left;
+  color: grey;
+  font-family: sans-serif;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 1em;
+}
+
+/*hover link*/
+.topnav a:hover {
+  color: yellow;
+}
+
+/*active link*/
+.topnav a.active {
+  color: black;
+}
--- a/navigation/about.html
+++ b/navigation/about.html
@ -0,0 +1,23 @@
+ <!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>about</title>
+
+    <link rel="stylesheet" type="text/css" href="about.css" />
+
+</head>
+    
+    <body>
+                
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="project.html">Project</a>
+  <a class="active" href="about.html">About</a>
+</div>
+        
+        <p> about page coming soon</p>
+       
+    </body>
--- a/navigation/project.css
+++ b/navigation/project.css
@ -0,0 +1,27 @@
+/*NAVIGATION*/
+
+/*bar*/
+.topnav {
+  overflow: hidden;
+}
+
+/*style*/
+.topnav a {
+  float: left;
+  color: grey;
+  font-family: sans-serif;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 1em;
+}
+
+/*hover link*/
+.topnav a:hover {
+  color: yellow;
+}
+
+/*active link*/
+.topnav a.active {
+  color: black;
+}
--- a/navigation/project.html
+++ b/navigation/project.html
@ -0,0 +1,23 @@
+ <!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>project</title>
+
+    <link rel="stylesheet" type="text/css" href="project.css" />
+
+</head>
+    
+    <body>
+                
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a class="active" href="project.html">Project</a>
+  <a href="about.html">About</a>
+</div>
+        
+        <p> project page coming soon</p>
+       
+    </body>
--- a/start.css
+++ b/start.css
@ -0,0 +1,80 @@
+/*NAVIGATION*/
+
+/*bar*/
+.topnav {
+  overflow: hidden;
+  padding-left: 2vw;
+}
+
+/*corner sun*/
+.sun {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    float:left;
+    z-index: -1;
+    padding-bottom: 25px;
+}
+
+.sun img{
+   width: 90%;
+}
+
+/* Grass */
+.grass {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    z-index: 1;
+}
+
+.grass img{
+   width: 100%;
+}
+
+/*style*/
+.topnav a {
+  float: left;
+  color: grey;
+  font-family: 'Nunito', sans-serif;
+  text-align: center;
+  padding: 2vh 2vw;
+  text-decoration: none;
+  font-size: 1em;
+}
+
+/*hover link*/
+.topnav a:hover {
+  color: skyblue;
+}
+
+/*active link*/
+.topnav a.active {
+  color: skyblue;
+}
+
+/*PAGE*/
+
+
+h1 {
+  font-family: 'Nunito', sans-serif;
+  font-size: 4em;
+  letter-spacing: 5px;
+  word-spacing: 35px;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+img{
+  vertical-align: middle;
+  height: auto;
+  width: 8vh;
+}
+
+@media (max-width: 950px) {
+  .mouse {
+    display: none;
+  }
+}
--- a/subpages/birdpen.html
+++ b/subpages/birdpen.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>birdpen</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/birdpen/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/birdpen/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/birdpen/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/birdpen/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/birdpen/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/birdpen/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/birdpen/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/catlion/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/birdpen/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/bookpen.html
+++ b/subpages/bookpen.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>bookpen</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/bookpen/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/bookpen/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/bookpen/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/bookpen/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/bookpen/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/bookpen/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/bookpen/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/bookpen/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/bookpen/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/breadbutton.html
+++ b/subpages/breadbutton.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>breadbutton</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/breadbutton/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/breadbutton/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/breadbutton/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/breadbutton/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/breadbutton/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/breadbutton/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/breadbutton/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/breadbutton/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/breadbutton/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/broglelamp.html
+++ b/subpages/broglelamp.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>broglelamp</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/broglelamp/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/broglelamp/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/broglelamp/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/broglelamp/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/broglelamp/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/broglelamp/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/broglelamp/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/broglelamp/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/broglelamp/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/catlion.html
+++ b/subpages/catlion.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>catlion</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/catlion/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/catlion/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/catlion/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/catlion/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/catlion/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/catlion/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/catlion/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/catlion/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/catlion/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/circlecat.html
+++ b/subpages/circlecat.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>circlecat</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/circlecat/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/circlecat/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/circlecat/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/circlecat/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/circlecat/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/circlecat/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/circlecat/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/circlecat/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/circlecat/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/design/corner.jpg
+++ b/subpages/design/corner.jpg
--- a/subpages/design/grass.png
+++ b/subpages/design/grass.png
--- a/subpages/design/more.jpg
+++ b/subpages/design/more.jpg
--- a/subpages/design/more.png
+++ b/subpages/design/more.png
--- a/subpages/dogcat.html
+++ b/subpages/dogcat.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>dogcat</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/dogcat/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/dogcat/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/dogcat/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogcat/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogcat/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogcat/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogcat/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogcat/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogcat/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/dogdogtv.html
+++ b/subpages/dogdogtv.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>dogdogtv</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/dogdogtv/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/dogdogtv/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/dogdogtv/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogdogtv/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogdogtv/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogdogtv/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogdogtv/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogdogtv/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/dogdogtv/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/grannythief.html
+++ b/subpages/grannythief.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>grannythief</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/grannythief/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/grannythief/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/grannythief/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/grannythief/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/grannythief/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/grannythief/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/grannythief/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/grannythief/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/grannythief/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/list/list.css
+++ b/subpages/list/list.css
@ -0,0 +1,117 @@
+/*NAVIGATION*/
+
+/*bar*/
+.topnav {
+  overflow: hidden;
+  padding-left: 2vw;
+}
+
+/*style*/
+.topnav a {
+  float: left;
+  color: grey;
+  font-family: 'Nunito', sans-serif;
+  text-align: center;
+  padding: 2vh 2vw;
+  text-decoration: none;
+  font-size: 1em;
+}
+
+/*corner sun*/
+.sun {
+    position: fixed;
+    top: 0;
+    left: 0;
+    float:left;
+    z-index: -1;
+    padding-bottom: 25px;
+}
+
+.sun img{
+   width: 90%;
+}
+
+/* Grass */
+.grass {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    z-index: 1;
+}
+
+.grass img{
+   width: 100%;
+}
+
+/*hover link*/
+.topnav a:hover {
+  color: skyblue;
+}
+
+/*active link*/
+.topnav a.active {
+  color: skyblue;
+}
+
+/*PAGE*/
+
+a {
+  color: grey;
+  font-family: 'Nunito', sans-serif;
+  text-decoration: none;
+}
+
+/*a:hover{
+    --main-color: yellow;
+    color: var(--main-bg-color);
+}*/
+
+/*a:hover{
+    color:blue;
+}
+
+a.blue:hover{
+    color:blue;
+}
+
+a.yellow:hover{
+    color:yellow;
+}
+
+a.pink:hover{
+    color:pink;
+}
+
+a.green:hover{
+    color:green;
+}
+
+a.orange:hover{
+    color:orange;
+}
+
+a.red:hover{
+    color:red;
+}
+*/
+
+a.active{
+ color: black;
+}
+
+h2 {
+  font-family: 'Nunito', sans-serif;
+  font-size: 7vw;
+  letter-spacing: 5px;
+  word-spacing: 20px;
+  position: absolute;
+  left: 40px;
+  margin-top: 10px;
+}
+
+/*IMAGES*/
+img{
+  vertical-align: middle;
+  height: auto;
+  width: 8vw;
+}
--- a/subpages/list/list1.html
+++ b/subpages/list/list1.html
@ -0,0 +1,65 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>List 1</title>
+
+    <link rel="stylesheet" type="text/css" href="list.css" />
+
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+    
+</head>
+    
+    <body>
+ 
+<!--<script> 
+const randomColor = "#"+((1<<24)*Math.random()|0).toString(16); 
+
+document.documentElement.style.setProperty('--main-bg-color', randomColor);
+</script>--> 
+        
+        
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../../navigation/project.html">Project</a>
+  <a href="../../navigation/about.html">About</a>
+  <div class="sun"> <img src="../design/corner.jpg"> </div>
+
+</div>
+        <h2 class="titles">
+            <a href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a href="../../subpages/birdpen.html">a <img src="../../crop/bird.jpg"> and a <img src="../../crop/pen2.jpg"></a>&nbsp;
+            <a href="../../subpages/bookpen.html">a <img src="../../crop/book.jpg"> and a <img src="../../crop/pen3.jpg"></a>&nbsp;
+            <a href="../../subpages/breadbutton.html">a <img src="../../crop/bread.jpg"> and a <img src="../../crop/button.jpg"></a>&nbsp;
+            <a href="../../subpages/broglelamp.html">a <img src="../../crop/brogle.jpg"> and a <img src="../../crop/lamp.jpg"></a>&nbsp;
+            <a href="../../subpages/circlecat.html">a <img src="../../crop/circle.jpg"> and a <img src="../../crop/cat3.jpg"></a>&nbsp;
+            <a href="../../subpages/dogcat.html">a <img src="../../crop/dog.jpg"> and a <img src="../../crop/cat4.jpg"></a>&nbsp;
+            <a href="../../subpages/dogdogtv.html">a <img src="../../crop/dog2.jpg"> and a <img src="../../crop/dogtv.jpg"></a>&nbsp;
+            <a href="../../subpages/grannythief.html">a <img src="../../crop/granny.jpg"> and a <img src="../../crop/thief.jpg"></a>&nbsp;
+            <a href="../../subpages/penbowl.html">a <img src="../../crop/pen.jpg"> and a <img src="../../crop/bowl.jpg"></a>&nbsp;
+            <a href="../../subpages/pencat.html">a <img src="../../crop/pen.jpg"> and a <img src="../../crop/cat2.jpg"></a>
+            <a href="../../subpages/potatosweetpotato.html">a <img src="../../crop/potato.jpg"> and a <img src="../../crop/sweetpotato.jpg"></a>
+            <a href="../../subpages/punjoke.html">a <img src="../../crop/pun.jpg"> and a <img src="../../crop/joke.jpg"></a>
+            <a href="../../subpages/readerwriter.html">a <img src="../../crop/reader.jpg"> and a <img src="../../crop/writer.jpg"></a>
+            <a href="../../subpages/sistersister.html">a <img src="../../crop/sister.jpg"> and a <img src="../../crop/sister.jpg"></a>
+            <a href="../../subpages/soupjs.html">a <img src="../../crop/soup.jpg"> and a <img src="../../crop/json.jpg"></a>
+            <a href="../../subpages/tableairport.html">a <img src="../../crop/table.jpg"> and a <img src="../../crop/airport.jpg"></a>
+        <br>
+        <br>
+        </h2>
+
+<script>
+    var titles= window.document.getElementsByClassName("titles")[0].children;
+    console.log(titles);
+    for (var i =0; i<titles.length; i++) {
+        console.log(titles.item(i));
+        const randomColor = "#"+((1<<24)*Math.random()|0).toString(16);
+        titles.item(i).style.color=randomColor;
+    }
+        </script>        
+
+<div class="grass"> <img src="../design/grass.png"> </div>    
+        
+    </body>
--- a/subpages/list/list_manual.html
+++ b/subpages/list/list_manual.html
@ -0,0 +1,43 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>List 1</title>
+
+    <link rel="stylesheet" type="text/css" href="list.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+    
+</head>
+    
+    <body>
+ 
+<!--<script> 
+const randomColor = "#"+((1<<24)*Math.random()|0).toString(16); 
+
+document.documentElement.style.setProperty('--main-bg-color', randomColor);
+</script>--> 
+        
+
+        
+        
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+</div>
+        <h2 class="titles">
+            <a class="blue" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="yellow" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="orange" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="red" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="pink" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="green" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="blue" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="yellow" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="pink" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="orange" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>&nbsp;
+            <a class="green" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
+        </h2>
+
+    </body>
--- a/subpages/penbowl.html
+++ b/subpages/penbowl.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>penbowl</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/penbowl/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/penbowl/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/penbowl/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/penbowl/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/penbowl/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/penbowl/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/penbowl/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/penbowl/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/penbowl/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/pencat.html
+++ b/subpages/pencat.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>pencat</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/pencat/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/pencat/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/pencat/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/pencat/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/pencat/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/pencat/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/pencat/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/pencat/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/pencat/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/potatosweetpotato.html
+++ b/subpages/potatosweetpotato.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>potatosweetpotato</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/potatosweetpotato/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/potatosweetpotato/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/potatosweetpotato/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/potatosweetpotato/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/potatosweetpotato/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/potatosweetpotato/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/potatosweetpotato/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/potatosweetpotato/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/potatosweetpotato/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/punjoke.html
+++ b/subpages/punjoke.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>punjoke</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/punjoke/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/punjoke/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/punjoke/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/punjoke/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/punjoke/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/punjoke/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/punjoke/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/punjoke/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/punjoke/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/readerwriter.html
+++ b/subpages/readerwriter.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>readerwriter</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/readerwriter/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/readerwriter/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/readerwriter/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/readerwriter/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/readerwriter/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/readerwriter/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/readerwriter/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/readerwriter/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/readerwriter/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/script.js
+++ b/subpages/script.js
@ -0,0 +1,32 @@
+var slideIndex = 1;
+showSlides(slideIndex);
+
+// Next/previous controls
+function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+
+// Thumbnail image controls
+function currentSlide(n) {
+  showSlides(slideIndex = n);
+}
+
+console.log("hello from script.js");
+
+function showSlides(n) {
+  var i;
+  var slides = document.getElementsByClassName("mySlides");
+  console.log("slides*", slides, "slideIndex", slideIndex);
+  console.log("current slide", slides[slideIndex-1]);
+  var dots = document.getElementsByClassName("dot");
+  if (n > slides.length) {slideIndex = 1}
+  if (n < 1) {slideIndex = slides.length}
+  for (i = 0; i < slides.length; i++) {
+      slides[i].style.display = "none";
+  }
+  for (i = 0; i < dots.length; i++) {
+      dots[i].className = dots[i].className.replace(" active", "");
+  }
+  slides[slideIndex-1].style.display = "block";
+  dots[slideIndex-1].className += " active";
+}
--- a/subpages/sistersister.html
+++ b/subpages/sistersister.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>sistersister</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/sistersister/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/sistersister/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/sistersister/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/sistersister/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/sistersister/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/sistersister/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/sistersister/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/sistersister/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/sistersister/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/soupjs.html
+++ b/subpages/soupjs.html
@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>soupjson</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet">
+
+   
+</head>
+<body>
+    
+<div class="topnav">
+  <a href="https://hub.xpub.nl/sandbot/~clara/Project/">Home</a>
+  <a href="../navigation/project.html">Project</a>
+  <a href="../navigation/about.html">About</a>
+  <div class="sun"> <img src="design/corner.jpg"> </div>
+</div>
+    
+<div class="more"> 
+    <a href="list/list1.html"> <img src="design/more.png"></a>
+</div>
+    
+<!-- Slideshow container -->
+<div class="slideshow-container">
+
+  <!-- Full-width images with number and caption text -->
+  <div class="mySlides fade">
+<!-- <div class="numbertext">1 / 9</div> -->
+    <img src="stories/soupjson/01.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/soupjson/02.jpg" style="width:100%">
+  </div>
+
+  <div class="mySlides fade">
+    <img src="stories/soupjson/03.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/soupjson/04.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/soupjson/05.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/soupjson/06.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/soupjson/07.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/soupjson/08.jpg" style="width:100%">
+  </div>
+    
+  <div class="mySlides fade">
+    <img src="stories/soupjson/09.jpg" style="width:100%">
+  </div>
+
+  <!-- Next and previous buttons -->
+  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+</div>
+<br>
+    <script src="script.js"></script>
+    
+
+    </body>
+</html>    
--- a/subpages/stories/birdpen/01.jpg
+++ b/subpages/stories/birdpen/01.jpg
--- a/subpages/stories/birdpen/02.jpg
+++ b/subpages/stories/birdpen/02.jpg
--- a/subpages/stories/birdpen/03.jpg
+++ b/subpages/stories/birdpen/03.jpg
--- a/subpages/stories/birdpen/04.jpg
+++ b/subpages/stories/birdpen/04.jpg
--- a/subpages/stories/birdpen/05.jpg
+++ b/subpages/stories/birdpen/05.jpg
--- a/subpages/stories/birdpen/06.jpg
+++ b/subpages/stories/birdpen/06.jpg
--- a/subpages/stories/birdpen/07.jpg
+++ b/subpages/stories/birdpen/07.jpg
--- a/subpages/stories/birdpen/08.jpg
+++ b/subpages/stories/birdpen/08.jpg
--- a/subpages/stories/birdpen/09.jpg
+++ b/subpages/stories/birdpen/09.jpg
--- a/subpages/stories/bookpen/01.jpg
+++ b/subpages/stories/bookpen/01.jpg
--- a/subpages/stories/bookpen/02.jpg
+++ b/subpages/stories/bookpen/02.jpg
--- a/subpages/stories/bookpen/03.jpg
+++ b/subpages/stories/bookpen/03.jpg
--- a/subpages/stories/bookpen/04.jpg
+++ b/subpages/stories/bookpen/04.jpg
--- a/subpages/stories/bookpen/05.jpg
+++ b/subpages/stories/bookpen/05.jpg
--- a/subpages/stories/bookpen/06.jpg
+++ b/subpages/stories/bookpen/06.jpg
--- a/subpages/stories/bookpen/07.jpg
+++ b/subpages/stories/bookpen/07.jpg
--- a/subpages/stories/bookpen/08.jpg
+++ b/subpages/stories/bookpen/08.jpg
--- a/subpages/stories/bookpen/09.jpg
+++ b/subpages/stories/bookpen/09.jpg
--- a/subpages/stories/breadbutton/01.jpg
+++ b/subpages/stories/breadbutton/01.jpg
--- a/subpages/stories/breadbutton/02.jpg
+++ b/subpages/stories/breadbutton/02.jpg
--- a/subpages/stories/breadbutton/03.jpg
+++ b/subpages/stories/breadbutton/03.jpg
--- a/subpages/stories/breadbutton/04.jpg
+++ b/subpages/stories/breadbutton/04.jpg
--- a/subpages/stories/breadbutton/05.jpg
+++ b/subpages/stories/breadbutton/05.jpg
--- a/subpages/stories/breadbutton/06.jpg
+++ b/subpages/stories/breadbutton/06.jpg
--- a/subpages/stories/breadbutton/07.jpg
+++ b/subpages/stories/breadbutton/07.jpg
--- a/subpages/stories/breadbutton/08.jpg
+++ b/subpages/stories/breadbutton/08.jpg
--- a/subpages/stories/breadbutton/09.jpg
+++ b/subpages/stories/breadbutton/09.jpg
--- a/subpages/stories/broglelamp/01.jpg
+++ b/subpages/stories/broglelamp/01.jpg
--- a/subpages/stories/broglelamp/02.jpg
+++ b/subpages/stories/broglelamp/02.jpg
--- a/subpages/stories/broglelamp/03.jpg
+++ b/subpages/stories/broglelamp/03.jpg
--- a/subpages/stories/broglelamp/04.jpg
+++ b/subpages/stories/broglelamp/04.jpg
--- a/Show More
+++ b/Show More