html
html
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
<!-- Created by Muhammad Varel -->
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="container" >
<div id="box"><img src="https://scontent-sin6-2.cdninstagram.com/v/t51.2885-19/s150x150/59788244_1785858631560182_2768570983114604544_n.jpg?_nc_ht=scontent-sin6-2.cdninstagram.com&_nc_cat=102&_nc_ohc=oslckUZx5GwAX82MAZJ&oh=d02d630218a94c8d458a17fb62373224&oe=5EDFEE48" width="50px" height="50px"/> </div>
<img src="https://darunnajah.com/wp-content/uploads/2013/02/dajjal.gif" width="200px" height="200px"/>
</div>
<br />
<!-- INVISIBLE LINE OF CODE -->
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
/* Created by Muhammad Varel */
body {
background: #353535;
}
#container {
border: thin silver solid;
margin: auto;
overflow: hidden;
width: 200px;
height: 200px;
background: #232323;
position: relative;
}
.antichrist {
font-family: Times-New-Roman;
font-size: 30px;
color: red;
}
#box {
width: 50px;
height: 50px;
background: #a1a1a1;
position: absolute;
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
// Created by Muhammad Varel
window.onload = function() {
var position = 0;
var child = document.getElementById("box");
//starts with animating right
var animate = setInterval(animRight, 14);
//needs just 1 variable
var position = 0;
//animates right
function animRight() {
if(position < 150) {
position += 2.5;
child.style.left = position;
} else {
//clears interval
clearInterval(animate);
//position is back to 0
position = 0;
//sets interval for down animation
animate = setInterval(animDown, 14);
}
}
function animDown() {
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run