From 042befa230b095a0e9a922321ad328966ade6118 Mon Sep 17 00:00:00 2001 From: Tyler J Burke Date: Sat, 22 Feb 2020 13:02:02 -0500 Subject: [PATCH] Add files via upload --- week5/holyGrail.html | 18 +++++++++++++ week5/main.css | 64 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 week5/holyGrail.html create mode 100644 week5/main.css 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 + + + +
Header
+
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