From 31cc123a4197180f4c10f597d25071c2e655316e Mon Sep 17 00:00:00 2001 From: Scott Ammon Date: Thu, 31 May 2018 18:01:27 -0700 Subject: [PATCH 1/7] layout 1 completed --- layout1/index.html | 31 +++++++++++- layout1/style.css | 114 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 142 insertions(+), 3 deletions(-) diff --git a/layout1/index.html b/layout1/index.html index 68e3d66..00fca1b 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..0554795 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,113 @@ -h1 { - color: rebeccapurple; +/*Make art 600px x 600px */ + +body { + width: 80%; + margin: 100px auto; + display: flex; + justify-content: center; + opacity: 0.8; } + +.grid-container { + display: grid; + height: 600px; + width: 600px; + 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: lightgray; +} + +.top-yellow { + width: 230px; + height: 60px; + background-color: yellow; +} + +/* 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: lightgray; +} + +.left-blue { + width: 35px; + height: 190px; + background-color: blue; +} + + +/* MIDDLE SECTION */ + +.middle { + grid-area: middle; + background-color: lightgray; +} + +/* 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: 380px; + background-color: lightgray; +} + +.right-red { + width: 110px; + height: 40px; + 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: #222; +} + From 65258aac07abe77ca1bca38ab591d5c11d4c0c52 Mon Sep 17 00:00:00 2001 From: Scott Ammon Date: Thu, 31 May 2018 18:03:14 -0700 Subject: [PATCH 2/7] removed css redundancy --- layout1/style.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/layout1/style.css b/layout1/style.css index 0554795..45c29d6 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -10,8 +10,6 @@ body { .grid-container { display: grid; - height: 600px; - width: 600px; grid-template-rows: 75px 400px 125px; grid-template-columns: 50px 425px 125px; grid-template-areas: "top top right" @@ -61,7 +59,6 @@ body { background-color: blue; } - /* MIDDLE SECTION */ .middle { From 07c193537d885ad2af0916510751783c65465d38 Mon Sep 17 00:00:00 2001 From: Scott Ammon Date: Thu, 31 May 2018 20:26:43 -0700 Subject: [PATCH 3/7] added layout 4 --- layout1/style.css | 19 +++++---- layout4/index.html | 21 +++++++++- layout4/style.css | 96 +++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 123 insertions(+), 13 deletions(-) diff --git a/layout1/style.css b/layout1/style.css index 45c29d6..b7f57a7 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -5,7 +5,6 @@ body { margin: 100px auto; display: flex; justify-content: center; - opacity: 0.8; } .grid-container { @@ -28,13 +27,13 @@ body { .top-gray { width: 230px; height: 60px; - background-color: lightgray; + background-color: #CFCECA; } .top-yellow { width: 230px; height: 60px; - background-color: yellow; + background-color: #E5E597; } /* LEFT SECTION */ @@ -50,20 +49,20 @@ body { .left-gray { width: 35px; height: 190px; - background-color: lightgray; + background-color: #CFCECA; } .left-blue { width: 35px; height: 190px; - background-color: blue; + background-color: #113F99; } /* MIDDLE SECTION */ .middle { grid-area: middle; - background-color: lightgray; + background-color: #CFCECA; } /* RIGHT SECTION */ @@ -84,13 +83,13 @@ body { .right-gray { width: 110px; - height: 380px; - background-color: lightgray; + height: 395px; + background-color: #CFCECA; } .right-red { width: 110px; - height: 40px; + height: 25px; background-color: red; } @@ -105,6 +104,6 @@ body { .bottom-gray { width: 475px; height: 110px; - background-color: #222; + background-color: #CFCECA; } 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..570e884 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 From 4d8a833fac56f111de148ad8c1489a8759ee9408 Mon Sep 17 00:00:00 2001 From: Scott Ammon Date: Thu, 31 May 2018 21:35:42 -0700 Subject: [PATCH 4/7] added layout 3 --- layout3/index.html | 30 +++++++++++- layout3/style.css | 117 ++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 143 insertions(+), 4 deletions(-) diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..cc261b6 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..13eee09 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: red; +} + +.top-gray { + width: 310px; + height: 235px; + background-color: lightgray; +} + +/* 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: lightgray; +} + +.middle-gray2 { + width: 310px; + height: 135px; + background-color: lightgray; +} + +/* 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: yellow; +} + +.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: blue; +} + +.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; } From 3b13073ffe037ba74429d1f4e0c52f70812d9238 Mon Sep 17 00:00:00 2001 From: Scott Ammon Date: Thu, 31 May 2018 21:39:30 -0700 Subject: [PATCH 5/7] fixed spacing issues --- layout1/index.html | 22 ++++----- layout1/style.css | 104 ++++++++++++++++++++--------------------- layout3/index.html | 18 ++++---- layout3/style.css | 112 ++++++++++++++++++++++----------------------- layout4/style.css | 94 ++++++++++++++++++------------------- 5 files changed, 175 insertions(+), 175 deletions(-) diff --git a/layout1/index.html b/layout1/index.html index 00fca1b..7f19bb7 100644 --- a/layout1/index.html +++ b/layout1/index.html @@ -10,28 +10,28 @@
-
-
-
-
+
+
+
+
-
-
+
+
- +
-
-
-
+
+
+
-
+
diff --git a/layout1/style.css b/layout1/style.css index b7f57a7..2468596 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -8,102 +8,102 @@ body { } .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"; + 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; + grid-area: top; + display:flex; + justify-content: space-between; + background-color: black; } .top-gray { - width: 230px; - height: 60px; - background-color: #CFCECA; + width: 230px; + height: 60px; + background-color: #CFCECA; } .top-yellow { - width: 230px; - height: 60px; - background-color: #E5E597; + 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; + 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; + width: 35px; + height: 190px; + background-color: #CFCECA; } .left-blue { - width: 35px; - height: 190px; - background-color: #113F99; + width: 35px; + height: 190px; + background-color: #113F99; } /* MIDDLE SECTION */ .middle { - grid-area: middle; - background-color: #CFCECA; + 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; + 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; + width: 110px; + height: 140px; + background-color: #222; } .right-gray { - width: 110px; - height: 395px; - background-color: #CFCECA; + width: 110px; + height: 395px; + background-color: #CFCECA; } .right-red { - width: 110px; - height: 25px; - background-color: red; + width: 110px; + height: 25px; + background-color: red; } /* BOTTOM SECTION */ .bottom { - grid-area: bottom; - display: flex; - align-items: flex-end; - background-color: black; + grid-area: bottom; + display: flex; + align-items: flex-end; + background-color: black; } .bottom-gray { - width: 475px; - height: 110px; - background-color: #CFCECA; + width: 475px; + height: 110px; + background-color: #CFCECA; } diff --git a/layout3/index.html b/layout3/index.html index cc261b6..524aa40 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -10,27 +10,27 @@
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
+
diff --git a/layout3/style.css b/layout3/style.css index 13eee09..c08fc89 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -8,109 +8,109 @@ body { } .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"; + 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; + grid-area: a; + display: flex; + align-items: flex-start; + justify-content: space-between; + background-color: black; } .top-red { - width: 280px; - height: 235px; - background-color: red; + width: 280px; + height: 235px; + background-color: red; } .top-gray { - width: 310px; - height: 235px; - background-color: lightgray; + width: 310px; + height: 235px; + background-color: lightgray; } /* MIDDLE SECTION */ .b { - grid-area: b; - display: flex; - align-items: flex-start; - justify-content: space-between; - background-color: black; + grid-area: b; + display: flex; + align-items: flex-start; + justify-content: space-between; + background-color: black; } .middle-gray { - width: 280px; - height: 135px; - background-color: lightgray; + width: 280px; + height: 135px; + background-color: lightgray; } .middle-gray2 { - width: 310px; - height: 135px; - background-color: lightgray; + width: 310px; + height: 135px; + background-color: lightgray; } /* BOTTOM LEFT SECTION */ .c { - grid-area: c; - display: flex; - align-items: flex-end; - justify-content: space-between; - background-color: black; + grid-area: c; + display: flex; + align-items: flex-end; + justify-content: space-between; + background-color: black; } .bottomleft-yellow { - width: 75px; - height: 200px; - background-color: yellow; + width: 75px; + height: 200px; + background-color: yellow; } .bottomleft-gray { - width: 195px; - height: 200px; - background-color: lightgray; + 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; + 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: blue; + width: 160px; + height: 165px; + background-color: blue; } .right-gray { - width: 160px; - height: 20px; - background-color: lightgray; + width: 160px; + height: 20px; + background-color: lightgray; } /* RIGHT SECTION */ .e { - grid-area: e; - background-color: black; + grid-area: e; + background-color: black; } .e-gray { - width: 140px; - height: 200px; - background-color: lightgray; + width: 140px; + height: 200px; + background-color: lightgray; } diff --git a/layout4/style.css b/layout4/style.css index 570e884..c02f943 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -8,88 +8,88 @@ body { } .grid-container { - display: grid; - grid-template-rows: 450px 150px; - grid-template-columns: 150px 410px 40px; - grid-template-areas: "left middle right" - "left middle right"; + 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; + 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; + width: 135px; + height: 180px; + background-color: #EBF7CE; } .left-gray2 { - width: 135px; - height: 250px; - background-color: #EBF7CE; + width: 135px; + height: 250px; + background-color: #EBF7CE; } .left-blue { - width: 135px; - height: 135px; - background-color: #001F47; + 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; + 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; + width: 410px; + height: 450px; + background-color: #8C180A; } .middle-gray { - width: 395px; - height: 135px; - background-color: #EBF7CE; + 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; + 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; + width: 40px; + height: 450px; + background-color: #8C180A; } .right-gray { - width: 40px; - height: 60px; - background-color: #EBF7CE; + width: 40px; + height: 60px; + background-color: #EBF7CE; } .right-yellow { - width: 40px; - height: 60px; - background-color: #DB9F01; + width: 40px; + height: 60px; + background-color: #DB9F01; } \ No newline at end of file From 1185bdf3548e6b722100328196a14907e9c33659 Mon Sep 17 00:00:00 2001 From: Scott Ammon Date: Fri, 1 Jun 2018 09:38:45 -0700 Subject: [PATCH 6/7] first pass at layout #2 --- layout2/index.html | 25 +++++++++++- layout2/style.css | 97 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 118 insertions(+), 4 deletions(-) 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..9762dc6 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: 50vw; + height: 75vh; + grid-row-gap: .5em; + 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: .5em; + grid-column-gap: .5em; + 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: red; +} + +.t-gray { + grid-area: t-gray; + background-color: antiquewhite; +} + +.t-gray2 { + grid-area: t-gray2; + background-color: lightgray; +} + + +/* BOTTOM SECTION */ + +.bottom { + display: grid; + grid-area: bottom; + grid-gap: .5em; + grid-template-rows: .2fr .3fr .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: lightgray; +} + +.b-gray2 { + grid-area: b-gray2; + background-color: lightgray; +} + +.b-offwhite { + grid-area: b-offwhite; + background-color: antiquewhite; +} + +.b-blue { + grid-area: b-blue; + background-color: blue; +} \ No newline at end of file From c0ecc38e2edaef9c71291594a93adae0e52a8ee2 Mon Sep 17 00:00:00 2001 From: Scott Ammon Date: Fri, 1 Jun 2018 09:49:13 -0700 Subject: [PATCH 7/7] fixed colors --- layout2/style.css | 28 ++++++++++++++-------------- layout3/style.css | 12 ++++++------ 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/layout2/style.css b/layout2/style.css index 9762dc6..79556ae 100644 --- a/layout2/style.css +++ b/layout2/style.css @@ -6,9 +6,9 @@ body { .grid-container { display: grid; - width: 50vw; - height: 75vh; - grid-row-gap: .5em; + width: 50%; + min-height: 75vh; + grid-row-gap: .6em; grid-template-rows: .6fr .4fr; background-color: black; grid-template-columns: 100%; @@ -21,8 +21,8 @@ body { .top { display: grid; grid-area: top; - grid-row-gap: .5em; - grid-column-gap: .5em; + grid-row-gap: .6em; + grid-column-gap: .6em; grid-template-rows: .15fr .55fr .3fr; grid-template-columns: .25fr .75fr; background-color: black; @@ -38,17 +38,17 @@ body { .t-red { grid-area: t-red; - background-color: red; + background-color: #BF2007; } .t-gray { grid-area: t-gray; - background-color: antiquewhite; + background-color: #DFE3DC; } .t-gray2 { grid-area: t-gray2; - background-color: lightgray; + background-color: #B2B5BD; } @@ -57,8 +57,8 @@ body { .bottom { display: grid; grid-area: bottom; - grid-gap: .5em; - grid-template-rows: .2fr .3fr .5fr; + 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" @@ -77,20 +77,20 @@ body { .b-gray { grid-area: b-gray; - background-color: lightgray; + background-color: #B2B5BD; } .b-gray2 { grid-area: b-gray2; - background-color: lightgray; + background-color: #B2B5BD; } .b-offwhite { grid-area: b-offwhite; - background-color: antiquewhite; + background-color: #DFE3DC; } .b-blue { grid-area: b-blue; - background-color: blue; + background-color: #001661; } \ No newline at end of file diff --git a/layout3/style.css b/layout3/style.css index c08fc89..a0c8cc5 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -28,13 +28,13 @@ body { .top-red { width: 280px; height: 235px; - background-color: red; + background-color: #CC1C0F; } .top-gray { width: 310px; height: 235px; - background-color: lightgray; + background-color: #DFE3DC; } /* MIDDLE SECTION */ @@ -50,13 +50,13 @@ body { .middle-gray { width: 280px; height: 135px; - background-color: lightgray; + background-color: #DFE3DC; } .middle-gray2 { width: 310px; height: 135px; - background-color: lightgray; + background-color: #DFE3DC; } /* BOTTOM LEFT SECTION */ @@ -72,7 +72,7 @@ body { .bottomleft-yellow { width: 75px; height: 200px; - background-color: yellow; + background-color: #D6AE23; } .bottomleft-gray { @@ -94,7 +94,7 @@ body { .right-blue { width: 160px; height: 165px; - background-color: blue; + background-color: #00094F; } .right-gray {