From 6e016dc6fac3b0203e04a5e936230a3be5d961b1 Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 19 Sep 2019 13:29:15 -0400 Subject: [PATCH 1/5] added color to boreder --- my-styles.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/my-styles.css b/my-styles.css index f7d02e4..f64945b 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,4 +1,7 @@ /* Your Stylesheet */ +#dispaly-01{ + border: 6px; + border-color: red; +} /* All your edits should go here */ - From c42a36d640e88e4945c535dc8d778164403cd931 Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 19 Sep 2019 13:37:31 -0400 Subject: [PATCH 2/5] blue border --- my-styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/my-styles.css b/my-styles.css index f64945b..53b0a66 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,7 +1,7 @@ /* Your Stylesheet */ -#dispaly-01{ - border: 6px; - border-color: red; +#dispaly-01 div{ + border: 6px; solid: blue; + + -} /* All your edits should go here */ From 0dc84178e8b5a3a589c8cf3d0383b217b482beaf Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 19 Sep 2019 13:39:15 -0400 Subject: [PATCH 3/5] fixed typo --- my-styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/my-styles.css b/my-styles.css index 53b0a66..4c1ecc4 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,7 +1,7 @@ /* Your Stylesheet */ -#dispaly-01 div{ +#display-01 div{ border: 6px; solid: blue; - +} /* All your edits should go here */ From 2ebc8ec633a4b229fc764793e8a91c57f724349f Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 19 Sep 2019 16:13:17 -0400 Subject: [PATCH 4/5] got done up to float4 --- index.html | 18 ++++++------ my-styles.css | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 85 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 1f28407..6ea9533 100644 --- a/index.html +++ b/index.html @@ -58,7 +58,7 @@

Display

I should be hidden.
I should be showing.
- +
  • Don't display the first div.
  • But display the second. (hint)
    • @@ -283,8 +283,8 @@

    Position

      -
    • Make each outer box a 4rem by 4rem light gray square.
      • -
    • Make each inner box a 1rem by 1rem dark gray square.
      • +
    • Make each outer box a 4rem by 4rem light gray square.
      • +
    • Make each inner box a 1rem by 1rem dark gray square.
    • Position each outer box to opposite sides of the section.
    • Position each inner box to be centered within its outer box. (You might have to do some math.)
    • You shouldn't be using any padding or margin for this one!
      • @@ -322,23 +322,23 @@

      Layout

      nav item nav item - +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis posuere condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vitae mollis dui. Praesent porttitor quam lorem. Phasellus ullamcorper ligula vitae augue eleifend faucibus. Donec elementum nulla eu erat feugiat nec bibendum purus facilisis. Vestibulum tincidunt, lectus sed tristique condimentum, odio justo faucibus diam, sed imperdiet metus dui non augue. Ut felis enim, accumsan id tempor vitae, rutrum ut sem. Maecenas pulvinar bibendum lectus vel malesuada. Duis sodales ultricies congue. Maecenas id diam neque. Fusce ac interdum felis. Donec dictum massa eu enim aliquam rhoncus. Donec in dui diam. Aenean nisl risus, iaculis in convallis eu, condimentum a metus. Fusce ut purus odio. Curabitur vitae enim id nisl dignissim varius vitae vel dui. Aenean scelerisque ante vitae quam tempor non dignissim mauris venenatis.

      - +

      Proin eleifend ornare gravida. Donec nunc ipsum, luctus eget iaculis sit amet, laoreet quis nisl. Curabitur euismod rutrum ornare. Morbi viverra rutrum purus non ullamcorper. Quisque sollicitudin elementum leo at lobortis. Vivamus nec dolor augue, sit amet blandit urna. Curabitur vitae elit id sem blandit tincidunt. Fusce aliquam sodales mauris vitae molestie. Aenean sit amet ligula sapien. Donec luctus ultrices condimentum. Fusce ac velit odio, sed luctus libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce orci neque, commodo quis dictum et, interdum vel diam. Curabitur congue, leo non commodo facilisis, quam magna rutrum enim, non malesuada dui mi vitae risus.

      - +

      Suspendisse pellentesque mattis orci, non euismod dui pellentesque eget. Fusce posuere nisl in ligula interdum eget dapibus sem malesuada. Etiam eu ullamcorper neque. Maecenas eget sapien augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc felis diam, dictum ornare laoreet eget, semper sit amet arcu. Suspendisse ut pulvinar nisl. Quisque congue sem vel purus pharetra blandit. Praesent eget ante risus. Donec metus dui, molestie ac elementum et, fermentum nec ipsum.

      - +

      Quisque ipsum lacus, ultricies a convallis quis, dictum in ipsum. Nam sit amet sem et diam tristique sagittis. Sed mi augue, mattis nec ornare euismod, pharetra vitae ante. Aenean sed augue turpis. Cras tincidunt sollicitudin lectus quis posuere. Vivamus vel eleifend purus. Nulla venenatis pharetra mi, nec pellentesque augue dapibus eget. Aliquam erat volutpat. Etiam eleifend tincidunt sem vitae ultricies. Suspendisse malesuada varius turpis eget sollicitudin. Etiam semper magna eu tellus dignissim vitae rutrum felis porta. Maecenas consectetur tempor arcu. Sed a facilisis elit. Quisque ac diam elit, nec condimentum lectus. Phasellus leo ligula, viverra ut venenatis non, blandit in orci. Suspendisse euismod leo at velit pharetra non congue augue semper. Cras vitae tortor massa.

      - +

      Suspendisse pellentesque mattis orci, non euismod dui pellentesque eget. Fusce posuere nisl in ligula interdum eget dapibus sem malesuada. Etiam eu ullamcorper neque. Maecenas eget sapien augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc felis diam, dictum ornare laoreet eget, semper sit amet arcu. Suspendisse ut pulvinar nisl. Quisque congue sem vel purus pharetra blandit. Praesent eget ante risus. Donec metus dui, molestie ac elementum et, fermentum nec ipsum.

      - +
      Copyright © 2018 - Acme Web Sites
      diff --git a/my-styles.css b/my-styles.css index 4c1ecc4..3caaf0a 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,7 +1,82 @@ /* Your Stylesheet */ #display-01 div{ - border: 6px; solid: blue; + border: 1px solid blue; + display:inline; + margin: 60px; } +#display-02 span{ + display:block; + border: 1px solid red; + width: 100%; +} + +#display-03 div{ + display:inline; + width: 80px; + height: 80px; + padding: 20px; + border: 1px solid green; + background: white; +} + +#display-04 div:nth-of-type(1){ + display:none; +} + +#display-05 a{ + display: block; + width: 50%; + background: black; + padding: 10px; + margin-right: 25%; + margin-left: 25%; +} + +#boxmodel-01 div{ + border: 1rem solid red; + width: 40%; + margin-left: auto; + margin-right: auto; + padding:30px; +} + +#boxmodel-02 div{ + box-sizing: content-box; + border: 1rem solid red; + width: 40%; + margin: auto; + padding:30px; +} + +#float-01 img{ + float: left; + margin: 1%; + margin-left: 0%; +} + +#float-02 img{ + float: right; + margin: 2%; + margin-right: 0%; +} + +#float-03 img{ + float: left; + margin:2%; +} + +#float-03 p.clear{ + clear:left; + margin:2%; +} +#float-04 img{ + float: left; + margin:2%; +} +#float-04 div{ + display:flow-root; + background:cyan; +} /* All your edits should go here */ From dd4f4b20375bf97a42692d42d972dfd73bde34e7 Mon Sep 17 00:00:00 2001 From: Anthony Date: Thu, 19 Sep 2019 22:28:05 -0400 Subject: [PATCH 5/5] this is as far as i got --- my-styles.css | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/my-styles.css b/my-styles.css index 3caaf0a..bdae20c 100644 --- a/my-styles.css +++ b/my-styles.css @@ -4,13 +4,11 @@ display:inline; margin: 60px; } - #display-02 span{ display:block; border: 1px solid red; width: 100%; } - #display-03 div{ display:inline; width: 80px; @@ -19,11 +17,9 @@ border: 1px solid green; background: white; } - #display-04 div:nth-of-type(1){ display:none; } - #display-05 a{ display: block; width: 50%; @@ -32,7 +28,6 @@ margin-right: 25%; margin-left: 25%; } - #boxmodel-01 div{ border: 1rem solid red; width: 40%; @@ -40,7 +35,6 @@ margin-right: auto; padding:30px; } - #boxmodel-02 div{ box-sizing: content-box; border: 1rem solid red; @@ -48,13 +42,11 @@ margin: auto; padding:30px; } - #float-01 img{ float: left; margin: 1%; margin-left: 0%; } - #float-02 img{ float: right; margin: 2%; @@ -65,7 +57,6 @@ float: left; margin:2%; } - #float-03 p.clear{ clear:left; margin:2%; @@ -78,5 +69,10 @@ display:flow-root; background:cyan; } +#float-05 p{ + display:inline; + +} + /* All your edits should go here */