-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (82 loc) · 3.21 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
<!--
By Darshan Karkar
Created using a superheroes JSON feed I made of 20 superheroes. No particular order.
Jquery was used for getting json.
Typeahead.js was used for search autocomplete. Still works without it, but requires exact case match.
_____________________________________________
//:::::::::::::::::::::::::::::::::::::::::::::\\
//:::_______:::::::::________::::::::::_____:::::::\\
//:::_/ _-"":::_--""" """--_::::\_ ):::::::::\\
//:::/ /:::::_" "-_:::\/:::::|^\:::\\
//:::/ /~::::::I__ \:::::::::| \:::\\
\\:::\ (::::::::::""""---___________ "--------" /::://
\\:::\ |::::::::::::::::::::::::::::""""==____ /::://
\\:::"\/::::::::::::::::::::::::::::::::::::::\ /~::://
\\:::::::::::::::::::::::::::::::::::::::::::)/~::://
\\::::\""""""------_____::::::::::::::::::::::://
\\:::"\ """""-----_____:::::://
\\:::"\ __----__ )::://
\\:::"\/~::::::::~\_ __/~:://
\\::::::::::::::::""----""":::://
\\::::::::::::::::::::::::://
\\:::\^""--._.--""^/::://
\\::"\ /":://
\\::"\ /":://
\\::"\_/":://
\\::::://
\\_//
"
//superman logo courtsey of: http://www.chris.com/ascii/index.php?art=comics/superman
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Superheroes</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/style.css">
<h1 class="main"><a href="http://www.dkarkar.me/superheroes">Superheroes</a></h1>
<h4>By Darshan Karkar</h4>
<div class="container">
<div class="left">
<div class="marvel">
<span class="marvel">M</span><br>
<span class="marvel">A</span><br>
<span class="marvel">R</span><br>
<span class="marvel">V</span><br>
<span class="marvel">E</span><br>
<span class="marvel">L</span><br>
</div>
</div>
<div class="middle">
<ul id="superheroes">
<div class="hero" id="form">
<form id="form" name="form">
<select id="attr">
<option value="all">All</option>
<option value="superhero">Superhero</option>
<option value="publisher">Publisher</option>
<option value="alter_ego">Alter Ego</option>
<option value="first_appearance">First Appearance</option>
<option value="characters">Characters</option>
</select>
<input type="text" name="search" id="search">
<input type="submit" value="Search" id="submit">
</form>
</div>
</ul>
</div>
<div class="right">
<div class="dc">
<span class="dc">D</span><br>
<span class="dc">C</span><br>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="js/typeahead.js"></script>
<script src="js/script.js"></script>
</body>
</html>