Created
October 30, 2016 20:32
-
-
Save alexpelan/55baa67bc9d2a25d6c9aef36b4f5643d to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=55baa67bc9d2a25d6c9aef36b4f5643d
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>GWHS</title> | |
| </head> | |
| <body> | |
| <img class="logo" src="http://www.ghouse354.com/wp-content/uploads/2016/02/g-westinghouse-school-logo.png"> | |
| </body> | |
| </html> |
This file contains hidden or 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
| body { | |
| background-color: gray; | |
| } | |
| .logo { | |
| background-color: yellow; | |
| border: 1px solid; | |
| float: left; | |
| } | |
| /* INSTRUCTIONS | |
| 1. Add some padding to the image - 10px. Notice how the border moves! And where's the background-color coming from!? | |
| 2. Next, let's change the border color to 'red' and make it 5px | |
| 3. Then, copy/paste the img tag so there are two on the page | |
| 4. They don't look so great close together -let's add some margin to separate them. Set margin to 10px. | |
| 5. Hmm, that moved it off the top of the page too - if you only want to change one direction, you can set the margin, padding, or border for just one direction. Let's set margin-left to 10px. | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment