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..f3c71e7 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,89 @@ -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-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-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-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-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..42cb72c 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -7,6 +7,23 @@ -

I love art!

+

Composition II in Red, Blue, and Yellow

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/layout4/style.css b/layout4/style.css index 7b34845..be49d20 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,49 @@ -h1 { +body { color: rebeccapurple; + 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; }