Created
February 1, 2017 16:18
-
-
Save Adamj1232/01e8e3b010824867d4a595435478ca92 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#### My CSS Challenge 1 | |
I chose 100x100px boxes to make squares equal. I set the margin size to 0 and the font-size to 10px in the body to bring boxes to the edge and add small text to the corners. | |
On Div3 I set position:absolute and right:0 to send that box far right. I set Div2 to position: absolute, right: 100px, margin-right: 5px; this moved Div2 just to the left of Div3 5px. | |
[CodePen-1] (http://codepen.io/Adamj1232/pen/wgpOVa) | |
#### My CSS Challenge 2 | |
To slant boxes I left Div1 as is from challenge 1, changed Div2 to right: 50%, top: 100px; which places the Div in the middle of the work area and 100px down. Finally I set Div3 to | |
right:0px and top: 200px which moved it far right and down two box lengths giving it a slope from right to left. | |
[CodePen-2] (http://codepen.io/Adamj1232/pen/bgLWvM) | |
#### My CSS Challenge 3 | |
[CodePen-3] (http://codepen.io/Adamj1232/pen/apExNj) | |
#### My CSS Challenge 4 | |
[CodePen-4] (http://codepen.io/Adamj1232/pen/vgpPoM) | |
#### My CSS Challenge 5 | |
[CodePen-5] (http://codepen.io/Adamj1232/pen/BpJEoo) | |
#### My CSS Challenge 6 | |
[CodePen-6] () | |
#### My CSS Challenge 7 | |
[CodePen-7] (http://codepen.io/Adamj1232/pen/WRMpWZ) | |
#### My CSS Challenge 8 | |
[CodePen-7] (http://codepen.io/Adamj1232/pen/zNWvpK) | |
#### My CSS Challenge 9 | |
[CodePen-7] (http://codepen.io/Adamj1232/pen/zNRwxb) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment