html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
</head>
<body>
<div class = wrapper>
<div id = 'top'>... Never tired
</div>
<div id = 'left'>
<img id = "fan" src = https://media.giphy.com/media/eoQggB9s2KXle/giphy.gif>
</div>
<div id = 'right'>
<div id = "container">
<img id = "fly" src = https://www.gifandgif.eu/animated_gif/Insects/Animated%20Gif%20Insects%20%2836%29.gif >
</div>
</div>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {margin:0;
background-color: #cac4ce;
width: 100%;
}
.wrapper {
width: 100%;
display : grid;
grid-template-columns: 440px Auto;
grid-template-rows: 85px 430px;
}
#top {
padding-right:50px;
opacity:0.9;
font-family: 'Gloria Hallelujah', cursive;
font-size:30;
color: #452121;
text-align: right;
grid-column-start: 1;
grid-column-end: 3;
background-color: #f4bed9;
margin:0.5em;
border-radius: 1em;
-webkit-mask-image: -webkit-gradient(linear, left top, right top,
from( rgba(0,0,0,0)), to( rgba(0,0,0,1)))
}
#left {
position: relative;
margin:0.5em;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = function () {
var t = setInterval(move, 5);
var dir = 0;
var up_down = 0;
var left_right = 0;
var box = document.getElementById("container");
var fly = document.getElementById("fly");
var head = document.getElementById("left");
var main = document.getElementById("right");
var top = document.getElementById("top");
function move() {
up_down += (Math.random()*18-9);
left_right += Math.random()*18-9;
if (left_right>(main.clientWidth-40)){left_right -= 9;}
if (left_right<-210){left_right += 9}
if (up_down<-15){up_down += 9}
if (up_down>350){up_down -= 9}
fly.onmouseover = function run(){
left_right += (Math.round(Math.random())*2-1)*50;
up_down = (Math.round(Math.random())*2-1)*50};
box.style.left = left_right+"px";
box.style.top = up_down+"px";
}
};
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run