update

index.html

@@ -37,12 +37,13 @@
       <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 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.</p>
+            <p>This website consists of just two files: a single HTML file and a single CSS file. This idea 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 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.</p>
         </div>
       </section>
 
       <section id="examples">
         <h2>Examples</h2>
+        <p>Below you will find some examples of websites with just two files. Do you want your website here?</p>
         <div class="examples">
             <a href="https://jhvanderschee.github.io/democratizepublishing/matt-mullenweg"><img src="assets/images/matt.png" alt="Matt Mulderberg" /></a>
             <a href="https://www.semkrikke.nl/"><img src="assets/images/semkrikke1.jpg" alt="Sem Krikke" /></a>
@@ -53,7 +54,7 @@
       <section id="contact">
         <h2>Contact</h2>
         <div class="centered">
-            <p>Want to submit a website? Great!<br>Just build your website and send it in a ZIP file to joost@vdschee.nl.</p>
+            <p>Want to submit a website? Great!<br>Just build your website and send it in a ZIP file to <a href="mailto:joost@vdschee.nl">joost@vdschee.nl</a>.</p>
         </div>
       </section>
 

style.css

@@ -1,6 +1,6 @@
 *,*::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 {background: #fff; background-image: url("assets/images/bedge-grunge.png"); border: 1rem solid #fff; 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;}
@@ -8,10 +8,12 @@ h2::before {content: ""; display: block; width: 2rem; height: 1.5rem; background
 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;}
+section a {text-decoration: underline;}
+section a:hover {text-decoration: none; color: rgb(155, 18, 18);}
 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;} 
+main::after, main::before {content: ""; height: 1rem; width: 100vw; left: 0; position: absolute; background: #fff; 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;}
@@ -22,7 +24,7 @@ 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 {display: flex; gap: 1rem 2rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0;}
 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);}