From e21ae1aef1046deee2294bdfd61e909fe76f50c3 Mon Sep 17 00:00:00 2001 From: IchabodPain Date: Mon, 22 Jan 2018 14:43:02 -0800 Subject: [PATCH 1/2] Finished Box model layout task --- index.html | 12 ++++++++++++ styles.css | 23 +++++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/index.html b/index.html index f74abbf..b06f3af 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,17 @@ +

Header

+
+

New!

+
+

Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lorem, mattis eget commodo ac, pretium eu massa. Quisque pretium, mauris sed gravida congue, urna nibh efficitur mi, a ultricies urna nibh vitae turpis. Vestibulum venenatis mi ut sapien molestie euismod. Vestibulum placerat, odio quis blandit viverra, elit leo feugiat enim, a tempor enim nibh sit amet tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus

+
+
+
+
+

Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lorem, mattis eget commodo ac, pretium eu massa. Quisque pretium, mauris sed gravida congue, urna nibh efficitur mi, a ultricies urna nibh vitae turpis. Vestibulum venenatis mi ut sapien molestie euismod. Vestibulum placerat, odio quis blandit viverra, elit leo feugiat enim, a tempor enim nibh sit amet tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus

+
+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..4f4bbc7 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,23 @@ +h1 { + text-align: center; + border: solid 1px black; + margin: 0px; +} + +.ContentBox { + float: left; + width: 50%; + padding: 0px; + border: solid 1px black; + box-sizing: border-box; +} + +.TextInBox { + margin: 8px; +} + +.Notification { + background: grey; + float: right; + margin-top: 10px; +} \ No newline at end of file From d66f4cbe7d6b877cb119f519f485f0e83af64344 Mon Sep 17 00:00:00 2001 From: Russell Leon Bates IV Date: Tue, 23 Jan 2018 13:10:51 -0800 Subject: [PATCH 2/2] Refactored to flexbox --- index.html | 19 ++++++++++--------- styles.css | 38 +++++++++++++++++++------------------- 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index b06f3af..4745719 100644 --- a/index.html +++ b/index.html @@ -7,16 +7,17 @@ -

Header

-
-

New!

-
-

Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lorem, mattis eget commodo ac, pretium eu massa. Quisque pretium, mauris sed gravida congue, urna nibh efficitur mi, a ultricies urna nibh vitae turpis. Vestibulum venenatis mi ut sapien molestie euismod. Vestibulum placerat, odio quis blandit viverra, elit leo feugiat enim, a tempor enim nibh sit amet tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus

-
+
+

Header

-
-
-

Placeholder

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacus lorem, mattis eget commodo ac, pretium eu massa. Quisque pretium, mauris sed gravida congue, urna nibh efficitur mi, a ultricies urna nibh vitae turpis. Vestibulum venenatis mi ut sapien molestie euismod. Vestibulum placerat, odio quis blandit viverra, elit leo feugiat enim, a tempor enim nibh sit amet tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus

+
+
+

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.

diff --git a/styles.css b/styles.css index 4f4bbc7..19dafb6 100644 --- a/styles.css +++ b/styles.css @@ -1,23 +1,23 @@ -h1 { - text-align: center; - border: solid 1px black; - margin: 0px; +.header-container { + display: flex; + justify-content: center; } - -.ContentBox { - float: left; - width: 50%; - padding: 0px; - border: solid 1px black; - box-sizing: border-box; +h1{ + display: inline-block; + background: #fff; } - -.TextInBox { - margin: 8px; +h3 { + background: gray; + padding: 5px; } - -.Notification { - background: grey; - float: right; - margin-top: 10px; +.container { + display: inline-flex; + border: black 2px solid; +} +.nestedelement{ + display: inline-flex; + flex-wrap: wrap; + justify-content: space-between; + border: black 2px solid; + padding: 10px } \ No newline at end of file