Skip to content

Instantly share code, notes, and snippets.

@DestinyLuong

DestinyLuong/index.html

Created January 20, 2017 01:05
Show Gist options
  • Save DestinyLuong/03bd67cb2d042c96e3e779ded2e3a4f4 to your computer and use it in GitHub Desktop.
Save DestinyLuong/03bd67cb2d042c96e3e779ded2e3a4f4 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=03bd67cb2d042c96e3e779ded2e3a4f4
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cookie Terror</title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Gloria+Hallelujah" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
</head>
<body>
<h1> Welcome!</h1>
<p> This is spam.</p>
<p class="two">You're wasting your time.</p>
<p-5>What boredom. </p-5>
<p-3>Oh you survived.</p-3>
<p-4>HERE'S A COOKIE: </p-4>
<img src="http://orig14.deviantart.net/9756/f/2009/312/7/2/angry_cookie_by_yaizahpm.jpg">
<a href="http://orig14.deviantart.net/9756/f/2009/312/7/2/angry_cookie_by_yaizahpm.jpg"> MOAR COOKIES: </a>
<img src="http://images.birthdayexpress.com/mgen/merchandiser/81651.jpg?zm=1600,1600,1,0,0">
<a href="http://images.birthdayexpress.com/mgen/merchandiser/81651.jpg?zm=1600,1600,1,0,0>OMNONOMOMONOM"> </a>
</body>
</html>
Raw
styles.css
h1 {
color:#ffb3b3;
font-family:Amatic SC;
}
p {
font-family:Gloria Hallelujah;
}
.two {
font-family:QuickSand;
}
p-3 {
font-family:Josefin Sans;
}
img {
height:300px;
}
p-5{
font-family:Lobster Two;
}
@charstarstars
Copy link

index.html Lines 13-15 <p-5> <p-3> and <p-4> are not universally supported tags that you can use. Instead, you can use a class attribute like in Line 12 for example, you can do something like <p class="p-5"> ... </p>.

@charstarstars
Copy link

index.html Line 21 make sure you put text in between your opening <a href=" ..."> and closing </a> tags so that the link will show up on the page!

@charstarstars
Copy link

For your CSS, don't forget to put the font family in quotation marks. Some browsers may not be as forgiving and may not show the font properly if it's not in quotes! For example:

p {
    font-family:"Gloria Hallelujah";
}

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