diff --git a/layout1/index.html b/layout1/index.html index 68e3d66..180e209 100644 --- a/layout1/index.html +++ b/layout1/index.html @@ -7,6 +7,26 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/layout1/style.css b/layout1/style.css index 7b34845..b85269a 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,124 @@ -h1 { - color: rebeccapurple; +/* tableau II palette */ +.yellow { + background-color: #E4E89B } +.red { + background-color: #DF481C; +} +.blue { + background-color: #2F4D99; +} + +.gray { + background-color: #D9DDDB; +} + +.dark-gray { + background-color: #2C2C2C; +} + +/* CONTAINER */ + +#container { + width: 70%; + margin: 10em auto; + min-height: 100vh; + display: grid; + grid-template-rows: 1fr; + grid-template-columns: 0.7fr .3fr; + grid-template-areas: "left-panel right-panel"; + +} + +/* GRID PANELS */ + +#left-panel { + grid-area: left-panel; + +} + +#right-panel { + grid-area: right-panel; + border-left: 1em solid black; +} + +/* LEFT SIDE STACK */ + +#top-double-container { + background-color: #000; + height: 15%; + display: flex; + justify-content: space-around; + align-items: space-around; + flex-direction: row; +} +/* top */ +.top-double { + width: 50%; + height: 90%; + border-bottom: 1em solid black; +} + +.top-double:first-child { + border-right: 1em solid black; +} +/* middle and bottom */ +#left-stack-container { + height: 85%; + display: grid; + grid-template-columns: 0.1fr 0.9fr; + grid-template-rows: 0.4fr 0.35fr 0.25fr; + grid-template-areas: "left-left-top left-right" + "left-left-mid left-right" + "left-bottom left-bottom"; +} + +#left-left-top { + grid-area: left-left-top; +} + +#left-left-mid { + grid-area: left-left-mid; + border-top: 1em solid black; +} + +#left-right { + grid-area: left-right; + border-left: 1em solid black; +} + +#left-bottom { + grid-area: left-bottom; + border-top: 1em solid black; +} + +/* RIGHT SIDE STACK */ + +#right-stack-container { + height: 100%; + width: 100%; + background: #D9DDDB; + display: flex; + flex-direction: column; + align-items: space-between; + justify-content: center; + +} + +#right-top { + /* background-color: #2C2C2C; */ + height: 30%; + width: 100%; + border-bottom: 1em solid black; +} + +#right-mid { + /* background-color: #D9DDDB; */ + height: 60%; +} + +#right-bottom { + /* background-color: #DF481C; */ + height:10%; + border-top: 1em solid black; +} \ No newline at end of file diff --git a/layout2/index.html b/layout2/index.html index d2f87d2..555945d 100644 --- a/layout2/index.html +++ b/layout2/index.html @@ -7,6 +7,25 @@ -

I love art!

+
+
+
a
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
diff --git a/layout2/style.css b/layout2/style.css index 7b34845..293c366 100644 --- a/layout2/style.css +++ b/layout2/style.css @@ -1,3 +1,102 @@ -h1 { - color: rebeccapurple; +/* tableau I palette */ +.yellow { + background-color: #F9F673; +} +.red { + background-color: #DE0C19; +} +.blue { + background-color: #080E54; +} + +.gray { + background-color: #CED3D9; +} +.other-gray { + background-color: #F1F3F0; +} + +#container { + background-color: #000; + width: 40%; + margin: 10em auto; + min-height: 100vh; + display: grid; + grid-gap: 1em; + grid-template-rows: 0.4fr 0.2fr 0.25fr 0.15fr; + grid-template-columns: 0.25fr .7fr 0.05fr; + grid-template-areas: "left-top right-top right-top" + "left-top right-mid-top right-mid-right" + "left-bottom right-mid-bottom right-mid-right" + "left-bottom right-bottom right-bottom"; +} + +#left-top { + grid-area: left-top; + display: flex; + flex-direction: column; + /* align-items: flex-start; */ +} + +#top-black-chunk { + background-color: black; + width: 100%; + height: 5em; +} + +#left-bottom { + grid-area: left-bottom; +} + +#lb-container { + width:100%; + height: 100%; + display: grid; + grid-template-columns: 0.25fr 0.75fr; + grid-template-rows: 0.1fr 0.9fr; + grid-template-areas: "lb-black-chunk lb-right" + "lb-left lb-right"; +} + +#lb-black-chunk { + grid-area: lb-black-chunk; + background-color: #0C070B; +} + +#lb-left { + grid-area: lb-left; +} + +#lb-right { + grid-area: lb-right; + border-left: 1em solid black; +} + +#right-top { + grid-area: right-top; +} + +#right-mid-top { + grid-area: right-mid-top; +} + +#right-mid-bottom { + grid-area: right-mid-bottom; +} + +#right-mid-right { + grid-area: right-mid-right; +} + +#right-bottom { + border-bottom: 1em solid black; + grid-area: right-bottom; + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +#blue-chunk { + width: 8em; + border-left: 1em solid black; } diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..58c888f 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -7,6 +7,19 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/layout3/style.css b/layout3/style.css index 7b34845..61e65ce 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -1,3 +1,82 @@ -h1 { - color: rebeccapurple; +/* composition c palette */ +.yellow { + background-color: #F9F673; } +.red { + background-color: #DE0C19; +} +.blue { + background-color: #080E54; +} + +.gray { + background-color: #CED3D9; +} +.other-gray { + background-color: #F1F3F0; +} + +#container { + background-color: #000; + width: 70%; + margin: 10em auto; + min-height: 100vh; + display: grid; + grid-gap: 1em; + grid-template-columns: 0.45fr 0.55fr; + grid-template-rows: 0.4fr 0.35fr 0.25fr; + grid-template-areas: "left-top right-top" + "left-mid right-mid" + "left-bottom right-bottom"; +} + +#left-top { + grid-area: left-top; +} + +#left-mid { + grid-area: left-mid; +} + +#left-bottom { + grid-area: left-bottom; + display: flex; +} + +#yellow-block { + width: 4em; + border-right: 1em solid black; +} + +#right-top { + grid-area: right-top; +} + +#right-mid { + grid-area: right-mid; +} + +#right-bottom { + grid-area: right-bottom; + display: grid; + grid-template-columns: 0.55fr 0.45fr; + grid-template-rows: 0.9fr 0.1fr; + grid-template-areas: "blue-block leftover-gray" + "under-blue leftover-gray"; +} + +#blue-block { + grid-area: blue-block; + border-bottom: 1em solid black; +} + +#under-blue { + grid-area: under-blue; +} + +#leftover-gray { + grid-area: leftover-gray; + border-left: 1em solid black; +} + + diff --git a/layout4/index.html b/layout4/index.html index daa3be4..a6d54af 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -7,6 +7,14 @@ -

I love art!

+
+
+
+
+
+
+
+
+
diff --git a/layout4/style.css b/layout4/style.css index 7b34845..aeb2faf 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,59 @@ -h1 { - color: rebeccapurple; +/* composition II in red, blue, and yellow palette */ +.red { + background-color: #811B0D; +} + +.blue { + background-color: #0C183C; +} + +.yellow { + background-color: #D59725; +} + +.offwhite { + background-color: #EEF1CF; +} + +#container { + background-color: #000; + width: 70%; + margin: 10em auto; + min-height: 100vh; + display: grid; + grid-gap: 1em; + grid-template-columns: 0.2fr 0.7fr 0.1fr; + grid-template-rows: 0.3fr 0.4fr 0.15fr 0.15fr; + grid-template-areas: "left-top right-top right-top" + "left-mid right-top right-top" + "left-bottom mid-bottom right-mid" + "left-bottom mid-bottom right-bottom"; +} + +#left-top { + grid-area: left-top; +} + +#left-mid { + grid-area: left-mid; +} + +#left-bottom { + grid-area: left-bottom; +} + +#right-top { + grid-area: right-top; +} + +#mid-bottom { + grid-area: mid-bottom; +} + +#right-mid { + grid-area: right-mid; +} + +#right-bottom { + grid-area: right-bottom; }