-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSuperhero.html
141 lines (138 loc) · 6.93 KB
/
Superhero.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
<title>Superheros</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="Superhero.css">
</head>
<body >
<!--Nvigation bar which contains home and faourites button -->
<div id="home">
<span id="home-span"><a href="Superhero.html">Home</a></span><br>
<span id="fav-span"><a href="fav.html">My Favourites</a></span>
</div>
<!--Headings on the home page -->
<div id="text">
<p id="heading">
Cool Superhero Images!
</p>
<p id="intro">
Welcome! to Cool Superhero Images page. Select a Superhero name from the list and click on search superhero to get cool image of superheros.
And for more information about that superhero click on the image.
</p>
</div>
<!--Search box which conatins list of all the names of superheros -->
<div id="get" >
<input type="text" id="Names" list="list1" placeholder="Search here..."/>
<datalist id="list1">
<option value="A-Bomb">A-Bomb</option>
<option value="Abe Sapien">Abe Sapien</option>
<option value="Abin Sur">Abin Sur</option>
<option value="Abomination">Abomination</option>
<option value="Abraxas">Abraxas</option>
<option value="Absorbing Man">Absorbing Man</option>
<option value="Adam Monroe">Adam Monroe</option>
<option value="Adam Strange">Adam Strange</option>
<option value="Agent 13">Agent 13</option>
<option value="Agent Bob">Agent Bob</option>
<option value="Agent Zero">Agent Zero</option>
<option value="Air-Walker">Air-Walker</option>
<option value="Ajax">Ajax</option>
<option value="Alan Scott">Alan Scott</option>
<option value="Alex Mercer">Alex Mercer</option>
<option value="Alex Woolsly">Alex Woolsly</option>
<option value="Alfred Pennyworth">Alfred Pennyworth</option>
<option value="Alien">Alien</option>
<option value="Allan Quatermain">Allan Quatermain</option>
<option value="Amazo">Amazo</option>
<option value="Ammo">Ammo</option>
<option value="Ando Masahashi">Ando Masahashi</option>
<option value="Angel">Angel</option>
<option value="Angel">Angel</option>
<option value="Angel Dust">Angel Dust</option>
<option value="Angel Salvadore">Angel Salvadore</option>
<option value="Angela">Angela</option>
<option value="Animal Man">Animal Man</option>
<option value="Annihilus">Annihilus</option>
<option value="Ant-Man">Ant-Man</option>
<option value="Ant-Man II">Ant-Man II</option>
<option value="Anti-Monitor">Anti-Monitor</option>
<option value="Anti-Spawn">Anti-Spawn</option>
<option value="Anti-Venom">Anti-Venom</option>
<option value="Apocalypse">Apocalypse</option>
<option value="Aquababy">Aquababy</option>
<option value="Aqualad">Aqualad</option>
<option value="Aquaman">Aquaman</option>
<option value="Arachne">Arachne</option>
<option value="Archangel">Archangel</option>
<option value="Arclight">Arclight</option>
<option value="Ardina">Ardina</option>
<option value="Ares">Ares</option>
<option value="Ariel">Ariel</option>
<option value="Armor">Armor</option>
<option value="Arsenal">Arsenal</option>
<option value="Astro Boy">Astro Boy</option>
<option value="Atlas">Atlas</option>
<option value="Atom">Atom</option>
<option value="Atom Girl">Atom Girl</option>
<option value="Atom II">Atom II</option>
<option value="Atom III">Atom III</option>
<option value="Atom IV">Atom IV</option>
<option value="Aurora">Aurora</option>
<option value="Azazel">Azazel</option>
<option value="Azrael">Azrael</option>
<option value="Aztar">Aztar</option>
<option value="Bane">Bane</option>
<option value="Banshee">Banshee</option>
<option value="Bantam">Bantam</option>
<option value="Batgirl">Batgirl</option>
<option value="Batgirl III">Batgirl III</option>
<option value="Batgirl IV">Batgirl IV</option>
<option value="Batgirl V">Batgirl V</option>
<option value="Batgirl VI">Batgirl VI</option>
<option value="Batman II">Batman II</option>
<option value="Battlestar">Battlestar</option>
<option value="Batwoman V">Batwoman V</option>
<option value="Beak">Beak</option>
<option value="Beast">Beast</option>
<option value="Beast Boy">Beast Boy</option>
<option value="Beetle">Beetle</option>
<option value="Ben 10">Ben 10</option>
<option value="Beta Ray Bill">Beta Ray Bill</option>
<option value="Beyonder">Beyonder</option>
<option value="Big Barda">Big Barda</option>
<option value="Big Daddy">Big Daddy</option>
<option value="Big Man">Big Man</option>
<option value="Bill Harken">Bill Harken</option>
<option value="Billy Kincaid">Billy Kincaid</option>
<option value="Binary">Binary</option>
<option value="Bionic Woman">Bionic Woman</option>
<option value="Bird-Brain">Bird-Brain</option>
<option value="Bird-Man">Bird-Man</option>
<option value="Bird-Man II">Bird-Man II</option>
<option value="Birdman">Birdman</option>
<option value="Bishop">Bishop</option>
<option value="Bizarro">Bizarro</option>
<option value="Black Abbott">Black Abbott</option>
<option value="Black Adam">Black Adam</option>
<option value="Black Bolt">Black Bolt</option>
<option value="Black Canary">Black Canary</option>
<option value="Black Cat">Black Cat</option>
<option value="Black Flash">Black Flash</option>
</datalist>
<!--Search superhero button -->
<button id="btn" type="submit" name="get" >
<span>Search Superhero</span>
</button>
</div>
<!--Homepage image and add favourite button -->
<div id="next">
<a id="about" href="about.html"><img id="super"class="SuperheroImg" src="" alt="" srcset=""></a>
<div>
<button id="btn1">Add to Favourites</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Suprhero.js"></script>
</body>
</html>