Skip to content

Instantly share code, notes, and snippets.

@H644b

H644b/index.html

Last active April 29, 2022 14:25
Show Gist options
  • Save H644b/fbb0bb31c68b323ec7d39d163b5e9669 to your computer and use it in GitHub Desktop.
Save H644b/fbb0bb31c68b323ec7d39d163b5e9669 to your computer and use it in GitHub Desktop.
Download ZIP
xxpQaee
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>
My fav cartoon
</title>
</head>
<body id="body" onload="bodyLoad()">
<h1 id="nameheading">
Timur
</h1>
<button onclick="changetheme()" id="btn">
change theme
</button>
<h1>
My favorite Cartoon Character
</h1>
<h2>
Bill Nye the Science Guy
</h2>
<img src="https://c.tenor.com/gDy0eqp3K0MAAAAM/bill-nye.gif" onmouseleave="changeImageLeave()" onmouseover="changeImageOver()" style="width: 300px;" id="cartoon_Img">
<br>
<br>
<a href="https://www.youtube.com/embed/nDN7M0J3HXc" target="_blank">cartoon link</a>
<br>
<p>
Bill Nye, the Science Guy!
Bill Nye, the Science Guy!
Bill
Bill
Bill
Bill
Bill
Bill
Bill Nye, the Science Guy!
Science rules
Bill Nye, the Science Guy!
Inertia is a property of matter
Bill, Bill, Bill, Bill
Bill, Bill, Bill, Nye, the Science Guy!
Bill, Bill, Bill, Bill, (Pi minus ten seconds)
Bill, Bill, Bill, Bill, Bill Bill
Bill Nye, the Science Guy!
</p>
<button onclick="window.location.href='https://www.imdb.com/title/tt0173528/';">Bill Nye</button>
</body>
</html>
Raw
script.js
function bodyLoad() {
document.getElementById("btn").style.fontSize = "15px";
document.getElementById("btn").style.backgroundColor = "turquoise";
document.getElementById("btn").style.borderRadius = "20px";
document.getElementById("btn").style.color = "darkred";
document.getElementById("btn").style.padding = "10px";
document.getElementById("btn").style.borderStyle = "solid";
}
function changeImageOver() {
document.getElementById("cartoon_Img").src =
"https://media2.giphy.com/media/g7GKcSzwQfugw/giphy.gif";
}
function changeImageLeave() {
document.getElementById("cartoon_Img").src =
"https://c.tenor.com/gDy0eqp3K0MAAAAM/bill-nye.gif";
}
function changetheme() {
document.getElementById("body").style.backgroundColor = "orange";
document.getElementById("nameheading").style.backgroundColor = "red";
document.getElementById("anchorTag").style.borderWidth = "0px";
document.getElementById("anchorTag").style.color = "yellow";
}
Raw
style.css
body {
text-align: center;
background: lightblue;
}
h1 {
color: yellow;
border-style: solid;
border-color: grey;
border-width: 5px;
padding: 10px;
}
a {
color: darkgreen;
background: white;
border-style: solid;
boder-width: 2px;
font-size: 20px;
border-radius: 20px;
padding: 10px;
}
p {
font-size: 30px;
color: red;
background: #11c3dd;
border-style: solid;
padding: 10px;
border-radius: 20px;
font-family: Brush Script MT;
}
button {
color: darkgreen;
background: white;
border-style: solid;
boder-width: 2px;
font-size: 20px;
border-radius: 20px;
padding: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment