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/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">
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">
diff --git a/src/advanced/advanced-layout-3.html b/src/advanced/advanced-layout-3.html
index 3672d41..4822884 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: 1fr 2fr 2fr ;
+      grid-template-rows: .2fr 1fr .5fr 1fr .5fr 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">
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>
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/basic/basic-layout-2.html b/src/basic/basic-layout-2.html
index c262197..dfb6723 100644
--- a/src/basic/basic-layout-2.html
+++ b/src/basic/basic-layout-2.html
@@ -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">
diff --git a/src/basic/basic-layout-3.html b/src/basic/basic-layout-3.html
index 174fdb2..13eda27 100644
--- a/src/basic/basic-layout-3.html
+++ b/src/basic/basic-layout-3.html
@@ -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">
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">
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">
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;
 }
