From 24b01b4bd1d37af566f406132648832626cbb6b0 Mon Sep 17 00:00:00 2001 From: Mielyn Acosta Date: Sat, 17 Nov 2018 14:28:58 -0500 Subject: [PATCH 1/2] layout practice p1-p4 --- .DS_Store | Bin 0 -> 8196 bytes p1/styles/main.css | 24 +++++++---- p2/styles/main.css | 31 +++++++++++++- p3/index.html | 24 ++++++++++- p3/styles/main.css | 100 +++++++++++++++++++++++++++++++++++++++++---- p4/index.html | 71 +++++++++++++++++++++++++++++++- p4/styles/main.css | 96 ++++++++++++++++++++++++++++++++++++++++++- 7 files changed, 322 insertions(+), 24 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..4d9876adfd042394aebcadb3137334cdaad985b8 GIT binary patch literal 8196 zcmeI1O>h)N6oB8`BxD*0nP5nEfQ6M5zb52|kPzi($p%dL5z0--55Z-2XCPBfW|p1V zT_DDamUsTJ!mObiHBH%RUY)>(bCc?PnNH{XHyW!RV|pVntt8y z^_!me`kR^USpdM^g3%5T1ptK(F4ZMeJ)m$qKkh4$KvP8$$saPdo1yksnVfCiH#$^= z83;2FW+2Q!n1L_@|A!3FJDV3}f%m?&hIN>MFawWd2Ke(KP6wBXK+Z@h9vxJPEda?% zQj0=ul{ZMn1DOcqjFe=dg3^_wbj4tcfzqAy@nBpckTX(Bcfertfx*le>`+k5PUnw{ z;eZJ#!#d1Bn1TBKh7+Sb$69PilPIo%we>h5l9j(2YBnx1A#u86JM@I>48CwC`jYnIijb;}tWqii_7b;>gHLnX`bCq{KIYdVJI zoE|P(o|Uo9K}Vl7>#&)z*@nhwjkZ!-T{g{kQPd`7q>!=B6fFOom}AXajg1?0<%eB^ z&tj+_DNI%-W7<;H&3Y8|AR8{qaHVoN+oiCPtUEbLL3(1^Jqb;Fj!%0?_xvL{)1gcHlIE^y zj5hSqC5>|1Uc=xQq%r^^7+kJYbO)3m9jqkCs!ZUN`5+uigCTqF;I zlQIWl;qC#DL#(Y_#bQH*lX-SN!ezA8YL2`zs}UEmcx;_Ql&C>>eQcvb9IFv=uFYFw zOsybf#r>geZDldFis)2?bz3K6Y9-+-tvh`Jf2)h&x z;V_QiC}z+g=uYDVo+0Q8Si};};7j;2;dcQq5`J&uC42|pl~~Qe)?daL!ulc2K!uDe%J={K7XJSKkVYSd6=opJ0M7tc_NDrI zd1HZm@V$1Nj+1oo!pF@>DO{+!=R*MX=l(FHcASQCpF|*Mq$CZMfBi!M|D_SW|J%d& KzrgR2t^NUT3f1ob literal 0 HcmV?d00001 diff --git a/p1/styles/main.css b/p1/styles/main.css index 9bf29ee..3338e68 100644 --- a/p1/styles/main.css +++ b/p1/styles/main.css @@ -1,32 +1,38 @@ /* CURRENTLY IN: styles/main.css */ -html, body { +/*html, body { height: 100%; } body { min-height: 100%; } - +*/ +html, body { + height: 100%; +} .container { + display:flex; height: 100%; } .column { - float: left; - box-sizing: border-box; - - min-height: 100%; + display: flex; + } .column-one-third { width: 33.3333%; - background-color: pink; } .column-two-third { width: 66.66663%; - - background-color: black; + background-color: black; } + +/* + +.col-2 { and so on you divide depending on the column you like col-12 calc(12 * 8.3333%) + width: calc(2 * 8.3333%); +} \ No newline at end of file diff --git a/p2/styles/main.css b/p2/styles/main.css index b412536..51f3691 100644 --- a/p2/styles/main.css +++ b/p2/styles/main.css @@ -1,6 +1,6 @@ /* CURRENTLY IN: styles/main.css */ -html, body { +/* html, body { height: 100%; } @@ -15,7 +15,7 @@ body { .row { width: 100%; min-height: 100px; - + background-color: yellow; } @@ -36,4 +36,31 @@ body { width: 66.66663%; background-color: black; +} */ +html, body { + height: 100%; } +.container { + display:flex; + height: 450px; +} + +.column { + display: flex; + flex-wrap: wrap; +} + +.column-one-third { + width: 33.3333%; + background-color: pink; +} + +.column-two-third { + width: 66.66663%; + background-color: black; +} +.row { + display: flex; + background-color: yellow; + height: 15%; +} \ No newline at end of file diff --git a/p3/index.html b/p3/index.html index 269d194..5a86ba6 100644 --- a/p3/index.html +++ b/p3/index.html @@ -1,4 +1,4 @@ - + + + + + Problem 3 + + + +
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/p3/styles/main.css b/p3/styles/main.css index cd67cc2..8614457 100644 --- a/p3/styles/main.css +++ b/p3/styles/main.css @@ -1,13 +1,9 @@ /* CURRENTLY IN: styles/main.css */ -html, body { +/* html, body { height: 100%; } -body { - min-height: 100%; -} - .container { height: 450px; } @@ -28,7 +24,6 @@ body { .column-one-third { width: 33.3333%; - background-color: pink; } @@ -52,5 +47,94 @@ body { .column-green { background-color: green; -} - +} */ +* { + box-sizing: border-box; + margin: 0; + } + +html, body { + height: 100%; + } + + .row { + display: flex; + flex-wrap: wrap; + } + + .full { + height: 100%; + } + + .col { + width: 8.3333%; + min-height: 100px; + } + + .col-2 { + width: calc(2 * 8.3333%); + } + + .col-3 { + width: calc(3 * 8.3333%); + } + + .col-4 { + width: calc(4 * 8.3333%); + } + + .col-5 { + width: calc(5 * 8.3333%); + } + + .col-6 { + width: calc(6 * 8.3333%); + } + + .col-7 { + width: calc(7 * 8.3333%); + } + + .col-8 { + width: calc(8 * 8.3333%); + } + + .col-9 { + width: calc(9 * 8.3333%); + } + + .col-10 { + width: calc(10 * 8.3333%); + } + + .col-11 { + width: calc(11 * 8.3333%); + } + + .col-12 { + width: calc(12 * 8.3333%); + } + + .yellow { + background-color: yellow; + } + + .green { + background-color: green; + } + + .red { + background-color: red; + } + + .pink { + background-color: pink; + } + + .black { + background-color: black; + } + + .height-450px { + height: 450px; + } \ No newline at end of file diff --git a/p4/index.html b/p4/index.html index b6a852a..04381f8 100644 --- a/p4/index.html +++ b/p4/index.html @@ -1,4 +1,4 @@ - + + + + + + + Problem 4 + + + + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/p4/styles/main.css b/p4/styles/main.css index de39c3f..09efa23 100644 --- a/p4/styles/main.css +++ b/p4/styles/main.css @@ -1,6 +1,6 @@ /* CURRENTLY IN: styles/main.css */ -html, body { +/* html, body { height: 100%; } @@ -55,4 +55,98 @@ body { .column-green { background-color: green; } + */ + * { + box-sizing: border-box; + margin: 0; + } + +html, body { + height: 100%; + } + + div { + flex-wrap: wrap; + } + .row { + display: flex; + /* flex-wrap: nowrap; */ + } + + .full { + height: 100%; + } + + .col { + width: 8.3333%; + min-height: 100px; + } + + .col-2 { + width: calc(2 * 8.3333%); + } + + .col-3 { + width: calc(3 * 8.3333%); + } + + .col-4 { + width: calc(4 * 8.3333%); + } + + .col-5 { + width: calc(5 * 8.3333%); + } + + .col-6 { + width: calc(6 * 8.3333%); + } + + .col-7 { + width: calc(7 * 8.3333%); + } + + .col-8 { + width: calc(8 * 8.3333%); + } + + .col-9 { + width: calc(9 * 8.3333%); + } + + .col-10 { + width: calc(10 * 8.3333%); + } + + .col-11 { + width: calc(11 * 8.3333%); + } + + .col-12 { + width: calc(12 * 8.3333%); + } + + .yellow { + background-color: yellow; + } + + .green { + background-color: green; + } + + .red { + background-color: red; + } + + .pink { + background-color: pink; + } + + .black { + background-color: black; + } + + .height-450px { + height: 450px; + } \ No newline at end of file From 83d86785d1d71e944fc94cd325b04e84d9e79973 Mon Sep 17 00:00:00 2001 From: Mielyn Acosta Date: Sat, 17 Nov 2018 15:50:22 -0500 Subject: [PATCH 2/2] p5 solved --- p5/index.html | 69 +++++++++++++++++++++++++++++++- p5/styles/main.css | 98 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 164 insertions(+), 3 deletions(-) diff --git a/p5/index.html b/p5/index.html index 7ce1779..247c44d 100644 --- a/p5/index.html +++ b/p5/index.html @@ -1,4 +1,4 @@ - + + + + + + + Problem 5 + + + + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ +
+
+
+
+
+ +
+ +
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/p5/styles/main.css b/p5/styles/main.css index b913d9f..8a3c2ba 100644 --- a/p5/styles/main.css +++ b/p5/styles/main.css @@ -1,6 +1,6 @@ /* CURRENTLY IN: styles/main.css */ -html, body { +/* html, body { height: 100%; } @@ -65,4 +65,100 @@ body { .column-green { background-color: green; } + */ + * { + box-sizing: border-box; + margin: 0; + } + +html, body { + height: 100%; + } + + div { + flex-wrap: wrap; + } + .row { + display: flex; + /* flex-wrap: nowrap; */ + border: blue solid 1px; + } + + .full { + height: 100%; + } + + .col { + width: 8.3333%; + min-height: 100px; + + } + + .col-2 { + width: calc(2 * 8.3333%); + } + + .col-3 { + width: calc(3 * 8.3333%); + } + + .col-4 { + width: calc(4 * 8.3333%); + } + + .col-5 { + width: calc(5 * 8.3333%); + } + + .col-6 { + width: calc(6 * 8.3333%); + } + + .col-7 { + width: calc(7 * 8.3333%); + } + + .col-8 { + width: calc(8 * 8.3333%); + } + + .col-9 { + width: calc(9 * 8.3333%); + } + + .col-10 { + width: calc(10 * 8.3333%); + } + + .col-11 { + width: calc(11 * 8.3333%); + } + + .col-12 { + width: calc(12 * 8.3333%); + } + + .yellow { + background-color: yellow; + } + + .green { + background-color: green; + } + + .red { + background-color: red; + } + + .pink { + background-color: pink; + } + + .black { + background-color: black; + } + + .height-450px { + height: 450px; + }