diff --git a/my-styles.css b/my-styles.css index f7d02e4..059b720 100644 --- a/my-styles.css +++ b/my-styles.css @@ -1,4 +1,265 @@ /* Your Stylesheet */ -/* All your edits should go here */ +#display-01 div { + display:inline; +border: 3px solid; +border-color: blue; +padding: 0px; +margin: 20px; + + + +} + +#display-02 span { + + display: block; + border:3px solid; + border-color: red; +} + +#display-03 div { + + display:inline-block; + border: 3px solid; + border-color: green; + width:10%; + height:0; + padding-bottom:10%; + +} + +#display-04 div:nth-of-type(1){ + +visibility: hidden; +} +#display-05 a { + +display: block; +background-color: orange; +padding: 20px; +margin:0 25%; +border:10px; + + +} + +#boxmodel-01 div { + +margin:auto; +width:50%; +padding: 80px; +border: 25px solid; +border-color: orange; + +} + +#boxmodel-02 div { + +width:50%; +padding: 80px; +border:25px solid; +margin: auto; +box-sizing: border-box; +} + +#float-01 img { + float: left; + margin: 30px 10px 10px 0; +} + +#float-02 img { + float: right; + margin: 30px 0 10px 10px ; + +} + +#float-02 p { + + text-justify: auto; + text-align: justify; +} + +#float-03 img { + + float: left; + margin: 30px 10px 10px 10px; +} + +#float-03 p.clear { + + clear: both; +} + +#float-04 img { + + float: left; + margin: 30px 10px 10px 10px; + +} + +#float-04 div { + background:3px; + background-color: lightblue; +display: flow-root; +} + + + +#float-05 p:nth-last-of-type(1){ + +float:left; +padding: 15px; +width: 40%; +border-right:1px solid; +} + +#float-05 p:nth-last-of-type(2) { + +float:right; +padding: 15px; +width: 40%; +border-left:1px soild; + +} + +#float-06 div { + content:""; + display: table ; + clear: both; +} +#float-06 p:first-child{ + + float:left; + padding: 10px; + width: 40%; + border-right: 1px solid; + +} + +#float-06 p:nth-of-type(2){ + + float:right; + padding: 10px; + width: 40%; +} + + + /*Add clearfix hacks to this and float 5 */ + +#position-01 div { +background: red; + + width:10%; + height:0; + padding-bottom:10%; +} + +#position-01 div:nth-child(even){ + +height:0; +margin-left: 10%; +width: 10%; +padding-bottom: 10%; +} + + +#position-02 div { + + border:3px solid; + border-color: blue; + height: 100px + +} + +#position-02 span:nth-of-type(1) { +position: absolute; +top: 35px; +left: 35px; + + +} + +#position-02 span:nth-of-type(2) { + + position: absolute; + top: 35px; + right: 35px; + +} + + +#position-02 span:nth-of-type(3) { + + position: absolute; + bottom: 35px; + right: 35px; + +} + +#position-02 span:nth-of-type(4) { + + position: absolute; + bottom: 35px ; + left: 35px ; +} +#position-03 div { +border:3px; +border-color:blue; +height: 100px ; +} +#position-03 span:nth-child(1) { + position: absolute; + top: 12px; + left: 12px; +} +#position-03 span:nth-child(2) { +position:absolute; +top: 12px; +right: 12px; +} + +#position-03 span:nth-child(3) { + + position: absolute; + bottom: 12px; + right: 12px +} + +#position-03 span:nth-child(4) { + + position: absolute; + bottom: 12px; + left: 12px; +} + +#position-04 div { + + +} + + + +#position-05 div { + + +} + + +#position-06 div { + + +} + + +#position-07 div { + + +} + +#layout + + + +/* All your edits should go here */