diff --git a/layout1/index.html b/layout1/index.html index 68e3d66..6884cf4 100644 --- a/layout1/index.html +++ b/layout1/index.html @@ -6,7 +6,15 @@ Layout 1 - Tableau II - -

I love art!

- + +
+
+
+
+
+
+
+
+
+ diff --git a/layout1/style.css b/layout1/style.css index 7b34845..df0a2c0 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,81 @@ -h1 { - color: rebeccapurple; + + +body { + display: grid; + width: 500px; + height: 500px; + margin: auto; + grid-template-rows: 40px 60px 150px 150px 75px 25px; + grid-template-columns: 30px 175px 175px 120px; + max-height: 500vh; + border: 2px solid black; + + grid-template-areas: "a a b c" + "e d d c" + "e d d h" + "f d d h" + "g g g h" + "g g g i"; +} + +.a { + grid-area: a; + background-color: ivory; + border: 3px solid black; +} + +.b { + grid-area: b; + background-color: yellow; + border: 3px solid black; + +} + +.c { + grid-area: c; + background-color: black; + border: 3px solid black; + +} + +.d { + grid-area: d; + background-color: ivory; + border: 3px solid black; + +} + +.e { + grid-area: e; + background-color: ivory; + border: 3px solid black; + +} + +.f { + grid-area: f; + background-color: blue; + border: 3px solid black; + +} + +.g { + grid-area: g; + background-color: ivory; + border: 3px solid black; + +} + +.h { + grid-area: h; + background-color: ivory; + border: 3px solid black; + +} + +.i { + grid-area: i; + background-color: red; + border: 3px solid black; + } diff --git a/layout2/index.html b/layout2/index.html index d2f87d2..358a539 100644 --- a/layout2/index.html +++ b/layout2/index.html @@ -3,10 +3,21 @@ - Layout 2 - Tableau I + Layout 1 - Tableau II - -

I love art!

- + +
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/layout2/style.css b/layout2/style.css index 7b34845..365124f 100644 --- a/layout2/style.css +++ b/layout2/style.css @@ -1,3 +1,95 @@ -h1 { - color: rebeccapurple; + + +body { + display: grid; + width: 500px; + height: 800px; + margin: auto; + grid-template-rows: 50px 400px 100px 50px 100px 100px; + grid-template-columns: 50px 75px 275px 75px 25px; + max-height: 800vh; + border: 2px solid black; + + grid-template-areas: "a a b b b" + "c c b b b" + "c c d d e" + "h g f f e" + "i g f f e" + "i g j k k"; +} + +.a { + grid-area: a; + background-color: black; + border: 3px solid black; +} + +.b { + grid-area: b; + background-color: red; + border: 3px solid black; + +} + +.c { + grid-area: c; + background-color: ivory; + border: 3px solid black; + +} + +.d { + grid-area: d; + background-color: ivory; + border: 3px solid black; + +} + +.e { + grid-area: e; + background-color: ivory; + border: 3px solid black; + +} + +.f { + grid-area: f; + background-color: ivory; + border: 3px solid black; + +} + +.g { + grid-area: g; + background-color: ivory; + border: 3px solid black; + +} + +.h { + grid-area: h; + background-color: black; + border: 3px solid black; + +} + +.i { + grid-area: i; + background-color: yellow; + border: 3px solid black; + +} + +.j { + grid-area: j; + background-color: ivory; + border: 3px solid black; + +} + +.k { + grid-area: k; + background-color: darkblue; + border: 3px solid black; + } diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..6884cf4 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -3,10 +3,18 @@ - Layout 3 - Composition C + Layout 1 - Tableau II - -

I love art!

- + +
+
+
+
+
+
+
+
+
+ diff --git a/layout3/style.css b/layout3/style.css index 7b34845..140d900 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -1,3 +1,79 @@ -h1 { - color: rebeccapurple; + + +body { + display: grid; + width: 500px; + height: 500px; + margin: auto; + grid-template-rows: 220px 100px 150px 30px; + grid-template-columns: 40px 220px 180px 60px; + max-height: 500vh; + border: 2px solid black; + + grid-template-areas: "a a b b" + "c c d d" + "e f g h" + "e f i h"; +} + +.a { + grid-area: a; + background-color: red; + border: 2px solid black; +} + +.b { + grid-area: b; + background-color: ivory; + border: 2px solid black; + +} + +.c { + grid-area: c; + background-color: ivory; + border: 2px solid black; + +} + +.d { + grid-area: d; + background-color: ivory; + border: 2px solid black; + +} + +.e { + grid-area: e; + background-color: goldenrod; + border: 2px solid black; + +} + +.f { + grid-area: f; + background-color: ivory; + border: 2px solid black; + +} + +.g { + grid-area: g; + background-color: darkblue; + border: 2px solid black; + +} + +.h { + grid-area: h; + background-color: ivory; + border: 2px solid black; + +} + +.i { + grid-area: i; + background-color: ivory; + border: 2px solid black; + } diff --git a/layout4/index.html b/layout4/index.html index daa3be4..3942c9d 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -3,10 +3,16 @@ - Layout 4 - Composition II in Red, Blue, and Yellow + Layout 1 - Tableau II - -

I love art!

- + +
+
+
+
+
+
+
+ diff --git a/layout4/style.css b/layout4/style.css index 7b34845..cb3d867 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,65 @@ -h1 { - color: rebeccapurple; + + +body { + display: grid; + width: 500px; + height: 500px; + margin: auto; + grid-template-rows: 150px 250px 50px 50px; + grid-template-columns: 100px 350px 50px; + max-height: 500vh; + border: 2px solid black; + + grid-template-areas: "a b b" + "c b b" + "d e f" + "d e g"; +} + +.a { + grid-area: a; + background-color: ivory; + border: 3px solid black; +} + +.b { + grid-area: b; + background-color: darkred; + border: 3px solid black; + +} + +.c { + grid-area: c; + background-color: ivory; + border: 3px solid black; + +} + +.d { + grid-area: d; + background-color: darkblue; + border: 3px solid black; + +} + +.e { + grid-area: e; + background-color: ivory; + border: 3px solid black; + +} + +.f { + grid-area: f; + background-color: ivory; + border: 3px solid black; + +} + +.g { + grid-area: g; + background-color: goldenrod; + border: 3px solid black; + }