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

I love art!

+ +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+ diff --git a/layout1/style.css b/layout1/style.css index 7b34845..0bb9cfa 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +1,117 @@ h1 { color: rebeccapurple; } + +div { + border: 2px solid black; +} + +.container { + width: 500px; + height: 500px; + margin: auto; + display: grid; + grid-template-areas: "bigleftdiv bigrightdiv"; + grid-template-columns: 1fr 100px; +} + +.bigleftdiv { + display: grid; + grid-area: bigleftdiv; + background-color: lightgrey; + grid-template-areas: "topleftdiv" + "middleleftdiv" + "bottomleftdiv"; + grid-template-rows: 45px 1fr 110px; +} + +.topleftdiv { + grid-area: "topleftdiv"; + background-color: lightgrey; + display: grid; + grid-template-areas: "supertopleft1 supertopleft2"; + grid-template-columns: 200px 1fr; +} + +.supertopleft1 { + grid-area: "supertopleft1"; + background-color: lightgrey; +} + +.supertopleft2 { + grid-area: "supertopleft2"; + background-color: yellow; +} + +/* .middleleftdiv { + grid-area: "middleleftdiv"; + background-color: rebeccapurple; + display: grid; + grid-template-areas: "leftleftdiv" + "leftrightdiv"; + grid-template-columns: 100px 1fr; +} */ + +.middleleftdiv { + display: grid; + grid-template-columns: 40px 1fr; + grid-template-areas: "leftleftdiv leftrightdiv"; +} + +.leftleftdiv { + grid-area: "leftleftdiv"; + background-color: lightgrey; + display: grid; + grid-template-rows: 175px 1fr; + grid-template-areas: "superleftdiv1" + "superleftdiv2"; +} + +.leftrightdiv { + grid-area: "leftrightdiv"; + background-color: lightgrey; +} + +.superleftdiv1 { + grid-area: "superleftdiv1"; + background-color: lightgrey; +} + +.superleftdiv2 { + grid-area: "superleftdiv2"; + background-color: blue; +} + +.bottomleftdiv { + grid-area: "bottomleftdiv"; + background-color: lightgrey; +} + +.bigrightdiv { + display: grid; + grid-area: bigrightdiv; + background-color: lightgrey; + grid-template-areas: "toprightdiv" + "middlerightdiv" + "bottomrightdiv"; + grid-template-rows: 120px 1fr 30px; +} + +.toprightdiv { + grid-area: toprightdiv; + background-color: #393b3f; +} + +.middlerightdiv { + grid-area: middlerightdiv; + background-color: lightgrey; +} + +.bottomrightdiv { + grid-area: bottomrightdiv; + background-color: red; +} + +.container { + border: 0px; +} diff --git a/layout2/index.html b/layout2/index.html index d2f87d2..01df008 100644 --- a/layout2/index.html +++ b/layout2/index.html @@ -8,5 +8,56 @@

I love art!

+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
diff --git a/layout2/style.css b/layout2/style.css index 7b34845..1967b7e 100644 --- a/layout2/style.css +++ b/layout2/style.css @@ -1,3 +1,143 @@ h1 { color: rebeccapurple; } + +div { + border: 2px solid black; +} + +.container { + width: 460px; + height: 720px; + margin: auto; + background-color: lightgrey; + display: grid; + grid-template-columns: 130px 1fr; + grid-template-areas: "bigleftdiv bigrightdiv"; + border: 0px; +} + +.bigleftdiv { + grid-area: "bigleftdiv"; + background-color: lightgrey; + display: grid; + grid-template-rows: 420px 1fr; + grid-template-areas: "topleftdiv" + "bottomleftdiv"; +} + +.topleftdiv { + grid-area: "topleftdiv"; + background-color: lightgrey; + display: grid; + grid-template-rows: 70px 1fr; + grid-template-areas: "supertopleft1" + "supertopleft2"; +} + +.supertopleft1 { + grid-area: "supertopleft1"; + background-color: black; +} + +.supertopleft2 { + grid-area: "supertopleft2"; + background-color: lightgrey; +} + +.bottomleftdiv { + grid-area: "bottomleftdiv"; + background-color: lightgrey; + display: grid; + grid-template-columns: 40px 1fr; + grid-template-areas: "bottomleftleft bottomleftright"; +} + +.bottomleftleft { + grid-area: "bottomleftleft"; + background-color: lightgrey; + display: grid; + grid-template-rows: 50px 1fr; + grid-template-areas: "bottomtopleft" + "bottombottomleft"; +} + +.bottomtopleft { + grid-area: "bottomtopleft"; + background-color: black; +} + +.bottombottomleft { + grid-area: "bottombottomleft"; + background-color: yellow; +} + +.bottomleftright { + grid-area: "bottomleftright"; + background-color: lightgrey; +} + +.bigrightdiv { + grid-area: "bigrightdiv"; + background-color: lightgrey; + display: grid; + grid-template-rows: 300px 300px 1fr; + grid-template-areas: "toprightdiv" + "middlerightdiv" + "bottomrightdiv"; +} + +.toprightdiv { + grid-area: "toprightdiv"; + background-color: red; +} + +.middlerightdiv { + grid-area:"middlerightdiv"; + background-color: lightgrey; + display: grid; + grid-template-columns: 1fr 15px; + grid-template-areas: "leftmiddleright rightmiddleright"; +} + +.leftmiddleright { + grid-area: "leftmiddleright"; + background-color: lightgrey; + display: grid; + grid-template-rows: 120px 1fr; + grid-template-areas: "leftmiddlerighttop" + "leftmiddlerightbottom"; +} + +.leftmiddlerighttop { + grid-area: "leftmiddlerighttop"; + background-color: lightgrey; +} + +.leftmiddlerightbottom { + grid-area: "leftmiddlerightbottom"; + background-color: lightgrey; +} + +.rightmiddleright { + grid-area: "rightmiddleright"; + background-color: lightgrey; +} + +.bottomrightdiv { + grid-area:"bottomrightdiv"; + background-color: lightgrey; + display: grid; + grid-template-columns: 250px 1fr; + grid-template-areas: "leftbottomright rightbottomright"; +} + +.leftbottomright { + grid-area: "leftbottomright"; + background-color: lightgrey; +} + +.rightbottomright { + grid-area: "rightbottomright"; + background-color: darkblue; +} diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..6a534a0 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -8,5 +8,46 @@

I love art!

+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+
+
diff --git a/layout3/style.css b/layout3/style.css index 7b34845..40cf35f 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -1,3 +1,114 @@ h1 { color: rebeccapurple; } + +.container { + width: 650px; + height: 650px; + margin: auto; + background-color: lightgrey; + display: grid; + grid-template-rows: 300px 150px 1fr; + grid-template-areas: "bigtopdiv" + "bigmiddlediv" + "bigbottomdiv"; + border: 0px; +} + +div { + border: 2px solid black; +} + +.bigtopdiv { + grid-area: "bigtopdiv"; + background-color: lightgrey; + display: grid; + grid-template-columns: 290px 1fr; + grid-template-areas: "topleft topright"; +} + +.topleft { + grid-area: "topleft"; + background-color: red; +} + +.topright { + grid-area: "topright"; + background-color: lightgrey; +} + +.bigmiddlediv { + grid-area: "bigmiddlediv"; + background-color: lightgrey; + display: grid; + grid-template-columns: 290px 1fr; + grid-template-areas: "middleleft middleright"; +} + +.middleleft { + grid-area: "middleleft"; + background-color: lightgrey; +} + +.middleright { + grid-area: "middleright"; + background-color: lightgrey; +} + +.bigbottomdiv { + grid-area: "bigbottomdiv"; + background-color: lightgrey; + display: grid; + grid-template-columns: 290px 1fr; + grid-template-areas: "bottomleft bottomright"; +} + +.bottomleft { + grid-area: "bottomleft"; + background-color: lightgrey; + display: grid; + grid-template-columns: 60px 1fr; + grid-template-areas: "bottomleft1 bottomleft2"; +} + +.bottomleft1 { + grid-area: "bottomleft1"; + background-color: yellow; +} + +.bottomleft2 { + grid-area: "bottomleft2"; + background-color: lightgrey; +} + +.bottomright { + grid-area: "bottomright"; + background-color: lightgrey; + display: grid; + grid-template-columns: 200px 1fr; + grid-template-areas: "bottomrightleft bottomrightright"; +} + +.bottomrightleft { + grid-area: "bottomrightleft"; + background-color: lightgrey; + display: grid; + grid-template-rows: 160px 1fr; + grid-template-areas: "bottomlefttop" + "bottomleftbottom"; +} + +.bottomlefttop { + grid-area: "bottomlefttop"; + background-color: darkblue; +} + +.bottomleftbottom { + grid-area: "bottomleftbottom"; + background-color: lightgrey; +} + +.bottomrightright { + grid-area: "bottomrightright"; + background-color: lightgrey; +} diff --git a/layout4/index.html b/layout4/index.html index daa3be4..a8c7fff 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -8,5 +8,36 @@

I love art!

+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
diff --git a/layout4/style.css b/layout4/style.css index 7b34845..4206f81 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,90 @@ h1 { color: rebeccapurple; } + +.container { + height: 650px; + width: 650px; + margin: auto; + background-color: #e5e0c0; + display: grid; + grid-template-columns: 160px 1fr; + grid-template-areas: "bigleftdiv bigrightdiv"; + border: 0px; +} + +div { + border: 2px solid black; +} + +.bigleftdiv { + grid-area: "bigleftdiv"; + background-color: #e5e0c0; + display: grid; + grid-template-rows: 220px 270px 1fr; + grid-template-areas: "topleft" + "middleleft" + "bottomleft"; +} + +.bigrightdiv { + grid-area: "bigrightdiv"; + background-color: #e5e0c0; + display: grid; + grid-template-rows: 490px 1fr; + grid-template-areas: "topright" + "bottomright"; +} + +.topright { + grid-area: "topright"; + background-color: darkred; + +} + +.bottomright { + grid-area: "bottomright"; + background-color: #e5e0c0; + display: grid; + grid-template-columns: 420px 1fr; + grid-template-areas: "bottomrightleft bottomrightright"; +} + +.bottomrightleft { + grid-area: "bottomrightright"; + background-color: #e5e0c0; +} + +.bottomrighttop { + grid-area: "bottomrighttop"; + background-color: #e5e0c0; +} + +.bottomrightbottom { + grid-area: "bottomrightbottom"; + background-color: darkorange; +} + +.bottomrightright { + grid-area: "bottomrightright"; + background-color: #e5e0c0; + display: grid; + grid-template-rows: 80px 1fr; + grid-template-areas: "bottomrighttop" + "bottomrightbottom"; +} + +.topleft { + grid-area: "topleft"; + background-color: #e5e0c0; +} + +.middleleft { + grid-area: "middleleft"; + background-color: #e5e0c0; +} + +.bottomleft { + grid-area: "bottomleft"; + background-color: darkblue; +}