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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>GOT Challenge</title>
</head>
<body>
<img class="dragon" src="https://raw.githubusercontent.com/Jaseemakhtar/GOT/master/dragonLeft.png" alt="">
<img class="dragon" src="https://raw.githubusercontent.com/Jaseemakhtar/GOT/master/dragonRight.png" alt="">
<img class="dragon" src="https://raw.githubusercontent.com/Jaseemakhtar/GOT/master/got3.png" >
<canvas id="canvas"></canvas>
<footer>
<h5 class="footer">Made with <span style="color: #fc3f5e; font-size: 1em;">♥</span></h5>
<h6 class="footer">by <a style="text-decoration: none; color: inherit;" href="https://jaseemakhtar.github.io" >Jaseemakhtar ©</a></h6>
</footer>
<script src="script.js"></script>
</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
body, html{
padding: 0;
margin: 0;
overflow: hidden;
}
body{
width: 100vw;
height: 100vh;
/*background-image: linear-gradient(to bottom, #051937, #341b40, #591a3a, #702428, #763d10);*/
background-image: linear-gradient(to top, #3c000a, #5b1516, #7a2e1c, #974920, #b16723);
font-family: Montserrat;
}
.dragon{
display: none;
}
footer{
color: #f8dab8;
position: absolute;
text-align: center;
width: 100%;
}
footer{
bottom: 10px;
}
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 width = window.innerWidth;
var height = window.innerHeight ;
var dragonWidth = width * 0.2;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
c.width = width;
c.height = height;
var dragonLeft = document.querySelectorAll(".dragon")[0];
var dragonRight = document.querySelectorAll(".dragon")[1];
var got = document.querySelectorAll(".dragon")[2];
ctx.globalAlpha = "0.8";
ctx.drawImage(dragonLeft, 10, 10, dragonWidth, dragonWidth);
ctx.drawImage(dragonRight, width - dragonWidth - 20 , 10, dragonWidth, dragonWidth);
var x = dragonWidth - dragonWidth * 0.13;
var y = dragonWidth - dragonWidth * 0.2;
var x1 = width - dragonWidth + dragonWidth * 0.071;
var y1 = dragonWidth - dragonWidth * 0.2;
var w = 1.5;
var xs = 1.6;
var inc = 0.1;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run