diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..87f2a69438f4ad8aa9d638c3d135a11895729195
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+**/.DS_Store
+
diff --git a/about.html b/about.html
new file mode 100644
index 0000000000000000000000000000000000000000..a2e187edeaab779070642739836f229f71ab521e
--- /dev/null
+++ b/about.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>About</b></h4>
+ <p>The 3D Data repository contains...</p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <p>Link to <a href="http://qim.dk/">QIM, the Center for quantification of Imaging Data from MAX IV</a>.
+ <p>Also link to <a href="https://imaging.dtu.dk/">3DIM, the 3D Imaging Center</a> at DTU.
+
+ <hr>
+ <h4><b>Use</b></h4>
+ <p>When you use the data from the 3D Data repository...</p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+
+ <hr>
+ <h4><b>People</b></h4>
+ <p>QIM 3D data repository is a joint effort. Most QIM people also contribute to repository, and a lot of our data comes from 3DIM. Here we list those directly involved in preparing the data and maintaining the page.</p>
+ <hr>
+ <div class="w3-row-padding">
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="about/portrait.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p><b>Vedrana</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="about/portrait.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p><b>Anders</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="about/portrait.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p><b>Rasmus</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="about/portrait.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p><b>Dirk</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="about/portrait.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p><b>Martin</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="about/portrait.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p><b>Carsten</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum.</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/about/portrait.png b/about/portrait.png
new file mode 100644
index 0000000000000000000000000000000000000000..b9652771580d8a648cab9ba1f86382564baf7648
Binary files /dev/null and b/about/portrait.png differ
diff --git a/common/logo_name.png b/common/logo_name.png
new file mode 100644
index 0000000000000000000000000000000000000000..32de755e824921463af7670cb0e7c7f4d4aa099a
Binary files /dev/null and b/common/logo_name.png differ
diff --git a/common/logo_square.png b/common/logo_square.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c109c1e1cbbf7b1442194651bf8afec96adbf23
Binary files /dev/null and b/common/logo_square.png differ
diff --git a/example1.html b/example1.html
new file mode 100644
index 0000000000000000000000000000000000000000..d1e0b9e011edea3200a950e88e0cf4d41566dafd
--- /dev/null
+++ b/example1.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="examples/placeholder_color.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder color</p>
+ </div>
+ </div>
+ <div class="w3-half w3-container w3-margin-bottom">
+ <img src="examples/placeholder_gray.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder gray</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <hr>
+
+ <h4>Versions</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Full</li>
+ <li class="w3-padding-16">16-bit tiff</li>
+ <li class="w3-padding-16">Dimensions: 2048x2048x2048</li>
+ <li class="w3-padding-16">File size: 4GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-orange w3-xlarge w3-padding-32">Cropped</li>
+ <li class="w3-padding-16">8-bit tiff</li>
+ <li class="w3-padding-16">800x800x800</li>
+ <li class="w3-padding-16">File size: 1GB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Cropped and resized</li>
+ <li class="w3-padding-16">8-bit tiff</li>
+ <li class="w3-padding-16">200x200x200</li>
+ <li class="w3-padding-16">File size: 200MB</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End of tables -->
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/example2.html b/example2.html
new file mode 100644
index 0000000000000000000000000000000000000000..b22ffc4aad38ab2a8676bff9c82cdbe03f878772
--- /dev/null
+++ b/example2.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="examples/placeholder_color.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder color</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="examples/placeholder_gray.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder gray</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="examples/placeholder_slice.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder slice</p>
+ </div>
+ </div>
+ <div class="w3-quarter w3-container w3-margin-bottom">
+ <img src="examples/placeholder_slice.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder slice</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>This is a data of something. Obtained somewhere. Using some settings. </p>
+ <hr>
+ <h4><b>Versions</b></h4>
+
+ <ul class="w3-ul w3-border">
+ <li><b>Full.</b> Just as we got it from the scanner.</li>
+ <li><b>Smaller.</b> Processing (from full): bit depth from 16 to 8-bit, cropping to keep only region of interest.</li>
+ <li><b>Tiny.</b> Smaller, but downscaled 4 times.</li>
+ </ul>
+
+ <p> </p>
+ <hr>
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/example3.html b/example3.html
new file mode 100644
index 0000000000000000000000000000000000000000..f588182380ebc9037f561702ad03f87f4b29eb8e
--- /dev/null
+++ b/example3.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="examples/placeholder_color.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder color</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="examples/placeholder_gray.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder gray</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="examples/placeholder_slice.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder slice</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="examples/placeholder_gray.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder gray</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="examples/placeholder_slice.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder slice</p>
+ </div>
+ </div>
+ <div class="w3-col m2 w3-container w3-margin-bottom">
+ <img src="examples/placeholder_gray.png" style="width:100%">
+ <div class="w3-container w3-white">
+ <p>Placeholder gray</p>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>Description</b></h4>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <hr>
+
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/examples/placeholder_color.png b/examples/placeholder_color.png
new file mode 100644
index 0000000000000000000000000000000000000000..960227b10a9c46e6c5a09964219d313eb5742049
Binary files /dev/null and b/examples/placeholder_color.png differ
diff --git a/examples/placeholder_gray.png b/examples/placeholder_gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd99a93f4d3554966f9ec8546d335df518cb7ab6
Binary files /dev/null and b/examples/placeholder_gray.png differ
diff --git a/examples/placeholder_slice.png b/examples/placeholder_slice.png
new file mode 100644
index 0000000000000000000000000000000000000000..83ed1b7a746edd7a691e0d09b3fb4c1c577be2a2
Binary files /dev/null and b/examples/placeholder_slice.png differ
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..4bdd51873f240c3b1b49bd4449c0fd570fd09baa
Binary files /dev/null and b/favicon.ico differ
diff --git a/footer.js b/footer.js
new file mode 100644
index 0000000000000000000000000000000000000000..0977b207a88562ba999c01fb4086951ad7e36e13
--- /dev/null
+++ b/footer.js
@@ -0,0 +1,35 @@
+document.write('\
+ <footer class="w3-container w3-padding-32 w3-dark-grey">\
+ <div class="w3-row-padding">\
+ \
+ <div class="w3-third">\
+ <h3>3D DATA REPOSITORY</h3>\
+ <p>QIM, October 2020.<br>\
+ Powered by <a href="https://www.w3schools.com/w3css/default.asp">w3.css</a>.</p>\
+ </div>\
+ \
+ <div class="w3-third">\
+ <h3>GET INVOLVED</h3>\
+ <p>Contribute with data, tool or result.\
+ Stay updated.<br>\
+ Send us a mail at <a href="mailto:info@qim.dk">info@qim.dk</a>.</p>\
+ </div>\
+ \
+ <div class="w3-third">\
+ <h3>LINKS</h3>\
+ <p>\
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
+ <a style="text-decoration: none;" href="http://qim.dk/sciencecases/" target="_blank">QIM science</a></span>\
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
+ <a style="text-decoration: none;" href="http://qim.dk/software-tools/" target="_blank">QIM tools</a></span>\
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
+ <a style="text-decoration: none;" href="https://imaging.dtu.dk/" target="_blank">3DIM@DTU</a></span>\
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
+ <a style="text-decoration: none;" href="https://www.maxiv.lu.se/" target="_blank">MAX IV</a>\
+ </span>\
+ </p>\
+ </div>\
+ \
+ </div>\
+ </footer>\
+');
diff --git a/header.js b/header.js
new file mode 100644
index 0000000000000000000000000000000000000000..1bdd2a3d30c3af7a52184b06fecfa2e5f94af5a1
--- /dev/null
+++ b/header.js
@@ -0,0 +1,9 @@
+document.write('\
+<header>\
+ <a href="http://qim.dk/"><img src="common/logo_square.png" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>\
+ <span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>\
+ <div class="w3-container w3-bottombar w3-padding-16">\
+ <h1><b>3D DATA REPOSITORY</b></h1>\
+ </div>\
+</header>\
+');
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..38437965c245f234dbcfbc5438a00b6c27b63c1c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- First Photo Grid-->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="example1.html">
+ <img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
+ </a>
+ <div class="w3-container w3-white">
+ <p><b>Example</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="example2.html">
+ <img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
+ </a>
+ <div class="w3-container w3-white">
+ <p><b>Example 2</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <a href="example3.html">
+ <img src="examples/placeholder_gray.png" style="width:100%" class="w3-hover-opacity">
+ </a>
+ <div class="w3-container w3-white">
+ <p><b>Example 3</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Second Photo Grid-->
+ <div class="w3-row-padding">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="examples/placeholder_gray.png" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="examples/placeholder_color.png" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/qim_repository_template.html b/qim_repository_template.html
new file mode 100644
index 0000000000000000000000000000000000000000..0a2425d11e23cef6317dda1d07af9c20ac8ceaae
--- /dev/null
+++ b/qim_repository_template.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<link rel="shortcut icon" href="favicon.ico">
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu and -->
+<!-- Overlay effect when opening sidebar on small screens -->
+<script src='sidebar.js'></script>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <script src='header.js'></script>
+
+ <!-- START OF INDIVIDUAL PAGE CONTENT -->
+
+ <!-- First Photo Grid-->
+ <div class="w3-row-padding">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container">
+ <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Second Photo Grid-->
+ <div class="w3-row-padding">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/p1.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/p2.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container">
+ <img src="https://www.w3schools.com/w3images/p3.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Pagination -->
+ <div class="w3-center w3-padding-32">
+ <div class="w3-bar">
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
+ <a href="#" class="w3-bar-item w3-black w3-button">1</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
+ </div>
+ </div>
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16">
+ <div class="w3-col m6">
+ <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Me" style="width:100%">
+ </div>
+ <div class="w3-col m6">
+ <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Me" style="width:100%">
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>About</b></h4>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <hr>
+
+ <h4>Applications</h4>
+ <!-- Progress bars / Skills -->
+ <p>Materials</p>
+ <div class="w3-grey">
+ <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:95%">95%</div>
+ </div>
+ <p>Energy</p>
+ <div class="w3-grey">
+ <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:85%">85%</div>
+ </div>
+ <p>Life</p>
+ <div class="w3-grey">
+ <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:80%">80%</div>
+ </div>
+ <p>
+ <button class="w3-button w3-dark-grey w3-padding-large w3-margin-top w3-margin-bottom">
+ <i class="fa fa-download w3-margin-right"></i>Download
+ </button>
+ </p>
+ <hr>
+
+ <h4>Some details</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Full</li>
+ <li class="w3-padding-16">Type</li>
+ <li class="w3-padding-16">Size</li>
+ <li class="w3-padding-16">1GB Storage</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-orange w3-xlarge w3-padding-32">Medium</li>
+ <li class="w3-padding-16">Type</li>
+ <li class="w3-padding-16">Size</li>
+ <li class="w3-padding-16">50GB Storage</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Segmentation</li>
+ <li class="w3-padding-16">Type</li>
+ <li class="w3-padding-16">Size</li>
+ <li class="w3-padding-16">Unlimited Storage</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End of tables -->
+ </div>
+
+ <!-- Contact Section -->
+ <div class="w3-container w3-padding-large w3-grey">
+ <h4><b>Contact us</b></h4>
+ <div class="w3-row-padding w3-center w3-padding-24" style="margin:0 -16px">
+ <div class="w3-third w3-dark-grey">
+ <p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>
+ <p>info@qim.dk</p>
+ </div>
+ <div class="w3-third w3-orange">
+ <p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>
+ <p>Lyngby, DK</p>
+ </div>
+ <div class="w3-third w3-dark-grey">
+ <p><i class="fa fa-phone w3-xxlarge w3-text-light-grey"></i></p>
+ <p>4545252525</p>
+ </div>
+ </div>
+ <hr class="w3-opacity">
+ <form action="/action_page.php" target="_blank">
+ <div class="w3-section">
+ <label>Name</label>
+ <input class="w3-input w3-border" type="text" name="Name" required>
+ </div>
+ <div class="w3-section">
+ <label>Email</label>
+ <input class="w3-input w3-border" type="text" name="Email" required>
+ </div>
+ <div class="w3-section">
+ <label>Message</label>
+ <input class="w3-input w3-border" type="text" name="Message" required>
+ </div>
+ <button type="submit" class="w3-button w3-black w3-margin-bottom"><i class="fa fa-paper-plane w3-margin-right"></i>Send Message</button>
+ </form>
+ </div>
+
+ <!-- Footer -->
+ <script src='footer.js'></script>
+
+
+<!-- End page content -->
+</div>
+
+</body>
+</html>
diff --git a/qim_repository_template_all.html b/qim_repository_template_all.html
new file mode 100644
index 0000000000000000000000000000000000000000..6c897e1b9c6305b0b61eb861d709a865651a9aee
--- /dev/null
+++ b/qim_repository_template_all.html
@@ -0,0 +1,281 @@
+<!DOCTYPE html>
+<html>
+<title>QIM Data Repository</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+footer a {
+ text-decoration: none;
+}
+</style>
+
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu -->
+<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
+ <div class="w3-container">
+ <a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">
+ <i class="fa fa-remove"></i>
+ </a>
+ <a href="http://qim.dk/">
+ <img src="common/logo_name.png" style="width:90%;" class="w3-round"></a>
+ <br><br>
+ </div>
+
+ <div class="w3-bar-block w3-text-grey">
+ <a href="about" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-bullseye fa-fw w3-margin-right"></i>ABOUT</a>
+ </div>
+</nav>
+
+<!-- Overlay effect when opening sidebar on small screens -->
+<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <header id="myRepository">
+ <a href="http://qim.dk/"><img src="common/logo_square.png" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
+ <span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>
+ <div class="w3-container w3-bottombar w3-padding-16">
+ <h1><b>DATA REPOSITORY</b></h1>
+ </div>
+ </header>
+
+ <!-- END OF COMMON -->
+
+
+
+ <!-- First Photo Grid-->
+ <div class="w3-row-padding">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container">
+ <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Second Photo Grid-->
+ <div class="w3-row-padding">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/p1.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/p2.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container">
+ <img src="https://www.w3schools.com/w3images/p3.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Pagination -->
+ <div class="w3-center w3-padding-32">
+ <div class="w3-bar">
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
+ <a href="#" class="w3-bar-item w3-black w3-button">1</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
+ </div>
+ </div>
+
+ <!-- Images -->
+ <div class="w3-row-padding w3-padding-16" id="about">
+ <div class="w3-col m6">
+ <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Me" style="width:100%">
+ </div>
+ <div class="w3-col m6">
+ <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Me" style="width:100%">
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>About</b></h4>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <hr>
+
+ <h4>Applications</h4>
+ <!-- Progress bars / Skills -->
+ <p>Materials</p>
+ <div class="w3-grey">
+ <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:95%">95%</div>
+ </div>
+ <p>Energy</p>
+ <div class="w3-grey">
+ <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:85%">85%</div>
+ </div>
+ <p>Life</p>
+ <div class="w3-grey">
+ <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:80%">80%</div>
+ </div>
+ <p>
+ <button class="w3-button w3-dark-grey w3-padding-large w3-margin-top w3-margin-bottom">
+ <i class="fa fa-download w3-margin-right"></i>Download
+ </button>
+ </p>
+ <hr>
+
+ <h4>Some details</h4>
+ <!-- Details Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Full</li>
+ <li class="w3-padding-16">Type</li>
+ <li class="w3-padding-16">Size</li>
+ <li class="w3-padding-16">1GB Storage</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-teal w3-xlarge w3-padding-32">Medium</li>
+ <li class="w3-padding-16">Type</li>
+ <li class="w3-padding-16">Size</li>
+ <li class="w3-padding-16">50GB Storage</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Segmentation</li>
+ <li class="w3-padding-16">Type</li>
+ <li class="w3-padding-16">Size</li>
+ <li class="w3-padding-16">Unlimited Storage</li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
+ </li>
+ </ul>
+ </div>
+ </div>
+ <!-- End of tables -->
+ </div>
+
+ <!-- Contact Section -->
+ <div class="w3-container w3-padding-large w3-grey">
+ <h4 id="contact"><b>Contact us</b></h4>
+ <div class="w3-row-padding w3-center w3-padding-24" style="margin:0 -16px">
+ <div class="w3-third w3-dark-grey">
+ <p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>
+ <p>qim_center@dtu.dk</p>
+ </div>
+ <div class="w3-third w3-teal">
+ <p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>
+ <p>Lyngby, DK</p>
+ </div>
+ <div class="w3-third w3-dark-grey">
+ <p><i class="fa fa-phone w3-xxlarge w3-text-light-grey"></i></p>
+ <p>4545252525</p>
+ </div>
+ </div>
+ <hr class="w3-opacity">
+ <form action="/action_page.php" target="_blank">
+ <div class="w3-section">
+ <label>Name</label>
+ <input class="w3-input w3-border" type="text" name="Name" required>
+ </div>
+ <div class="w3-section">
+ <label>Email</label>
+ <input class="w3-input w3-border" type="text" name="Email" required>
+ </div>
+ <div class="w3-section">
+ <label>Message</label>
+ <input class="w3-input w3-border" type="text" name="Message" required>
+ </div>
+ <button type="submit" class="w3-button w3-black w3-margin-bottom"><i class="fa fa-paper-plane w3-margin-right"></i>Send Message</button>
+ </form>
+ </div>
+
+
+ <!-- START OF COMMON -->
+
+ <!-- Footer -->
+ <footer class="w3-container w3-padding-32 w3-dark-grey">
+ <div class="w3-row-padding">
+ <div class="w3-third">
+ <h3>3D DATA REPOSITORY</h3>
+ <p>QIM, October 2020.<br>
+ Powered by <a href="https://www.w3schools.com/w3css/default.asp">w3.css</a>.</p>
+ </div>
+
+ <div class="w3-third">
+ <h3>GET INVOLVED</h3>
+ <p>Contribute with data, tool or result.
+ Stay updated.<br>
+ Send us a mail at <a href="mailto:info@qim.dk">info@qim.dk</a>.</p>
+ </div>
+
+ <div class="w3-third">
+ <h3>LINKS</h3>
+ <p>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom"><a href="http://qim.dk/sciencecases/" target="_blank">QIM science</a></span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">
+ <a href="http://qim.dk/software-tools/" target="_blank">QIM tools</a></span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">
+ <a href="https://imaging.dtu.dk/" target="_blank">3DIM@DTU</a></span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">
+ <a href="https://www.maxiv.lu.se/" target="_blank">MAX IV</a>
+ </span>
+ </p>
+ </div>
+
+ </div>
+ </footer>
+
+<!-- End page content -->
+</div>
+
+<script>
+// Script to open and close sidebar
+function w3_open() {
+ document.getElementById("mySidebar").style.display = "block";
+ document.getElementById("myOverlay").style.display = "block";
+}
+
+function w3_close() {
+ document.getElementById("mySidebar").style.display = "none";
+ document.getElementById("myOverlay").style.display = "none";
+}
+</script>
+
+</body>
+</html>
diff --git a/sidebar.js b/sidebar.js
new file mode 100644
index 0000000000000000000000000000000000000000..5c7a047f075957456f13edb338920c54268b594a
--- /dev/null
+++ b/sidebar.js
@@ -0,0 +1,34 @@
+document.write('\
+<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>\
+ <div class="w3-container">\
+ <a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">\
+ <i class="fa fa-remove"></i>\
+ </a>\
+ <a href="http://qim.dk/">\
+ <img src="common/logo_name.png" style="width:90%;" class="w3-round"></a>\
+ <br><br>\
+ </div>\
+ \
+ <div class="w3-bar-block w3-text-grey">\
+ <a href="index.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-home fa-fw w3-margin-right"></i>HOME</a>\
+ </div>\
+ <div class="w3-bar-block w3-text-grey">\
+ <a href="about.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-info fa-fw w3-margin-right"></i>ABOUT</a>\
+ </div>\
+ <!--div class="w3-bar-block w3-text-grey">\
+ <a href="about.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-exclamation fa-fw w3-margin-right"></i>USE</a>\
+ </div-->\
+</nav>\
+<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>\
+');
+
+// Script to open and close sidebar
+function w3_open() {
+ document.getElementById("mySidebar").style.display = "block";
+ document.getElementById("myOverlay").style.display = "block";
+}
+
+function w3_close() {
+ document.getElementById("mySidebar").style.display = "none";
+ document.getElementById("myOverlay").style.display = "none";
+}
diff --git a/w3_nature_portfolio_template.html b/w3_nature_portfolio_template.html
new file mode 100644
index 0000000000000000000000000000000000000000..c9639328a0807cf44ea7c6f855f6177b0524119d
--- /dev/null
+++ b/w3_nature_portfolio_template.html
@@ -0,0 +1,308 @@
+<!DOCTYPE html>
+<html>
+<title>W3.CSS Template</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<style>
+body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+</style>
+<body class="w3-light-grey w3-content" style="max-width:1600px">
+
+<!-- Sidebar/menu -->
+<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
+ <div class="w3-container">
+ <a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">
+ <i class="fa fa-remove"></i>
+ </a>
+ <img src="https://www.w3schools.com/w3images/avatar_g2.jpg" style="width:45%;" class="w3-round"><br><br>
+ <h4><b>PORTFOLIO</b></h4>
+ <p class="w3-text-grey">Template by W3.CSS</p>
+ </div>
+ <div class="w3-bar-block">
+ <a href="#portfolio" onclick="w3_close()" class="w3-bar-item w3-button w3-padding w3-text-teal"><i class="fa fa-th-large fa-fw w3-margin-right"></i>PORTFOLIO</a>
+ <a href="#about" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw w3-margin-right"></i>ABOUT</a>
+ <a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-padding"><i class="fa fa-envelope fa-fw w3-margin-right"></i>CONTACT</a>
+ </div>
+ <div class="w3-panel w3-large">
+ <i class="fa fa-facebook-official w3-hover-opacity"></i>
+ <i class="fa fa-instagram w3-hover-opacity"></i>
+ <i class="fa fa-snapchat w3-hover-opacity"></i>
+ <i class="fa fa-pinterest-p w3-hover-opacity"></i>
+ <i class="fa fa-twitter w3-hover-opacity"></i>
+ <i class="fa fa-linkedin w3-hover-opacity"></i>
+ </div>
+</nav>
+
+<!-- Overlay effect when opening sidebar on small screens -->
+<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
+
+<!-- !PAGE CONTENT! -->
+<div class="w3-main" style="margin-left:300px">
+
+ <!-- Header -->
+ <header id="portfolio">
+ <a href="#"><img src="https://www.w3schools.com/w3images/avatar_g2.jpg" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
+ <span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>
+ <div class="w3-container">
+ <h1><b>My Portfolio</b></h1>
+ <div class="w3-section w3-bottombar w3-padding-16">
+ <span class="w3-margin-right">Filter:</span>
+ <button class="w3-button w3-black">ALL</button>
+ <button class="w3-button w3-white"><i class="fa fa-diamond w3-margin-right"></i>Design</button>
+ <button class="w3-button w3-white w3-hide-small"><i class="fa fa-photo w3-margin-right"></i>Photos</button>
+ <button class="w3-button w3-white w3-hide-small"><i class="fa fa-map-pin w3-margin-right"></i>Art</button>
+ </div>
+ </div>
+ </header>
+
+ <!-- First Photo Grid-->
+ <div class="w3-row-padding">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/mountains.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container">
+ <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Second Photo Grid-->
+ <div class="w3-row-padding">
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/p1.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container w3-margin-bottom">
+ <img src="https://www.w3schools.com/w3images/p2.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ <div class="w3-third w3-container">
+ <img src="https://www.w3schools.com/w3images/p3.jpg" alt="Norway" style="width:100%" class="w3-hover-opacity">
+ <div class="w3-container w3-white">
+ <p><b>Lorem Ipsum</b></p>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Pagination -->
+ <div class="w3-center w3-padding-32">
+ <div class="w3-bar">
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
+ <a href="#" class="w3-bar-item w3-black w3-button">1</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
+ <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
+ </div>
+ </div>
+
+ <!-- Images of Me -->
+ <div class="w3-row-padding w3-padding-16" id="about">
+ <div class="w3-col m6">
+ <img src="https://www.w3schools.com/w3images/avatar_g.jpg" alt="Me" style="width:100%">
+ </div>
+ <div class="w3-col m6">
+ <img src="https://www.w3schools.com/w3images/me2.jpg" alt="Me" style="width:100%">
+ </div>
+ </div>
+
+ <div class="w3-container w3-padding-large" style="margin-bottom:32px">
+ <h4><b>About Me</b></h4>
+ <p>Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <hr>
+
+ <h4>Technical Skills</h4>
+ <!-- Progress bars / Skills -->
+ <p>Photography</p>
+ <div class="w3-grey">
+ <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:95%">95%</div>
+ </div>
+ <p>Web Design</p>
+ <div class="w3-grey">
+ <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:85%">85%</div>
+ </div>
+ <p>Photoshop</p>
+ <div class="w3-grey">
+ <div class="w3-container w3-dark-grey w3-padding w3-center" style="width:80%">80%</div>
+ </div>
+ <p>
+ <button class="w3-button w3-dark-grey w3-padding-large w3-margin-top w3-margin-bottom">
+ <i class="fa fa-download w3-margin-right"></i>Download Resume
+ </button>
+ </p>
+ <hr>
+
+ <h4>How much I charge</h4>
+ <!-- Pricing Tables -->
+ <div class="w3-row-padding" style="margin:0 -16px">
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Basic</li>
+ <li class="w3-padding-16">Web Design</li>
+ <li class="w3-padding-16">Photography</li>
+ <li class="w3-padding-16">1GB Storage</li>
+ <li class="w3-padding-16">Mail Support</li>
+ <li class="w3-padding-16">
+ <h2>$ 10</h2>
+ <span class="w3-opacity">per month</span>
+ </li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-teal w3-padding-large w3-hover-black">Sign Up</button>
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third w3-margin-bottom">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-teal w3-xlarge w3-padding-32">Pro</li>
+ <li class="w3-padding-16">Web Design</li>
+ <li class="w3-padding-16">Photography</li>
+ <li class="w3-padding-16">50GB Storage</li>
+ <li class="w3-padding-16">Endless Support</li>
+ <li class="w3-padding-16">
+ <h2>$ 25</h2>
+ <span class="w3-opacity">per month</span>
+ </li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-teal w3-padding-large w3-hover-black">Sign Up</button>
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third">
+ <ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
+ <li class="w3-black w3-xlarge w3-padding-32">Premium</li>
+ <li class="w3-padding-16">Web Design</li>
+ <li class="w3-padding-16">Photography</li>
+ <li class="w3-padding-16">Unlimited Storage</li>
+ <li class="w3-padding-16">Endless Support</li>
+ <li class="w3-padding-16">
+ <h2>$ 25</h2>
+ <span class="w3-opacity">per month</span>
+ </li>
+ <li class="w3-light-grey w3-padding-24">
+ <button class="w3-button w3-teal w3-padding-large w3-hover-black">Sign Up</button>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <!-- Contact Section -->
+ <div class="w3-container w3-padding-large w3-grey">
+ <h4 id="contact"><b>Contact Me</b></h4>
+ <div class="w3-row-padding w3-center w3-padding-24" style="margin:0 -16px">
+ <div class="w3-third w3-dark-grey">
+ <p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>
+ <p>email@email.com</p>
+ </div>
+ <div class="w3-third w3-teal">
+ <p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>
+ <p>Chicago, US</p>
+ </div>
+ <div class="w3-third w3-dark-grey">
+ <p><i class="fa fa-phone w3-xxlarge w3-text-light-grey"></i></p>
+ <p>512312311</p>
+ </div>
+ </div>
+ <hr class="w3-opacity">
+ <form action="/action_page.php" target="_blank">
+ <div class="w3-section">
+ <label>Name</label>
+ <input class="w3-input w3-border" type="text" name="Name" required>
+ </div>
+ <div class="w3-section">
+ <label>Email</label>
+ <input class="w3-input w3-border" type="text" name="Email" required>
+ </div>
+ <div class="w3-section">
+ <label>Message</label>
+ <input class="w3-input w3-border" type="text" name="Message" required>
+ </div>
+ <button type="submit" class="w3-button w3-black w3-margin-bottom"><i class="fa fa-paper-plane w3-margin-right"></i>Send Message</button>
+ </form>
+ </div>
+
+ <!-- Footer -->
+ <footer class="w3-container w3-padding-32 w3-dark-grey">
+ <div class="w3-row-padding">
+ <div class="w3-third">
+ <h3>FOOTER</h3>
+ <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
+ <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
+ </div>
+
+ <div class="w3-third">
+ <h3>BLOG POSTS</h3>
+ <ul class="w3-ul w3-hoverable">
+ <li class="w3-padding-16">
+ <img src="https://www.w3schools.com/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">
+ <span class="w3-large">Lorem</span><br>
+ <span>Sed mattis nunc</span>
+ </li>
+ <li class="w3-padding-16">
+ <img src="https://www.w3schools.com/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">
+ <span class="w3-large">Ipsum</span><br>
+ <span>Praes tinci sed</span>
+ </li>
+ </ul>
+ </div>
+
+ <div class="w3-third">
+ <h3>POPULAR TAGS</h3>
+ <p>
+ <span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">London</span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">IKEA</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">NORWAY</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">DIY</span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">Ideas</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Baby</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Family</span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">News</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Clothing</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Shopping</span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">Sports</span> <span class="w3-tag w3-grey w3-small w3-margin-bottom">Games</span>
+ </p>
+ </div>
+
+ </div>
+ </footer>
+
+ <div class="w3-black w3-center w3-padding-24">Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-opacity">w3.css</a></div>
+
+<!-- End page content -->
+</div>
+
+<script>
+// Script to open and close sidebar
+function w3_open() {
+ document.getElementById("mySidebar").style.display = "block";
+ document.getElementById("myOverlay").style.display = "block";
+}
+
+function w3_close() {
+ document.getElementById("mySidebar").style.display = "none";
+ document.getElementById("myOverlay").style.display = "none";
+}
+</script>
+
+</body>
+</html>