Skip to content

Instantly share code, notes, and snippets.

@LtAstros

LtAstros/index.html

Created January 20, 2017 01:01
Show Gist options
  • Save LtAstros/45512d8c41781ed4393ac8e641bb13dc to your computer and use it in GitHub Desktop.
Save LtAstros/45512d8c41781ed4393ac8e641bb13dc to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=45512d8c41781ed4393ac8e641bb13dc
Raw
index.html
<!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>
Raw
styles.css
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;
}
@charstarstars
Copy link

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;
}

@charstarstars
Copy link

Awesome use of background image!! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment