From 5c51549f59f731d8b546fc6c67425c951cd7120b Mon Sep 17 00:00:00 2001 From: Amanda Phillips Date: Mon, 22 Jan 2018 15:07:11 -0600 Subject: [PATCH 1/6] Box Model complete --- index.html | 9 +++++++++ styles.css | 30 ++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/index.html b/index.html index f74abbf..2873a48 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,14 @@ +

Header

+
+

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, accumssan 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 dicturmst.

+
+

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, accumssan 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 dicturmst.

+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..d55a0b9 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,30 @@ +.main-header { + width: 100%; + box-sizing: border-box; + border: 2px solid black; + margin: 0; + padding: 20px 46%; +} + +div { + width: 50%; + display: inline-block; + box-sizing: border-box; + border: 2px solid black; + margin: 0; +} + +#new { + float: right; + background-color: grey; + width: 10%; + height: 30px; + margin: 15px 0; + box-sizing: border-box; + padding: 7px 13px; + +} + +h2, p { + margin: 15px; +} \ No newline at end of file From 63e586e1235d94678c037ae81ab60ee8e6313c40 Mon Sep 17 00:00:00 2001 From: Amanda Phillips Date: Mon, 22 Jan 2018 15:34:06 -0600 Subject: [PATCH 2/6] Minor changes to css --- index.html | 4 ++-- styles.css | 19 +++++++++++++++---- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 2873a48..c926d12 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,11 @@

Header

-
+

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, accumssan 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 dicturmst.

-
+
diff --git a/styles.css b/styles.css index d55a0b9..655f8b3 100644 --- a/styles.css +++ b/styles.css @@ -10,18 +10,29 @@ div { width: 50%; display: inline-block; box-sizing: border-box; - border: 2px solid black; margin: 0; } +#left { + border-width: 0 1px 2px 2px; + border-style: solid; + border-color: black; +} + +#right{ + border-width: 0 2px 2px 1px; + border-style: solid; + border-color: black; +} + #new { float: right; background-color: grey; - width: 10%; - height: 30px; + width: 60px; + height: 35px; margin: 15px 0; box-sizing: border-box; - padding: 7px 13px; + padding: 8px 13px; } From e90f66b6349a105546990c08d7ca33c7dc578dd3 Mon Sep 17 00:00:00 2001 From: Amanda Phillips Date: Mon, 22 Jan 2018 16:48:50 -0600 Subject: [PATCH 3/6] Flex-box brach added --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index c926d12..1b5a23e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - +

Header

New!

From 577b8d2e1115462a2fbb9c0714349ccad9935d75 Mon Sep 17 00:00:00 2001 From: Amanda Phillips Date: Mon, 22 Jan 2018 19:13:02 -0600 Subject: [PATCH 4/6] changed for flexbox --- styles.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/styles.css b/styles.css index 655f8b3..1a3c109 100644 --- a/styles.css +++ b/styles.css @@ -8,25 +8,28 @@ div { width: 50%; - display: inline-block; + display: inline-flex; + flex-direction: column; box-sizing: border-box; margin: 0; } #left { + flex-shrink: 1; border-width: 0 1px 2px 2px; border-style: solid; border-color: black; } #right{ + flex-shrink: 1; border-width: 0 2px 2px 1px; border-style: solid; border-color: black; } #new { - float: right; + align-self: flex-end; background-color: grey; width: 60px; height: 35px; @@ -36,6 +39,10 @@ div { } -h2, p { +h2 { + margin: 15px; +} + +p { margin: 15px; } \ No newline at end of file From 9e16c737c28fc33b7ddc109d94ce7ff48aa1076c Mon Sep 17 00:00:00 2001 From: Amanda Phillips Date: Tue, 23 Jan 2018 17:38:39 -0600 Subject: [PATCH 5/6] Tried to adapt to flexbox and BEM, unable to get New box to move over to middle --- index.html | 28 ++++++++++++++++++++-------- styles.css | 44 ++++++++++++++++++++++++++++++-------------- 2 files changed, 50 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 1b5a23e..2d2e595 100644 --- a/index.html +++ b/index.html @@ -7,14 +7,26 @@ -

Header

-
-

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, accumssan 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 dicturmst.

-