diff --git a/archive/building-websites-html/02/getting-started-slides.pdf b/archive/building-websites-html/02/getting-started-slides.pdf
new file mode 100644
index 0000000..6c24a00
Binary files /dev/null and b/archive/building-websites-html/02/getting-started-slides.pdf differ
diff --git a/archive/building-websites-html/03/demos/index.html b/archive/building-websites-html/03/demos/index.html
new file mode 100644
index 0000000..ba62746
--- /dev/null
+++ b/archive/building-websites-html/03/demos/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+   
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/03/setting-up-the-page-structure-slides.pdf b/archive/building-websites-html/03/setting-up-the-page-structure-slides.pdf
new file mode 100644
index 0000000..5886d18
Binary files /dev/null and b/archive/building-websites-html/03/setting-up-the-page-structure-slides.pdf differ
diff --git a/archive/building-websites-html/04/adding-text-headings-and-images-to-the-home-page-slides.pdf b/archive/building-websites-html/04/adding-text-headings-and-images-to-the-home-page-slides.pdf
new file mode 100644
index 0000000..115fd79
Binary files /dev/null and b/archive/building-websites-html/04/adding-text-headings-and-images-to-the-home-page-slides.pdf differ
diff --git a/archive/building-websites-html/04/demos/index.html b/archive/building-websites-html/04/demos/index.html
new file mode 100644
index 0000000..5017edb
--- /dev/null
+++ b/archive/building-websites-html/04/demos/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body style="background-color:#e6e4d9;font-family:verdana;">
+    <h1 style="font-size:40px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>Welcome to Bethany's Pie Shop!</h1>
+    <h2>Our history</h2>
+    <p style="font-family:verdana;">
+        For many years, <b>Bethany</b> has been baking the most delicious pies at her home. In 2013, we opened our first
+        store in Brussels (Belgium) in a cosy little street near the Grand Market. People from all over the world fell
+        in love
+        with the soft cakes, heavenly cheese cakes, spicy apple pies... <i>The store became a success in no time.</i>
+        <br>In 2015, no less than 100 pies were sold every day and Bethany's Pie Shop moved into a larger building.
+        After receiving many requests, it became clear that our next step was making it possible to order pies from the
+        comfort of your own home and from anywhere in the world. You are now looking at the result of this: our very own
+        webstore, making it possible to order Bethany's delicious pies whenever you feel like it!
+    </p>
+    <p>
+        Bethany is famous for using only the best ingredients. This way, we can make sure
+        that our pies are absolutely the best.
+    </p>
+    <hr>
+    <h3 style="font-family:verdana;">&nbsp;Our weekly promotions</h3>
+    <h4>Cheese cake</h4>
+    $12.95 - serves 4<br>
+    <img src="cheesecake.jpg" width="500" alt="Cheese cake with strawberry" height="300" />
+    <br><br>
+    <small>2020 Bethany's Pie Shop - All rights reserved</small>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/05/defining-the-page-structure-slides.pdf b/archive/building-websites-html/05/defining-the-page-structure-slides.pdf
new file mode 100644
index 0000000..d277b24
Binary files /dev/null and b/archive/building-websites-html/05/defining-the-page-structure-slides.pdf differ
diff --git a/archive/building-websites-html/05/demos/cheesecake.jpg b/archive/building-websites-html/05/demos/cheesecake.jpg
new file mode 100644
index 0000000..3b380c8
Binary files /dev/null and b/archive/building-websites-html/05/demos/cheesecake.jpg differ
diff --git a/archive/building-websites-html/05/demos/index.html b/archive/building-websites-html/05/demos/index.html
new file mode 100644
index 0000000..1050d40
--- /dev/null
+++ b/archive/building-websites-html/05/demos/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            Header menu goes here
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <article>
+
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>
+                </header>
+                <h2>Our history</h2>
+                <p>
+                    For many years, <b>Bethany</b> has been baking the most delicious pies at her home. In 2013, we
+                    opened our first
+                    store in Brussels (Belgium) in a cosy little street near the Grand Market. People from all over the
+                    world fell
+                    in love
+                    with the soft cakes, heavenly cheese cakes, spicy apple pies... <i>The store became a success in no
+                        time.</i>
+                    <br>In 2015, no less than 100 pies were sold every day and Bethany's Pie Shop moved into a larger
+                    building.
+                    After receiving many requests, it became clear that our next step was making it possible to order
+                    pies from the
+                    comfort of your own home and from anywhere in the world. You are now looking at the result of this:
+                    our very own
+                    webstore, making it possible to order Bethany's delicious pies whenever you feel like it!
+                </p>
+                <p>
+                    Bethany is famous for using only the best ingredients. This way, we can make sure
+                    that our pies are absolutely the best.
+                </p>
+            </article>
+
+            <section>
+                <h3 style="font-family:verdana;">&nbsp;Our weekly promotions</h3>
+                <h4>Cheese cake</h4>
+                $12.95 - serves 4<br>
+                <img src="cheesecake.jpg" width="500" alt="Cheese cake with strawberry" height="300" />
+
+            </section>
+
+            
+        </main>
+        
+    </div>
+    <footer>
+        <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+        </p>
+        <small>2020 Bethany's Pie Shop - All rights reserved</small>
+    </footer>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/06/adding-images-to-the-page-slides.pdf b/archive/building-websites-html/06/adding-images-to-the-page-slides.pdf
new file mode 100644
index 0000000..375c9c4
Binary files /dev/null and b/archive/building-websites-html/06/adding-images-to-the-page-slides.pdf differ
diff --git a/archive/building-websites-html/06/demos/favicon.png b/archive/building-websites-html/06/demos/favicon.png
new file mode 100644
index 0000000..625c701
Binary files /dev/null and b/archive/building-websites-html/06/demos/favicon.png differ
diff --git a/archive/building-websites-html/06/demos/images/bethany-fullsize.jpg b/archive/building-websites-html/06/demos/images/bethany-fullsize.jpg
new file mode 100644
index 0000000..9e5fa2e
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/bethany-fullsize.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/bethany.jpg b/archive/building-websites-html/06/demos/images/bethany.jpg
new file mode 100644
index 0000000..68a9f42
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/bethany.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/bethanylogo.png b/archive/building-websites-html/06/demos/images/bethanylogo.png
new file mode 100644
index 0000000..c5a96de
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/bethanylogo.png differ
diff --git a/archive/building-websites-html/06/demos/images/bethanysmall.jpg b/archive/building-websites-html/06/demos/images/bethanysmall.jpg
new file mode 100644
index 0000000..7566223
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/bethanysmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/cake.svg b/archive/building-websites-html/06/demos/images/cake.svg
new file mode 100644
index 0000000..2a84187
--- /dev/null
+++ b/archive/building-websites-html/06/demos/images/cake.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 256 256">
+  <g>
+    <path id="path1" transform="rotate(0,128,128) translate(0,29.1359710693359) scale(8,8)  " fill="#4DCFA8" d="M31.575012,19.010061L31.219971,24.517019 6.3109741,24.716007 4.6300049,19.75505z M32,12.412107L31.651001,17.812072 4.2310181,18.56907 2.3359985,12.982109C12.327026,14.407101,26.648987,13.024117,32,12.412107z M13.682007,2.0002048L31.580017,11.192131C25.572021,11.823122,11.765015,13.053108,2.7249756,11.825121L5.9719849,8.9141495C6.6389771,9.4481423 7.4829712,9.7701304 8.4039917,9.7701304 10.549988,9.7701304 12.288025,8.0311463 12.288025,5.8851674 12.288025,5.1161764 12.062012,4.4021781 11.676025,3.799186z M1.7849731,0.00022094523C3.9299927,0.026221808,6.0369873,2.1772053,6.934021,3.2211878L7.0599976,3.1441925C8.5239868,2.3781924 10.330017,2.9431901 11.096008,4.4061759 11.862,5.8691614 11.296997,7.6731474 9.8339844,8.4401391 8.3709717,9.2061398 6.565979,8.6421492 5.8010254,7.1791632 5.2540283,6.1341584 5.3880005,4.9171732 6.039978,4.0261891 5.0789795,2.9181964 2.5009766,0.287206 0.67498779,1.536204L0,0.54921264C0.58099365,0.1522126,1.184021,-0.006782684,1.7849731,0.00022094523z" />
+  </g>
+</svg>
+
diff --git a/archive/building-websites-html/06/demos/images/pattern.png b/archive/building-websites-html/06/demos/images/pattern.png
new file mode 100644
index 0000000..5058a49
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/pattern.png differ
diff --git a/archive/building-websites-html/06/demos/images/pie.png b/archive/building-websites-html/06/demos/images/pie.png
new file mode 100644
index 0000000..6acc60d
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/pie.png differ
diff --git a/archive/building-websites-html/06/demos/images/products/applepie.jpg b/archive/building-websites-html/06/demos/images/products/applepie.jpg
new file mode 100644
index 0000000..24bb8a8
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/applepie.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/applepiesmall.jpg b/archive/building-websites-html/06/demos/images/products/applepiesmall.jpg
new file mode 100644
index 0000000..49e0187
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/applepiesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/blueberrycheesecakesmall.jpg b/archive/building-websites-html/06/demos/images/products/blueberrycheesecakesmall.jpg
new file mode 100644
index 0000000..4ddbe07
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/blueberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/cheesecake.jpg b/archive/building-websites-html/06/demos/images/products/cheesecake.jpg
new file mode 100644
index 0000000..3b380c8
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/cheesecake.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/cheesecakesmall.jpg b/archive/building-websites-html/06/demos/images/products/cheesecakesmall.jpg
new file mode 100644
index 0000000..5b3a911
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/cheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/cherrypiesmall copy.jpg b/archive/building-websites-html/06/demos/images/products/cherrypiesmall copy.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/cherrypiesmall copy.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/cherrypiesmall.jpg b/archive/building-websites-html/06/demos/images/products/cherrypiesmall.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/cherrypiesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/christmasapplepiesmall.jpg b/archive/building-websites-html/06/demos/images/products/christmasapplepiesmall.jpg
new file mode 100644
index 0000000..bf372d2
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/christmasapplepiesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/cranberrypiesmall.jpg b/archive/building-websites-html/06/demos/images/products/cranberrypiesmall.jpg
new file mode 100644
index 0000000..89abf4c
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/cranberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/peachpiesmall.jpg b/archive/building-websites-html/06/demos/images/products/peachpiesmall.jpg
new file mode 100644
index 0000000..662c793
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/peachpiesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/pumpkinpiesmall.jpg b/archive/building-websites-html/06/demos/images/products/pumpkinpiesmall.jpg
new file mode 100644
index 0000000..e2d7047
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/pumpkinpiesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/rhubarbpiesmall.jpg b/archive/building-websites-html/06/demos/images/products/rhubarbpiesmall.jpg
new file mode 100644
index 0000000..c46030f
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/rhubarbpiesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/strawberrycheesecakesmall.jpg b/archive/building-websites-html/06/demos/images/products/strawberrycheesecakesmall.jpg
new file mode 100644
index 0000000..2abebf6
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/strawberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/images/products/strawberrypiesmall.jpg b/archive/building-websites-html/06/demos/images/products/strawberrypiesmall.jpg
new file mode 100644
index 0000000..d5fccb7
Binary files /dev/null and b/archive/building-websites-html/06/demos/images/products/strawberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/06/demos/index.html b/archive/building-websites-html/06/demos/index.html
new file mode 100644
index 0000000..a1d4fb5
--- /dev/null
+++ b/archive/building-websites-html/06/demos/index.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            
+            <img src="images/cake.svg" height="55" />
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <img src="images/bethanylogo.png" />
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+        </aside>
+        <main id="main">
+            <article>
+
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>
+                </header>
+                <figure>
+                    <img src="images/bethany-fullsize.jpg" width="600" alt="Bethany in her pie shop" />
+                    <figcaption>Bethany in her pie shop</figcaption>
+                </figure>
+                <h2>Our history</h2>
+                <p>
+                    For many years, <b>Bethany</b> has been baking the most delicious pies at her home. In 2013, we
+                    opened our first
+                    store in Brussels (Belgium) in a cosy little street near the Grand Market. People from all over the
+                    world fell
+                    in love
+                    with the soft cakes, heavenly cheese cakes, spicy apple pies... <i>The store became a success in no
+                        time.</i>
+                    <br>In 2015, no less than 100 pies were sold every day and Bethany's Pie Shop moved into a larger
+                    building.
+                    After receiving many requests, it became clear that our next step was making it possible to order
+                    pies from the
+                    comfort of your own home and from anywhere in the world. You are now looking at the result of this:
+                    our very own
+                    webstore, making it possible to order Bethany's delicious pies whenever you feel like it!
+                </p>
+                <p>
+                    Bethany is famous for using only the best ingredients. This way, we can make sure
+                    that our pies are absolutely the best.
+                </p>
+            </article>
+
+            <section>
+                <h3 style="font-family:verdana;">&nbsp;Our weekly promotions</h3>
+                <h4>Cheese cake</h4>
+                $12.95 - serves 4<br>
+                <img src="https://gillcleerenpluralsight.blob.core.windows.net/files/cheesecake.jpg" width="500"
+                    alt="Cheese cake with strawberry" height="300" />
+
+            </section>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/07/creating-the-pie-overview-table-slides.pdf b/archive/building-websites-html/07/creating-the-pie-overview-table-slides.pdf
new file mode 100644
index 0000000..eacbb79
Binary files /dev/null and b/archive/building-websites-html/07/creating-the-pie-overview-table-slides.pdf differ
diff --git a/archive/building-websites-html/07/demos/favicon.png b/archive/building-websites-html/07/demos/favicon.png
new file mode 100644
index 0000000..625c701
Binary files /dev/null and b/archive/building-websites-html/07/demos/favicon.png differ
diff --git a/archive/building-websites-html/07/demos/images/bethany-fullsize.jpg b/archive/building-websites-html/07/demos/images/bethany-fullsize.jpg
new file mode 100644
index 0000000..9e5fa2e
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/bethany-fullsize.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/bethany.jpg b/archive/building-websites-html/07/demos/images/bethany.jpg
new file mode 100644
index 0000000..68a9f42
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/bethany.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/bethanylogo.png b/archive/building-websites-html/07/demos/images/bethanylogo.png
new file mode 100644
index 0000000..c5a96de
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/bethanylogo.png differ
diff --git a/archive/building-websites-html/07/demos/images/bethanysmall.jpg b/archive/building-websites-html/07/demos/images/bethanysmall.jpg
new file mode 100644
index 0000000..7566223
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/bethanysmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/cake.svg b/archive/building-websites-html/07/demos/images/cake.svg
new file mode 100644
index 0000000..2a84187
--- /dev/null
+++ b/archive/building-websites-html/07/demos/images/cake.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 256 256">
+  <g>
+    <path id="path1" transform="rotate(0,128,128) translate(0,29.1359710693359) scale(8,8)  " fill="#4DCFA8" d="M31.575012,19.010061L31.219971,24.517019 6.3109741,24.716007 4.6300049,19.75505z M32,12.412107L31.651001,17.812072 4.2310181,18.56907 2.3359985,12.982109C12.327026,14.407101,26.648987,13.024117,32,12.412107z M13.682007,2.0002048L31.580017,11.192131C25.572021,11.823122,11.765015,13.053108,2.7249756,11.825121L5.9719849,8.9141495C6.6389771,9.4481423 7.4829712,9.7701304 8.4039917,9.7701304 10.549988,9.7701304 12.288025,8.0311463 12.288025,5.8851674 12.288025,5.1161764 12.062012,4.4021781 11.676025,3.799186z M1.7849731,0.00022094523C3.9299927,0.026221808,6.0369873,2.1772053,6.934021,3.2211878L7.0599976,3.1441925C8.5239868,2.3781924 10.330017,2.9431901 11.096008,4.4061759 11.862,5.8691614 11.296997,7.6731474 9.8339844,8.4401391 8.3709717,9.2061398 6.565979,8.6421492 5.8010254,7.1791632 5.2540283,6.1341584 5.3880005,4.9171732 6.039978,4.0261891 5.0789795,2.9181964 2.5009766,0.287206 0.67498779,1.536204L0,0.54921264C0.58099365,0.1522126,1.184021,-0.006782684,1.7849731,0.00022094523z" />
+  </g>
+</svg>
+
diff --git a/archive/building-websites-html/07/demos/images/pattern.png b/archive/building-websites-html/07/demos/images/pattern.png
new file mode 100644
index 0000000..5058a49
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/pattern.png differ
diff --git a/archive/building-websites-html/07/demos/images/pie.png b/archive/building-websites-html/07/demos/images/pie.png
new file mode 100644
index 0000000..6acc60d
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/pie.png differ
diff --git a/archive/building-websites-html/07/demos/images/products/applepie.jpg b/archive/building-websites-html/07/demos/images/products/applepie.jpg
new file mode 100644
index 0000000..24bb8a8
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/applepie.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/applepiesmall.jpg b/archive/building-websites-html/07/demos/images/products/applepiesmall.jpg
new file mode 100644
index 0000000..49e0187
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/applepiesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/blueberrycheesecakesmall.jpg b/archive/building-websites-html/07/demos/images/products/blueberrycheesecakesmall.jpg
new file mode 100644
index 0000000..4ddbe07
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/blueberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/cheesecake.jpg b/archive/building-websites-html/07/demos/images/products/cheesecake.jpg
new file mode 100644
index 0000000..3b380c8
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/cheesecake.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/cheesecakesmall.jpg b/archive/building-websites-html/07/demos/images/products/cheesecakesmall.jpg
new file mode 100644
index 0000000..5b3a911
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/cheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/cherrypiesmall copy.jpg b/archive/building-websites-html/07/demos/images/products/cherrypiesmall copy.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/cherrypiesmall copy.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/cherrypiesmall.jpg b/archive/building-websites-html/07/demos/images/products/cherrypiesmall.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/cherrypiesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/christmasapplepiesmall.jpg b/archive/building-websites-html/07/demos/images/products/christmasapplepiesmall.jpg
new file mode 100644
index 0000000..bf372d2
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/christmasapplepiesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/cranberrypiesmall.jpg b/archive/building-websites-html/07/demos/images/products/cranberrypiesmall.jpg
new file mode 100644
index 0000000..89abf4c
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/cranberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/peachpiesmall.jpg b/archive/building-websites-html/07/demos/images/products/peachpiesmall.jpg
new file mode 100644
index 0000000..662c793
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/peachpiesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/pumpkinpiesmall.jpg b/archive/building-websites-html/07/demos/images/products/pumpkinpiesmall.jpg
new file mode 100644
index 0000000..e2d7047
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/pumpkinpiesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/rhubarbpiesmall.jpg b/archive/building-websites-html/07/demos/images/products/rhubarbpiesmall.jpg
new file mode 100644
index 0000000..c46030f
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/rhubarbpiesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/strawberrycheesecakesmall.jpg b/archive/building-websites-html/07/demos/images/products/strawberrycheesecakesmall.jpg
new file mode 100644
index 0000000..2abebf6
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/strawberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/images/products/strawberrypiesmall.jpg b/archive/building-websites-html/07/demos/images/products/strawberrypiesmall.jpg
new file mode 100644
index 0000000..d5fccb7
Binary files /dev/null and b/archive/building-websites-html/07/demos/images/products/strawberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/07/demos/index.html b/archive/building-websites-html/07/demos/index.html
new file mode 100644
index 0000000..aecc651
--- /dev/null
+++ b/archive/building-websites-html/07/demos/index.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            
+            <img src="images/cake.svg" height="55" />
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <img src="images/bethanylogo.png" />
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <article>
+
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>
+                </header>
+                <figure>
+                    <img src="images/bethany-fullsize.jpg" width="600" alt="Bethany in her pie shop" />
+                    <figcaption>Bethany in her pie shop</figcaption>
+                </figure>
+                <h2>Our history</h2>
+                <p>
+                    For many years, <b>Bethany</b> has been baking the most delicious pies at her home. In 2013, we
+                    opened our first
+                    store in Brussels (Belgium) in a cosy little street near the Grand Market. People from all over the
+                    world fell
+                    in love
+                    with the soft cakes, heavenly cheese cakes, spicy apple pies... <i>The store became a success in no
+                        time.</i>
+                    <br>In 2015, no less than 100 pies were sold every day and Bethany's Pie Shop moved into a larger
+                    building.
+                    After receiving many requests, it became clear that our next step was making it possible to order
+                    pies from the
+                    comfort of your own home and from anywhere in the world. You are now looking at the result of this:
+                    our very own
+                    webstore, making it possible to order Bethany's delicious pies whenever you feel like it!
+                </p>
+                <p>
+                    Bethany is famous for using only the best ingredients. This way, we can make sure
+                    that our pies are absolutely the best.
+                </p>
+            </article>
+
+            <section>
+                <h3 style="font-family:verdana;">&nbsp;Our weekly promotions</h3>
+                <h4>Cheese cake</h4>
+                $12.95 - serves 4<br>
+                <img src="https://gillcleerenpluralsight.blob.core.windows.net/files/cheesecake.jpg" width="500"
+                    alt="Cheese cake with strawberry" height="300" />
+
+            </section>
+
+            
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/07/demos/pieoverview.html b/archive/building-websites-html/07/demos/pieoverview.html
new file mode 100644
index 0000000..4e6d902
--- /dev/null
+++ b/archive/building-websites-html/07/demos/pieoverview.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+
+            <img src="images/cake.svg" height="55" />
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <img src="images/bethanylogo.png" />
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table border="1">
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
+                        <td>Cheese cake</td>
+                        <td>Plain cheese cake. Plain pleasure.</td>
+                        <td>$12.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/applepiesmall.jpg" width="100"></td>
+                        <td>Apple pie</td>
+                        <td>Our famous apple pie</td>
+                        <td>$14.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cranberrypiesmall.jpg" width="100"></td>
+                        <td>Cranberry pie</td>
+                        <td>A Christmas favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
+                        <td>Cherry pie</td>
+                        <td>A summer classic!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/peachpiesmall.jpg" width="100"></td>
+                        <td>Peach pie</td>
+                        <td>Sweet as peach</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
+                        <td>Pumpkin pie</td>
+                        <td>Our Halloween favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/christmasapplepiesmall.jpg" width="100"></td>
+                        <td>Christmas apple pie</td>
+                        <td>Happy holidays with this pie!</td>
+                        <td>$19.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/blueberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Blueberry cheese cake</td>
+                        <td>You'll love it!</td>
+                        <td>$17.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/rhubarbpiesmall.jpg" width="100"></td>
+                        <td>Rhubarb Pie</td>
+                        <td>My God, so sweet!</td>
+                        <td>$21.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrypiesmall.jpg" width="100"></td>
+                        <td>Strawberry Pie</td>
+                        <td>Our delicious strawberry pie!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Strawberry Cheese Cake</td>
+                        <td>One of the best cheese cakes you'll ever find!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/07/demos/template.html b/archive/building-websites-html/07/demos/template.html
new file mode 100644
index 0000000..247b75f
--- /dev/null
+++ b/archive/building-websites-html/07/demos/template.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            
+            <img src="images/cake.svg" height="55" />
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <img src="images/bethanylogo.png" />
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            
+
+          
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/08/demos/applepie.html b/archive/building-websites-html/08/demos/applepie.html
new file mode 100644
index 0000000..c4e9fe6
--- /dev/null
+++ b/archive/building-websites-html/08/demos/applepie.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+
+            <img src="images/cake.svg" height="55" />
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <img src="images/bethanylogo.png" />
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <article>
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Apple pie</h1>
+                </header>
+                <figure>
+                    <img src="images/products/applepie.jpg" width="600" alt="Apple pie" />
+                    <figcaption>Our world-famous apple pie</figcaption>
+                </figure>
+
+
+                <div style="background-color:#f8f4f1;">
+                    <strong>Price: $12.95</strong>
+                    <h2>Description</h2>
+                    <p>
+                        Bethany received the recipe for this delicious apple pie from her grandmother. At the age of 5,
+                        she
+                        was
+                        already baking this <em>all-American traditional apple</em> pie at her home.
+                        As the recipe goes a long way back, it contains the most typical ingredients used for so many
+                        years
+                        to
+                        make this classic even today one of our most popular pies.
+                    </p>
+                    <p>
+                        This pie is available <strong>every day</strong> and comes in 2 sizes. <span
+                            style="color:#4dcfa8; font-weight:bold ;">You can serve it cold or warm it for 4 minutes
+                            in
+                            the microwave to give it an extra touch. </span>Your house will smell just like Bethany's
+                        Shop!
+                    </p>
+                    <p>
+                        <blockquote>
+                            This recipe has been in our family for generations. We hope you enjoy this pie as we do -
+                            Bethany
+                        </blockquote>
+                    </p>
+
+                    <p><small>Note that some ingredients make be are dangerous if you have certain allergies. See the
+                            list
+                            of ingredients below.</small></p>
+                    <p><small>Bethany cares about the environment and we try to limit our CO<sub>2</sub> emissions as
+                            much
+                            as possible. See our terms page for more info.</small></p>
+                    <hr>
+
+                    <h2>How we make this pie</h2>
+                    <ol>
+                        <li>
+                            First, we combine sugar, flour and spices. We toss the apples with some lemon juice and add
+                            sugar.
+                        </li>
+                        <li>We then create the bottom crust and fill that with apple mixture. We put some butter on
+                            that. We
+                            then roll remaining crust to fit top of pie.
+                        </li>
+                        <li>Then we beat the eggs white until we have a foamy mix. That is then brushed over the crust.
+                            We
+                            sprinkle some extra sugar.
+                        </li>
+                        <li>Then the pie goes into the oven at 360° for 35 minutes. When ready, we let it cool on a wire
+                            rack.
+                        </li>
+                    </ol>
+
+                    <ol start=5>
+                        <li>If something goes wrong, we start all over again!</li>
+                    </ol>
+
+                    <h3>Ingredients</h3>
+                    <p>Please note that this item contains the following items and possible allergens!</p>
+                    <ul>
+                        <li>Butter</li>
+                        <li>Eggs</li>
+                        <li>Sugar</li>
+                        <ul>
+                            <li>Regular sugar</li>
+                            <li>Brown sugar</li>
+                            <li>Caster sugar</li>
+                        </ul>
+                        <li>Flour</li>
+                        <li>Cinnamon</li>
+                        <li>Ginger</li>
+                        <li>Nutmeg</li>
+                        <li>Apples</li>
+                        <li>Lemons</li>
+                    </ul>
+                </div>
+
+
+            </article>
+
+           
+        </main>
+
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/08/demos/favicon.png b/archive/building-websites-html/08/demos/favicon.png
new file mode 100644
index 0000000..625c701
Binary files /dev/null and b/archive/building-websites-html/08/demos/favicon.png differ
diff --git a/archive/building-websites-html/08/demos/images/bethany-fullsize.jpg b/archive/building-websites-html/08/demos/images/bethany-fullsize.jpg
new file mode 100644
index 0000000..9e5fa2e
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/bethany-fullsize.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/bethany.jpg b/archive/building-websites-html/08/demos/images/bethany.jpg
new file mode 100644
index 0000000..68a9f42
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/bethany.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/bethanylogo.png b/archive/building-websites-html/08/demos/images/bethanylogo.png
new file mode 100644
index 0000000..c5a96de
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/bethanylogo.png differ
diff --git a/archive/building-websites-html/08/demos/images/bethanysmall.jpg b/archive/building-websites-html/08/demos/images/bethanysmall.jpg
new file mode 100644
index 0000000..7566223
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/bethanysmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/cake.svg b/archive/building-websites-html/08/demos/images/cake.svg
new file mode 100644
index 0000000..2a84187
--- /dev/null
+++ b/archive/building-websites-html/08/demos/images/cake.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 256 256">
+  <g>
+    <path id="path1" transform="rotate(0,128,128) translate(0,29.1359710693359) scale(8,8)  " fill="#4DCFA8" d="M31.575012,19.010061L31.219971,24.517019 6.3109741,24.716007 4.6300049,19.75505z M32,12.412107L31.651001,17.812072 4.2310181,18.56907 2.3359985,12.982109C12.327026,14.407101,26.648987,13.024117,32,12.412107z M13.682007,2.0002048L31.580017,11.192131C25.572021,11.823122,11.765015,13.053108,2.7249756,11.825121L5.9719849,8.9141495C6.6389771,9.4481423 7.4829712,9.7701304 8.4039917,9.7701304 10.549988,9.7701304 12.288025,8.0311463 12.288025,5.8851674 12.288025,5.1161764 12.062012,4.4021781 11.676025,3.799186z M1.7849731,0.00022094523C3.9299927,0.026221808,6.0369873,2.1772053,6.934021,3.2211878L7.0599976,3.1441925C8.5239868,2.3781924 10.330017,2.9431901 11.096008,4.4061759 11.862,5.8691614 11.296997,7.6731474 9.8339844,8.4401391 8.3709717,9.2061398 6.565979,8.6421492 5.8010254,7.1791632 5.2540283,6.1341584 5.3880005,4.9171732 6.039978,4.0261891 5.0789795,2.9181964 2.5009766,0.287206 0.67498779,1.536204L0,0.54921264C0.58099365,0.1522126,1.184021,-0.006782684,1.7849731,0.00022094523z" />
+  </g>
+</svg>
+
diff --git a/archive/building-websites-html/08/demos/images/pattern.png b/archive/building-websites-html/08/demos/images/pattern.png
new file mode 100644
index 0000000..5058a49
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/pattern.png differ
diff --git a/archive/building-websites-html/08/demos/images/pie.png b/archive/building-websites-html/08/demos/images/pie.png
new file mode 100644
index 0000000..6acc60d
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/pie.png differ
diff --git a/archive/building-websites-html/08/demos/images/products/applepie.jpg b/archive/building-websites-html/08/demos/images/products/applepie.jpg
new file mode 100644
index 0000000..24bb8a8
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/applepie.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/applepiesmall.jpg b/archive/building-websites-html/08/demos/images/products/applepiesmall.jpg
new file mode 100644
index 0000000..49e0187
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/applepiesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/blueberrycheesecakesmall.jpg b/archive/building-websites-html/08/demos/images/products/blueberrycheesecakesmall.jpg
new file mode 100644
index 0000000..4ddbe07
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/blueberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/cheesecake.jpg b/archive/building-websites-html/08/demos/images/products/cheesecake.jpg
new file mode 100644
index 0000000..3b380c8
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/cheesecake.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/cheesecakesmall.jpg b/archive/building-websites-html/08/demos/images/products/cheesecakesmall.jpg
new file mode 100644
index 0000000..5b3a911
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/cheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/cherrypiesmall copy.jpg b/archive/building-websites-html/08/demos/images/products/cherrypiesmall copy.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/cherrypiesmall copy.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/cherrypiesmall.jpg b/archive/building-websites-html/08/demos/images/products/cherrypiesmall.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/cherrypiesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/christmasapplepiesmall.jpg b/archive/building-websites-html/08/demos/images/products/christmasapplepiesmall.jpg
new file mode 100644
index 0000000..bf372d2
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/christmasapplepiesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/cranberrypiesmall.jpg b/archive/building-websites-html/08/demos/images/products/cranberrypiesmall.jpg
new file mode 100644
index 0000000..89abf4c
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/cranberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/peachpiesmall.jpg b/archive/building-websites-html/08/demos/images/products/peachpiesmall.jpg
new file mode 100644
index 0000000..662c793
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/peachpiesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/pumpkinpiesmall.jpg b/archive/building-websites-html/08/demos/images/products/pumpkinpiesmall.jpg
new file mode 100644
index 0000000..e2d7047
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/pumpkinpiesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/rhubarbpiesmall.jpg b/archive/building-websites-html/08/demos/images/products/rhubarbpiesmall.jpg
new file mode 100644
index 0000000..c46030f
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/rhubarbpiesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/strawberrycheesecakesmall.jpg b/archive/building-websites-html/08/demos/images/products/strawberrycheesecakesmall.jpg
new file mode 100644
index 0000000..2abebf6
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/strawberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/images/products/strawberrypiesmall.jpg b/archive/building-websites-html/08/demos/images/products/strawberrypiesmall.jpg
new file mode 100644
index 0000000..d5fccb7
Binary files /dev/null and b/archive/building-websites-html/08/demos/images/products/strawberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/08/demos/index.html b/archive/building-websites-html/08/demos/index.html
new file mode 100644
index 0000000..deac9fc
--- /dev/null
+++ b/archive/building-websites-html/08/demos/index.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+
+            <img src="images/cake.svg" height="55" />
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <img src="images/bethanylogo.png" />
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <article>
+
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>
+                </header>
+                <figure>
+                    <img src="images/bethany-fullsize.jpg" width="600" alt="Bethany in her pie shop" />
+                    <figcaption>Bethany in her pie shop</figcaption>
+                </figure>
+                <h2>Our history</h2>
+                <p>
+                    For many years, <b>Bethany</b> has been baking the most delicious pies at her home. In 2013, we
+                    opened our first
+                    store in Brussels (Belgium) in a cosy little street near the Grand Market. People from all over the
+                    world fell
+                    in love
+                    with the soft cakes, heavenly cheese cakes, spicy apple pies... <i>The store became a success in no
+                        time.</i>
+                    <br>In 2015, no less than 100 pies were sold every day and Bethany's Pie Shop moved into a larger
+                    building.
+                    After receiving many requests, it became clear that our next step was making it possible to order
+                    pies from the
+                    comfort of your own home and from anywhere in the world. You are now looking at the result of this:
+                    our very own
+                    webstore, making it possible to order Bethany's delicious pies whenever you feel like it!
+                </p>
+                <p>
+                    Bethany is famous for using only the best ingredients. This way, we can make sure
+                    that our pies are absolutely the best.
+                </p>
+            </article>
+
+            <section>
+                <h3 style="font-family:verdana;">&nbsp;Our weekly promotions</h3>
+                <h4>Cheese cake</h4>
+                $12.95 - serves 4<br>
+                <img src="https://gillcleerenpluralsight.blob.core.windows.net/files/cheesecake.jpg" width="500"
+                    alt="Cheese cake with strawberry" height="300" />
+
+            </section>
+
+
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>&copy;2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/08/demos/pieoverview.html b/archive/building-websites-html/08/demos/pieoverview.html
new file mode 100644
index 0000000..4e6d902
--- /dev/null
+++ b/archive/building-websites-html/08/demos/pieoverview.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+
+            <img src="images/cake.svg" height="55" />
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <img src="images/bethanylogo.png" />
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table border="1">
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
+                        <td>Cheese cake</td>
+                        <td>Plain cheese cake. Plain pleasure.</td>
+                        <td>$12.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/applepiesmall.jpg" width="100"></td>
+                        <td>Apple pie</td>
+                        <td>Our famous apple pie</td>
+                        <td>$14.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cranberrypiesmall.jpg" width="100"></td>
+                        <td>Cranberry pie</td>
+                        <td>A Christmas favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
+                        <td>Cherry pie</td>
+                        <td>A summer classic!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/peachpiesmall.jpg" width="100"></td>
+                        <td>Peach pie</td>
+                        <td>Sweet as peach</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
+                        <td>Pumpkin pie</td>
+                        <td>Our Halloween favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/christmasapplepiesmall.jpg" width="100"></td>
+                        <td>Christmas apple pie</td>
+                        <td>Happy holidays with this pie!</td>
+                        <td>$19.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/blueberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Blueberry cheese cake</td>
+                        <td>You'll love it!</td>
+                        <td>$17.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/rhubarbpiesmall.jpg" width="100"></td>
+                        <td>Rhubarb Pie</td>
+                        <td>My God, so sweet!</td>
+                        <td>$21.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrypiesmall.jpg" width="100"></td>
+                        <td>Strawberry Pie</td>
+                        <td>Our delicious strawberry pie!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Strawberry Cheese Cake</td>
+                        <td>One of the best cheese cakes you'll ever find!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/08/designing-the-pie-detail-page-slides.pdf b/archive/building-websites-html/08/designing-the-pie-detail-page-slides.pdf
new file mode 100644
index 0000000..29f3634
Binary files /dev/null and b/archive/building-websites-html/08/designing-the-pie-detail-page-slides.pdf differ
diff --git a/archive/building-websites-html/09/adding-navigation-to-the-site-slides.pdf b/archive/building-websites-html/09/adding-navigation-to-the-site-slides.pdf
new file mode 100644
index 0000000..48339a2
Binary files /dev/null and b/archive/building-websites-html/09/adding-navigation-to-the-site-slides.pdf differ
diff --git a/archive/building-websites-html/09/demos/applepie.html b/archive/building-websites-html/09/demos/applepie.html
new file mode 100644
index 0000000..12fe9dd
--- /dev/null
+++ b/archive/building-websites-html/09/demos/applepie.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+                <input type="search" class="searchbox" placeholder="Search our store" />
+            </header>
+        </aside>
+        <main id="main">
+            <article>
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Apple pie</h1>
+                </header>
+                <figure>
+                    <a href="images/products/applepie.jpg"><img src="images/products/applepie.jpg" width="600" alt="Apple pie" /></a>
+                    <figcaption>Our world-famous apple pie</figcaption>
+                </figure>
+
+
+                <div style="background-color:#f8f4f1;">
+                    <strong>Price: $12.95</strong>
+                    <h2>Description</h2>
+                    <p>
+                        Bethany received the recipe for this delicious apple pie from her grandmother. At the age of 5,
+                        she
+                        was
+                        already baking this <em>all-American traditional apple</em> pie at her home.
+                        As the recipe goes a long way back, it contains the most typical ingredients used for so many
+                        years
+                        to
+                        make this classic even today one of our most popular pies.
+                    </p>
+                    <p>
+                        This pie is available <strong>every day</strong> and comes in 2 sizes. <span
+                            style="color:#4dcfa8; font-weight:bold ;">You can serve it cold or warm it for 4 minutes
+                            in
+                            the microwave to give it an extra touch. </span>Your house will smell just like Bethany's
+                        Shop!
+                    </p>
+                    <p>
+                        <blockquote>
+                            This recipe has been in our family for generations. We hope you enjoy this pie as we do -
+                            Bethany
+                        </blockquote>
+                    </p>
+
+                    <p><small>Note that some ingredients make be are dangerous if you have certain allergies. See the
+                            list
+                            of ingredients below.</small></p>
+                    <p><small>Bethany cares about the environment and we try to limit our CO<sub>2</sub> emissions as
+                            much
+                            as possible. See our terms page for more info.</small></p>
+                    <hr>
+
+                    <h2>How we make this pie</h2>
+                    <ol>
+                        <li>
+                            First, we combine sugar, flour and spices. We toss the apples with some lemon juice and add
+                            sugar.
+                        </li>
+                        <li>We then create the bottom crust and fill that with apple mixture. We put some butter on
+                            that. We
+                            then roll remaining crust to fit top of pie.
+                        </li>
+                        <li>Then we beat the eggs white until we have a foamy mix. That is then brushed over the crust.
+                            We
+                            sprinkle some extra sugar.
+                        </li>
+                        <li>Then the pie goes into the oven at 360° for 35 minutes. When ready, we let it cool on a wire
+                            rack.
+                        </li>
+                    </ol>
+
+                    <ol start="5">
+                        <li>If something goes wrong, we start all over again!</li>
+                    </ol>
+
+                    <h3>Ingredients</h3>
+                    <p>Please note that this item contains the following items and possible allergens!</p>
+                    <ul>
+                        <li>Butter</li>
+                        <li>Eggs</li>
+                        <li>Sugar</li>
+                        <ul>
+                            <li>Regular sugar</li>
+                            <li>Brown sugar</li>
+                            <li>Caster sugar</li>
+                        </ul>
+                        <li>Flour</li>
+                        <li>Cinnamon</li>
+                        <li>Ginger</li>
+                        <li>Nutmeg</li>
+                        <li>Apples</li>
+                        <li>Lemons</li>
+                    </ul>
+                </div>
+
+
+            </article>
+
+          
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/09/demos/cheesecakes.html b/archive/building-websites-html/09/demos/cheesecakes.html
new file mode 100644
index 0000000..ea2188e
--- /dev/null
+++ b/archive/building-websites-html/09/demos/cheesecakes.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
+                        <td>Cheese cake</td>
+                        <td>Plain cheese cake. Plain pleasure.</td>
+                        <td>$12.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/blueberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Blueberry cheese cake</td>
+                        <td>You'll love it!</td>
+                        <td>$17.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Strawberry Cheese Cake</td>
+                        <td>One of the best cheese cakes you'll ever find!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+          
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/09/demos/favicon.png b/archive/building-websites-html/09/demos/favicon.png
new file mode 100644
index 0000000..625c701
Binary files /dev/null and b/archive/building-websites-html/09/demos/favicon.png differ
diff --git a/archive/building-websites-html/09/demos/fruitpies.html b/archive/building-websites-html/09/demos/fruitpies.html
new file mode 100644
index 0000000..33083fe
--- /dev/null
+++ b/archive/building-websites-html/09/demos/fruitpies.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/applepiesmall.jpg" width="100"></td>
+                        <td>Apple pie</td>
+                        <td>Our famous apple pie</td>
+                        <td>$14.95</td>
+                        <td><a href="applepie.html" target="_blank">View details</a></td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cranberrypiesmall.jpg" width="100"></td>
+                        <td>Cranberry pie</td>
+                        <td>A Christmas favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
+                        <td>Cherry pie</td>
+                        <td>A summer classic!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/peachpiesmall.jpg" width="100"></td>
+                        <td>Peach pie</td>
+                        <td>Sweet as peach</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/rhubarbpiesmall.jpg" width="100"></td>
+                        <td>Rhubarb Pie</td>
+                        <td>My God, so sweet!</td>
+                        <td>$21.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrypiesmall.jpg" width="100"></td>
+                        <td>Strawberry Pie</td>
+                        <td>Our delicious strawberry pie!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+          
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/09/demos/images/bethany-fullsize.jpg b/archive/building-websites-html/09/demos/images/bethany-fullsize.jpg
new file mode 100644
index 0000000..9e5fa2e
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/bethany-fullsize.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/bethany.jpg b/archive/building-websites-html/09/demos/images/bethany.jpg
new file mode 100644
index 0000000..68a9f42
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/bethany.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/bethanylogo.png b/archive/building-websites-html/09/demos/images/bethanylogo.png
new file mode 100644
index 0000000..c5a96de
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/bethanylogo.png differ
diff --git a/archive/building-websites-html/09/demos/images/bethanysmall.jpg b/archive/building-websites-html/09/demos/images/bethanysmall.jpg
new file mode 100644
index 0000000..7566223
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/bethanysmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/cake.svg b/archive/building-websites-html/09/demos/images/cake.svg
new file mode 100644
index 0000000..2a84187
--- /dev/null
+++ b/archive/building-websites-html/09/demos/images/cake.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 256 256">
+  <g>
+    <path id="path1" transform="rotate(0,128,128) translate(0,29.1359710693359) scale(8,8)  " fill="#4DCFA8" d="M31.575012,19.010061L31.219971,24.517019 6.3109741,24.716007 4.6300049,19.75505z M32,12.412107L31.651001,17.812072 4.2310181,18.56907 2.3359985,12.982109C12.327026,14.407101,26.648987,13.024117,32,12.412107z M13.682007,2.0002048L31.580017,11.192131C25.572021,11.823122,11.765015,13.053108,2.7249756,11.825121L5.9719849,8.9141495C6.6389771,9.4481423 7.4829712,9.7701304 8.4039917,9.7701304 10.549988,9.7701304 12.288025,8.0311463 12.288025,5.8851674 12.288025,5.1161764 12.062012,4.4021781 11.676025,3.799186z M1.7849731,0.00022094523C3.9299927,0.026221808,6.0369873,2.1772053,6.934021,3.2211878L7.0599976,3.1441925C8.5239868,2.3781924 10.330017,2.9431901 11.096008,4.4061759 11.862,5.8691614 11.296997,7.6731474 9.8339844,8.4401391 8.3709717,9.2061398 6.565979,8.6421492 5.8010254,7.1791632 5.2540283,6.1341584 5.3880005,4.9171732 6.039978,4.0261891 5.0789795,2.9181964 2.5009766,0.287206 0.67498779,1.536204L0,0.54921264C0.58099365,0.1522126,1.184021,-0.006782684,1.7849731,0.00022094523z" />
+  </g>
+</svg>
+
diff --git a/archive/building-websites-html/09/demos/images/pattern.png b/archive/building-websites-html/09/demos/images/pattern.png
new file mode 100644
index 0000000..5058a49
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/pattern.png differ
diff --git a/archive/building-websites-html/09/demos/images/pie.png b/archive/building-websites-html/09/demos/images/pie.png
new file mode 100644
index 0000000..6acc60d
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/pie.png differ
diff --git a/archive/building-websites-html/09/demos/images/products/applepie.jpg b/archive/building-websites-html/09/demos/images/products/applepie.jpg
new file mode 100644
index 0000000..24bb8a8
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/applepie.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/applepiesmall.jpg b/archive/building-websites-html/09/demos/images/products/applepiesmall.jpg
new file mode 100644
index 0000000..49e0187
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/applepiesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/blueberrycheesecakesmall.jpg b/archive/building-websites-html/09/demos/images/products/blueberrycheesecakesmall.jpg
new file mode 100644
index 0000000..4ddbe07
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/blueberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/cheesecake.jpg b/archive/building-websites-html/09/demos/images/products/cheesecake.jpg
new file mode 100644
index 0000000..3b380c8
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/cheesecake.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/cheesecakesmall.jpg b/archive/building-websites-html/09/demos/images/products/cheesecakesmall.jpg
new file mode 100644
index 0000000..5b3a911
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/cheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/cherrypiesmall copy.jpg b/archive/building-websites-html/09/demos/images/products/cherrypiesmall copy.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/cherrypiesmall copy.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/cherrypiesmall.jpg b/archive/building-websites-html/09/demos/images/products/cherrypiesmall.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/cherrypiesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/christmasapplepiesmall.jpg b/archive/building-websites-html/09/demos/images/products/christmasapplepiesmall.jpg
new file mode 100644
index 0000000..bf372d2
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/christmasapplepiesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/cranberrypiesmall.jpg b/archive/building-websites-html/09/demos/images/products/cranberrypiesmall.jpg
new file mode 100644
index 0000000..89abf4c
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/cranberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/peachpiesmall.jpg b/archive/building-websites-html/09/demos/images/products/peachpiesmall.jpg
new file mode 100644
index 0000000..662c793
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/peachpiesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/pumpkinpiesmall.jpg b/archive/building-websites-html/09/demos/images/products/pumpkinpiesmall.jpg
new file mode 100644
index 0000000..e2d7047
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/pumpkinpiesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/rhubarbpiesmall.jpg b/archive/building-websites-html/09/demos/images/products/rhubarbpiesmall.jpg
new file mode 100644
index 0000000..c46030f
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/rhubarbpiesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/strawberrycheesecakesmall.jpg b/archive/building-websites-html/09/demos/images/products/strawberrycheesecakesmall.jpg
new file mode 100644
index 0000000..2abebf6
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/strawberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/images/products/strawberrypiesmall.jpg b/archive/building-websites-html/09/demos/images/products/strawberrypiesmall.jpg
new file mode 100644
index 0000000..d5fccb7
Binary files /dev/null and b/archive/building-websites-html/09/demos/images/products/strawberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/09/demos/index.html b/archive/building-websites-html/09/demos/index.html
new file mode 100644
index 0000000..e65a147
--- /dev/null
+++ b/archive/building-websites-html/09/demos/index.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+                <li><a href="#promos">Promotions</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <article>
+
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>
+                </header>
+                <figure>
+                    <img src="images/bethany-fullsize.jpg" width="600" alt="Bethany in her pie shop" />
+                    <figcaption>Bethany in her pie shop</figcaption>
+                </figure>
+                <h2>Our history</h2>
+                <p>
+                    For many years, <b>Bethany</b> has been baking the most delicious pies at her home. In 2013, we
+                    opened our first
+                    store in Brussels (Belgium) in a cosy little street near the Grand Market. People from all over the
+                    world fell
+                    in love
+                    with the soft cakes, heavenly cheese cakes, spicy apple pies... <i>The store became a success in no
+                        time.</i>
+                    <br>In 2015, no less than 100 pies were sold every day and Bethany's Pie Shop moved into a larger
+                    building.
+                    After receiving many requests, it became clear that our next step was making it possible to order
+                    pies from the
+                    comfort of your own home and from anywhere in the world. You are now looking at the result of this:
+                    our very own
+                    webstore, making it possible to order Bethany's delicious pies whenever you feel like it!
+                </p>
+                <p>
+                    Bethany is famous for using only the best ingredients. This way, we can make sure
+                    that our pies are absolutely the best.
+                </p>
+
+                <p>Download our full <a href="downloads/Price list.zip">price list</a></p>
+            </article>
+
+            <section id="promos">
+                <h3 style="font-family:verdana;">&nbsp;Our weekly promotions</h3>
+                <h4>Cheese cake</h4>
+                $12.95 - serves 4<br>
+                <img src="https://gillcleerenpluralsight.blob.core.windows.net/files/cheesecake.jpg" width="500"
+                    alt="Cheese cake with strawberry" height="300" />
+            </section>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>&copy;2020 Bethany's Pie Shop - All rights reserved</small>
+            <p>Contact us via <a href="mailto:info@bethanyspieshop.com">email</a></p>
+            <p><small><a href="https://www.snowball.be">Created by Snowball</a></small></p>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/09/demos/pieoverview.html b/archive/building-websites-html/09/demos/pieoverview.html
new file mode 100644
index 0000000..28e3aa3
--- /dev/null
+++ b/archive/building-websites-html/09/demos/pieoverview.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
+                        <td>Cheese cake</td>
+                        <td>Plain cheese cake. Plain pleasure.</td>
+                        <td>$12.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/applepiesmall.jpg" width="100"></td>
+                        <td>Apple pie</td>
+                        <td>Our famous apple pie</td>
+                        <td>$14.95</td>
+                        <td><a href="applepie.html" target="_blank">View details</a></td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cranberrypiesmall.jpg" width="100"></td>
+                        <td>Cranberry pie</td>
+                        <td>A Christmas favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
+                        <td>Cherry pie</td>
+                        <td>A summer classic!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/peachpiesmall.jpg" width="100"></td>
+                        <td>Peach pie</td>
+                        <td>Sweet as peach</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
+                        <td>Pumpkin pie</td>
+                        <td>Our Halloween favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/christmasapplepiesmall.jpg" width="100"></td>
+                        <td>Christmas apple pie</td>
+                        <td>Happy holidays with this pie!</td>
+                        <td>$19.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/blueberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Blueberry cheese cake</td>
+                        <td>You'll love it!</td>
+                        <td>$17.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/rhubarbpiesmall.jpg" width="100"></td>
+                        <td>Rhubarb Pie</td>
+                        <td>My God, so sweet!</td>
+                        <td>$21.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrypiesmall.jpg" width="100"></td>
+                        <td>Strawberry Pie</td>
+                        <td>Our delicious strawberry pie!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Strawberry Cheese Cake</td>
+                        <td>One of the best cheese cakes you'll ever find!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/09/demos/seasonalpies.html b/archive/building-websites-html/09/demos/seasonalpies.html
new file mode 100644
index 0000000..c3d5566
--- /dev/null
+++ b/archive/building-websites-html/09/demos/seasonalpies.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
+                        <td>Pumpkin pie</td>
+                        <td>Our Halloween favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/christmasapplepiesmall.jpg" width="100"></td>
+                        <td>Christmas apple pie</td>
+                        <td>Happy holidays with this pie!</td>
+                        <td>$19.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/10/demos/about.html b/archive/building-websites-html/10/demos/about.html
new file mode 100644
index 0000000..ae00375
--- /dev/null
+++ b/archive/building-websites-html/10/demos/about.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" href="styles.css">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+                <li><a href="#promos">Promotions</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <article>
+
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>
+                </header>
+                <p>In the video below, you can see how we create our pies.</p>
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/rmMwNp_k36I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+            </article>
+
+
+            
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>&copy;2020 Bethany's Pie Shop - All rights reserved</small>
+            <p>Contact us via <a href="mailto:info@bethanyspieshop.com">email</a></p>
+            <p><small><a href="https://www.snowball.be">Created by Snowball</a></small></p>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/10/demos/applepie.html b/archive/building-websites-html/10/demos/applepie.html
new file mode 100644
index 0000000..04a6e2e
--- /dev/null
+++ b/archive/building-websites-html/10/demos/applepie.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+                <input type="search" class="searchbox" placeholder="Search our store" />
+            </header>
+        </aside>
+        <main id="main">
+            <article>
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Apple pie</h1>
+                </header>
+                <figure>
+                    <a href="images/products/applepie.jpg"><img src="images/products/applepie.jpg" width="600" alt="Apple pie" /></a>
+                    <figcaption>Our world-famous apple pie</figcaption>
+                </figure>
+
+
+                <div style="background-color:#f8f4f1;">
+                    <strong>Price: $12.95</strong>
+                    <h2>Description</h2>
+                    <p>
+                        Bethany received the recipe for this delicious apple pie from her grandmother. At the age of 5,
+                        she
+                        was
+                        already baking this <em>all-American traditional apple</em> pie at her home.
+                        As the recipe goes a long way back, it contains the most typical ingredients used for so many
+                        years
+                        to
+                        make this classic even today one of our most popular pies.
+                    </p>
+                    <p>
+                        This pie is available <strong>every day</strong> and comes in 2 sizes. <span
+                            style="color:#4dcfa8; font-weight:bold ;">You can serve it cold or warm it for 4 minutes
+                            in
+                            the microwave to give it an extra touch. </span>Your house will smell just like Bethany's
+                        Shop!
+                    </p>
+                    <p>
+                        <blockquote>
+                            This recipe has been in our family for generations. We hope you enjoy this pie as we do -
+                            Bethany
+                        </blockquote>
+                    </p>
+
+                    <p><small>Note that some ingredients make be are dangerous if you have certain allergies. See the
+                            list
+                            of ingredients below.</small></p>
+                    <p><small>Bethany cares about the environment and we try to limit our CO<sub>2</sub> emissions as
+                            much
+                            as possible. See our terms page for more info.</small></p>
+                    <hr>
+
+                    <h2>How we make this pie</h2>
+                    <ol>
+                        <li>
+                            First, we combine sugar, flour and spices. We toss the apples with some lemon juice and add
+                            sugar.
+                        </li>
+                        <li>We then create the bottom crust and fill that with apple mixture. We put some butter on
+                            that. We
+                            then roll remaining crust to fit top of pie.
+                        </li>
+                        <li>Then we beat the eggs white until we have a foamy mix. That is then brushed over the crust.
+                            We
+                            sprinkle some extra sugar.
+                        </li>
+                        <li>Then the pie goes into the oven at 360° for 35 minutes. When ready, we let it cool on a wire
+                            rack.
+                        </li>
+                    </ol>
+
+                    <ol start="5">
+                        <li>If something goes wrong, we start all over again!</li>
+                    </ol>
+
+                    <h3>Ingredients</h3>
+                    <p>Please note that this item contains the following items and possible allergens!</p>
+                    <ul>
+                        <li>Butter</li>
+                        <li>Eggs</li>
+                        <li>Sugar</li>
+                        <ul>
+                            <li>Regular sugar</li>
+                            <li>Brown sugar</li>
+                            <li>Caster sugar</li>
+                        </ul>
+                        <li>Flour</li>
+                        <li>Cinnamon</li>
+                        <li>Ginger</li>
+                        <li>Nutmeg</li>
+                        <li>Apples</li>
+                        <li>Lemons</li>
+                    </ul>
+                </div>
+
+
+            </article>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/10/demos/cheesecakes.html b/archive/building-websites-html/10/demos/cheesecakes.html
new file mode 100644
index 0000000..ea2188e
--- /dev/null
+++ b/archive/building-websites-html/10/demos/cheesecakes.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
+                        <td>Cheese cake</td>
+                        <td>Plain cheese cake. Plain pleasure.</td>
+                        <td>$12.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/blueberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Blueberry cheese cake</td>
+                        <td>You'll love it!</td>
+                        <td>$17.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Strawberry Cheese Cake</td>
+                        <td>One of the best cheese cakes you'll ever find!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+          
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/10/demos/favicon.png b/archive/building-websites-html/10/demos/favicon.png
new file mode 100644
index 0000000..625c701
Binary files /dev/null and b/archive/building-websites-html/10/demos/favicon.png differ
diff --git a/archive/building-websites-html/10/demos/fruitpies.html b/archive/building-websites-html/10/demos/fruitpies.html
new file mode 100644
index 0000000..0f1604e
--- /dev/null
+++ b/archive/building-websites-html/10/demos/fruitpies.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/applepiesmall.jpg" width="100"></td>
+                        <td>Apple pie</td>
+                        <td>Our famous apple pie</td>
+                        <td>$14.95</td>
+                        <td><a href="applepie.html" target="_blank">View details</a></td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cranberrypiesmall.jpg" width="100"></td>
+                        <td>Cranberry pie</td>
+                        <td>A Christmas favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
+                        <td>Cherry pie</td>
+                        <td>A summer classic!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/peachpiesmall.jpg" width="100"></td>
+                        <td>Peach pie</td>
+                        <td>Sweet as peach</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/rhubarbpiesmall.jpg" width="100"></td>
+                        <td>Rhubarb Pie</td>
+                        <td>My God, so sweet!</td>
+                        <td>$21.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrypiesmall.jpg" width="100"></td>
+                        <td>Strawberry Pie</td>
+                        <td>Our delicious strawberry pie!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+       
+        </main>
+
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/10/demos/images/bethany-fullsize.jpg b/archive/building-websites-html/10/demos/images/bethany-fullsize.jpg
new file mode 100644
index 0000000..9e5fa2e
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/bethany-fullsize.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/bethany.jpg b/archive/building-websites-html/10/demos/images/bethany.jpg
new file mode 100644
index 0000000..68a9f42
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/bethany.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/bethanylogo.png b/archive/building-websites-html/10/demos/images/bethanylogo.png
new file mode 100644
index 0000000..c5a96de
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/bethanylogo.png differ
diff --git a/archive/building-websites-html/10/demos/images/bethanysmall.jpg b/archive/building-websites-html/10/demos/images/bethanysmall.jpg
new file mode 100644
index 0000000..7566223
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/bethanysmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/cake.svg b/archive/building-websites-html/10/demos/images/cake.svg
new file mode 100644
index 0000000..2a84187
--- /dev/null
+++ b/archive/building-websites-html/10/demos/images/cake.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 256 256">
+  <g>
+    <path id="path1" transform="rotate(0,128,128) translate(0,29.1359710693359) scale(8,8)  " fill="#4DCFA8" d="M31.575012,19.010061L31.219971,24.517019 6.3109741,24.716007 4.6300049,19.75505z M32,12.412107L31.651001,17.812072 4.2310181,18.56907 2.3359985,12.982109C12.327026,14.407101,26.648987,13.024117,32,12.412107z M13.682007,2.0002048L31.580017,11.192131C25.572021,11.823122,11.765015,13.053108,2.7249756,11.825121L5.9719849,8.9141495C6.6389771,9.4481423 7.4829712,9.7701304 8.4039917,9.7701304 10.549988,9.7701304 12.288025,8.0311463 12.288025,5.8851674 12.288025,5.1161764 12.062012,4.4021781 11.676025,3.799186z M1.7849731,0.00022094523C3.9299927,0.026221808,6.0369873,2.1772053,6.934021,3.2211878L7.0599976,3.1441925C8.5239868,2.3781924 10.330017,2.9431901 11.096008,4.4061759 11.862,5.8691614 11.296997,7.6731474 9.8339844,8.4401391 8.3709717,9.2061398 6.565979,8.6421492 5.8010254,7.1791632 5.2540283,6.1341584 5.3880005,4.9171732 6.039978,4.0261891 5.0789795,2.9181964 2.5009766,0.287206 0.67498779,1.536204L0,0.54921264C0.58099365,0.1522126,1.184021,-0.006782684,1.7849731,0.00022094523z" />
+  </g>
+</svg>
+
diff --git a/archive/building-websites-html/10/demos/images/pattern.png b/archive/building-websites-html/10/demos/images/pattern.png
new file mode 100644
index 0000000..5058a49
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/pattern.png differ
diff --git a/archive/building-websites-html/10/demos/images/pie.png b/archive/building-websites-html/10/demos/images/pie.png
new file mode 100644
index 0000000..6acc60d
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/pie.png differ
diff --git a/archive/building-websites-html/10/demos/images/products/applepie.jpg b/archive/building-websites-html/10/demos/images/products/applepie.jpg
new file mode 100644
index 0000000..24bb8a8
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/applepie.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/applepiesmall.jpg b/archive/building-websites-html/10/demos/images/products/applepiesmall.jpg
new file mode 100644
index 0000000..49e0187
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/applepiesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/blueberrycheesecakesmall.jpg b/archive/building-websites-html/10/demos/images/products/blueberrycheesecakesmall.jpg
new file mode 100644
index 0000000..4ddbe07
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/blueberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/cheesecake.jpg b/archive/building-websites-html/10/demos/images/products/cheesecake.jpg
new file mode 100644
index 0000000..3b380c8
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/cheesecake.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/cheesecakesmall.jpg b/archive/building-websites-html/10/demos/images/products/cheesecakesmall.jpg
new file mode 100644
index 0000000..5b3a911
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/cheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/cherrypiesmall copy.jpg b/archive/building-websites-html/10/demos/images/products/cherrypiesmall copy.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/cherrypiesmall copy.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/cherrypiesmall.jpg b/archive/building-websites-html/10/demos/images/products/cherrypiesmall.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/cherrypiesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/christmasapplepiesmall.jpg b/archive/building-websites-html/10/demos/images/products/christmasapplepiesmall.jpg
new file mode 100644
index 0000000..bf372d2
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/christmasapplepiesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/cranberrypiesmall.jpg b/archive/building-websites-html/10/demos/images/products/cranberrypiesmall.jpg
new file mode 100644
index 0000000..89abf4c
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/cranberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/peachpiesmall.jpg b/archive/building-websites-html/10/demos/images/products/peachpiesmall.jpg
new file mode 100644
index 0000000..662c793
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/peachpiesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/pumpkinpiesmall.jpg b/archive/building-websites-html/10/demos/images/products/pumpkinpiesmall.jpg
new file mode 100644
index 0000000..e2d7047
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/pumpkinpiesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/rhubarbpiesmall.jpg b/archive/building-websites-html/10/demos/images/products/rhubarbpiesmall.jpg
new file mode 100644
index 0000000..c46030f
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/rhubarbpiesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/strawberrycheesecakesmall.jpg b/archive/building-websites-html/10/demos/images/products/strawberrycheesecakesmall.jpg
new file mode 100644
index 0000000..2abebf6
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/strawberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/images/products/strawberrypiesmall.jpg b/archive/building-websites-html/10/demos/images/products/strawberrypiesmall.jpg
new file mode 100644
index 0000000..d5fccb7
Binary files /dev/null and b/archive/building-websites-html/10/demos/images/products/strawberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/10/demos/index.html b/archive/building-websites-html/10/demos/index.html
new file mode 100644
index 0000000..b115cbe
--- /dev/null
+++ b/archive/building-websites-html/10/demos/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" href="styles.css">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+                <li><a href="#promos">Promotions</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <article>
+
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>
+                </header>
+                <figure>
+                    <img src="images/bethany-fullsize.jpg" width="600" alt="Bethany in her pie shop" />
+                    <figcaption>Bethany in her pie shop</figcaption>
+                </figure>
+                <h2>Our history</h2>
+                <p>
+                    For many years, <b>Bethany</b> has been baking the most delicious pies at her home. In 2013, we
+                    opened our first
+                    store in Brussels (Belgium) in a cosy little street near the Grand Market. People from all over the
+                    world fell
+                    in love
+                    with the soft cakes, heavenly cheese cakes, spicy apple pies... <i>The store became a success in no
+                        time.</i>
+                    <br>In 2015, no less than 100 pies were sold every day and Bethany's Pie Shop moved into a larger
+                    building.
+                    After receiving many requests, it became clear that our next step was making it possible to order
+                    pies from the
+                    comfort of your own home and from anywhere in the world. You are now looking at the result of this:
+                    our very own
+                    webstore, making it possible to order Bethany's delicious pies whenever you feel like it!
+                </p>
+                <p>
+                    Bethany is famous for using only the best ingredients. This way, we can make sure
+                    that our pies are absolutely the best.
+                </p>
+
+                <p>Download our full <a href="downloads/Price list.zip">price list</a></p>
+            </article>
+
+            <section id="promos">
+                <h3 style="font-family:verdana;">&nbsp;Our weekly promotions</h3>
+                <h4>Cheese cake</h4>
+                $12.95 - serves 4<br>
+                <img src="https://gillcleerenpluralsight.blob.core.windows.net/files/cheesecake.jpg" width="500"
+                    alt="Cheese cake with strawberry" height="300" />
+            </section>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>&copy;2020 Bethany's Pie Shop - All rights reserved</small>
+            <p>Contact us via <a href="mailto:info@bethanyspieshop.com">email</a></p>
+            <p><small><a href="https://www.snowball.be">Created by Snowball</a></small></p>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/10/demos/pieoverview.html b/archive/building-websites-html/10/demos/pieoverview.html
new file mode 100644
index 0000000..28e3aa3
--- /dev/null
+++ b/archive/building-websites-html/10/demos/pieoverview.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
+                        <td>Cheese cake</td>
+                        <td>Plain cheese cake. Plain pleasure.</td>
+                        <td>$12.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/applepiesmall.jpg" width="100"></td>
+                        <td>Apple pie</td>
+                        <td>Our famous apple pie</td>
+                        <td>$14.95</td>
+                        <td><a href="applepie.html" target="_blank">View details</a></td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cranberrypiesmall.jpg" width="100"></td>
+                        <td>Cranberry pie</td>
+                        <td>A Christmas favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
+                        <td>Cherry pie</td>
+                        <td>A summer classic!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/peachpiesmall.jpg" width="100"></td>
+                        <td>Peach pie</td>
+                        <td>Sweet as peach</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
+                        <td>Pumpkin pie</td>
+                        <td>Our Halloween favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/christmasapplepiesmall.jpg" width="100"></td>
+                        <td>Christmas apple pie</td>
+                        <td>Happy holidays with this pie!</td>
+                        <td>$19.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/blueberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Blueberry cheese cake</td>
+                        <td>You'll love it!</td>
+                        <td>$17.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/rhubarbpiesmall.jpg" width="100"></td>
+                        <td>Rhubarb Pie</td>
+                        <td>My God, so sweet!</td>
+                        <td>$21.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrypiesmall.jpg" width="100"></td>
+                        <td>Strawberry Pie</td>
+                        <td>Our delicious strawberry pie!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Strawberry Cheese Cake</td>
+                        <td>One of the best cheese cakes you'll ever find!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/10/demos/seasonalpies.html b/archive/building-websites-html/10/demos/seasonalpies.html
new file mode 100644
index 0000000..c3d5566
--- /dev/null
+++ b/archive/building-websites-html/10/demos/seasonalpies.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
+                        <td>Pumpkin pie</td>
+                        <td>Our Halloween favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/christmasapplepiesmall.jpg" width="100"></td>
+                        <td>Christmas apple pie</td>
+                        <td>Happy holidays with this pie!</td>
+                        <td>$19.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/10/demos/styles.css b/archive/building-websites-html/10/demos/styles.css
new file mode 100644
index 0000000..de56e18
--- /dev/null
+++ b/archive/building-websites-html/10/demos/styles.css
@@ -0,0 +1,71 @@
+body {
+    margin-top: 0px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #e6e4d9;
+    background-image: url('images/pattern.png');
+}
+
+#mainheader {
+    background-color: #a593c2;
+}
+
+#leftmenu {
+    float: left;
+    width: 30%;
+    margin-bottom: 20px;
+}
+
+nav {
+    height: 60px;
+    width: 1000px;
+    margin: 0 auto 20px;
+}
+
+.searchbox {
+    padding: 5px;
+    margin: 10px 10px;
+    width: 200px;
+}
+
+#main {
+    float: right;
+    width: 70%;
+    margin-bottom: 20px;
+}
+
+footer {
+    clear: both;
+    width: 100%;
+}
+
+header,
+section,
+footer,
+aside,
+nav,
+main,
+article,
+figure {
+    display: block;
+}
+
+nav>ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav>ul>li {
+    float: left;
+}
+
+nav>ul>li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/archive/building-websites-html/10/including-external-content-using-iframe-slides.pdf b/archive/building-websites-html/10/including-external-content-using-iframe-slides.pdf
new file mode 100644
index 0000000..0ef4a90
Binary files /dev/null and b/archive/building-websites-html/10/including-external-content-using-iframe-slides.pdf differ
diff --git a/archive/building-websites-html/11/demos/about.html b/archive/building-websites-html/11/demos/about.html
new file mode 100644
index 0000000..280cc9e
--- /dev/null
+++ b/archive/building-websites-html/11/demos/about.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" href="styles.css">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+                <li><a href="#promos">Promotions</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <article>
+
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>
+                </header>
+                <p>In the video below, you can see how we create our pies.</p>
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/rmMwNp_k36I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+            </article>
+
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>&copy;2020 Bethany's Pie Shop - All rights reserved</small>
+            <p>Contact us via <a href="mailto:info@bethanyspieshop.com">email</a></p>
+            <p><small><a href="https://www.snowball.be">Created by Snowball</a></small></p>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/11/demos/applepie.html b/archive/building-websites-html/11/demos/applepie.html
new file mode 100644
index 0000000..f364971
--- /dev/null
+++ b/archive/building-websites-html/11/demos/applepie.html
@@ -0,0 +1,233 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+
+    <script>
+
+        function save() {
+            localStorage.setItem("applepie", true);
+        }
+
+        window.onload = function () {
+            var favorite = document.getElementById('favorite');
+            if (window.localStorage) {
+                var storage = window.localStorage;
+                if (storage.getItem('applepie') == 'true') {
+                    favorite.innerHTML = "Apple pie is one of your favorites";
+                }
+            }
+        }
+    </script>
+
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+                <input type="search" class="searchbox" placeholder="Search our store" />
+            </header>
+        </aside>
+        <main id="main">
+            <article>
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Apple pie</h1>
+                </header>
+                <figure>
+                    <a href="images/products/applepie.jpg"><img src="images/products/applepie.jpg" width="600"
+                            alt="Apple pie" /></a>
+                    <figcaption>Our world-famous apple pie</figcaption>
+                </figure>
+
+                <button onclick="save()" type="button">Save as favorite</button>
+                <span id="favorite"></span>
+
+                <div style="background-color:#f8f4f1;">
+                    <strong>Price: $12.95</strong>
+                    <h2>Description</h2>
+                    <p>
+                        Bethany received the recipe for this delicious apple pie from her grandmother. At the age of 5,
+                        she
+                        was
+                        already baking this <em>all-American traditional apple</em> pie at her home.
+                        As the recipe goes a long way back, it contains the most typical ingredients used for so many
+                        years
+                        to
+                        make this classic even today one of our most popular pies.
+                    </p>
+                    <p>
+                        This pie is available <strong>every day</strong> and comes in 2 sizes. <span
+                            style="color:#4dcfa8; font-weight:bold ;">You can serve it cold or warm it for 4 minutes
+                            in
+                            the microwave to give it an extra touch. </span>Your house will smell just like Bethany's
+                        Shop!
+                    </p>
+                    <p>
+                        <blockquote>
+                            This recipe has been in our family for generations. We hope you enjoy this pie as we do -
+                            Bethany
+                        </blockquote>
+                    </p>
+
+                    <p><small>Note that some ingredients make be are dangerous if you have certain allergies. See the
+                            list
+                            of ingredients below.</small></p>
+                    <p><small>Bethany cares about the environment and we try to limit our CO<sub>2</sub> emissions as
+                            much
+                            as possible. See our terms page for more info.</small></p>
+                    <hr>
+
+                    <h2>How we make this pie</h2>
+                    <ol>
+                        <li>
+                            First, we combine sugar, flour and spices. We toss the apples with some lemon juice and add
+                            sugar.
+                        </li>
+                        <li>We then create the bottom crust and fill that with apple mixture. We put some butter on
+                            that. We
+                            then roll remaining crust to fit top of pie.
+                        </li>
+                        <li>Then we beat the eggs white until we have a foamy mix. That is then brushed over the crust.
+                            We
+                            sprinkle some extra sugar.
+                        </li>
+                        <li>Then the pie goes into the oven at 360° for 35 minutes. When ready, we let it cool on a wire
+                            rack.
+                        </li>
+                    </ol>
+
+                    <ol start="5">
+                        <li>If something goes wrong, we start all over again!</li>
+                    </ol>
+
+                    <h3>Ingredients</h3>
+                    <p>Please note that this item contains the following items and possible allergens!</p>
+                    <ul>
+                        <li>Butter</li>
+                        <li>Eggs</li>
+                        <li>Sugar</li>
+                        <ul>
+                            <li>Regular sugar</li>
+                            <li>Brown sugar</li>
+                            <li>Caster sugar</li>
+                        </ul>
+                        <li>Flour</li>
+                        <li>Cinnamon</li>
+                        <li>Ginger</li>
+                        <li>Nutmeg</li>
+                        <li>Apples</li>
+                        <li>Lemons</li>
+                    </ul>
+                </div>
+
+
+            </article>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/11/demos/cheesecakes.html b/archive/building-websites-html/11/demos/cheesecakes.html
new file mode 100644
index 0000000..23ad346
--- /dev/null
+++ b/archive/building-websites-html/11/demos/cheesecakes.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
+                        <td>Cheese cake</td>
+                        <td>Plain cheese cake. Plain pleasure.</td>
+                        <td>$12.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/blueberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Blueberry cheese cake</td>
+                        <td>You'll love it!</td>
+                        <td>$17.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Strawberry Cheese Cake</td>
+                        <td>One of the best cheese cakes you'll ever find!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+           
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/11/demos/favicon.png b/archive/building-websites-html/11/demos/favicon.png
new file mode 100644
index 0000000..625c701
Binary files /dev/null and b/archive/building-websites-html/11/demos/favicon.png differ
diff --git a/archive/building-websites-html/11/demos/fruitpies.html b/archive/building-websites-html/11/demos/fruitpies.html
new file mode 100644
index 0000000..ceacd26
--- /dev/null
+++ b/archive/building-websites-html/11/demos/fruitpies.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/applepiesmall.jpg" width="100"></td>
+                        <td>Apple pie</td>
+                        <td>Our famous apple pie</td>
+                        <td>$14.95</td>
+                        <td><a href="applepie.html" target="_blank">View details</a></td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cranberrypiesmall.jpg" width="100"></td>
+                        <td>Cranberry pie</td>
+                        <td>A Christmas favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
+                        <td>Cherry pie</td>
+                        <td>A summer classic!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/peachpiesmall.jpg" width="100"></td>
+                        <td>Peach pie</td>
+                        <td>Sweet as peach</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/rhubarbpiesmall.jpg" width="100"></td>
+                        <td>Rhubarb Pie</td>
+                        <td>My God, so sweet!</td>
+                        <td>$21.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrypiesmall.jpg" width="100"></td>
+                        <td>Strawberry Pie</td>
+                        <td>Our delicious strawberry pie!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+         
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/11/demos/images/bethany-fullsize.jpg b/archive/building-websites-html/11/demos/images/bethany-fullsize.jpg
new file mode 100644
index 0000000..9e5fa2e
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/bethany-fullsize.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/bethany.jpg b/archive/building-websites-html/11/demos/images/bethany.jpg
new file mode 100644
index 0000000..68a9f42
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/bethany.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/bethanylogo.png b/archive/building-websites-html/11/demos/images/bethanylogo.png
new file mode 100644
index 0000000..c5a96de
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/bethanylogo.png differ
diff --git a/archive/building-websites-html/11/demos/images/bethanysmall.jpg b/archive/building-websites-html/11/demos/images/bethanysmall.jpg
new file mode 100644
index 0000000..7566223
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/bethanysmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/cake.svg b/archive/building-websites-html/11/demos/images/cake.svg
new file mode 100644
index 0000000..2a84187
--- /dev/null
+++ b/archive/building-websites-html/11/demos/images/cake.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 256 256">
+  <g>
+    <path id="path1" transform="rotate(0,128,128) translate(0,29.1359710693359) scale(8,8)  " fill="#4DCFA8" d="M31.575012,19.010061L31.219971,24.517019 6.3109741,24.716007 4.6300049,19.75505z M32,12.412107L31.651001,17.812072 4.2310181,18.56907 2.3359985,12.982109C12.327026,14.407101,26.648987,13.024117,32,12.412107z M13.682007,2.0002048L31.580017,11.192131C25.572021,11.823122,11.765015,13.053108,2.7249756,11.825121L5.9719849,8.9141495C6.6389771,9.4481423 7.4829712,9.7701304 8.4039917,9.7701304 10.549988,9.7701304 12.288025,8.0311463 12.288025,5.8851674 12.288025,5.1161764 12.062012,4.4021781 11.676025,3.799186z M1.7849731,0.00022094523C3.9299927,0.026221808,6.0369873,2.1772053,6.934021,3.2211878L7.0599976,3.1441925C8.5239868,2.3781924 10.330017,2.9431901 11.096008,4.4061759 11.862,5.8691614 11.296997,7.6731474 9.8339844,8.4401391 8.3709717,9.2061398 6.565979,8.6421492 5.8010254,7.1791632 5.2540283,6.1341584 5.3880005,4.9171732 6.039978,4.0261891 5.0789795,2.9181964 2.5009766,0.287206 0.67498779,1.536204L0,0.54921264C0.58099365,0.1522126,1.184021,-0.006782684,1.7849731,0.00022094523z" />
+  </g>
+</svg>
+
diff --git a/archive/building-websites-html/11/demos/images/pattern.png b/archive/building-websites-html/11/demos/images/pattern.png
new file mode 100644
index 0000000..5058a49
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/pattern.png differ
diff --git a/archive/building-websites-html/11/demos/images/pie.png b/archive/building-websites-html/11/demos/images/pie.png
new file mode 100644
index 0000000..6acc60d
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/pie.png differ
diff --git a/archive/building-websites-html/11/demos/images/products/applepie.jpg b/archive/building-websites-html/11/demos/images/products/applepie.jpg
new file mode 100644
index 0000000..24bb8a8
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/applepie.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/applepiesmall.jpg b/archive/building-websites-html/11/demos/images/products/applepiesmall.jpg
new file mode 100644
index 0000000..49e0187
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/applepiesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/blueberrycheesecakesmall.jpg b/archive/building-websites-html/11/demos/images/products/blueberrycheesecakesmall.jpg
new file mode 100644
index 0000000..4ddbe07
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/blueberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/cheesecake.jpg b/archive/building-websites-html/11/demos/images/products/cheesecake.jpg
new file mode 100644
index 0000000..3b380c8
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/cheesecake.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/cheesecakesmall.jpg b/archive/building-websites-html/11/demos/images/products/cheesecakesmall.jpg
new file mode 100644
index 0000000..5b3a911
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/cheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/cherrypiesmall copy.jpg b/archive/building-websites-html/11/demos/images/products/cherrypiesmall copy.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/cherrypiesmall copy.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/cherrypiesmall.jpg b/archive/building-websites-html/11/demos/images/products/cherrypiesmall.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/cherrypiesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/christmasapplepiesmall.jpg b/archive/building-websites-html/11/demos/images/products/christmasapplepiesmall.jpg
new file mode 100644
index 0000000..bf372d2
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/christmasapplepiesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/cranberrypiesmall.jpg b/archive/building-websites-html/11/demos/images/products/cranberrypiesmall.jpg
new file mode 100644
index 0000000..89abf4c
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/cranberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/peachpiesmall.jpg b/archive/building-websites-html/11/demos/images/products/peachpiesmall.jpg
new file mode 100644
index 0000000..662c793
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/peachpiesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/pumpkinpiesmall.jpg b/archive/building-websites-html/11/demos/images/products/pumpkinpiesmall.jpg
new file mode 100644
index 0000000..e2d7047
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/pumpkinpiesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/rhubarbpiesmall.jpg b/archive/building-websites-html/11/demos/images/products/rhubarbpiesmall.jpg
new file mode 100644
index 0000000..c46030f
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/rhubarbpiesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/strawberrycheesecakesmall.jpg b/archive/building-websites-html/11/demos/images/products/strawberrycheesecakesmall.jpg
new file mode 100644
index 0000000..2abebf6
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/strawberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/images/products/strawberrypiesmall.jpg b/archive/building-websites-html/11/demos/images/products/strawberrypiesmall.jpg
new file mode 100644
index 0000000..d5fccb7
Binary files /dev/null and b/archive/building-websites-html/11/demos/images/products/strawberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/11/demos/index.html b/archive/building-websites-html/11/demos/index.html
new file mode 100644
index 0000000..75ea495
--- /dev/null
+++ b/archive/building-websites-html/11/demos/index.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" href="styles.css">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+                <li><a href="#promos">Promotions</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <article>
+
+                <header>
+                    <h1 style="font-size:35px;color:#a593c2">Welcome to Bethany's Pie Shop</h1>
+                </header>
+                <figure>
+                    <img src="images/bethany-fullsize.jpg" width="600" alt="Bethany in her pie shop" />
+                    <figcaption>Bethany in her pie shop</figcaption>
+                </figure>
+                <h2>Our history</h2>
+                <p>
+                    For many years, <b>Bethany</b> has been baking the most delicious pies at her home. In 2013, we
+                    opened our first
+                    store in Brussels (Belgium) in a cosy little street near the Grand Market. People from all over the
+                    world fell
+                    in love
+                    with the soft cakes, heavenly cheese cakes, spicy apple pies... <i>The store became a success in no
+                        time.</i>
+                    <br>In 2015, no less than 100 pies were sold every day and Bethany's Pie Shop moved into a larger
+                    building.
+                    After receiving many requests, it became clear that our next step was making it possible to order
+                    pies from the
+                    comfort of your own home and from anywhere in the world. You are now looking at the result of this:
+                    our very own
+                    webstore, making it possible to order Bethany's delicious pies whenever you feel like it!
+                </p>
+                <p>
+                    Bethany is famous for using only the best ingredients. This way, we can make sure
+                    that our pies are absolutely the best.
+                </p>
+
+                <p>Download our full <a href="downloads/Price list.zip">price list</a></p>
+            </article>
+
+            <section id="promos">
+                <h3 style="font-family:verdana;">&nbsp;Our weekly promotions</h3>
+                <h4>Cheese cake</h4>
+                $12.95 - serves 4<br>
+                <img src="https://gillcleerenpluralsight.blob.core.windows.net/files/cheesecake.jpg" width="500"
+                    alt="Cheese cake with strawberry" height="300" />
+            </section>
+
+         
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>&copy;2020 Bethany's Pie Shop - All rights reserved</small>
+            <p>Contact us via <a href="mailto:info@bethanyspieshop.com">email</a></p>
+            <p><small><a href="https://www.snowball.be">Created by Snowball</a></small></p>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/11/demos/pieoverview.html b/archive/building-websites-html/11/demos/pieoverview.html
new file mode 100644
index 0000000..032f301
--- /dev/null
+++ b/archive/building-websites-html/11/demos/pieoverview.html
@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/cheesecakesmall.jpg" width="100"></td>
+                        <td>Cheese cake</td>
+                        <td>Plain cheese cake. Plain pleasure.</td>
+                        <td>$12.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/applepiesmall.jpg" width="100"></td>
+                        <td>Apple pie</td>
+                        <td>Our famous apple pie</td>
+                        <td>$14.95</td>
+                        <td><a href="applepie.html" target="_blank">View details</a></td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cranberrypiesmall.jpg" width="100"></td>
+                        <td>Cranberry pie</td>
+                        <td>A Christmas favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
+                        <td>Cherry pie</td>
+                        <td>A summer classic!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/peachpiesmall.jpg" width="100"></td>
+                        <td>Peach pie</td>
+                        <td>Sweet as peach</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
+                        <td>Pumpkin pie</td>
+                        <td>Our Halloween favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/christmasapplepiesmall.jpg" width="100"></td>
+                        <td>Christmas apple pie</td>
+                        <td>Happy holidays with this pie!</td>
+                        <td>$19.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/blueberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Blueberry cheese cake</td>
+                        <td>You'll love it!</td>
+                        <td>$17.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/rhubarbpiesmall.jpg" width="100"></td>
+                        <td>Rhubarb Pie</td>
+                        <td>My God, so sweet!</td>
+                        <td>$21.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrypiesmall.jpg" width="100"></td>
+                        <td>Strawberry Pie</td>
+                        <td>Our delicious strawberry pie!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Strawberry Cheese Cake</td>
+                        <td>One of the best cheese cakes you'll ever find!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+        
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/11/demos/seasonalpies.html b/archive/building-websites-html/11/demos/seasonalpies.html
new file mode 100644
index 0000000..aed8c2d
--- /dev/null
+++ b/archive/building-websites-html/11/demos/seasonalpies.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Welcome to Bethany' Pie Shop!</title>
+    <meta name="author" content="Bethany's Pie Shop">
+    <meta name="description" content="Store front for Bethany's Pie Shop">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+    <![endif]-->
+    <style>
+        body {
+            margin-top: 0px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin-left: auto;
+            margin-right: auto;
+            background-color: #e6e4d9;
+            background-image: url('images/pattern.png');
+        }
+
+        #mainheader {
+            background-color: #a593c2;
+        }
+
+        #leftmenu {
+            float: left;
+            width: 30%;
+            margin-bottom: 20px;
+        }
+
+        nav {
+            height: 60px;
+            width: 1000px;
+            margin: 0 auto 20px;
+        }
+
+        .searchbox {
+            padding: 5px;
+            margin: 10px 10px;
+            width: 200px;
+        }
+
+        #main {
+            float: right;
+            width: 70%;
+            margin-bottom: 20px;
+        }
+
+        footer {
+            clear: both;
+            width: 100%;
+        }
+
+        header,
+        section,
+        footer,
+        aside,
+        nav,
+        main,
+        article,
+        figure {
+            display: block;
+        }
+
+        table,
+        td,
+        th {
+            border: 1px solid black;
+            border-collapse: collapse;
+            padding: 5px;
+        }
+
+        nav>ul {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        nav>ul>li {
+            float: left;
+        }
+
+        nav>ul>li a {
+            display: block;
+            color: white;
+            text-align: center;
+            padding: 16px;
+            text-decoration: none;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="mainheader">
+        <nav>
+            <ul>
+                <li><img src="images/cake.svg" height="55" /></li>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="pieoverview.html">All pies</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div style="width:1000px;margin-left: auto;margin-right: auto;">
+        <aside id="leftmenu">
+            <a href="index.html"><img src="images/bethanylogo.png" /></a>
+            <header>
+                <h4 style="text-align: center;">Browse our pies</h4>
+            </header>
+            <ul>
+                <li><a href="pieoverview.html">All pies</a></li>
+                <li><a href="cheesecakes.html">Cheese cakes</a></li>
+                <li><a href="fruitpies.html">Fruit pies</a></li>
+                <li><a href="seasonalpies.html">Seasonal pies</a></li>
+            </ul>
+            <input type="search" class="searchbox" placeholder="Search our store" />
+
+        </aside>
+        <main id="main">
+            <table >
+                <caption>
+                    Our delicious selection of pies for you to enjoy!
+                </caption>
+                <thead>
+                    <tr>
+                        <th>Image</th>
+                        <th>Pie name</th>
+                        <th>Description</th>
+                        <th>Price</th>
+                        <th>Details</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
+                        <td>Pumpkin pie</td>
+                        <td>Our Halloween favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/christmasapplepiesmall.jpg" width="100"></td>
+                        <td>Christmas apple pie</td>
+                        <td>Happy holidays with this pie!</td>
+                        <td>$19.95</td>
+                        <td>View details</td>
+                    </tr>
+                </tbody>
+            </table>
+
+         
+        </main>
+        <footer>
+            <p>Our address is <address>Bethany's Pie Shop - Bakery Street 555 Brussels Belgium</address>
+            </p>
+            <small>2020 Bethany's Pie Shop - All rights reserved</small>
+        </footer>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/archive/building-websites-html/11/demos/styles.css b/archive/building-websites-html/11/demos/styles.css
new file mode 100644
index 0000000..de56e18
--- /dev/null
+++ b/archive/building-websites-html/11/demos/styles.css
@@ -0,0 +1,71 @@
+body {
+    margin-top: 0px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #e6e4d9;
+    background-image: url('images/pattern.png');
+}
+
+#mainheader {
+    background-color: #a593c2;
+}
+
+#leftmenu {
+    float: left;
+    width: 30%;
+    margin-bottom: 20px;
+}
+
+nav {
+    height: 60px;
+    width: 1000px;
+    margin: 0 auto 20px;
+}
+
+.searchbox {
+    padding: 5px;
+    margin: 10px 10px;
+    width: 200px;
+}
+
+#main {
+    float: right;
+    width: 70%;
+    margin-bottom: 20px;
+}
+
+footer {
+    clear: both;
+    width: 100%;
+}
+
+header,
+section,
+footer,
+aside,
+nav,
+main,
+article,
+figure {
+    display: block;
+}
+
+nav>ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav>ul>li {
+    float: left;
+}
+
+nav>ul>li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 16px;
+    text-decoration: none;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/archive/building-websites-html/11/storing-data-with-javascript-slides.pdf b/archive/building-websites-html/11/storing-data-with-javascript-slides.pdf
new file mode 100644
index 0000000..e9521eb
Binary files /dev/null and b/archive/building-websites-html/11/storing-data-with-javascript-slides.pdf differ
diff --git a/archive/building-websites-html/Assets/m4/cheesecake.jpg b/archive/building-websites-html/Assets/m4/cheesecake.jpg
new file mode 100644
index 0000000..3b380c8
Binary files /dev/null and b/archive/building-websites-html/Assets/m4/cheesecake.jpg differ
diff --git a/archive/building-websites-html/Assets/m4/snippets.txt b/archive/building-websites-html/Assets/m4/snippets.txt
new file mode 100644
index 0000000..78c5484
--- /dev/null
+++ b/archive/building-websites-html/Assets/m4/snippets.txt
@@ -0,0 +1,7 @@
+For many years, Bethany has been baking the most delicious pies at her home. In 2013, we opened our first
+store in Brussels (Belgium) in a cosy little street near the Grand Market. People from all over the world fell in love
+with the soft cakes, heavenly cheese cakes, spicy apple pies... The store became a success in no time.
+In 2015, no less than 100 pies were sold every day and Bethany's Pie Shop moved into a larger building.
+After receiving many requests, it became clear that our next step was making it possible to order pies from the
+comfort of your own home and from anywhere in the world. You are now looking at the result of this: our very own
+webstore, making it possible to order Bethany's delicious pies whenever you feel like it!
\ No newline at end of file
diff --git a/archive/building-websites-html/Assets/m6/favicon.png b/archive/building-websites-html/Assets/m6/favicon.png
new file mode 100644
index 0000000..625c701
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/favicon.png differ
diff --git a/archive/building-websites-html/Assets/m6/images/bethany-fullsize.jpg b/archive/building-websites-html/Assets/m6/images/bethany-fullsize.jpg
new file mode 100644
index 0000000..9e5fa2e
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/bethany-fullsize.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/bethany.jpg b/archive/building-websites-html/Assets/m6/images/bethany.jpg
new file mode 100644
index 0000000..68a9f42
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/bethany.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/bethanylogo.png b/archive/building-websites-html/Assets/m6/images/bethanylogo.png
new file mode 100644
index 0000000..c5a96de
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/bethanylogo.png differ
diff --git a/archive/building-websites-html/Assets/m6/images/bethanysmall.jpg b/archive/building-websites-html/Assets/m6/images/bethanysmall.jpg
new file mode 100644
index 0000000..7566223
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/bethanysmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/cake.svg b/archive/building-websites-html/Assets/m6/images/cake.svg
new file mode 100644
index 0000000..2a84187
--- /dev/null
+++ b/archive/building-websites-html/Assets/m6/images/cake.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 256 256">
+  <g>
+    <path id="path1" transform="rotate(0,128,128) translate(0,29.1359710693359) scale(8,8)  " fill="#4DCFA8" d="M31.575012,19.010061L31.219971,24.517019 6.3109741,24.716007 4.6300049,19.75505z M32,12.412107L31.651001,17.812072 4.2310181,18.56907 2.3359985,12.982109C12.327026,14.407101,26.648987,13.024117,32,12.412107z M13.682007,2.0002048L31.580017,11.192131C25.572021,11.823122,11.765015,13.053108,2.7249756,11.825121L5.9719849,8.9141495C6.6389771,9.4481423 7.4829712,9.7701304 8.4039917,9.7701304 10.549988,9.7701304 12.288025,8.0311463 12.288025,5.8851674 12.288025,5.1161764 12.062012,4.4021781 11.676025,3.799186z M1.7849731,0.00022094523C3.9299927,0.026221808,6.0369873,2.1772053,6.934021,3.2211878L7.0599976,3.1441925C8.5239868,2.3781924 10.330017,2.9431901 11.096008,4.4061759 11.862,5.8691614 11.296997,7.6731474 9.8339844,8.4401391 8.3709717,9.2061398 6.565979,8.6421492 5.8010254,7.1791632 5.2540283,6.1341584 5.3880005,4.9171732 6.039978,4.0261891 5.0789795,2.9181964 2.5009766,0.287206 0.67498779,1.536204L0,0.54921264C0.58099365,0.1522126,1.184021,-0.006782684,1.7849731,0.00022094523z" />
+  </g>
+</svg>
+
diff --git a/archive/building-websites-html/Assets/m6/images/pattern.png b/archive/building-websites-html/Assets/m6/images/pattern.png
new file mode 100644
index 0000000..5058a49
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/pattern.png differ
diff --git a/archive/building-websites-html/Assets/m6/images/pie.png b/archive/building-websites-html/Assets/m6/images/pie.png
new file mode 100644
index 0000000..6acc60d
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/pie.png differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/applepie.jpg b/archive/building-websites-html/Assets/m6/images/products/applepie.jpg
new file mode 100644
index 0000000..24bb8a8
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/applepie.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/applepiesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/applepiesmall.jpg
new file mode 100644
index 0000000..49e0187
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/applepiesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/blueberrycheesecakesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/blueberrycheesecakesmall.jpg
new file mode 100644
index 0000000..4ddbe07
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/blueberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/cheesecake.jpg b/archive/building-websites-html/Assets/m6/images/products/cheesecake.jpg
new file mode 100644
index 0000000..3b380c8
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/cheesecake.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/cheesecakesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/cheesecakesmall.jpg
new file mode 100644
index 0000000..5b3a911
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/cheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/cherrypiesmall copy.jpg b/archive/building-websites-html/Assets/m6/images/products/cherrypiesmall copy.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/cherrypiesmall copy.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/cherrypiesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/cherrypiesmall.jpg
new file mode 100644
index 0000000..92fb1e6
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/cherrypiesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/christmasapplepiesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/christmasapplepiesmall.jpg
new file mode 100644
index 0000000..bf372d2
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/christmasapplepiesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/cranberrypiesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/cranberrypiesmall.jpg
new file mode 100644
index 0000000..89abf4c
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/cranberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/peachpiesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/peachpiesmall.jpg
new file mode 100644
index 0000000..662c793
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/peachpiesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/pumpkinpiesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/pumpkinpiesmall.jpg
new file mode 100644
index 0000000..e2d7047
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/pumpkinpiesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/rhubarbpiesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/rhubarbpiesmall.jpg
new file mode 100644
index 0000000..c46030f
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/rhubarbpiesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/strawberrycheesecakesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/strawberrycheesecakesmall.jpg
new file mode 100644
index 0000000..2abebf6
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/strawberrycheesecakesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m6/images/products/strawberrypiesmall.jpg b/archive/building-websites-html/Assets/m6/images/products/strawberrypiesmall.jpg
new file mode 100644
index 0000000..d5fccb7
Binary files /dev/null and b/archive/building-websites-html/Assets/m6/images/products/strawberrypiesmall.jpg differ
diff --git a/archive/building-websites-html/Assets/m7/snippets.txt b/archive/building-websites-html/Assets/m7/snippets.txt
new file mode 100644
index 0000000..a61ee9d
--- /dev/null
+++ b/archive/building-websites-html/Assets/m7/snippets.txt
@@ -0,0 +1,63 @@
+<tr>
+                        <td><img src="images/products/cranberrypiesmall.jpg" width="100"></td>
+                        <td>Cranberry pie</td>
+                        <td>A Christmas favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/cherrypiesmall.jpg" width="100"></td>
+                        <td>Cherry pie</td>
+                        <td>A summer classic!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/peachpiesmall.jpg" width="100"></td>
+                        <td>Peach pie</td>
+                        <td>Sweet as peach</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/pumpkinpiesmall.jpg" width="100"></td>
+                        <td>Pumpkin pie</td>
+                        <td>Our Halloween favorite</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/christmasapplepiesmall.jpg" width="100"></td>
+                        <td>Christmas apple pie</td>
+                        <td>Happy holidays with this pie!</td>
+                        <td>$19.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/blueberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Blueberry cheese cake</td>
+                        <td>You'll love it!</td>
+                        <td>$17.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/rhubarbpiesmall.jpg" width="100"></td>
+                        <td>Rhubarb Pie</td>
+                        <td>My God, so sweet!</td>
+                        <td>$21.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrypiesmall.jpg" width="100"></td>
+                        <td>Strawberry Pie</td>
+                        <td>Our delicious strawberry pie!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
+                    <tr>
+                        <td><img src="images/products/strawberrycheesecakesmall.jpg" width="100"></td>
+                        <td>Strawberry Cheese Cake</td>
+                        <td>One of the best cheese cakes you'll ever find!</td>
+                        <td>$18.95</td>
+                        <td>View details</td>
+                    </tr>
\ No newline at end of file
diff --git a/archive/building-websites-html/Assets/m9/downloads/Price list.zip b/archive/building-websites-html/Assets/m9/downloads/Price list.zip
new file mode 100644
index 0000000..ee1688e
Binary files /dev/null and b/archive/building-websites-html/Assets/m9/downloads/Price list.zip differ

Pie name	Description	Price	Details
Cheese cake	Plain cheese cake. Plain pleasure.	$12.95	View details
Apple pie	Our famous apple pie	$14.95	View details
Cranberry pie	A Christmas favorite	$18.95	View details
Cherry pie	A summer classic!	$18.95	View details
Peach pie	Sweet as peach	$18.95	View details
Pumpkin pie	Our Halloween favorite	$18.95	View details
Christmas apple pie	Happy holidays with this pie!	$19.95	View details
Blueberry cheese cake	You'll love it!	$17.95	View details
Rhubarb Pie	My God, so sweet!	$21.95	View details
Strawberry Pie	Our delicious strawberry pie!	$18.95	View details
Strawberry Cheese Cake	One of the best cheese cakes you'll ever find!	$18.95	View details