From 055b2a8d75df04190a65843d18eb5bd1023ca836 Mon Sep 17 00:00:00 2001 From: Genevieve Schultz Date: Fri, 1 Jun 2018 08:42:39 -0700 Subject: [PATCH 1/2] my layouts --- layout1/index.html | 20 +++++++++- layout1/style.css | 92 +++++++++++++++++++++++++++++++++++++++++++++- layout4/index.html | 3 +- layout4/style.css | 6 ++- 4 files changed, 117 insertions(+), 4 deletions(-) diff --git a/layout1/index.html b/layout1/index.html index 68e3d66..bec37d7 100644 --- a/layout1/index.html +++ b/layout1/index.html @@ -7,6 +7,24 @@ -

I love art!

+

Tableau II - CSS Grid

+ +
+
+
+
+
+
+
+
+
+
+
+ +
diff --git a/layout1/style.css b/layout1/style.css index 7b34845..47eedaa 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,93 @@ -h1 { +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: rebeccapurple; + margin: auto; + text-align: center; } + +/*Steve's Code*/ +#composition { + width: 40%; + margin: auto; + min-height: 75vh; + display: grid; + grid-row-gap: 1em; + grid-column-gap: 1em; + grid-template-rows: 100%; + grid-template-columns: 1fr 8em; + grid-template-areas: "left right"; + border: 1px solid black; + background-color: black; +} + +#left { + grid-area: left; + display: grid; + grid-row-gap: 1em; + grid-column-gap: 1em; + grid-template-rows: 1fr 9em; + grid-template-columns: 100%; + grid-template-areas: "l-top" + "l-bottom"; +} +#right { + grid-area: right; + display: grid; + grid-row-gap: 1em; + grid-column-gap: 1em; + grid-template-rows: 9em 1fr 2em; + grid-template-columns: 100%; + grid-template-areas: "r-top" + "r-mid" + "r-bottom"; +} + +#r-top { + grid-area: r-top; + background-color: #222; +} +#r-mid { + grid-area: r-mid; + background-color: white; +} +#r-bottom { + grid-area: r-bottom; + background-color: red; +} + +#l-top { + grid-area: l-top; + display: grid; + grid-row-gap: 1em; + grid-column-gap: 1em; + grid-template-rows: 4em 0.5fr 0.5fr; + grid-template-columns: 2em 0.5fr 0.5fr; + grid-template-areas: "lt-topleft lt-topleft lt-topright" + "lt-sidetop lt-main lt-main" + "lt-sidebottom lt-main lt-main" +} +#l-bottom { + grid-area: l-bottom; + background-color: white; +} + +#lt-topleft { + grid-area: lt-topleft; + background-color: white; +} +#lt-topright { + grid-area: lt-topright; + background-color: yellow; +} +#lt-sidetop { + grid-area: lt-sidetop; + background-color: white; +} +#lt-sidebottom { + grid-area: lt-sidebottom; + background-color: blue; +} +#lt-main { + grid-area: lt-main; + background-color: white; +} \ No newline at end of file diff --git a/layout4/index.html b/layout4/index.html index daa3be4..0272baa 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -7,6 +7,7 @@ -

I love art!

+

Composition II in Red, Blue, and Yellow

+ diff --git a/layout4/style.css b/layout4/style.css index 7b34845..2903c9c 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,7 @@ -h1 { +body { color: rebeccapurple; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + margin: auto; + text-align: center; } + From 1436f88c47480302ee6d70c93d870bfe6b96a416 Mon Sep 17 00:00:00 2001 From: Genevieve Schultz Date: Fri, 1 Jun 2018 10:04:20 -0700 Subject: [PATCH 2/2] layout 4 complete --- layout1/style.css | 12 ++++-------- layout4/index.html | 16 ++++++++++++++++ layout4/style.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 62 insertions(+), 8 deletions(-) diff --git a/layout1/style.css b/layout1/style.css index 47eedaa..f3c71e7 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -11,8 +11,7 @@ body { margin: auto; min-height: 75vh; display: grid; - grid-row-gap: 1em; - grid-column-gap: 1em; + grid-gap: 1em; grid-template-rows: 100%; grid-template-columns: 1fr 8em; grid-template-areas: "left right"; @@ -23,8 +22,7 @@ body { #left { grid-area: left; display: grid; - grid-row-gap: 1em; - grid-column-gap: 1em; + grid-gap: 1em; grid-template-rows: 1fr 9em; grid-template-columns: 100%; grid-template-areas: "l-top" @@ -33,8 +31,7 @@ body { #right { grid-area: right; display: grid; - grid-row-gap: 1em; - grid-column-gap: 1em; + grid-gap: 1em; grid-template-rows: 9em 1fr 2em; grid-template-columns: 100%; grid-template-areas: "r-top" @@ -58,8 +55,7 @@ body { #l-top { grid-area: l-top; display: grid; - grid-row-gap: 1em; - grid-column-gap: 1em; + grid-gap: 1em; grid-template-rows: 4em 0.5fr 0.5fr; grid-template-columns: 2em 0.5fr 0.5fr; grid-template-areas: "lt-topleft lt-topleft lt-topright" diff --git a/layout4/index.html b/layout4/index.html index 0272baa..42cb72c 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -8,6 +8,22 @@

Composition II in Red, Blue, and Yellow

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/layout4/style.css b/layout4/style.css index 2903c9c..be49d20 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -3,5 +3,47 @@ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: auto; text-align: center; + background-color: black; } +.container { + display: grid; + grid-template-rows: 10em 10em .5fr .5fr; + min-height: 100vh; + grid-template-columns: 10em 1fr 5em; + grid-template-areas: "top-left main main" + "mid-left main main" + "bot-left bot-mid bot-rt-top" + "bot-left bot-mid bot-rt-bot"; + width: 60%; + grid-gap: 0.5em; +} + +.top-left { + grid-area: top-left; + background-color: beige; +} +.main { + grid-area: main; + background-color: maroon; +} +.mid-left { + grid-area: mid-left; + background-color: beige; +} +.bot-left { + grid-area: bot-left; + background-color: navy; +} +.bot-mid { + grid-area: bot-mid; + background-color: beige; +} +.bot-rt-top { + grid-area: bot-rt-top; + background-color: beige; +} +.bot-rt-bot { + grid-area: bot-rt-bot; + background-color: yellow; +}