From 4966d19fcd07edbba1b4136bb930574ddaa95968 Mon Sep 17 00:00:00 2001 From: Maxjoeld <30808913+Maxjoeld@users.noreply.github.com> Date: Tue, 23 Jan 2018 16:21:18 -0500 Subject: [PATCH 1/2] No flex --- styles.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/styles.css b/styles.css index e69de29..ba967fa 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,14 @@ +h1 { + text-align: center; + border: 1px solid black; + margin: 0; + border-bottom: 0px; +} + +.para{ + box-sizing: border-box; + display: inline-block; + width: 50%; + border: 1px solid black; + padding-left: 10px; +} From cfcec20d158bb4528463068246a51e8b5c8c41b4 Mon Sep 17 00:00:00 2001 From: Maxjoeld <30808913+Maxjoeld@users.noreply.github.com> Date: Tue, 23 Jan 2018 23:16:06 -0500 Subject: [PATCH 2/2] MiniWithFlex --- index.html | 25 ++++++++++++++----------- styles.css | 40 ++++++++++++++++++++++++++++++++-------- 2 files changed, 46 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index e06ce7d..547d57f 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,14 @@ - - - - Introduction to the DOM - - - - - - - \ No newline at end of file +
+
+

Header

+
+
+

Placeholder

+

New!

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor lacus ut augue venenatis tristique. Aliquam nunc arcu, porta in sem vehicula, ornare vulputate arcu. Praesent tellus sem, rutrum viverra condimentum vitae, aliquet ut nisl. Phasellus malesuada augue eget quam consequat tempus. Maecenas lectus velit, luctus et egestas sed, rhoncus eu lectus. Sed at leo feugiat, varius tellus et, porta leo. Maecenas a varius massa. Quisque suscipit vitae nunc et commodo. Donec faucibus mauris ac molestie molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+

Placeholder

+

Lorem ipsum dolor sit amet, conctetur adipiscing elit. Sed tempor lacus ut augue venenatis tristique. Aliquam nunc arcu, porta in sem vehicula, ornare vulputate arcu. Praesent tellus sem, rutrum viverra condimentum vitae, aliquet ut nisl. Phasellus malesuada augue eget quam consequat tempus. Maecenas lectus velit, luctus et egestas sed, rhoncus eu lectus. Sed at leo feugiat, varius tellus et, porta leo. Maecenas a varius massa. Quisque suscipit vitae nunc et commodo. Donec faucibus mauris ac molestie molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
diff --git a/styles.css b/styles.css index ba967fa..adcb9c5 100644 --- a/styles.css +++ b/styles.css @@ -1,14 +1,38 @@ -h1 { +.page { + border: 2px solid black; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.head { + width: 100%; + border-bottom: 2px solid black; text-align: center; - border: 1px solid black; - margin: 0; - border-bottom: 0px; } -.para{ - box-sizing: border-box; +.firstPara{ + width: 49%; + border-right: 2px solid black; + padding: 20px; + padding-left: 0px; +} + +.secondPara { + width: 45%; + padding: 20px 0 0 50px; +} + +h3 { + width: 95%; + display: inline-block; + } + +h4 { display: inline-block; - width: 50%; + width: 35px; border: 1px solid black; - padding-left: 10px; + padding: 5px; + background-color: grey; + position: absolute; }