diff --git a/holygrail.html b/holygrail.html new file mode 100644 index 0000000..cf12dfe --- /dev/null +++ b/holygrail.html @@ -0,0 +1,18 @@ + + + + + + Holy Grail Assignment + + + +
+

Header

+
+ Main Navigation +
Main Content
+ Right Sidebar + + + \ No newline at end of file diff --git a/styles/holygrail.css b/styles/holygrail.css new file mode 100644 index 0000000..a6463c6 --- /dev/null +++ b/styles/holygrail.css @@ -0,0 +1,37 @@ +body { + display: grid; + height: 100vh; + grid-template-columns: 1fr auto; + grid-template-rows: auto auto 1fr auto; +} + +header { + background: lightpink; + padding: 2rem; + grid-column: 1 / 3; +} + +main-navigation { + background-color: #bed; + grid-column: 1/3; + padding: 1rem; +} + +main { + background: coral; + height: 100%; + padding: 1rem; +} + +right-sidebar { + background: yellow; + grid-column: 2 / 3; + padding: 1rem; +} + +footer { + background: wheat; + padding: 2rem; + text-align: center; + grid-column: 1 / 3; +} \ No newline at end of file