From 17a695c6d0ab479186106b458ddbb54738470243 Mon Sep 17 00:00:00 2001 From: Nicholas Tsafos Date: Fri, 1 Jun 2018 08:36:29 -0700 Subject: [PATCH 1/3] layout 2 pretty close --- layout1/index.html | 20 ++++++++- layout1/style.css | 3 -- layout2/index.html | 20 ++++++++- layout2/style.css | 106 ++++++++++++++++++++++++++++++++++++++++++++- layout4/index.html | 14 +++++- layout4/style.css | 70 +++++++++++++++++++++++++++++- 6 files changed, 223 insertions(+), 10 deletions(-) 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/layout4/index.html b/layout4/index.html index daa3be4..e9b39a9 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -7,6 +7,18 @@ -

I love art!

+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/layout4/style.css b/layout4/style.css index 7b34845..097b7ca 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,3 +1,69 @@ -h1 { - color: rebeccapurple; +.whole { + margin: auto; + min-height: 75vh; + display: grid; + grid-template-columns: 100px 1fr; + grid-template-rows: 1fr 50px; + grid-template-areas: "tp" + "bot"; } + +.top{ + grid-area: tp; + 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; + +} +.midleft { + grid-area: midleft; + background-color: cornsilk; + border-top: 4px solid black; + +} +.right { + grid-area: righ; + background-color: red; + border-left: 4px solid black; + border-bottom: 4px solid black; +} +.bottom { + grid-area: bot; + display: grid; + grid-template-columns: 50px 1fr; + grid-template-areas: "botleft midbot"; + +} +.botleft { + grid-area: botleft; + background-color: blue; + border-top: 2px solid black; +} +.midbot { + grid-area: midbot; + border-left: 2px solid black; + 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; + border-left: 2px solid black; + background-color: cornsilk; +} +.botrightbot { + grid-area: botrightbot; + border-left: 2px solid black; + border-top: 2px solid black; + background-color: yellow; +} \ No newline at end of file From 0fa3c8a261e09a031bd6ed4dd7cd82f65e6ddbae Mon Sep 17 00:00:00 2001 From: Nicholas Tsafos Date: Fri, 1 Jun 2018 09:57:30 -0700 Subject: [PATCH 2/3] followed along in class and fixed layout 4 --- layout4/index.html | 4 ---- layout4/style.css | 51 ++++++++++++++++++++++++++-------------------- 2 files changed, 29 insertions(+), 26 deletions(-) diff --git a/layout4/index.html b/layout4/index.html index e9b39a9..c212383 100644 --- a/layout4/index.html +++ b/layout4/index.html @@ -8,17 +8,13 @@
-
-
-
-
diff --git a/layout4/style.css b/layout4/style.css index 097b7ca..8e973e3 100644 --- a/layout4/style.css +++ b/layout4/style.css @@ -1,69 +1,76 @@ .whole { - margin: auto; + /*margin: auto;*/ min-height: 75vh; display: grid; - grid-template-columns: 100px 1fr; - grid-template-rows: 1fr 50px; - grid-template-areas: "tp" - "bot"; + 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{ +/*.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; - border-top: 4px solid black; + + } .right { grid-area: righ; background-color: red; - border-left: 4px solid black; - border-bottom: 4px solid black; } -.bottom { +/*.bottom { grid-area: bot; display: grid; - grid-template-columns: 50px 1fr; - grid-template-areas: "botleft midbot"; + max-width: 400px; + grid-template-columns: 100px 1fr; + grid-template-areas: "botleft midbot";*/ -} .botleft { grid-area: botleft; background-color: blue; - border-top: 2px solid black; } .midbot { grid-area: midbot; - border-left: 2px solid black; background-color: cornsilk; - display: grid; +/* display: grid; grid-template-rows: 300px .5fr; grid-template-columns: 1fr 20px; grid-template-areas: "midbot botrighttop" - "midbot botrightbot" + "midbot botrightbot"*/ } .botrighttop { grid-area:botrighttop; - border-left: 2px solid black; background-color: cornsilk; } .botrightbot { grid-area: botrightbot; - border-left: 2px solid black; - border-top: 2px solid black; background-color: yellow; -} \ No newline at end of file +} + From e3f925616d888b905cb28afe8523ccdb55e82a82 Mon Sep 17 00:00:00 2001 From: Nicholas Tsafos Date: Fri, 1 Jun 2018 15:53:31 -0700 Subject: [PATCH 3/3] layout 3 --- layout3/index.html | 12 +++++++++- layout3/style.css | 56 ++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 65 insertions(+), 3 deletions(-) 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