Migreate to use cdn.enpaul.net CDN URL

Update copyright
Remove twitter integration
Remove twitter social link

content/css/style.css

@@ -0,0 +1,314 @@
+html {
+  height: 100%;
+  background-color: black;
+  color: white;
+  font-family: Verdana, Helvetica, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: all 0.1s ease-in-out;
+}
+
+a:hover {
+  text-decoration: none;
+  text-shadow: 5px 5px 10px #fff, -5px -5px 10px #fff;
+}
+
+#background-image {
+  background-image: url("https://cdn.enpaul.net/img/backgrounds/cl-photo-allis.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+
+  filter: blur(6px);
+  -webkit-filter: blur(6px);
+
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+#content {
+  text-align: center;
+  text-shadow: 3px 3px 5px #000, -3px -3px 5px #000;
+  font-weight: bold;
+  color: white;
+
+  padding: 1em;
+
+  width: 40em;
+  max-width: 90%;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-style: solid;
+  border-width: 2px;
+  border-color: rgba(0, 0, 0, 0);
+  border-radius: 128px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
+
+  position: absolute;
+  top: 15%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 10;
+}
+
+#logo {
+  margin: auto;
+  margin-top: -5em;
+  max-width: 60%;
+  width: 50%;
+  display: block;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.2);
+  border-radius: 50%;
+  border-width: 5px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
+}
+
+h1 {
+  font-variant: small-caps;
+  font-size: 2.5em;
+}
+
+#content p {
+  margin: 2em;
+  line-height: 1.5;
+}
+
+ul.buttons {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  font-size: 1.75em;
+}
+
+ul.buttons li {
+  line-height: 1;
+  padding: 0.5em;
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+
+  text-transform: uppercase;
+}
+
+.button.nav {
+  padding-top: 0.75em;
+  padding-bottom: 0.55em;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+
+  border-radius: 30px;
+
+  transition: all 0.25s ease-in-out;
+}
+
+.button:hover {
+  text-shadow:
+    -3px -3px 5px #fff,
+    -3px 3px 5px #fff,
+    3px -3px 5px #fff,
+    3px 3px 5px #fff,
+    0px 0px 7px #ff0000;
+}
+
+.button.nav:hover {
+  text-shadow:
+    0px 0px 7px #000,
+    -5px -5px 10px #fff,
+    -5px 5px 10px #fff,
+    5px -5px 10px #fff,
+    5px 5px 10px #fff;
+
+  -webkit-animation-name: pulse;
+  -webkit-animation-duration: 6s;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-fill-mode: none;
+  animation-name: pulse;
+  animation-duration: 6s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: none;
+}
+
+.explore:hover { color: #5588e0; }
+
+.youtube:hover { color: #ff0000; }
+
+.instagram:hover { color: #c13584; }
+
+.twitter:hover { color: #1da1f2; }
+
+#background-info {
+  text-align: right;
+  font-size: 0.85em;
+
+  padding: 0.75em;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 5;
+}
+
+footer { font-size: 0.9em; }
+
+footer div { margin-bottom: 0.5em; }
+
+footer a.button i {
+  padding: 0.5em;
+  font-size: 1.25em;
+}
+
+.fadeout {
+  -webkit-animation: fadeout 0.25s linear 1;
+  -webkit-animation-fill-mode: forwards;
+  animation: fadeout 0.25s linear 1;
+  animation-fill-mode: forwards;
+}
+
+#preloader {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  overflow: hidden;
+  background-color: black;
+  z-index: 100;
+  margin: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.spinner {
+  width: 140px;
+  height: 140px;
+  position: relative;
+  backface-visibility: hidden;
+  transform-origin: 0 0;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+
+  background-size: contain;
+  border-radius: 50%;
+}
+
+.spinner div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: 20px solid rgba(213, 213, 213, 1);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spinner 1.5s linear infinite;
+  top: 50%;
+  left: 50%;
+  box-sizing: content-box;
+}
+
+@-webkit-keyframes fadeout {
+  0% {opacity: 1;}
+  100% {opacity: 0;}
+}
+
+@keyframes fadeout {
+  0% {opacity: 1;}
+  100% {opacity: 0;}
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow:
+      0px 0px 15px 3px rgba(0,0,0,0),
+      0px 0px 15px 3px rgba(0,0,0,0);
+  }
+  3% {
+    box-shadow:
+      0px 0px 15px 3px #fff,
+      0px 0px 15px 3px #88a9fc;
+  }
+  10% {
+    box-shadow:
+      -10px -10px 15px 3px #fff,
+      10px 10px 15px 3px #88a9fc;
+  }
+  30% {
+    box-shadow:
+      -10px 10px 15px 3px #b5f7fc,
+      10px -10px 15px 3px #fcaa99;
+  }
+  45% {
+    box-shadow:
+      10px 10px 15px 3px #ecf9a7,
+      -10px -10px 15px 3px #fcaa99;
+  }
+  60% {
+    box-shadow:
+      10px -10px 15px 3px #ecf9a7,
+      -10px 10px 15px 3px #abfcad;
+  }
+  75% {
+    box-shadow:
+      -10px -10px 15px 3px #b5f7fc,
+      10px 10px 15px 3px #abfcad;
+  }
+  90% {
+    box-shadow:
+      -10px 10px 15px 3px #fff,
+      10px -10px 15px 3px #88a9fc;
+  }
+  97% {
+    box-shadow:
+      0px 0px 15px 3px #b5f7fc,
+      0px 0px 15px 3px #88a9fc;
+  }
+  100% {
+    box-shadow:
+      0px 0px 15px 3px rgba(0,0,0,0),
+      0px 0px 15px 3px rgba(0,0,0,0);
+  }
+}
+
+@-webkit-keyframes spinner {
+  0% { transform: translate(-50%,-50%) rotate(0deg); }
+  100% { transform: translate(-50%,-50%) rotate(360deg); }
+}
+
+@keyframes spinner {
+  0% { transform: translate(-50%,-50%) rotate(0deg); }
+  100% { transform: translate(-50%,-50%) rotate(360deg); }
+}
+
+@media only screen and (max-width: 600px) {
+  #content {
+    padding: 0;
+    padding-bottom: 1em;
+    border-radius: 32px;
+    top: 6em;
+  }
+
+  #content p {
+    margin: 1em;
+  }
+
+  ul.buttons {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+  }
+
+  ul.buttons li {
+    display: block;
+    margin-top: 1em;
+  }
+}

content/index.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+
+    <!-- Web crawler and search indexing meta -->
+    <meta charset="utf-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <meta name="author" content="admin@allaroundhere.org"/>
+    <meta name="description" content="Some of the best places are all around here"/>
+    <meta name="robots" content="index follow"/>
+    <meta
+      name="keywords"
+      content="travel photography explore exploration urbex urban nature all around here local museum history historical society"
+    />
+
+    <!-- Opengraph integration meta -->
+    <meta property="og:title" content="All Around Here"/>
+    <meta property="og:url" content="https://allaroundhere.org/explore/"/>
+    <meta property='og:site_name' content="All Around Here"/>
+    <meta property="og:type" content="website"/>
+    <meta property='og:locale' content="en_US"/>
+    <meta property="og:image" content="https://cdn.enpaul.net/img/backgrounds/cl-photo-boston.jpg"/>
+    <meta property='og:description' content="Some of the best places are all around here"/>
+
+    <title>All Around Here</title>
+    <link rel="shortcut icon" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png" >
+    <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.enpaul.net/img/logos/aah-b-sm.png">
+
+    <link rel="stylesheet" href="css/style.css"/>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
+      integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
+      crossorigin="anonymous"
+    />
+
+    <script type="text/javascript" src="js/custom.js"></script>
+
+    <noscript><style>.nojs { display: none; }</style></noscript>
+  </head>
+
+  <body>
+    <div id="background-image"></div>
+
+    <div id="preloader" class="nojs"><div class="spinner"><div></div></div></div>
+
+    <div id="content">
+      <img
+        id="logo"
+        alt="Road to the great wide nowhere"
+        src="https://cdn.enpaul.net/img/logos/aah-md.jpg"
+      />
+
+      <h1>All Around Here</h1>
+
+      <p>
+        This is a project of mine where I turn my random travels, undirected wanderings, and
+        unexpected discoveries into something other people can enjoy along with me. There are a
+        lot of cool things in the world and I like to find them, wherever I happen to be. If you're
+        interested in seeing some of these arbitrary oddities then check out the links below.
+      </p>
+
+      <ul class="buttons">
+        <li>
+          <a class="button nav" title="Explore All Around Here" href="explore/">
+            <i class="fas fa-binoculars"></i>&nbsp;Explore
+          </a>
+        </li>
+      </ul>
+
+      <footer>
+        <div>
+          <!-- <a
+            class="button youtube"
+            title="Subscribe to All Around Here on YouTube"
+            href="https://www.instagram.com/allaroundhere/"
+          >
+            <i class="fab fa-youtube"></i>
+          </a> -->
+          <a
+            class="button instagram"
+            title="Follow All Around Here on instagram @allaroundhere"
+            href="https://www.instagram.com/allaroundhere/"
+          >
+            <i class="fab fa-instagram"></i>
+          </a>
+        </div>
+        <div>
+          <a title="Personal website" href="https://enpaul.net/">&copy;2024 enpaul</a>
+        </div>
+      </footer>
+    </div>
+  </body>
+
+</html>

content/js/custom.js

@@ -2,67 +2,67 @@
 
 const BACKGROUND_IMAGES = [
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-allis.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-allis.jpg",
     description: "Allis Engine #4, Metropolitan Waterworks Museum",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-boston.jpg",
     description: "Charles River Basin and Skyline",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-denver.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-denver.jpg",
     description: "Mile-High City Skyline",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-geese.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-geese.jpg",
     description: "Geese and Goslings on the banks of the Charles River",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-hotel.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-hotel.jpg",
     description: "Bay Point Hotel, Lake Winnipesaukee",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-lawrencedam.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-lawrencedam.jpg",
     description: "Hydroelectric Dam on the St. Lawrence River",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-letchworth.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-letchworth.jpg",
     description: "The Middle Falls in Letchworth State Park",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-library.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-library.jpg",
     description: "Robert W. Woodruff Library at Emory University",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-lighthouse.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-lighthouse.jpg",
     description: "Nubble Lighthouse",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-mbta.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-mbta.jpg",
     description: "Old vs New MBTA Green Line",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-rockyshore.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-rockyshore.jpg",
     description: "Icy Stormy Shoreline at Brenton Point",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-rt112.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-rt112.jpg",
     description: "Northern end of the Route 112 Scenic Byway",
     source: ""
   },
   {
-    url: "https://cdn.enp.one/img/backgrounds/cl-photo-startrek.jpg",
+    url: "https://cdn.enpaul.net/img/backgrounds/cl-photo-startrek.jpg",
     description: "Enterprise Engineering Systems at the Star Trek Set Museum",
     source: ""
   }
@@ -78,18 +78,20 @@ function selectBackground() {
 }
 
 
-function setBackground() {
+window.addEventListener("DOMContentLoaded", function () {
   let selected = selectBackground()
 
   document.getElementById(
     "background-image"
   ).style.backgroundImage = "url(" + selected.url + ")";
+});
 
-  document.getElementById(
-    "background-info-link"
-  ).innerHTML = selected.description;
 
-  document.getElementById(
-    "background-info-link"
-  ).href = selected.source;
-}
+window.addEventListener("load", async function () {
+  document.getElementById("preloader").classList.add("fadeout");
+  //  I don't actually know how promises or async works
+  //  ¯\_(ツ)_/¯
+  // https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
+  await new Promise(r => setTimeout(r, 250))
+  document.getElementById("preloader").style.display = "none";
+});

content/robots.txt

@@ -2,7 +2,6 @@
 User-agent: *
 
 # Disallow access to non-content directories
-Disallow: /_error
 Disallow: /css
 Disallow: /js
 

content/sitemap.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://allaroundhere.org/</loc>
+  <lastmod>2021-02-01T00:30:55+00:00</lastmod>
+  <priority>1.00</priority>
+</url>
+
+</urlset>

css/style.css

@@ -1,144 +0,0 @@
-html {
-  height: 100%;
-  background-color: black;
-  color: white;
-  font-family: Verdana, Helvetica, serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-  transition: all 0.1s ease-in-out;
-}
-
-a:hover {
-  text-decoration: none;
-  text-shadow: 3px 3px 10px #fff, -3px -3px 10px #fff;
-}
-
-#background-image {
-  background-image: url("https://cdn.enp.one/img/backgrounds/cl-photo-boston.jpg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-
-  filter: blur(6px);
-  -webkit-filter: blur(6px);
-
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 0;
-}
-
-#content {
-  text-align: center;
-  text-shadow: 3px 3px 5px #000, -3px -3px 5px #000;
-  font-weight: bold;
-  color: white;
-
-  padding: 1em;
-
-  /* width: 40em; */
-  max-width: 90%;
-  background-color: rgba(255, 255, 255, 0.2);
-  border-style: solid;
-  border-width: 2px;
-  border-color: rgba(255, 255, 255, 0);
-  border-radius: 128px;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-
-  position: absolute;
-  top: 20%;
-  left: 50%;
-  transform: translate(-50%, 0);
-  z-index: 10;
-}
-
-#logo {
-  margin: auto;
-  margin-top: -5em;
-  max-width: 60%;
-  width: 50%;
-  display: block;
-  border-style: solid;
-  border-color: rgba(255, 255, 255, 0);
-  border-radius: 50%;
-  border-width: 5px;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-
-#content p {
-  margin: 2em;
-  line-height: 1.5;
-}
-
-ul.buttons {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 3em;
-  margin-bottom: 4em;
-  font-size: 1.1em;
-}
-
-ul.buttons li {
-  display: inline;
-  line-height: 1;
-  padding: 0.5em;
-  margin-left: 0.5em;
-  margin-right: 0.5em;
-
-  text-transform: uppercase;
-}
-
-.button-youtube:hover {
-  color: #ff0000;
-  text-shadow:
-    -3px -3px 5px #fff,
-    -3px 3px 5px #fff,
-    3px -3px 5px #fff,
-    3px 3px 5px #fff,
-    0px 0px 7px #ff0000;
-}
-
-.button-instagram:hover {
-  color: #c13584;
-  text-shadow:
-    -3px -3px 5px #fff,
-    -3px 3px 5px #fff,
-    3px -3px 5px #fff,
-    3px 3px 5px #fff,
-    0px 0px 7px #5851db;
-}
-
-.button-twitter:hover {
-  color: #1da1f2;
-  text-shadow:
-    -3px -3px 5px #fff,
-    -3px 3px 5px #fff,
-    3px -3px 5px #fff,
-    3px 3px 5px #fff,
-    0px 0px 7px #f77737;
-}
-
-#background-info {
-  text-align: right;
-  font-size: 0.85em;
-
-  padding: 0.75em;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  z-index: 5;
-}
-
-.footer {
-  font-size: 0.9em;
-}

index.html

@@ -1,65 +0,0 @@
-<html>
-  <head>
-    <!-- Web crawler and search indexing meta -->
-    <meta charset="utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <meta name="author" content="admin@allaroundhere.org"/>
-    <meta name="description" content=""/>
-    <meta name="keywords" content=""/>
-
-    <title>AllAroundHere</title>
-    <link rel="shortcut icon" href="https://cdn.enp.one/img/logos/e-b-sm.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.enp.one/img/logos/e-b-sm.png">
-    <link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/e-b-sm.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="https://cdn.enp.one/img/logos/e-b-sm.png" sizes="16x16">
-
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
-
-    <script type="text/javascript" src="js/custom.js"></script>
-  </head>
-
-  <body onload="setBackground()">
-    <div id="background-image"></div>
-
-    <div id="content">
-      <img id="logo" src="https://cdn.enp.one/img/logos/aah-md.jpg"/>
-
-      <h1>AllAroundHere</h1>
-
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
-      </p>
-
-      <ul class="buttons">
-        <li><a class="button-youtube" href="https://www.youtube.com/channel/UCnJum8qCKlz36SzSsSeZy1w">
-          <i class="fab fa-youtube"></i>&nbsp;Youtube
-        </li></a>
-        <li><a class="button-instagram" href="https://www.instagram.com/allaroundhere/">
-          <i class="fab fa-instagram"></i>&nbsp;Instagram
-        </li></a>
-        <li><a class="button-twitter" href="https://twitter.com/enpaul_">
-          <i class="fab fa-twitter"></i>&nbsp;Twitter
-        </li></a>
-      </ul>
-
-      <div class="footer">
-        &copy;2021
-        <a href="https://enpaul.net/" target="_blank">E.N.Paul</a>
-      </div>
-    </div>
-
-    <div id="background-info">
-      <a href="" target="_blank" id="background-info-link">
-        Allis Engine #4, Metropolitan Waterworks Museum
-      </a>
-    </div>
-  </body>
-
-</html>