diff --git a/assets/fonts/fonts.css b/assets/fonts/fonts.css
new file mode 100644
index 0000000..d163296
--- /dev/null
+++ b/assets/fonts/fonts.css
@@ -0,0 +1,140 @@
+/* spectral-200 - latin */
+@font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-weight: 200;
+ src: local(''),
+ url('spectral-v13-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-200italic - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: italic;
+ font-weight: 200;
+ src: local(''),
+ url('spectral-v13-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-300 - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-weight: 300;
+ src: local(''),
+ url('spectral-v13-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-300italic - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: italic;
+ font-weight: 300;
+ src: local(''),
+ url('spectral-v13-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-regular - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-weight: 400;
+ src: local(''),
+ url('spectral-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-italic - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: italic;
+ font-weight: 400;
+ src: local(''),
+ url('spectral-v13-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-500 - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-weight: 500;
+ src: local(''),
+ url('spectral-v13-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-500italic - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: italic;
+ font-weight: 500;
+ src: local(''),
+ url('spectral-v13-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-600 - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-weight: 600;
+ src: local(''),
+ url('spectral-v13-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-600italic - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: italic;
+ font-weight: 600;
+ src: local(''),
+ url('spectral-v13-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-700 - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-weight: 700;
+ src: local(''),
+ url('spectral-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-700italic - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: italic;
+ font-weight: 700;
+ src: local(''),
+ url('spectral-v13-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-800 - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: normal;
+ font-weight: 800;
+ src: local(''),
+ url('spectral-v13-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
+ /* spectral-800italic - latin */
+ @font-face {
+ font-family: 'Spectral';
+ font-style: italic;
+ font-weight: 800;
+ src: local(''),
+ url('spectral-v13-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+ url('spectral-v13-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ }
+
\ No newline at end of file
diff --git a/assets/fonts/spectral-v13-latin-200.woff b/assets/fonts/spectral-v13-latin-200.woff
new file mode 100644
index 0000000..dce7208
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-200.woff differ
diff --git a/assets/fonts/spectral-v13-latin-200.woff2 b/assets/fonts/spectral-v13-latin-200.woff2
new file mode 100644
index 0000000..2ce4d90
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-200.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-200italic.woff b/assets/fonts/spectral-v13-latin-200italic.woff
new file mode 100644
index 0000000..a7477b9
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-200italic.woff differ
diff --git a/assets/fonts/spectral-v13-latin-200italic.woff2 b/assets/fonts/spectral-v13-latin-200italic.woff2
new file mode 100644
index 0000000..3f07444
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-200italic.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-300.woff b/assets/fonts/spectral-v13-latin-300.woff
new file mode 100644
index 0000000..e394508
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-300.woff differ
diff --git a/assets/fonts/spectral-v13-latin-300.woff2 b/assets/fonts/spectral-v13-latin-300.woff2
new file mode 100644
index 0000000..9f575fa
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-300.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-300italic.woff b/assets/fonts/spectral-v13-latin-300italic.woff
new file mode 100644
index 0000000..b0c2140
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-300italic.woff differ
diff --git a/assets/fonts/spectral-v13-latin-300italic.woff2 b/assets/fonts/spectral-v13-latin-300italic.woff2
new file mode 100644
index 0000000..6ceffc8
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-300italic.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-500.woff b/assets/fonts/spectral-v13-latin-500.woff
new file mode 100644
index 0000000..0979ba9
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-500.woff differ
diff --git a/assets/fonts/spectral-v13-latin-500.woff2 b/assets/fonts/spectral-v13-latin-500.woff2
new file mode 100644
index 0000000..cf6c174
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-500.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-500italic.woff b/assets/fonts/spectral-v13-latin-500italic.woff
new file mode 100644
index 0000000..72abf44
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-500italic.woff differ
diff --git a/assets/fonts/spectral-v13-latin-500italic.woff2 b/assets/fonts/spectral-v13-latin-500italic.woff2
new file mode 100644
index 0000000..f1fd0ca
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-500italic.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-600.woff b/assets/fonts/spectral-v13-latin-600.woff
new file mode 100644
index 0000000..6de7995
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-600.woff differ
diff --git a/assets/fonts/spectral-v13-latin-600.woff2 b/assets/fonts/spectral-v13-latin-600.woff2
new file mode 100644
index 0000000..7e1b61b
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-600.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-600italic.woff b/assets/fonts/spectral-v13-latin-600italic.woff
new file mode 100644
index 0000000..4e91c16
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-600italic.woff differ
diff --git a/assets/fonts/spectral-v13-latin-600italic.woff2 b/assets/fonts/spectral-v13-latin-600italic.woff2
new file mode 100644
index 0000000..c5fa7f1
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-600italic.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-700.woff b/assets/fonts/spectral-v13-latin-700.woff
new file mode 100644
index 0000000..0f6d94d
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-700.woff differ
diff --git a/assets/fonts/spectral-v13-latin-700.woff2 b/assets/fonts/spectral-v13-latin-700.woff2
new file mode 100644
index 0000000..df09d01
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-700.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-700italic.woff b/assets/fonts/spectral-v13-latin-700italic.woff
new file mode 100644
index 0000000..1dc63b6
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-700italic.woff differ
diff --git a/assets/fonts/spectral-v13-latin-700italic.woff2 b/assets/fonts/spectral-v13-latin-700italic.woff2
new file mode 100644
index 0000000..069db67
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-700italic.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-800.woff b/assets/fonts/spectral-v13-latin-800.woff
new file mode 100644
index 0000000..b4ea31a
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-800.woff differ
diff --git a/assets/fonts/spectral-v13-latin-800.woff2 b/assets/fonts/spectral-v13-latin-800.woff2
new file mode 100644
index 0000000..a4605c4
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-800.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-800italic.woff b/assets/fonts/spectral-v13-latin-800italic.woff
new file mode 100644
index 0000000..d3fd00f
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-800italic.woff differ
diff --git a/assets/fonts/spectral-v13-latin-800italic.woff2 b/assets/fonts/spectral-v13-latin-800italic.woff2
new file mode 100644
index 0000000..c10e973
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-800italic.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-italic.woff b/assets/fonts/spectral-v13-latin-italic.woff
new file mode 100644
index 0000000..1c7f405
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-italic.woff differ
diff --git a/assets/fonts/spectral-v13-latin-italic.woff2 b/assets/fonts/spectral-v13-latin-italic.woff2
new file mode 100644
index 0000000..052d22f
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-italic.woff2 differ
diff --git a/assets/fonts/spectral-v13-latin-regular.woff b/assets/fonts/spectral-v13-latin-regular.woff
new file mode 100644
index 0000000..e363c48
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-regular.woff differ
diff --git a/assets/fonts/spectral-v13-latin-regular.woff2 b/assets/fonts/spectral-v13-latin-regular.woff2
new file mode 100644
index 0000000..1929073
Binary files /dev/null and b/assets/fonts/spectral-v13-latin-regular.woff2 differ
diff --git a/assets/images/enso.png b/assets/images/enso.png
new file mode 100644
index 0000000..3aac940
Binary files /dev/null and b/assets/images/enso.png differ
diff --git a/assets/images/lotus.png b/assets/images/lotus.png
new file mode 100644
index 0000000..8ee4dda
Binary files /dev/null and b/assets/images/lotus.png differ
diff --git a/assets/images/matt.png b/assets/images/matt.png
new file mode 100644
index 0000000..9860f25
Binary files /dev/null and b/assets/images/matt.png differ
diff --git a/assets/images/semkrikke1.jpg b/assets/images/semkrikke1.jpg
new file mode 100644
index 0000000..ce63029
Binary files /dev/null and b/assets/images/semkrikke1.jpg differ
diff --git a/assets/images/zengardenwebsites.png b/assets/images/zengardenwebsites.png
new file mode 100644
index 0000000..4c70d4c
Binary files /dev/null and b/assets/images/zengardenwebsites.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c555c03
--- /dev/null
+++ b/index.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+ Site title
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ About
+
+
This website consists of just two files: a single HTML file and a single CSS file. This is based on the idea of Dave Shea, who created CSS Zen Garden. He wanted to show what was possible through CSS alone. 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 minimalistic 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 free to host.
+
+
+
+
+
+
+
+
+
+ © 2022 - zen garden websites
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2344bcb
--- /dev/null
+++ b/style.css
@@ -0,0 +1,28 @@
+*,*::after, *::before {margin: 0; padding: 0; box-sizing: border-box;}
+html {font-size: 20px;}
+body {background: #fff; background-image: url("https://www.transparenttextures.com/patterns/bedge-grunge.png"); border: 1rem solid #fbfaf9; border-top: 0; border-bottom: 0; min-height: 100vh; font-size: 0.85rem; font-family: 'Spectral'; line-height: 1.5; letter-spacing: -0.02em; overflow: auto;}
+body, a {color: #3a3731; text-decoration: none;}
+img {max-width: 100%;}
+h1,h2,h3 {line-height: 1.1; margin-bottom: 1em; font-size: 1.6rem;}
+h2::before {content: ""; display: block; width: 2rem; height: 1.5rem; background: url('assets/images/lotus.png') center center / contain no-repeat; margin: 0 auto 0.4rem; opacity: 0.8;}
+p {margin-bottom: 1.5em;}
+section {min-height: 30rem; padding: 12rem 2rem 12rem; display: none; align-items: center; flex-direction: column; justify-content: flex-start; margin: auto 0; min-height: calc(100vh - 1rem);}
+section:target {display: flex;}
+header, footer {position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; text-align: center;}
+section,header,footer {max-width: 50rem; width: 100%; margin-left: auto; margin-right: auto;}
+main {position: relative;}
+main::after, main::before {content: ""; height: 1rem; width: 100vw; left: 0; position: absolute; background: #fbfaf9; margin-left: -1rem;}
+nav {display: flex; gap: 1rem;}
+div.twocols {column-width: 22rem; column-gap: 1rem; width: 100%;}
+div.centered {max-width: 22rem; text-align: center;}
+header {top: 0; padding: 0 3rem 0; height: 14rem; display: flex; flex-direction: column; justify-content: center;}
+header h1 {margin: 0 0 0.5rem;}
+header nav a {border-bottom: 1px solid transparent;}
+header nav a:hover {border-color: #3a3731;}
+footer {padding: 0 3rem 4rem; transform: translate(-50%, -100%); font-style: italic; font-size: 0.8rem;}
+main {margin: 0 auto;}
+section#home img {width: 25rem; opacity: 0.8; margin: 1rem 0 0;}
+div.examples {display: flex; gap: 1rem 2rem; flex-wrap: wrap; justify-content: center;}
+div.examples a {display: block; margin-bottom: 0.4rem;}
+div.examples a img {max-width: 10rem; display: block; border: 1px solid #3a3731;}
+div.examples a:hover img {transform: scale(1.05);}
\ No newline at end of file