From 7fa95e67409271243c5bfe99c95d5136dfaf3379 Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Mon, 2 Oct 2023 11:43:46 +0200
Subject: [PATCH 01/10] layout 1

---
 .vscode/settings.json         |  3 +++
 src/basic/basic-layout-1.html | 26 ++++++++++++++++++++++++--
 src/style.css                 |  2 +-
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 .vscode/settings.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/src/basic/basic-layout-1.html b/src/basic/basic-layout-1.html
index 6ad3dfb..a3babe0 100644
--- a/src/basic/basic-layout-1.html
+++ b/src/basic/basic-layout-1.html
@@ -6,13 +6,35 @@
     <title>Basic Layout 1</title>
     <link rel="stylesheet" href="../style.css" />
     <style>
-      /* Doe hier jouw ding! */
+      body{
+        display:grid;
+        grid-template-columns: 1fr 2fr;
+        grid-template-rows: 1fr 3fr 1fr;
+      }
+      header{
+        grid-area: 1/1/1/3;
+        outline: solid red;
+      }
+      nav{
+        grid-area: 2/1/2/1;
+        outline:solid blue;
+      }
+      main{
+        grid-area: 2/2/2/3;
+        outline:solid green;
+      }
+      footer{
+        grid-area: 3/1/3/3;
+      }
     </style>
   </head>
   <body id="basic-layout-1">
     <header><h1>Basic Layout 1</h1></header>
     <nav><a href="../index.html">Terug naar het overzicht</a></nav>
-    <main></main>
+    <main>
+
+
+    </main>
     <footer></footer>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
index 5714c0e..f0ef6b3 100644
--- a/src/style.css
+++ b/src/style.css
@@ -24,6 +24,6 @@ main {
   background: yellow;
 }
 footer {
-  background: black;
+  background: coral;
   color: white;
 }

From ddf379b9b339d6209474c4f58ee6f13393ac7286 Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Mon, 2 Oct 2023 11:44:05 +0200
Subject: [PATCH 02/10] layout 2

---
 src/basic/basic-layout-2.html | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/basic/basic-layout-2.html b/src/basic/basic-layout-2.html
index c262197..473f48b 100644
--- a/src/basic/basic-layout-2.html
+++ b/src/basic/basic-layout-2.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -6,7 +6,25 @@
     <title>Basic Layout 2</title>
     <link rel="stylesheet" href="../style.css" />
     <style>
-      /* Doe hier jouw ding! */
+      body{
+        display: grid;
+        grid-template-rows: 1fr 0.5fr 3fr 1.2fr;
+        grid-row-gap: 10px;
+        grid-column-gap: 10px;
+      }
+
+      header{
+        grid-row: 1;
+      }
+      nav{
+        grid-row: 2;
+      }
+      main{
+        grid-row:3;
+      }
+      footer{
+        grid-row: 4;
+      }
     </style>
   </head>
   <body id="basic-layout-2">
@@ -15,4 +33,4 @@
     <main></main>
     <footer></footer>
   </body>
-</html>
+</html> -->

From f767502f5cd86b9d8e7419f7baa3ddb560e5b1ef Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Mon, 2 Oct 2023 11:44:34 +0200
Subject: [PATCH 03/10] basic layout 3

---
 src/basic/basic-layout-3.html | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/basic/basic-layout-3.html b/src/basic/basic-layout-3.html
index 174fdb2..68f6f7a 100644
--- a/src/basic/basic-layout-3.html
+++ b/src/basic/basic-layout-3.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -6,7 +6,27 @@
     <title>Basic Layout 3</title>
     <link rel="stylesheet" href="../style.css" />
     <style>
-      /* Doe hier jouw ding! */
+      body{
+        display: grid;
+        grid-template-columns:1fr 1fr ;
+        grid-template-rows: 4fr 1fr 1fr ;
+      }
+
+      header{
+        grid-area:3/1/3/1;
+      }
+      main{
+        
+        grid-area:1/1/1/3;
+      }
+      nav{
+        grid-area: 3/2/3/2;
+      }
+      footer{
+        grid-area:2/1/2/3;
+      }
+
+
     </style>
   </head>
   <body id="basic-layout-3">
@@ -15,4 +35,4 @@
     <main></main>
     <footer></footer>
   </body>
-</html>
+</html> -->

From baf24634dfc287b6844fa7159f74706cde7ac58d Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:00:04 +0200
Subject: [PATCH 04/10] layout 8

---
 src/basic/basic-layout-2.html |  4 ++--
 src/basic/basic-layout-3.html |  4 ++--
 src/basic/basic-layout-8.html | 24 +++++++++++++++++++++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/basic/basic-layout-2.html b/src/basic/basic-layout-2.html
index 473f48b..dfb6723 100644
--- a/src/basic/basic-layout-2.html
+++ b/src/basic/basic-layout-2.html
@@ -1,4 +1,4 @@
-<!-- <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -33,4 +33,4 @@
     <main></main>
     <footer></footer>
   </body>
-</html> -->
+</html>
diff --git a/src/basic/basic-layout-3.html b/src/basic/basic-layout-3.html
index 68f6f7a..13eda27 100644
--- a/src/basic/basic-layout-3.html
+++ b/src/basic/basic-layout-3.html
@@ -1,4 +1,4 @@
-<!-- <!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -35,4 +35,4 @@
     <main></main>
     <footer></footer>
   </body>
-</html> -->
+</html>
diff --git a/src/basic/basic-layout-8.html b/src/basic/basic-layout-8.html
index eec765b..8686dd7 100644
--- a/src/basic/basic-layout-8.html
+++ b/src/basic/basic-layout-8.html
@@ -6,7 +6,29 @@
     <title>Basic Layout 8</title>
     <link rel="stylesheet" href="../style.css" />
     <style>
-      /* Doe hier jouw ding! */
+      body{
+        display:grid;
+        grid-template-areas:  "a a a"
+                              "b c d"
+                              ;
+        gap: 10px;
+      }
+
+      header{
+        grid-area: a;
+      }
+
+      nav{
+        grid-area: b;
+      }
+      main{
+        grid-area: c;
+        
+      }
+
+    footer{
+      grid-area: d;
+    }
     </style>
   </head>
   <body id="basic-layout-8">

From c5691be26ff7f64febbd37687cca3f8b3a4afe63 Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:07:53 +0200
Subject: [PATCH 05/10] layout 1 advanced

---
 src/advanced/advanced-layout-1.html | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/advanced/advanced-layout-1.html b/src/advanced/advanced-layout-1.html
index 3e45bf4..bc880ea 100644
--- a/src/advanced/advanced-layout-1.html
+++ b/src/advanced/advanced-layout-1.html
@@ -6,7 +6,27 @@
     <title>Advanced Layout 1</title>
     <link rel="stylesheet" href="../style.css" />
     <style>
-      /* Doe hier jouw ding! */
+      body{
+        display:grid;
+        grid-template-areas:  ". header header"
+                              "nav nav ."
+                              ". main main" 
+                              ".footer footer" ;
+        gap:10px;
+      }
+
+      header{
+        grid-area: header;
+      }
+      nav{
+        grid-area : nav;
+      }
+      main{
+        grid-area:main;
+      }
+      footer{
+        grid-area: footer;
+      }
     </style>
   </head>
   <body id="advanced-layout-1">

From f1ea562d7ed5dcc892a590d530838bfaace32134 Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:22:20 +0200
Subject: [PATCH 06/10] layout 4 basic

---
 src/basic/basic-layout-4.html | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/basic/basic-layout-4.html b/src/basic/basic-layout-4.html
index 3667dac..1a8dd31 100644
--- a/src/basic/basic-layout-4.html
+++ b/src/basic/basic-layout-4.html
@@ -6,7 +6,25 @@
     <title>Basic Layout 4</title>
     <link rel="stylesheet" href="../style.css" />
     <style>
-      /* Doe hier jouw ding! */
+      body{
+        display:grid;
+        grid-template-columns: 2fr 1fr ;
+        grid-template-rows: 2fr 2fr;
+        gap: 10px;
+      }
+
+      main{
+        grid-area: 1/1/2/2;
+      }
+      header{
+        grid-area: 1/2/1/3;
+      }
+      nav{
+        grid-area: 2/2/3/3;
+      }
+      footer{
+        grid-area: 2/1/2/2;
+      }
     </style>
   </head>
   <body id="basic-layout-4">

From e1abcdb9b60f5fca7c2255255133382c7792cbdc Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Mon, 2 Oct 2023 12:53:35 +0200
Subject: [PATCH 07/10] advance layout 2

---
 src/advanced/advanced-layout-2.html | 31 ++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/advanced/advanced-layout-2.html b/src/advanced/advanced-layout-2.html
index 01abde9..b40a9ea 100644
--- a/src/advanced/advanced-layout-2.html
+++ b/src/advanced/advanced-layout-2.html
@@ -6,7 +6,36 @@
     <title>Advanced Layout 2</title>
     <link rel="stylesheet" href="../style.css" />
     <style>
-      /* Doe hier jouw ding! */
+      body{
+        display:grid;
+        grid-template-rows: repeat(5,1fr);
+        grid-template-columns: 4fr;
+        gap: 10px;
+      }
+      header{
+        grid-row-start: 2;
+        grid-row-end: 2;
+        grid-column-start: 1;
+        grid-column-end: 1;
+        rotate: 45deg;
+      }
+      nav{
+        grid-row-start: 2;
+        grid-row-end: 2;
+        grid-column-start: 1;
+        grid-column-end: 1;
+        rotate: -45deg;
+      }
+      main{
+        grid-row-start: 4;
+        grid-column-start: 1;
+        grid-column-end: 3;
+      }
+      footer{
+        grid-row-start: 5;
+        grid-column-start: 1;
+        grid-column-end: 3;
+      }
     </style>
   </head>
   <body id="advanced-layout-2">

From 98e776bc89e929816ad749c7f69cf4094d5215b5 Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Mon, 2 Oct 2023 13:19:46 +0200
Subject: [PATCH 08/10] advanced layout 3

---
 src/advanced/advanced-layout-3.html | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/advanced/advanced-layout-3.html b/src/advanced/advanced-layout-3.html
index 3672d41..f096ea1 100644
--- a/src/advanced/advanced-layout-3.html
+++ b/src/advanced/advanced-layout-3.html
@@ -6,7 +6,28 @@
     <title>Advanced Layout 3</title>
     <link rel="stylesheet" href="../style.css" />
     <style>
-      /* Doe hier jouw ding! */
+     body{
+      display:grid;
+      grid-template-columns: 2fr 1fr 2fr ;
+      grid-template-rows: .2fr 1fr .6fr 1fr .6fr 1fr .2fr;
+      gap:10px ;
+
+     }
+
+     header{
+      grid-area:2/1/2/3 ;
+      z-index: 2;
+     }
+     main{
+      grid-area: 1/2/8/4;
+     }
+     nav{
+      grid-area: 4/1/4/3;
+      z-index: 2;
+     }
+     footer{
+      grid-area: 6/1/6/3
+     }
     </style>
   </head>
   <body id="advanced-layout-3">

From 9eb3ba50783140a016646e3026e7f73a12b1ce80 Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Mon, 2 Oct 2023 18:14:36 +0200
Subject: [PATCH 09/10] advanced layout 3

---
 src/advanced/advanced-layout-3.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/advanced/advanced-layout-3.html b/src/advanced/advanced-layout-3.html
index f096ea1..774f9bc 100644
--- a/src/advanced/advanced-layout-3.html
+++ b/src/advanced/advanced-layout-3.html
@@ -8,7 +8,7 @@
     <style>
      body{
       display:grid;
-      grid-template-columns: 2fr 1fr 2fr ;
+      grid-template-columns: 1fr 2fr 2fr ;
       grid-template-rows: .2fr 1fr .6fr 1fr .6fr 1fr .2fr;
       gap:10px ;
 

From 9d28c3a6ac4c2176225a43c9b4f9f5f9979fce02 Mon Sep 17 00:00:00 2001
From: christoph3r3w <144007933+christoph3r3w@users.noreply.github.com>
Date: Fri, 6 Oct 2023 00:17:22 +0200
Subject: [PATCH 10/10] layout 4

---
 src/advanced/advanced-layout-3.html |  2 +-
 src/advanced/advanced-layout-4.html | 46 +++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/advanced/advanced-layout-3.html b/src/advanced/advanced-layout-3.html
index 774f9bc..4822884 100644
--- a/src/advanced/advanced-layout-3.html
+++ b/src/advanced/advanced-layout-3.html
@@ -9,7 +9,7 @@
      body{
       display:grid;
       grid-template-columns: 1fr 2fr 2fr ;
-      grid-template-rows: .2fr 1fr .6fr 1fr .6fr 1fr .2fr;
+      grid-template-rows: .2fr 1fr .5fr 1fr .5fr 1fr .2fr;
       gap:10px ;
 
      }
diff --git a/src/advanced/advanced-layout-4.html b/src/advanced/advanced-layout-4.html
index 7435908..97e13fc 100644
--- a/src/advanced/advanced-layout-4.html
+++ b/src/advanced/advanced-layout-4.html
@@ -6,13 +6,55 @@
     <title>Advanced Layout 4</title>
     <link rel="stylesheet" href="../style.css" />
     <style>
-      /* Doe hier jouw ding! */
+      body{
+        display: grid;
+        grid-template-columns: 2fr 2fr;
+        grid-template-rows: 3fr .1fr .1fr 3fr;
+        gap: 10px;
+      }
+
+      header{
+       grid-area:1/1/3/2;
+       opacity: 80%;
+       /* z-index: 2; */
+       clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
+      }
+      main{
+        grid-area:1/2/3/3;
+        /* translate: -80px 80px; */
+        opacity: 70%;
+        /* z-index: -1; */
+        clip-path: polygon(0 0, 100% 0, 100% 80%, 0 90%);
+      }
+      nav{
+        grid-area:3/1/6/2 ;
+        clip-path: polygon(0 20%, 100% 10%, 100% 100%, 0 100%);
+      }
+      footer{
+        grid-area: 3/2/6/3 ;
+        /* z-index: -2; */
+        clip-path: polygon(0% 10%, 100% 0, 100% 100%, 0% 100%);
+      }
+      /* p{
+        grid-area: 2/1/3/3;
+        outline: solid red;
+        margin: 0;
+        gap: 0;
+        transform:skew(-15deg,-0deg) translateY(85px) rotate(-11deg) scale(2) ; */
+         /* background-color: white; */
+         /* height: 1.5em; */
+         
+        
+       
+      }
+
     </style>
   </head>
   <body id="advanced-layout-4">
-    <header><h1>Advanced Layout 4</h1></header>
+    <header><h1>Advanced Layout 4 </h1></header>
     <nav><a href="../index.html">Terug naar het overzicht</a></nav>
     <main></main>
+    <p></p>
     <footer></footer>
   </body>
 </html>
