diff --git a/layout1/index.html b/layout1/index.html index 68e3d66..74e4e73 100644 --- a/layout1/index.html +++ b/layout1/index.html @@ -7,6 +7,18 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/layout1/style.css b/layout1/style.css index 7b34845..4c01fee 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,98 @@ -h1 { - color: rebeccapurple; +.wrapper { + display: grid; + height: 90vh; + width: 600px; + margin: auto; + margin-top: 5%; + grid-template-columns: 400px 100px; + grid-template-rows: 580px; + grid-template-areas: "gray1 black1"; } + +.gray { + background-color: #dde0df; +} + +.yellow { + background-color: #e4e795; +} + +.black { + background-color: #2a2a28; +} + +.blue { + background-color: #22469b; +} + +.orange { + background-color: #d34718; +} + +.box1 { + grid-area: gray1; + border: 1px solid black; + border-right: 5px solid black; + display: grid; + grid-template-rows: 60px 200px 180px; + grid-template-columns: 30px 185px 180px; + grid-template-areas: "gray3 gray3 yellow1" + "gray5 gray4 gray4" + "blue1 gray4 gray4"; +} + +.box5 { + grid-area: gray3; + border: 1px solid black; + border-bottom: 10px solid black; + border-right: 10px solid black; +} + +.box6 { + grid-area: yellow1; + border: 1px solid black; + border-bottom: 10px solid black; +} + +.box7 { + grid-area: gray4; + border: 1px solid black; + border-bottom: 10px solid black; +} + +.box8 { + grid-area: blue1; + border: 1px solid black; + border-bottom: 10px solid black; + border-right: 10px solid black; + border-top: 10px solid black; +} + +.box9 { + grid-area: gray5; + border: 1px solid black; + border-right: 10px solid black; +} + +.box2 { + grid-area: black1; + border: 1px solid black; + border-left: 5px solid black; + display: grid; + align-content: end; + grid-template-rows: 440px 25px; + grid-template-areas: "gray2" + "orange1"; +} + +.box3 { + grid-area: gray2; + border: 1px solid black; + border-top: 10px solid black; +} + +.box4 { + grid-area: orange1; + border: 1px solid black; + border-top: 10px solid black; +} \ No newline at end of file diff --git a/layout2/index.html b/layout2/index.html index d2f87d2..414f3d2 100644 --- a/layout2/index.html +++ b/layout2/index.html @@ -7,6 +7,20 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/layout2/style.css b/layout2/style.css index 7b34845..4fd372c 100644 --- a/layout2/style.css +++ b/layout2/style.css @@ -1,3 +1,121 @@ -h1 { - color: rebeccapurple; +.wrapper { + display: grid; + height: 90vh; + width: 600px; + margin: auto; + margin-top: 5%; + grid-template-columns: 100px 275px; + grid-template-rows: 600px; + grid-template-areas: "black1 red1"; } + +.black { + background-color: #040205; +} + +.red { + background-color: #e10206; +} + +.lightgray { + background-color: #eceeeb; +} + +.gray { + background-color: #cdccd4; +} + +.yellow { + background-color: #fbfa53; +} + +.blue { + background-color: #060854; +} + +.box1 { + border: 1px solid black; + grid-area: black1; + border-right: 7px solid black; + display: grid; + align-content: end; + grid-template-columns: 30px 70px; + grid-template-rows: 290px 40px 220px; + grid-template-areas: "gray2 gray2" + "black2 gray3" + "yellow1 gray3"; +} + +.box2 { + border: 1px solid black; + grid-area: red1; + display: grid; + align-content: end; + grid-template-columns: 195px 70px 9px; + grid-template-rows: 120px 140px 120px; + grid-template-areas: "gray4 gray4 gray6" + "gray5 gray5 gray6" + "gray7 blue1 blue1"; + +} + +.box3 { + border: 1px solid black; + grid-area: gray2; + border-right: 7px solid black; +} + +.box4 { + border: 1px solid black; + grid-area: black2; + border-right: 7px solid black; + border-top: 7px solid black; +} + +.box5 { + border: 1px solid black; + grid-area: yellow1; + border-right: 7px solid black; +} + +.box6 { + border: 1px solid black; + grid-area: gray3; + border-right: 7px solid black; + border-top: 7px solid black; +} + +.box7 { + border: 1px solid black; + grid-area: gray4; + border-right: 7px solid black; + border-top: 7px solid black; +} + +.box8 { + border: 1px solid black; + grid-area: gray5; + border-right: 7px solid black; + border-top: 7px solid black; +} + +.box9 { + border: 1px solid black; + grid-area: gray6; + border-top: 7px solid black; +} + +.box10 { + border: 1px solid black; + grid-area: gray7; + border-bottom: 7px solid black; + border-top: 7px solid black; + border-right: 7px solid black; +} + +.box11 { + border: 1px solid black; + grid-area: blue1; + border-bottom: 7px solid black; + border-top: 7px solid black; +} \ No newline at end of file diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..7b7674b 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -7,6 +7,18 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
+
+
+
- + \ No newline at end of file diff --git a/layout3/style.css b/layout3/style.css index 7b34845..c770b57 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -1,3 +1,92 @@ -h1 { - color: rebeccapurple; +.wrapper { + display: grid; + height: 90vh; + width: 600px; + margin: auto; + margin-top: 5%; + grid-template-columns: 270px 320px; + grid-template-rows: 550px; + grid-template-areas: "red1 gray1"; } + +.red { + background-color: #e70405; +} + +.gray { + background-color: #e3e3e1; +} + +.yellow { + background-color: #f4c205; +} + +.blue { + background-color: #160b52; +} + +.box1 { + grid-area: red1; + border: 1px solid black; + border-right: 7px solid black; + display: grid; + grid-template-columns: 50px 220px; + grid-template-rows: 140px 190px; + align-content: end; + grid-template-areas: "gray2 gray2" + "yellow1 gray3"; +} + +.box2 { + grid-area: gray1; + border: 1px solid black; + display: grid; + grid-template-columns: 170px 149px; + grid-template-rows: 140px 170px 20px; + align-content: end; + grid-template-areas: "gray4 gray4" + "blue1 gray5" + "gray6 gray5"; +} + +.box3 { + grid-area: gray2; + border-right: 7px solid black; + border-top: 7px solid black; + border-bottom: 7px solid black; +} + +.box4 { + grid-area: yellow1; + border: 1px solid black; + border-right: 7px solid black; +} + +.box5 { + grid-area: gray3; + border: 1px solid black; + border-right: 7px solid black; +} + +.box6 { + grid-area: gray4; + border: 1px solid black; + border-top: 7px solid black; + border-bottom: 7px solid black; +} + +.box7 { + grid-area: blue1; + border: 1px solid black; + border-bottom: 7px solid black; +} + +.box8 { + grid-area: gray5; + border: 1px solid black; + border-left: 7px solid black; +} + +.box9 { + grid-area: gray6; +} \ No newline at end of file diff --git a/layout4/index.html b/layout4/index.html index daa3be4..e184b6c 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -7,6 +7,15 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
diff --git a/layout4/style.css b/layout4/style.css index 7b34845..2f5c6ce 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,73 @@ -h1 { - color: rebeccapurple; +.wrapper { + display: grid; + height: 90vh; + width: 600px; + margin: auto; + margin-top: 8%; + grid-template-columns: 117px 320px; + grid-template-rows: 140px 170px 125px; + grid-template-areas: "gray1 red1" + "gray2 red1" + "blue1 gray3"; } + +.gray { + background-color: #f0f5db; + border: 3px solid black; +} + +.red { + background-color: #831901; + border: 3px solid black; +} + +.blue { + background-color: #0c1a3c; + border: 3px solid black; +} + +.yellow { + background-color: #d69903; + border: 1px solid black; +} + +#box1 { + grid-area: gray1; + border-bottom: 8px solid black; +} + +#box2 { + grid-area: gray2; +} + +#box3 { + grid-area: blue1; +} + +#box4 { + grid-area: red1; +} + +#box5 { + grid-area: gray3; + display: grid; + grid-template-rows: 60px 60px; + grid-template-columns: 32px; + justify-content: end; + grid-template-areas: "gray4" + "yellow1"; +} + +#box6 { + grid-area: gray4; + border: 0px; + border-left: 6px solid black; + border-bottom: 5px solid black; +} + +#box7 { + grid-area: yellow1; + border: 0px; + border-left: 6px solid black; + border-top: 5px solid black; +} \ No newline at end of file