diff --git a/layout1/index.html b/layout1/index.html index 68e3d66..8dce8f7 100644 --- a/layout1/index.html +++ b/layout1/index.html @@ -8,5 +8,25 @@

I love art!

+

Tableau II

+ +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
diff --git a/layout1/style.css b/layout1/style.css index 7b34845..92f883a 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,77 @@ -h1 { - color: rebeccapurple; +body { + margin: auto; + text-align: center; } + +#container { + width: 40%; + min-height: 75vh; + margin: auto; + background-color: black; + border: 1px solid black; + display: flex; +} + +.left { + flex: 3; + display: grid; + border-right: 1em solid black; + grid-column-gap: 1em; + grid-row-gap: 1em; + grid-template-columns: 2em 1fr 1fr; + grid-template-rows: 3em 1fr 1fr 10em; + grid-template-areas: "l1 l1 l2" "l3 l4 l4" "l5 l4 l4" "l6 l6 l6"; +} + +.l1 { + grid-area: l1; + background-color: #d6dad9; +} + +.l2 { + grid-area: l2; + background-color: #e0e39e +} + +.l3 { + grid-area: l3; + background-color: #d6dad9; +} + +.l4 { + grid-area: l4; + background-color: #d6dad9; +} + +.l5 { + grid-area: l5; + background-color: #304c9e; +} + +.l6 { + grid-area: l6; + background-color: #d6dad9; +} + +.right { + flex: 1; + display: flex; + flex-direction: column; +} + +.r1 { + flex: 1; + background-color: #2c2c2c; +} + +.r2 { + background-color: #d6dad9; + flex: 2; + border-top: 1em solid black; + border-bottom: 1em solid black; +} + +.r3 { + background-color: #df4c20; + flex: 0.5; +} \ No newline at end of file diff --git a/layout2/index.html b/layout2/index.html index d2f87d2..a1e8618 100644 --- a/layout2/index.html +++ b/layout2/index.html @@ -7,6 +7,36 @@ -

I love art!

+

Tableau I

+ +
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ diff --git a/layout2/style.css b/layout2/style.css index 7b34845..0580d3c 100644 --- a/layout2/style.css +++ b/layout2/style.css @@ -1,3 +1,133 @@ h1 { color: rebeccapurple; } + +.container { + display: flex; + min-height: 110vh; + width: 46%; + margin: auto; + background-color: black; + border: 1px solid black; +} + +.left { + flex: 1; + display: flex; + flex-direction: column; + border-right: 1em solid black; +} + +.l1 { + flex: 1.56; + background-color: #eeeeee; + display: flex; + flex-direction: column; +} + +.l1-1 { + flex: 1; + background-color: black; +} + +.l1-2 { + flex: 6; + background-color: #ececec; +} + +.l2 { + flex: 1; + display: grid; + grid-column-gap: 1em; + grid-row-gap: 1em; + grid-template-rows: 30px 1fr; + grid-template-columns: 20% 1fr; + grid-template-areas: "l2-1 l2-3" "l2-2 l2-3"; + border-top: 1em solid black; +} + +.l2-1 { + background-color: black; + grid-area: l2-1; +} + +.l2-2 { + background-color: #fdf974; + grid-area: l2-2; +} + +.l2-3 { + background-color: #d0d3da; + grid-area: l2-3; +} + +.right { + flex: 3; + display: flex; + flex-direction: column; +} + +.r1 { + background-color: #dd0b19; + flex: 2; + margin-bottom: 1em; +} + +.r2 { + flex: 2; + display: grid; + grid-column-gap: 1em; + grid-row-gap: 1em; + grid-template-rows: 50% 50%; + grid-template-columns: 1fr 20px; + grid-template-areas: "r2-1 r2-3" "r2-2 r2-3"; +} + +.r2-1 { + background-color: #cfd4da; + grid-area: r2-1; +} + +.r2-2 { + background-color: #cfd4da; + grid-area: r2-2; +} + +.r2-3 { + background-color: #eff4f0; + grid-area: r2-3; +} + +.r3 { + background-color: #d1c5c5; + flex: 1; + border-top: 1em solid black; + display: flex; +} + + +.r3-1 { + background-color: #d1c3c2; + flex: 2.4; +} + +.r3-2 { + background-color: #080b4e; + flex: 1; + border-left: 1em solid black; +} + + + + + + + + + + + + + + + diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..9d7b6d7 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -7,6 +7,29 @@ -

I love art!

+

Composition C

+ +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
diff --git a/layout3/style.css b/layout3/style.css index 7b34845..36e51be 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -1,3 +1,89 @@ h1 { color: rebeccapurple; + text-align: center; } + +.container { + border: 1px solid black; + background-color: #030402; + display: flex; + width: 60%; + height: 100vh; + margin: auto; +} + +.left { + flex: 1; + display: flex; + flex-direction: column; +} + +.l1 { + background-color: #e30f19; + flex: 4; +} + +.l2 { + background-color: #ddded8; + flex: 2; + margin: 1em 0; +} + +.l3 { + flex: 3; + display: flex; +} + +.l3-1 { + flex: 1; + background-color: #fcd231; + border-right: 1em solid black; +} + +.l3-2 { + flex: 4; + background-color: #cdc9c6; +} + +.right { + flex: 1.3; + display: flex; + flex-direction: column; + border-left: 0.6em solid black; +} + +.r1 { + flex: 4; + background-color: #e3e8e1; +} + +.r2 { + flex: 2; + background-color: #e3e8e1; + margin: 1em 0; +} + +.r3 { + flex: 3; + display: grid; + grid-template-rows: 1fr 15%; + grid-template-columns: 1fr 40%; + grid-template-areas: "r3-1 r3-3" "r3-2 r3-3"; + grid-row-gap: 1em; + grid-column-gap: 1em; +} + +.r3-1 { + grid-area: r3-1; + background-color: #1c175b; +} + +.r3-2 { + grid-area: r3-2; + background-color: #c8c4c3; +} + +.r3-3 { + grid-area: r3-3; + background-color: #c8c4c3; +} \ No newline at end of file diff --git a/layout4/index.html b/layout4/index.html index daa3be4..858f10c 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -7,6 +7,26 @@ -

I love art!

+

Composition II

+ +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+ diff --git a/layout4/style.css b/layout4/style.css index 7b34845..dcb0d82 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,76 @@ h1 { color: rebeccapurple; + text-align: center; +} + +.container { + display: flex; + margin: 1px solid black; + width: 60%; + height: 800px; + margin: auto; + border: 1px solid black; +} + +.left { + flex: 1; + display: flex; + flex-direction: column; + border-right: 1em solid black; +} + +.l1 { + background-color: #dbe1c1; + flex: 1.1; + border-bottom: 1.5em solid black; +} + +.l2 { + background-color: #dbe1c1; + flex: 1.5; + border-bottom: 1.5em solid black; +} + +.l3 { + background-color: #0d1a3b; + flex: 1; +} + +.right { + flex: 2.7; + display: flex; + flex-direction: column; +} + +.r1 { + background-color: #7c1509; + flex: 2.7; + border-bottom: 1.5em solid black; +} + +.r2 { + flex: 1; + display: grid; + grid-template-rows: 50% 50%; + grid-template-columns: 1fr 5em; + grid-template-areas: "r2-1 r2-2" "r2-1 r2-3"; +} + +.r2-1 { + grid-area: r2-1; + background-color: #dbe1c1; +} + +.r2-2 { + grid-area: r2-2; + background-color: #dbe1c1; + border-left: 1em solid black; + border-bottom: 0.5em solid black; +} + +.r2-3 { + border-left: 1em solid black; + grid-area: r2-3; + background-color: #c88e20; + border-top: 0.5em solid black; }