Created
January 20, 2017 01:01
-
-
Save LtAstros/45512d8c41781ed4393ac8e641bb13dc to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=45512d8c41781ed4393ac8e641bb13dc
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Never Gonna Give!</title> | |
| <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <h1> We Are Number One! </h1> | |
| <img src = "https://goo.gl/d3COHL"> | |
| <my-tag2> If you want to be a villain number one </my-tag2> | |
| <img src = "https://goo.gl/FLRVs4"> | |
| <my-tag1> You gotta catch a superhero on the run </my-tag1> | |
| </body> | |
| </html> |
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
| h1 { | |
| color: #ff3300; | |
| font-family: "Permanent Marker"; | |
| text-align: center; | |
| } | |
| body { | |
| background-image: url(https://goo.gl/dK3xl1); | |
| } | |
| img { | |
| width: 420px; | |
| } | |
| my-tag2 { | |
| color:#ff3300; | |
| font: 20px "Permanent Marker"; | |
| text-align: center; | |
| } | |
| my-tag1 { | |
| color:#ff3300; | |
| font: 20px "Permanent Marker"; | |
| text-align: center; | |
| } |
Some old browsers don't support custom tags like <my-tag1>. Gradually they'll be fully supported as more people use more modern browsers, but it's something you might be careful about. The safe bet is to use HTML classes which we'll talk about today. So here you would do
<p class="mytag-2"> this is a paragraph </p>and in the CSS:
.mytag-2 {
color: #ff3300;
}
Awesome use of background image!! 🎉
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
index.html Lines 8-13 Don't forget to use consistent code formatting. It makes code more readable and legitimizes what you create in the eyes of other programmers. In this case you have mixed indentation. Usually in professional settings, we stick to either 2 spaces or 4 spaces. You could read more about it here: https://en.wikipedia.org/wiki/Indent_style .
Also for html attributes, we usually don't put spaces around the
=so, we like to use<img src="...">instead of<img src = "...">