diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..afb664f 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -7,6 +7,22 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
diff --git a/layout3/style.css b/layout3/style.css index 7b34845..f41a06c 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -1,3 +1,91 @@ -h1 { - color: rebeccapurple; +/* Got a lot of help on this */ +/* Project 3 */ + +.main-grid { + background: black; + height: 50em; + width: 25em; + display: grid; + grid-template: 1fr 1fr / 1fr; + grid-gap: 10px; +} + +.top-grid { + background: black; + grid-area: 1 / 1 / 2 / 2; + display: grid; + grid-template: 10% 1fr 25% / 1fr 3fr; + grid-gap: 10px; +} + +.top-grid .one.black { + grid-area: 1 / 1 / 2 / 2; +} + +.top-grid .two.red { + grid-area: 1 / 2 / 3 / 3; +} + +.top-grid .three.grey { + grid-area: 2 / 1 / 4 / 2; +} + +.top-grid .four.silver { + grid-area: 3 / 2 / 4 / 3; +} + +.bottom-grid { + background: black; + grid-area: 2 / 1 / 3 / 2; + display: grid; + grid-template: 8% 1fr 45% / 1fr 2.6fr 8fr 3.5fr; + grid-gap: 10px; +} + +.bottom-grid .one.black { + grid-area: 1 / 1 / 2 / 2; +} + +.bottom-grid .two.yellow { + grid-area: 2 / 1 / 4 / 2; +} + +.bottom-grid .three.silver { + grid-area: 1 / 2 / 4 / 3; +} + +.bottom-grid .four.silver { + grid-area: 1 / 3 / 3 / 5; +} + +.bottom-grid .five.grey { + grid-area: 3 / 3 / 4 / 4; +} + +.bottom-grid .six.blue { + grid-area: span 1 / span 1 / -1 / -1; +} + +.black { + background: black; +} + +.red { + background: red; +} + +.grey { + background: lightgrey; +} + +.silver { + background: silver; +} + +.yellow { + background: yellow; +} + +.blue { + background: blue; }