diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..37620cf 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -7,6 +7,22 @@ -

I love art!

+ +
+
1
+
2
+
3
+
4
+
+
+
+ +
+
+
+
+
+
+
diff --git a/layout3/style.css b/layout3/style.css index 7b34845..b5df96c 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -1,3 +1,101 @@ -h1 { - color: rebeccapurple; +.wrapper{ + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 2fr 1fr 2fr; + width: 350px; + height: 400px; + margin: auto auto auto auto; + } + +.boxOne{ + background-color: crimson; + border-top: none; + border-left: none; + border-bottom: 5px solid black; + border-right: 3px solid black; + + } + +.boxTwo{ + background-color: gainsboro; + border-top: none; + border-left: 3px solid black; + border-bottom: 5px solid black; + border-right: 1px solid darkgrey; + + } + +.boxThree{ + background-color: gainsboro; + border-top: 5px solid black; + border-left: none; + border-bottom: 5px solid black; + border-right: 3px solid black; + } + +.boxFour{ + background-color: gainsboro; + border-top: 5px solid black; + border-left: 3px solid black; + border-bottom: 5px solid black; + border-right: 1px solid darkgrey; + } + +.boxFive{ + display: grid; + grid-template-columns: 25% 1fr; + } + +.boxfiveOne{ + background-color: gold; + border-top: 5px solid black; + border-left: none; + border-bottom: 1px solid black; + border-right: 3px solid black; +} +.boxfiveTwo{ + background-color: gainsboro; + border-top: 5px solid black; + border-left: 3px solid black; + border-bottom: 1px solid black; + border-right: 3px solid black; +} + +.boxSix{ + display: grid; + grid-template-columns: 60% 1fr; + + } + + .boxSixOne{ + display: grid; + grid-template-rows: 75% 1fr; + } + .boxSixOneOne{ + background-color: darkblue; + border-top: 3px solid black; + border-left: 3px solid black; + border-bottom: 3px solid black; + border-right: 3px solid black; + } + .boxSixOneTwo{ + background-color: gainsboro; + border-top: 3px solid black; + border-left: 3px solid black; + border-bottom: 1px solid darkgrey; + border-right: 3px solid black; + } + + .boxSixTwo{ + background-color: gainsboro; + border-top: 3px solid black; + border-left: 3px solid black; + border-bottom: 1px solid darkgrey; + border-right: 1px solid darkgrey; +} + + + + + diff --git a/layout4/index.html b/layout4/index.html index daa3be4..57b7209 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -7,6 +7,33 @@ -

I love art!

+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
diff --git a/layout4/style.css b/layout4/style.css index 7b34845..2c34060 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,78 @@ -h1 { - color: rebeccapurple; +.wrapper{ + display: grid; + grid-template-columns: 20% 1fr; + grid-template-rows: 1fr 25%; + width: 375px; + height: 390px; + margin: auto auto auto auto; + } + +.boxOne{ + display: grid; + grid-template-rows: 45% 1fr; + + } +.boxOneOne{ + background-color: #FFFFF0; + border-top: none; + border-left: none; + border-bottom: 5px solid black; + border-right: 3px solid black; + +} + +.boxOneTwo{ + background-color: #FFFFF0; + border-top: 5px solid black; + border-left: none; + border-bottom: 3px solid black; + border-right: 3px solid black; +} + +.boxTwo{ + background-color: #B22222; + border-top: none; + border-left: 3px solid black; + border-bottom: 5px solid black; + border-right: 1px solid darkgrey; + + } + +.boxThree{ + background-color: darkblue; + border-top: 3px solid black; + border-left: none; + border-bottom: none; + border-right: 3px solid black; + } + +.boxFour{ + display: grid; + grid-template-columns: 90% 1fr; + } +.boxFourOne{ + background-color: #FFFFF0; + border-top: 3px solid black; + border-left: 3px solid black; + border-bottom: none; + border-right: 3px solid black; + } +.boxFourTwo{ + display: grid; + grid-template-rows: 45% 1fr; +} +.boxFourTwoOne{ + background-color: #FFFFF0; + border-top: 3px solid black; + border-left: 3px solid black; + border-bottom: 3px solid black + border-right: 1px solid darkgrey; +} +.boxFourTwoTwo{ + background-color: gold; + border-top: 3px solid black; + border-left: 3px solid black; + border-bottom: none; + border-right: 1px solid darkgrey; +} \ No newline at end of file