diff --git a/layout1/index.html b/layout1/index.html index 68e3d66..7f19bb7 100644 --- a/layout1/index.html +++ b/layout1/index.html @@ -7,6 +7,35 @@ -

I love art!

+ +
+ +
+
+
+
+ +
+
+
+
+ +
+ +
+ +
+
+
+
+
+ +
+
+
+ +
+ + diff --git a/layout1/style.css b/layout1/style.css index 7b34845..2468596 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,109 @@ -h1 { - color: rebeccapurple; +/*Make art 600px x 600px */ + +body { + width: 80%; + margin: 100px auto; + display: flex; + justify-content: center; } + +.grid-container { + display: grid; + grid-template-rows: 75px 400px 125px; + grid-template-columns: 50px 425px 125px; + grid-template-areas: "top top right" + "left middle right" + "bottom bottom right"; +} + +/* TOP SECTION */ +.top { + grid-area: top; + display:flex; + justify-content: space-between; + background-color: black; +} + +.top-gray { + width: 230px; + height: 60px; + background-color: #CFCECA; +} + +.top-yellow { + width: 230px; + height: 60px; + background-color: #E5E597; +} + +/* LEFT SECTION */ +.left { + grid-area: left; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + background-color: black; +} + +.left-gray { + width: 35px; + height: 190px; + background-color: #CFCECA; +} + +.left-blue { + width: 35px; + height: 190px; + background-color: #113F99; +} + +/* MIDDLE SECTION */ + +.middle { + grid-area: middle; + background-color: #CFCECA; +} + +/* RIGHT SECTION */ +.right { + grid-area: right; + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: space-between; + background-color: black; +} + +.right-black { + width: 110px; + height: 140px; + background-color: #222; +} + +.right-gray { + width: 110px; + height: 395px; + background-color: #CFCECA; +} + +.right-red { + width: 110px; + height: 25px; + background-color: red; +} + +/* BOTTOM SECTION */ +.bottom { + grid-area: bottom; + display: flex; + align-items: flex-end; + background-color: black; +} + +.bottom-gray { + width: 475px; + height: 110px; + background-color: #CFCECA; +} + diff --git a/layout2/index.html b/layout2/index.html index d2f87d2..d3b04fe 100644 --- a/layout2/index.html +++ b/layout2/index.html @@ -7,6 +7,27 @@ -

I love art!

+ +
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+ + - + \ No newline at end of file diff --git a/layout2/style.css b/layout2/style.css index 7b34845..79556ae 100644 --- a/layout2/style.css +++ b/layout2/style.css @@ -1,3 +1,96 @@ -h1 { - color: rebeccapurple; +body { + margin: 100px auto; + display: flex; + justify-content: center; } + +.grid-container { + display: grid; + width: 50%; + min-height: 75vh; + grid-row-gap: .6em; + grid-template-rows: .6fr .4fr; + background-color: black; + grid-template-columns: 100%; + grid-template-areas: "top" + "bottom"; +} + +/* TOP SECTION */ + +.top { + display: grid; + grid-area: top; + grid-row-gap: .6em; + grid-column-gap: .6em; + grid-template-rows: .15fr .55fr .3fr; + grid-template-columns: .25fr .75fr; + background-color: black; + grid-template-areas: "t-black t-red" + "t-gray t-red" + "t-gray t-gray2"; +} + +.t-black { + grid-area: t-black; + background-color: black; +} + +.t-red { + grid-area: t-red; + background-color: #BF2007; +} + +.t-gray { + grid-area: t-gray; + background-color: #DFE3DC; +} + +.t-gray2 { + grid-area: t-gray2; + background-color: #B2B5BD; +} + + +/* BOTTOM SECTION */ + +.bottom { + display: grid; + grid-area: bottom; + grid-gap: .6em; + grid-template-rows: .15fr .35fr .5fr; + grid-template-columns: .1fr .14fr .56fr .2fr; + grid-template-areas: "b-black b-gray b-gray2 b-gray2" + "b-yellow b-gray b-gray2 b-gray2" + "b-yellow b-gray b-offwhite b-blue"; +} + +.b-black { + grid-area: b-black; + background-color: black; +} + +.b-yellow { + grid-area: b-yellow; + background-color: yellow; +} + +.b-gray { + grid-area: b-gray; + background-color: #B2B5BD; +} + +.b-gray2 { + grid-area: b-gray2; + background-color: #B2B5BD; +} + +.b-offwhite { + grid-area: b-offwhite; + background-color: #DFE3DC; +} + +.b-blue { + grid-area: b-blue; + background-color: #001661; +} \ No newline at end of file diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..524aa40 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -7,6 +7,32 @@ -

I love art!

+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ +
- + \ No newline at end of file diff --git a/layout3/style.css b/layout3/style.css index 7b34845..a0c8cc5 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -1,3 +1,116 @@ -h1 { - color: rebeccapurple; +/*Make art 600px x 600px */ + +body { + width: 80%; + margin: 100px auto; + display: flex; + justify-content: center; +} + +.grid-container { + display: grid; + grid-template-rows: 250px 150px 200px; + grid-template-columns: 280px 180px 140px; + grid-template-areas: "a a a" + "b b b" + "c d e"; +} + +/* TOP SECTION */ +.a { + grid-area: a; + display: flex; + align-items: flex-start; + justify-content: space-between; + background-color: black; +} + +.top-red { + width: 280px; + height: 235px; + background-color: #CC1C0F; +} + +.top-gray { + width: 310px; + height: 235px; + background-color: #DFE3DC; +} + +/* MIDDLE SECTION */ + +.b { + grid-area: b; + display: flex; + align-items: flex-start; + justify-content: space-between; + background-color: black; +} + +.middle-gray { + width: 280px; + height: 135px; + background-color: #DFE3DC; +} + +.middle-gray2 { + width: 310px; + height: 135px; + background-color: #DFE3DC; +} + +/* BOTTOM LEFT SECTION */ + +.c { + grid-area: c; + display: flex; + align-items: flex-end; + justify-content: space-between; + background-color: black; +} + +.bottomleft-yellow { + width: 75px; + height: 200px; + background-color: #D6AE23; +} + +.bottomleft-gray { + width: 195px; + height: 200px; + background-color: lightgray; +} + +/* BOTTOM RIGHT SECTION */ +.d { + grid-area: d; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + background-color: black; +} + +.right-blue { + width: 160px; + height: 165px; + background-color: #00094F; +} + +.right-gray { + width: 160px; + height: 20px; + background-color: lightgray; +} + +/* RIGHT SECTION */ +.e { + grid-area: e; + background-color: black; +} + +.e-gray { + width: 140px; + height: 200px; + background-color: lightgray; } diff --git a/layout4/index.html b/layout4/index.html index daa3be4..1f1da67 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -7,6 +7,25 @@ -

I love art!

+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ +
diff --git a/layout4/style.css b/layout4/style.css index 7b34845..c02f943 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,95 @@ -h1 { - color: rebeccapurple; +/*Make art 600px x 600px */ + +body { + width: 80%; + margin: 100px auto; + display: flex; + justify-content: center; } + +.grid-container { + display: grid; + grid-template-rows: 450px 150px; + grid-template-columns: 150px 410px 40px; + grid-template-areas: "left middle right" + "left middle right"; +} + +/* LEFT SECTION */ +.left { + grid-area: left; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + background-color: black; +} + +.left-gray { + width: 135px; + height: 180px; + background-color: #EBF7CE; +} + +.left-gray2 { + width: 135px; + height: 250px; + background-color: #EBF7CE; +} + +.left-blue { + width: 135px; + height: 135px; + background-color: #001F47; +} + +/* MIDDLE SECTION */ + +.middle { + grid-area: middle; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + background-color: black; +} + +.middle-red { + width: 410px; + height: 450px; + background-color: #8C180A; +} + +.middle-gray { + width: 395px; + height: 135px; + background-color: #EBF7CE; +} + +/* RIGHT SECTION */ +.right { + grid-area: right; + display: flex; + flex-direction: column; + align-items: flex-end; + justify-content: space-between; + background-color: black; +} + +.right-red { + width: 40px; + height: 450px; + background-color: #8C180A; +} + +.right-gray { + width: 40px; + height: 60px; + background-color: #EBF7CE; +} + +.right-yellow { + width: 40px; + height: 60px; + background-color: #DB9F01; +} \ No newline at end of file