diff --git a/week-5/garden.png b/week-5/garden.png
new file mode 100644
index 0000000..0b1c00d
Binary files /dev/null and b/week-5/garden.png differ
diff --git a/week-5/index.html b/week-5/index.html
new file mode 100644
index 0000000..e90e4dc
--- /dev/null
+++ b/week-5/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+ Holy Grail Layout
+
+
+
+
+ Content
+
+
+
+
\ No newline at end of file
diff --git a/week-5/style.css b/week-5/style.css
new file mode 100644
index 0000000..7bf3192
--- /dev/null
+++ b/week-5/style.css
@@ -0,0 +1,52 @@
+body {
+ margin: 0;
+ height: 100vh;
+ display: grid;
+ grid-template-areas:
+ 'header'
+ 'menu'
+ 'main'
+ 'ad'
+ 'footer';
+ grid-template-columns: 1fr;
+ grid-template-rows: repeat(5, 1fr);
+ text-align: center;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+header {
+ background: lightblue;
+ grid-area: header;
+}
+
+#menu {
+ background-color: lightcoral;
+ grid-area: menu;
+}
+
+main {
+ background-color: lightyellow;
+ grid-area: main;
+}
+
+aside {
+ background-color: lavender;
+ grid-area: ad;
+}
+
+footer {
+ background-color: lightsalmon;
+ grid-area: footer;
+}
+@media (min-width: 768px) {
+ body {
+ display: grid;
+ grid-template-areas:
+ 'header header header header header header'
+ 'menu main main main main ad'
+ 'footer footer footer footer footer footer';
+ grid-template-columns: repeat(6, 1fr);
+ grid-template-rows: 1fr 4fr 1fr;
+ }
+}