first commit
commit
399eb3c9ae
@ -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
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 B |
@ -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>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
@ -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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
@ -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>
|
||||||
|
<a href="../../subpages/birdpen.html">a <img src="../../crop/bird.jpg"> and a <img src="../../crop/pen2.jpg"></a>
|
||||||
|
<a href="../../subpages/bookpen.html">a <img src="../../crop/book.jpg"> and a <img src="../../crop/pen3.jpg"></a>
|
||||||
|
<a href="../../subpages/breadbutton.html">a <img src="../../crop/bread.jpg"> and a <img src="../../crop/button.jpg"></a>
|
||||||
|
<a href="../../subpages/broglelamp.html">a <img src="../../crop/brogle.jpg"> and a <img src="../../crop/lamp.jpg"></a>
|
||||||
|
<a href="../../subpages/circlecat.html">a <img src="../../crop/circle.jpg"> and a <img src="../../crop/cat3.jpg"></a>
|
||||||
|
<a href="../../subpages/dogcat.html">a <img src="../../crop/dog.jpg"> and a <img src="../../crop/cat4.jpg"></a>
|
||||||
|
<a href="../../subpages/dogdogtv.html">a <img src="../../crop/dog2.jpg"> and a <img src="../../crop/dogtv.jpg"></a>
|
||||||
|
<a href="../../subpages/grannythief.html">a <img src="../../crop/granny.jpg"> and a <img src="../../crop/thief.jpg"></a>
|
||||||
|
<a href="../../subpages/penbowl.html">a <img src="../../crop/pen.jpg"> and a <img src="../../crop/bowl.jpg"></a>
|
||||||
|
<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>
|
||||||
@ -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>
|
||||||
|
<a class="yellow" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
<a class="orange" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
<a class="red" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
<a class="pink" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
<a class="green" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
<a class="blue" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
<a class="yellow" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
<a class="pink" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
<a class="orange" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
<a class="green" href="../../subpages/catlion.html">a <img src="../../crop/cat.jpg"> and a <img src="../../crop/lion.jpg"></a>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -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";
|
||||||
|
}
|
||||||
@ -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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</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)">❮</a>
|
||||||
|
<a class="next" onclick="plusSlides(1)">❯</a>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 328 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 407 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 357 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 392 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 371 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 426 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 350 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 438 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 421 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 441 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 340 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 355 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 421 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 495 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 890 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 521 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 538 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue