From 6ccb206855b5428a326c2ca424039607f425c962 Mon Sep 17 00:00:00 2001 From: jrpochetedmead Date: Fri, 20 Sep 2019 11:10:44 -0400 Subject: [PATCH] Update my-styles.css As far as I got, still working on it. --- my-styles.css | 194 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 194 insertions(+) diff --git a/my-styles.css b/my-styles.css index f7d02e4..cba15e7 100644 --- a/my-styles.css +++ b/my-styles.css @@ -2,3 +2,197 @@ /* All your edits should go here */ +#display-01 > div { + display: inline; + border: 1px solid blue; + margin: 20px; +} + +#display-02 > span { + display: flex; + border: 1px solid red; + width: 100% +} + +#display-03 > div { + display: inline-block; + border: 1px solid green; + height: 50px; + width: 50px; +} + + /* Start of display-04 */ + /* Don't display the first div. + But display the second. */ + +#display-04 div:nth-of-type(1) { + display: none; +} +#display-04 div:nth-of-type(2) { + display: inline; +} +/* End of display-04 */ + +#display-05 > a { + display: inline-block; + box-sizing: border-box; + background-color: gray; + width: 50%; + padding: 5%; + margin-left: 25%; +} + +#boxmodel-01 > div { + height: 50%; + width: 50%; + border: 5px solid black; + padding: 25px; + margin: auto; +} + +#boxmodel-02 > div { + display: inline-flex; + width: 50px; + margin: 50px; + padding: 50px; + border: 50px solid black; + +} + +#float-01 > img { + float: left; + margin-top: 25px; + margin-right: 15px; + margin-bottom: 10px; + margin-left: 0px; +} + +/* float-02 */ +#float-02 > img { + float: right; + margin-top: 25px; + margin-right: 0px; + margin-bottom: 10px; + margin-left: 15px; +} + +#float-02 > p { + text-align: justify; +} +/* End of float-02 */ + +/* float-03 */ +#float-03 > img { + float: left; + margin-top: 25px; + margin-right: 15px; + margin-bottom: 10px; + margin-left: 15px; +} + +#float-03 .clear { + clear: left; +} +/* End of float-03 */ + +/* Start of float-04 */ +#float-04 > img { + float: left; + margin-top: 25px; + margin-right: 15px; + margin-bottom: 10px; + margin-left: 15px; +} + +#float-04 > div { + background-color: #ADD8E6; +} + +#float-04 div::after { + content: ""; + display: table; + clear: both; +} +/* End of float-04 */ + +/* Start of float-05 */ +#float-05 p { + box-sizing: border-box; +} + +#float-05 p:first-child { + float: left; + width: 50%; + border-right: 1px solid black; + padding: 15px; +} + +#float-05 p:last-child { + float: right; + width: 50%; + padding: 15px; +} +/* End of float-05 */ + +/* Start of float-06 */ +#float-06 p { + box-sizing: border-box; +} + +#float-06 div p:first-child { + float: left; + width: 50%; + padding: 10px; + border-right: 1px solid black; +} + +#float-06 div p:last-child { + float: right; + padding: 10px; + width: 50%; +} + +#float-06 div::after { + content: ""; + display: table; + clear: both; +} +/* End of float-06 */ + +/* To work on later */ + +/* + +#position-01 { + +} + +#position-02 { + +} + +#position-03 { + +} + +#position-04 { + +} + +#position-05 { + +} + +#position-06 { + +} + +#position-07 { + +} + +#layout { + +} + +*/