/
index.html
92 lines (76 loc) · 3.92 KB
/
index.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Matias Lopez">
<meta name="description" content="">
<title>Marvis' Home</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="css/15-puzzle.min.css" rel="stylesheet">
<!-- Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<h2>Marvis is <span>not home</span>.</h2>
</div>
</header>
<div class="container">
<div class="flex-center">
<div id="board" class="container-puzzle">
<div class="piece" data-number="1" data-x="0" data-y="0">1</div>
<div class="piece" data-number="2" data-x="1" data-y="0">2</div>
<div class="piece" data-number="3" data-x="2" data-y="0">3</div>
<div class="piece" data-number="4" data-x="3" data-y="0">4</div>
<div class="piece" data-number="5" data-x="0" data-y="1">5</div>
<div class="piece" data-number="6" data-x="1" data-y="1">6</div>
<div class="piece" data-number="7" data-x="2" data-y="1">7</div>
<div class="piece" data-number="8" data-x="3" data-y="1">8</div>
<div class="piece" data-number="9" data-x="0" data-y="2">9</div>
<div class="piece" data-number="10" data-x="1" data-y="2">10</div>
<div class="piece" data-number="11" data-x="2" data-y="2">11</div>
<div class="piece" data-number="12" data-x="3" data-y="2">12</div>
<div class="piece" data-number="13" data-x="0" data-y="3">13</div>
<div class="piece" data-number="14" data-x="1" data-y="3">14</div>
<div class="piece" data-number="15" data-x="2" data-y="3">15</div>
<div id="woohoo">
<div class="flex-center">
<iframe src="//giphy.com/embed/O7yrslwKwHtle?html5=true" width="480" height="274" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
</div>
</div>
<i id="retry" class="fa fa-repeat" aria-hidden="true"></i>
<i id="skip" class="fa fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
© 2014<script>
var year = new Date().getFullYear();
(year > 2014) && document.write('-' + year);
</script> <a href="http://www.imatlopez.com/">Matias Lopez</a>
</div>
</footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Custom App JavaScript -->
<script async src="js/15-puzzle.min.js"></script>
</body>
</html>