diff --git a/week5/holyGrail.html b/week5/holyGrail.html
new file mode 100644
index 0000000..4daf06f
--- /dev/null
+++ b/week5/holyGrail.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ Holy Grail
+
+
+
+
+ Content
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week5/main.css b/week5/main.css
new file mode 100644
index 0000000..fec53b5
--- /dev/null
+++ b/week5/main.css
@@ -0,0 +1,64 @@
+.header {
+ grid-area: header;
+ background-color: blue;
+ display: flex;
+ justify-content: center;
+ font-size: 100px;
+}
+.footer {
+ grid-area: footer;
+ background-color: cadetblue;
+ display: flex;
+ justify-content: center;
+ font-size: 100px;
+}
+.main {
+ grid-area: main;
+ background-color: beige;
+ display: flex;
+ justify-content: center;
+ font-size: 100px;
+ align-items: center;
+}
+.left {
+ grid-area: navigation;
+ background-color: chartreuse;
+ display: flex;
+ justify-content: center;
+ font-size: 50px;
+}
+.right {
+ grid-area: ads;
+ background-color: chartreuse;
+ display: flex;
+ justify-content: center;
+ font-size: 50px;
+}
+
+.hg {
+ display: grid;
+ grid-template-areas: "header header header"
+ "navigation main ads"
+ "footer footer footer";
+ grid-template-columns: 150px 1fr 150px;
+ grid-template-rows: 100px
+ 1fr
+ 100px;
+ min-height: 100vh;
+}
+
+@media screen and (max-width: 600px) {
+ .hg {
+ grid-template-areas: "header"
+ "navigation"
+ "main"
+ "ads"
+ "footer";
+ grid-template-columns: 100%;
+ grid-template-rows: 100px
+ 50px
+ 1fr
+ 50px
+ 100px;
+ }
+}
\ No newline at end of file