Skip to content

Instantly share code, notes, and snippets.

@razzius

razzius/index.html

Created January 25, 2017 00:53
Show Gist options
  • Save razzius/8def3fbd06468be8cac7b7c430783ae7 to your computer and use it in GitHub Desktop.
Save razzius/8def3fbd06468be8cac7b7c430783ae7 to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=8def3fbd06468be8cac7b7c430783ae7
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>DESTINY LUONG</title>
</head>
<body>
<h1>DESTINY LUONG:
<br>
COMPUTER PRODIGY</h1>
<ul>
<li>9<sup>th</sup> grade</li>
</ul>
<iframe src="https://en.wikipedia.org/wiki/Zootopia"></iframe>
<canvas></canvas>
</body>
</html>
Raw
script.js
var header = document.getElementsByTagName('h1')[0];
setInterval(function() {
header.innerText += '!';
}, 500);
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
canvas.onclick = function(e) {
console.log(e);
ctx.rect(e.clientX, e.clientY, 1, 1);
ctx.stroke();
};
Raw
styles.css
@keyframes background {
0% {background-color: salmon;}
50% {background-color: pink;}
100% {background-color: salmon;}
}
@keyframes header {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
h1 {
margin-top: 40px;
animation: header 5s infinite linear;
max-width: 400px;
}
body {
animation: background 10s infinite;
}
iframe {
width: 100%;
height: 400px;
transform: scale(.7);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment