104 lines
4.8 KiB
HTML
104 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
<title>Site title</title>
|
|
<meta name="description" content="Site description">
|
|
|
|
<link rel="shortcut icon" type="image/png" href="assets/images/icon-192x192.png">
|
|
<link rel="shortcut icon" sizes="196x196" href="assets/images/icon-192x192.png">
|
|
<link rel="apple-touch-icon" href="assets/images/icon-192x192.png">
|
|
|
|
<!-- Link to the stylesheet -->
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="assets/fonts/fonts.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<h1>
|
|
<a href="#home">Zen Garden Websites</a>
|
|
</h1>
|
|
<nav>
|
|
<a href="#about">About</a>
|
|
<a href="#examples">Examples</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="home">
|
|
<a href="#about"><img src="assets/images/enso.png" alt="Enso" /></a>
|
|
</section>
|
|
|
|
<section id="about">
|
|
<h2>About</h2>
|
|
<div class="twocols">
|
|
<p>This website consists of just two files: a single HTML file and a single CSS file. This is based on a mix of Dave Sheas <a href="http://www.csszengarden.com/">CSS Zen Garden</a> and the <a href="https://github.com/cadars/john-doe">single HTML webpage</a> from Adam Newbold. The goal of this website is to show what can be done with just one simple CSS and one simple HTML file. It aims to illustrate how simple web development can be. The simple approach has many advantages (and some disadvantages) and is all about minimalism. Zen Garden Websites are easy to build, easy to maintain and often cheap or <a href="https://pages.github.com/">free to host</a>.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="examples">
|
|
<h2>Examples</h2>
|
|
<div class="centered">
|
|
<p>Below you will find some examples of websites with just two files. Want to submit your own website? Great!
|
|
Just build your website and send a link to <a href="mailto:joost@vdschee.nl">joost@vdschee.nl</a> and/or submit a <a href="https://github.com/jhvanderschee/zengardenwebsites">pull request</a>.</p>
|
|
</div>
|
|
<div class="examples">
|
|
<div>
|
|
<a href="https://john-doe.neocities.org"><img src="assets/images/johndoe.png" alt="John Doe" /></a>by <a href="https://github.com/cadars/john-doe">cadars</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://jhvanderschee.github.io/democratizepublishing/matt-mullenweg"><img src="assets/images/matt.png" alt="Matt Mulderberg" /></a>by <a href="https://github.com/jhvanderschee/democratizepublishing">jhvanderschee</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://www.semkrikke.nl/"><img src="assets/images/semkrikke1.jpg" alt="Sem Krikke" /></a>by <a href="https://github.com/jhvanderschee/semkrikke/">jhvanderschee</a>
|
|
</div>
|
|
<div>
|
|
<a href="https://jhvanderschee.github.io/francois/"><img src="assets/images/francois.png" alt="Francois" /></a>by <a href="https://github.com/jhvanderschee/francois/">jhvanderschee</a>
|
|
</div>
|
|
<div>
|
|
<a href="#home"><img src="assets/images/zengardenwebsites.png" alt="Zen Garden Websites" /></a>by <a href="https://github.com/jhvanderschee/zengardenwebsites">jhvanderschee</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact">
|
|
<h2>Contact</h2>
|
|
<div class="centered">
|
|
<p>My name is Joost van der Schee and I have created this website to celebrate the joy and simplicity of web development. Do not get me wrong: simple does not mean easy. If you want to contact me, send me an e-mail at <a href="mailto:joost@vdschee.nl">joost@vdschee.nl</a>.</p>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<footer>
|
|
<img src="assets/images/unalome.png" alt="Unalome" />
|
|
<span>© 2022 - zen garden websites</span>
|
|
</footer>
|
|
|
|
<script type="text/javascript">
|
|
/* Add eventlistener to hash links */
|
|
var els = document.querySelectorAll('a[href^="#"]');
|
|
els.forEach(function(el) {
|
|
el.addEventListener('click',function(e) {
|
|
setActiveLink(el.getAttribute('href'))
|
|
});
|
|
});
|
|
/* Set the actice hash/class function */
|
|
function setActiveLink(hash) {
|
|
var links = document.querySelectorAll('a[href^="#"]');
|
|
links.forEach(function(link) {
|
|
link.classList.remove('active');
|
|
if(link.getAttribute('href')==hash) link.classList.add('active');
|
|
});
|
|
}
|
|
/* Make sure a hash is loaded */
|
|
if (window.location.hash == '') window.location.href = '#home';
|
|
setActiveLink(window.location.hash);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |