From f936667594844db448f34d1a41f2c6ac38ae3508 Mon Sep 17 00:00:00 2001 From: algorithmsrock Date: Mon, 22 Jan 2018 15:46:08 -0800 Subject: [PATCH 1/9] Box Model completed --- index.html | 31 +++++++++++++++++++++--------- styles.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index f74abbf..1b19db4 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,24 @@ - - Introduction to the DOM - - - - - - - \ No newline at end of file + + Eileen's page + + + + + +
+

Header

+
+
+

Placeholder

+
New!
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+
+ + + diff --git a/styles.css b/styles.css index e69de29..1085efb 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,56 @@ +* { + box-sizing: border-box; + +} + +body { + margin: 0; +} + +.header, .left, .right { + + border: solid black; + +} + +.header { + + border-width: 3px 3px 0px 3px; + height: 75px; + text-align: center; +} + +h1 { + + line-height: 32px; +} + +.left, .right { + padding: 20px 0px 5px 20px; +} + +h2 { + display: inline; + +} + +.left { + border-width: 3px; + width: calc(50vw + 1.5px); + float: left; +} + +.right { + border-width: 3px 3px 3px 0px; + width: calc(50vw - 1.5px); + float: right; +} + +.new { + text-align: center; + background-color: gray; + width: 50px; + padding: 8px 0px 8px 0px; + margin-top: -10px; + float: right; +} From cbdabe33f15e08bbd20a46f4f80495b42693a2dd Mon Sep 17 00:00:00 2001 From: algorithmsrock Date: Tue, 23 Jan 2018 15:53:04 -0800 Subject: [PATCH 2/9] Modified index.html --- index.html | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/index.html b/index.html index 1b19db4..7d30ec7 100644 --- a/index.html +++ b/index.html @@ -22,3 +22,30 @@

Placeholder

+ + + + Eileen's Page + + + + + +
+

Header

+
+ +
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+
+ +
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+
+
+ + --> + From 16adae17c8835784aa0a644963d1ccf5106e3493 Mon Sep 17 00:00:00 2001 From: algorithmsrock Date: Tue, 23 Jan 2018 15:58:09 -0800 Subject: [PATCH 3/9] test --- test.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 test.js diff --git a/test.js b/test.js new file mode 100644 index 0000000..e69de29 From fc2342defac70bd21bcfc023905aaa6de57e0b4b Mon Sep 17 00:00:00 2001 From: algorithmsrock Date: Tue, 23 Jan 2018 16:15:51 -0800 Subject: [PATCH 4/9] test more edits on branch --- index.html | 30 +++--------------------------- 1 file changed, 3 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 7d30ec7..2bffa86 100644 --- a/index.html +++ b/index.html @@ -1,33 +1,9 @@ - - - - Eileen's page - - - - - -
-

Header

-
-
-

Placeholder

-
New!
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

-
-
-

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

-
- - - - + Eileen's Page - + @@ -47,5 +23,5 @@

Placeholder

- --> + From 731e20550ea8f651264dc82393e733161336fcdd Mon Sep 17 00:00:00 2001 From: algorithmsrock Date: Tue, 23 Jan 2018 16:27:49 -0800 Subject: [PATCH 5/9] test more edits on branch --- test.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 test.js diff --git a/test.js b/test.js deleted file mode 100644 index e69de29..0000000 From 1370a0b385349fbcbe007d95413122838aa1910b Mon Sep 17 00:00:00 2001 From: algorithmsrock Date: Tue, 23 Jan 2018 16:38:06 -0800 Subject: [PATCH 6/9] flexbox update --- index.html | 23 +++++++++---------- styles.css | 67 +++++++++++++++++++++++++----------------------------- 2 files changed, 42 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index 2bffa86..2d6e826 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,26 @@ - + - Eileen's Page + Eileen's Flexbox page -
+

Header

- -
-
+
+

Placeholder

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

+
New!
- -
-

Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

-
+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

- + diff --git a/styles.css b/styles.css index 1085efb..9533d4b 100644 --- a/styles.css +++ b/styles.css @@ -1,56 +1,51 @@ * { box-sizing: border-box; - + display: flex; +} +title { + display: none; } - body { - margin: 0; + margin: auto; + flex-flow: row wrap; } - .header, .left, .right { - border: solid black; - } - .header { - - border-width: 3px 3px 0px 3px; - height: 75px; - text-align: center; -} - -h1 { - - line-height: 32px; + border-width: 3px 3px 0px 3px; + width: 100vw; + height: 75px; + justify-content: center; + align-items: center; } - .left, .right { - padding: 20px 0px 5px 20px; -} - -h2 { - display: inline; - -} - -.left { + flex-direction: column; + padding-left: 17.5px; + padding-bottom: 3px; +} +.left-top, .right-top { + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 55px; + width: 100%; +} +.left { border-width: 3px; width: calc(50vw + 1.5px); - float: left; } - .right { border-width: 3px 3px 3px 0px; width: calc(50vw - 1.5px); - float: right; } - +p { + margin-top: auto; +} .new { - text-align: center; - background-color: gray; - width: 50px; - padding: 8px 0px 8px 0px; - margin-top: -10px; - float: right; + justify-content: center; + align-items: center; + background-color: gray; + width: 50px; + height: 30px; } From 5d17e61c41df5eceda5b228e44306dac097b3637 Mon Sep 17 00:00:00 2001 From: algorithmsrock Date: Tue, 23 Jan 2018 16:51:29 -0800 Subject: [PATCH 7/9] FlexBox completed --- index.html | 11 +++++------ styles.css | 27 ++++++++++++++++++++------- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 2d6e826..f2d265e 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - Eileen's Flexbox page + Eileen's Flex Box Page @@ -11,16 +11,15 @@

Header

-
+

Placeholder

-
New!
+
New!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

-
-

Placeholder

+
+

Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.

- diff --git a/styles.css b/styles.css index 9533d4b..5077350 100644 --- a/styles.css +++ b/styles.css @@ -7,7 +7,7 @@ title { } body { margin: auto; - flex-flow: row wrap; + flex-flow: column wrap; } .header, .left, .right { border: solid black; @@ -23,29 +23,42 @@ body { flex-direction: column; padding-left: 17.5px; padding-bottom: 3px; + width: 100vw; } -.left-top, .right-top { +.left__top, .right__top { flex-direction: row; justify-content: space-between; align-items: center; - height: 55px; + height: 50px; width: 100%; } .left { border-width: 3px; - width: calc(50vw + 1.5px); } .right { - border-width: 3px 3px 3px 0px; - width: calc(50vw - 1.5px); + border-width: 0px 3px 3px 3px; } p { margin-top: auto; + padding-right: 10px; } -.new { +.left__new { justify-content: center; align-items: center; background-color: gray; width: 50px; height: 30px; } + +@media (min-width: 600px) { + body { + flex-flow: row wrap; + } + .left { + width: calc(50vw + 1.5px); + } + .right { + width: calc(50vw - 1.5px); + border-width: 3px 3px 3px 0px; + } +} From cb7762734775ef803600bdb6c24d1a7a1332718d Mon Sep 17 00:00:00 2001 From: algorithmsrock Date: Tue, 23 Jan 2018 17:22:26 -0800 Subject: [PATCH 8/9] FlexBox Completed fixed bug --- styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/styles.css b/styles.css index 5077350..fe90bdf 100644 --- a/styles.css +++ b/styles.css @@ -14,7 +14,7 @@ body { } .header { border-width: 3px 3px 0px 3px; - width: 100vw; + width: 100%; height: 75px; justify-content: center; align-items: center; @@ -23,7 +23,7 @@ body { flex-direction: column; padding-left: 17.5px; padding-bottom: 3px; - width: 100vw; + width: 100%; } .left__top, .right__top { flex-direction: row; @@ -55,10 +55,10 @@ p { flex-flow: row wrap; } .left { - width: calc(50vw + 1.5px); + width: calc(50% + 1.5px); } .right { - width: calc(50vw - 1.5px); + width: calc(50% - 1.5px); border-width: 3px 3px 3px 0px; } } From 79b3c9f386a4e6e0373e28d8feefaa1b81d2e32c Mon Sep 17 00:00:00 2001 From: algorithmsrock Date: Wed, 24 Jan 2018 17:15:45 -0800 Subject: [PATCH 9/9] FlexBox Completed with added notes --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index f2d265e..804ac60 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ +