diff --git a/my-styles.css b/my-styles.css index f7d02e4..3d790a2 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,4 +1,251 @@ /* Your Stylesheet */ - +#display-01 div { + display: inline; + border: thin solid blue; + margin: 0px 20px 0px 20px; +} +#display-02 span { + display: block; + border: thin solid red; + margin: 0px; +} +#display-03 div { + display: inline; + border: thin solid green; + padding: 5px; + background: green; +} +#display-04 div:first-of-type { + display: none; +} +#display-05 a { + background: grey; + padding: 10px 0px 10px 0px; + margin: 0 auto; + width: 50%; + display: block; +} +#boxmodel-01 div { + box-sizing: content-box; + margin: 0 auto; + width: 50%; + padding: 30px 30px 30px 30px; + border: thick solid black; +} +#boxmodel-02 div { + box-sizing: content-box; + width: 50%; + padding: 30px; + border: thick solid black; + margin: 0 auto; +} +#float-01 img { + float: left; + margin: 1em 10px 10px 0px; +} +#float-02 img { + float: right; + margin: 1em 0px 10px 10px; +} +#float-02 p { + text-align: justify; +} +#float-03 img { + float: left; + margin: 1em; +} +#float-03 .clear { + clear: both; +} +#float-04 img { + float: left; + margin: 1em; +} +#float-04 div { + background: lightblue; + content: ""; + display: table; + clear: both; +} +#float-05 p:first-child { + box-sizing: border-box; + float: left; + width: 50%; + padding-right: 10px; +} +#float-05 p:last-child { + box-sizing: border-box; + float: right; + width: 50%; + padding-left: 10px; + border-left: thin solid black; +} +#float-06 div p:first-child { + box-sizing: border-box; + float: left; + width: 50%; + padding-right: 10px; + border-right: thin solid black; +} +#float-06 div p:last-child { + box-sizing: border-box; + float: right; + width: 50%; + padding-left: 10px; +} +#float-06 div::after { + content: ""; + display: table; + clear: both; +} +#position-01 div { + width: 40px; + height: 40px; + background: red; +} +#position-01 div:nth-child(even) { + display: inline-block; + position: relative; + top: 0px; + bottom: 20px; + left: 40px; +} +#position-02 div { + border: thin solid black; +} +#position-02 span:nth-child(1){ + position: absolute; + top: 0px; + left: 0px; +} +#position-02 span:nth-child(2) { + position: absolute; + top: 0px; + right: 0px; +} +#position-02 span:nth-child(3) { + position: absolute; + bottom: 0px; + right: 0px; +} +#position-02 span:nth-child(4) { + position: absolute; + bottom: 0px; + left: 0px; +} +#position-03 div { + position: relative; + border: thin solid black; + height: 100px; +} +#position-03 span:nth-child(1) { + position: absolute; + top: 0px; + left: 0px; +} +#position-03 span:nth-child(2) { + position: absolute; + top: 0; + right: 0; +} +#position-03 span:nth-child(3) { + position: absolute; + bottom: 0; + right: 0; +} +#position-03 span:nth-child(4) { + position: absolute; + bottom: 0; + left: 0; +} +section#position-04 { + position: static; +} +#position-04 div { + position: absolute; + top: 0; +} +#position-05 .outer-box:first-child { + position: relative; + background: lightgray; + width: 4rem; + height: 4rem; + top: 1rem; + left: 0; +} +#position-05 .outer-box:last-child { + position: relative; + background: lightgray; + width: 4rem; + height: 4rem; + top: -3rem; + left: 20rem; +} +#position-05 .inner-box { + position: relative; + background: darkgray; + width: 1rem; + height: 1rem; + top:1.5rem; + left:1.5rem; +} +#position-06 div { + position: absolute; + background: lavender; + margin: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +#position-07 a { + position: fixed; + top: 92%; + left: 85%; + background-color: #ffee00; + padding: 10px; +} +#position-07 a:hover { + color: green; +} +section#layout { + background: lightgrey; +} +#layout nav { + position: absolute; + margin: 0; + top: 0; + left: 0; + right: 0; + bottom: 97%; + background: lightblue; +} +#layout aside { + box-sizing: border-box; + float: right; + background: forestgreen; + color: white; + width: 50%; + margin: 5px -5rem 5px 5px; + padding: 5px; + border: solid black; +} +#layout a { + position: relative; + padding: 5px; + top: 25%; + left: 5%; + border: solid blue; + margin: 0 -3px; +} +#layout footer { + position: absolute; + margin: 0; + top: 97%; + left: 0; + right: 0; + bottom: 0; + background: crimson; + text-align: center; +} /* All your edits should go here */ -