From 3b0a693bcbae2695c6a7a1f565437130f5713549 Mon Sep 17 00:00:00 2001 From: Christopher Beards Date: Tue, 23 Jan 2018 01:33:21 -0500 Subject: [PATCH 1/5] Nearly There --- index.html | 15 ++++++++++++--- package-lock.json | 3 +++ styles.css | 39 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 54 insertions(+), 3 deletions(-) create mode 100644 package-lock.json diff --git a/index.html b/index.html index f74abbf..bb9f542 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,20 @@ - Introduction to the DOM + Hello - +

Header

+
+ + Placeholder +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

+
+ Placeholder +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ - \ No newline at end of file + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..48e341a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} diff --git a/styles.css b/styles.css index e69de29..6a6ccba 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,39 @@ +* { + margin: 0; + padding: 0; + } + + .header { + display: block; + border: solid black; + border-width: 0px 0px 6px 0px + } + + .left-text { + display: inline-block; + box-sizing: border-box; + width: 50%; + padding: 0px; + margin: 0; + border: solid 5px black; + border-width: 0px 3px 6px 6px + } + + .right-text { + display: inline-block; + box-sizing: border-box; + width: 50%; + padding: 0px; + margin: 0; + border: solid 5px black; + border-width: 0px 6px 6.6px 3px + } + + #modal { + background-color: grey; + position: absolute right 0; + margin: 0; + width: 50px; + height: 50px; + float: right; + } \ No newline at end of file From 9ece41941acb04885dc4edcbb9d486457d904395 Mon Sep 17 00:00:00 2001 From: Christopher Beards Date: Tue, 23 Jan 2018 10:24:33 -0500 Subject: [PATCH 2/5] Box Model --- index.html | 1 + styles.css | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index bb9f542..501681c 100644 --- a/index.html +++ b/index.html @@ -18,3 +18,4 @@ + diff --git a/styles.css b/styles.css index 6a6ccba..b902201 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,5 @@ * { - margin: 0; + margin: auto; padding: 0; } @@ -36,4 +36,4 @@ width: 50px; height: 50px; float: right; - } \ No newline at end of file + } From f2f7d9e3daae43ac5d90e649901894db85249ba8 Mon Sep 17 00:00:00 2001 From: Christopher Beards Date: Tue, 23 Jan 2018 10:33:35 -0500 Subject: [PATCH 3/5] Flex-Box --- index.html | 18 +++++++------ styles.css | 75 +++++++++++++++++++++++++++++++----------------------- 2 files changed, 53 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 501681c..fa1ae52 100644 --- a/index.html +++ b/index.html @@ -7,15 +7,17 @@

Header

+
- - Placeholder -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

+
+

Placeholder

 +

New!

+


+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Placeholder -

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
- +

Placeholder

 +


+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
- diff --git a/styles.css b/styles.css index b902201..9df6501 100644 --- a/styles.css +++ b/styles.css @@ -1,39 +1,50 @@ * { - margin: auto; + margin: 0; padding: 0; } + +.header { + display: flex; + justify-content: center; + border: solid 4px black; + padding: 20px; +} + +.container { + display: flex; +} + +.newContainer { + display: flex; + flex-direction: row; + justify-content: space-between; +} - .header { - display: block; - border: solid black; - border-width: 0px 0px 6px 0px - } +.left-text { + display: flex; + flex-direction: column; + border-left: solid 4px black; + border-bottom: solid 4px black; + padding: 5px; + padding-right: 0; +} - .left-text { - display: inline-block; - box-sizing: border-box; - width: 50%; - padding: 0px; - margin: 0; - border: solid 5px black; - border-width: 0px 3px 6px 6px - } +.right-text { + display: flex; + flex-direction: column; + border-left: solid 4px black; + border-right: solid 4px black; + border-bottom: solid 4px black; + padding: 5px; +} - .right-text { - display: inline-block; +.new { + display: flex; + flex-direction: column-reverse; + padding: 5px; box-sizing: border-box; - width: 50%; - padding: 0px; - margin: 0; - border: solid 5px black; - border-width: 0px 6px 6.6px 3px - } - - #modal { - background-color: grey; - position: absolute right 0; - margin: 0; - width: 50px; - height: 50px; - float: right; - } + background-color: grey; + text-align: center; + width: 50px; + height: 30px; + } \ No newline at end of file From 27734029cf2340c85d6ba032d2dd9e5562f8c4b2 Mon Sep 17 00:00:00 2001 From: Christopher Beards Date: Tue, 23 Jan 2018 16:47:51 -0500 Subject: [PATCH 4/5] Refactored for BEM --- index.html | 34 +++++++++++++++++++++++----------- styles.css | 30 +++++++++++++++++------------- 2 files changed, 40 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index fa1ae52..bfbdd82 100644 --- a/index.html +++ b/index.html @@ -6,18 +6,30 @@ -

Header

+

Header

-
-
-

Placeholder

 -

New!

+
+
+ +

Placeholder

 +
+

New!

+
+
+ +


+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+ +
+ +

Placeholder

 +
+


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
-

Placeholder

 -


- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-
+
+ - + \ No newline at end of file diff --git a/styles.css b/styles.css index 9df6501..76345db 100644 --- a/styles.css +++ b/styles.css @@ -14,13 +14,23 @@ display: flex; } -.newContainer { +.flag { + display: flex; + flex-direction: column-reverse; + padding: 5px; + box-sizing: border-box; + text-align: center; + width: 50px; + height: 30px; + } + +.container__headerContainer { display: flex; flex-direction: row; justify-content: space-between; } -.left-text { +.container__left-text { display: flex; flex-direction: column; border-left: solid 4px black; @@ -29,7 +39,7 @@ padding-right: 0; } -.right-text { +.container__right-text { display: flex; flex-direction: column; border-left: solid 4px black; @@ -38,13 +48,7 @@ padding: 5px; } -.new { - display: flex; - flex-direction: column-reverse; - padding: 5px; - box-sizing: border-box; - background-color: grey; - text-align: center; - width: 50px; - height: 30px; - } \ No newline at end of file +.flag--color { + background-color: grey; + +} \ No newline at end of file From c08e369618b633a581e459de6902eac389ebe378 Mon Sep 17 00:00:00 2001 From: Christopher Beards Date: Tue, 23 Jan 2018 18:39:27 -0500 Subject: [PATCH 5/5] BEM with Extra Credit --- styles.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/styles.css b/styles.css index 76345db..d5089ad 100644 --- a/styles.css +++ b/styles.css @@ -51,4 +51,13 @@ .flag--color { background-color: grey; +} + +@media screen and (max-width: 480px) { + .container { + flex-direction: column; + } + .container__left-text { + border-right: solid 4px black; + } } \ No newline at end of file