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

I love art!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ diff --git a/layout1/style.css b/layout1/style.css index 7b34845..e69de29 100644 --- a/layout1/style.css +++ b/layout1/style.css @@ -1,3 +0,0 @@ -h1 { - color: rebeccapurple; -} diff --git a/layout2/index.html b/layout2/index.html index d2f87d2..9cb8bc7 100644 --- a/layout2/index.html +++ b/layout2/index.html @@ -7,6 +7,24 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/layout2/style.css b/layout2/style.css index 7b34845..aa07d63 100644 --- a/layout2/style.css +++ b/layout2/style.css @@ -1,3 +1,105 @@ -h1 { - color: rebeccapurple; +body { + display: grid; + min-height: 100vh; + max-width: 450px; + grid-template-columns: 100px 1fr; + grid-template-rows: 500px 1fr; + grid-template-areas: "topleft topright" + "bl br"; + } + +.topleft { + grid-area: topleft; + background-color: wheat; + border: 2px solid black; + display: grid; + grid-template-rows: 50px 1fr; + grid-template-areas: "toptopleft" + "topleft"; +} + +.topright { + grid-area: topright; + background-color: red; + display: grid; + grid-template-rows: 300px 1fr; + grid-template-columns: 1fr 4px; + grid-template-areas: "toptopright toptopright" + "toprightbottomleft toprightbottomright"; +} + +.bl { + grid-area: bl; + background-color: gray; + border-top: 2px solid black; + border-right: 2px solid black; + border-left: 2px solid black; + display: grid; + grid-template-rows: 50px 1fr; + grid-template-columns: 25px 1fr; + grid-template-areas: "topleftbottom bottomleftright" + "bottomleftleft bottomleftright"; +} + +.br { + grid-area: br; + background-color: grey; + border: 2px solid black; + display: grid; + grid-template-columns: 1fr 5px; + grid-template-areas: "botbotrightleft botbotrightright"; +} + +.toptopleft { + grid-area: toptopleft; + background-color: black; + border: 2px solid black; +} + +.topleftbottom { + grid-area: topleftbottom; + background-color: black; + border: 2px solid black; +} + +.bottomleftleft { + grid-area: bottomleftleft; + background-color: yellow; + border-right: 2px solid black; +} + +.bottomleftright { + grid-area: bottomleftright; + background-color: lightgray; +} + +.botbotrightright { + grid-area: botbotrightright; + background-color: lightgray; + border-left: 2px solid black; +} + +.botbotrightleft { + grid-area: botbotrightleft; + background-color: lightgray; + border: 2px solid black; +} + +.toptopright { + grid-area: toptopright; + background-color: red; + border-bottom: 2px solid black; + border-left: 2px solid black; +} + +.toprightbottomleft { + grid-area: toprightbottomleft; + background-color: grey; +} + +.toprightbottomright { + grid-area: toprightbottomleft; + background-color: lightgray; + border-left: 2px solid black; +} \ No newline at end of file diff --git a/layout3/index.html b/layout3/index.html index 4e8b6e9..b9110b1 100644 --- a/layout3/index.html +++ b/layout3/index.html @@ -7,6 +7,16 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
+
diff --git a/layout3/style.css b/layout3/style.css index 7b34845..42ce8dc 100644 --- a/layout3/style.css +++ b/layout3/style.css @@ -1,3 +1,55 @@ -h1 { - color: rebeccapurple; + +.whole { + min-height: 75vh; + display: grid; + width: 35em; + grid-gap: .5em; + background-color: black; + grid-template-columns: 5em .4fr .6fr 5em; + grid-template-rows: .5fr .5fr 10em 1.5em; + grid-template-areas: "topleft topleft topright topright" + "midleft midleft midright midright" + "bottomlefty bottomleftw bottomrightb bottomrightg" + "bottomlefty bottomleftw bottombottomright bottomrightg"; } + + + + +.topleft { + grid-area: topleft; + background-color: red; +} +.topright{ + grid-area: topright; + background-color: lightgrey; +} +.midleft { + grid-area: midleft; + background-color: lightgray; +} +.midright { + grid-area: midright; + background-color: lightgrey; +} +.bottomlefty { + grid-area: bottomlefty; + background-color: yellow; +} +.bottomleftw { + grid-area: bottomleftw; + background-color: lightgrey; +} + +.bottomrightb { + grid-area: bottomrightb; + background-color: blue; +} +.bottomrightg { + grid-area: bottomrightg; + background-color: lightgray; +} +.bottombottomright { + grid-area: bottombottomright; + background-color: lightgrey; +} \ No newline at end of file diff --git a/layout4/index.html b/layout4/index.html index daa3be4..c212383 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -7,6 +7,14 @@ -

I love art!

+
+
+
+
+
+
+
+
+
diff --git a/layout4/style.css b/layout4/style.css index 7b34845..8e973e3 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,76 @@ -h1 { - color: rebeccapurple; +.whole { + /*margin: auto;*/ + min-height: 75vh; + display: grid; + width: 50%; + grid-gap: 1em; + background-color: black; + grid-template-columns: 7em 1fr 5em; + grid-template-rows: 13em 13em .5fr .5fr; + grid-template-areas: "topleft righ righ" + "midleft righ righ" + "botleft midbot botrighttop" + "botleft midbot botrightbot"; } + +/*.top{ + grid-area: tp; + max-width: 400px; + display: grid; + grid-template-rows: 300px 1fr; + grid-template-columns: 100px 1fr; + grid-template-areas: "topleft righ" + "midleft righ"; +} +*/ +.topleft { + grid-area: topleft; + background-color: cornsilk; +/* display: grid; + grid-template-rows: 300px 1fr; + grid-template-columns: 100px 1fr; + grid-template-areas: "topleft righ" + "midleft righ";*/ + + +} +.midleft { + grid-area: midleft; + background-color: cornsilk; + + + +} +.right { + grid-area: righ; + background-color: red; +} +/*.bottom { + grid-area: bot; + display: grid; + max-width: 400px; + grid-template-columns: 100px 1fr; + grid-template-areas: "botleft midbot";*/ + +.botleft { + grid-area: botleft; + background-color: blue; +} +.midbot { + grid-area: midbot; + background-color: cornsilk; +/* display: grid; + grid-template-rows: 300px .5fr; + grid-template-columns: 1fr 20px; + grid-template-areas: "midbot botrighttop" + "midbot botrightbot"*/ +} +.botrighttop { + grid-area:botrighttop; + background-color: cornsilk; +} +.botrightbot { + grid-area: botrightbot; + background-color: yellow; +} +