-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
255 lines (252 loc) · 13.6 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
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="en">
<head>
<title>Star Wars Database.</title>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="css/cssreset.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/styleAjax.css"/>
</head>
<body>
<div id="container">
<!-- Header -->
<div class="row">
<div class="empty">
</div>
<div id="header">
<img src="css/images/swlogo.png"/>
<div id="intro">
Welcome to my page about ships that you can find in the Star Wars movies.
I handpicked most famous starfighters and cruisers we all grew to love over the years that would represent military strength of each side of the galatic conflict from the movies. Site was created only for the educational purposes, as i try to improve my web development skills
with each new strange idea that comes to my mind.
I hope you, as a viewer, will enjoy this little project that i put together in my free time.
</div>
</div>
<div class="empty">
</div>
</div>
<!-- Middle part -->
<div class="row">
<div class="empty">
</div>
<div id="sideMenu">
<div id="blastContainer">
<img class="blastdoors" src="css/images/blastdoors1.png"/>
<img class="blastdoors" src="css/images/blastdoors2.png"/>
</div>
<!-- Fighters -->
<div class="frame">
<img id="xwing" class="layer3r layer3" src="css/images/rebel/xwing.png"/>
<div class="layer3r tooltip">
<p>"The Incom T-65 X-wing is the fighter that killed the Death Star. An almost perfect balance of speed, maneuverability, and defensive shielding make it the fighter of choice for Rogue Squadron."</p>
<span>―General Carlist Rieekan</span>
</div>
<img id="tief" class="layer3e layer3" src="css/images/empire/tief.png"/>
<div class="layer3e tooltip">
<p>"You always hear them first. Twin ion engines make TIE fighters howl as they fly by on patrols."<br></p>
<span>―Ezra Bridger</span>
</div>
<img id="arc170" class="layer3or layer3" src="css/images/rebel/arc170.png"/>
<div class="layer3or tooltip ">
<p>"We can lose the V-wings, but those ARCs have Class One-point-five hyperdrives. They'll follow us to Hell and back."<br></p>
<span>―Reeze Duurmun, escaping Coruscant with Tobb Jadak following the Battle of Coruscant</span>
</div>
<img id="hyena" class="layer3s layer3" src="css/images/empire/hyena.png"/>
<div class="layer3s tooltip ">
<p>"They targeted the south support! What are those fool droids doing?!"<br></p>
<span>―The Keeper questioning the Hyena bombers</span>
</div>
</div>
<div class="frame">
<img id="ywing" class="layer3r layer3" src="css/images/rebel/ywing.png"/>
<div class="layer3r tooltip">
<p>"We're using Y-wings because of their greater firepower. But they move like a sleepy Hutt, so watch it."<br></p>
<span>―Luke Skywalker, during the Assault on Kile II</span>
</div>
<img id="tiei" class="layer3e layer3" src="css/images/empire/tiei.png"/>
<div class="layer3e tooltip">
<p>"We're alive."<br>
"Isn't it a little early to make that kind of statement, Master Solo? <br>
We're not in orbit and there's an awful lot of those TIE Interceptors."<br></p>
<span>―Han Solo and C-3PO following the Battle of Vrogas Vas</span>
</div>
<img id="v19" class="layer3or layer3" src="css/images/rebel/v19.png"/>
<div class="layer3or tooltip">
<p>The V-19 Torrent starfighter was an assault fighter with exceptional speed and maneuverability used by the Galactic Republic during the Clone Wars.</p>
<span>Lorem</span>
</div>
<img id="trio" class="layer3s layer3" src="css/images/empire/trio.png"/>
<div class="layer3s tooltip">
<p>"They're all over me! Get them off my—"</p>
<span>―A clone trooper pilot during the Battle of Coruscant, being chased by a droid tri-fighter</span>
</div>
</div>
<div class="frame">
<img id="awing" class="layer3r layer3" src="css/images/rebel/awing.png"/>
<div class="layer3r tooltip">
<p>"The A-wing is the fastest fighter we have, capable of matching a TIE <br>Interceptor in speed."<br></p>
<span>―General Carlist Rieekan</span>
</div>
<img id="tieb" class="layer3e layer3" src="css/images/empire/tieb.png"/>
<div class="layer3e tooltip">
<p>"All TIE bombers, commence bombardment. Set the skies on fire if you have to, but find those ships."<br>
"Aye-aye, captain. I love my job."<br></p>
<span>―An Imperial captain and a TIE pilot</span>
</div>
<img id="z95" class="layer3or layer3" src="css/images/rebel/z95.png"/>
<div class="layer3or tooltip">
<p>"You gotta love the Z-95. Nothing beats the feeling of power they give you."<br></p>
<span>―Unknown Bandit Squadron pilot</span>
</div>
<img id="nantex" class="layer3s layer3" src="css/images/empire/nantex.jpg"/>
<div class="layer3s tooltip">
<p>These nimble, needle-nosed fighters were in use by the Geonosians through the Clone Wars in defense of their droid foundries.</p>
<span>Lorem</span>
</div>
</div>
<div class="frame">
<img id="bwing" class="layer3r layer3" src="css/images/rebel/bwing.png"/>
<div class="layer3r tooltip">
<p>"You're among the best pilots in the galaxy. You'll have to be if you want to control this starship."<br></p>
<span>―Admiral Ackbar briefing B-wing pilots prior to the Battle of Endor</span>
</div>
<img id="tiev" class="layer3e layer3" src="css/images/empire/tiev.png"/>
<div class="layer3e tooltip">
<p>"I knew my clock was ticking the second you stepped off your TIE fighter."<br></p>
<span>―Aphra submits to Vader to end her life if he so chooses</span>
</div>
<img id="delta7" class="layer3or layer3" src="css/images/rebel/delta7.png"/>
<div class="layer3or tooltip">
<p>"She is a remarkable vessel. With the engineering breakthroughs we tackled developing her, she's just the start. She's a real sign of things to come."<br></p>
<span>―Walex Blissex</span>
</div>
<img id="vulture" class="layer3s layer3" src="css/images/empire/vulture.png"/>
<div class="layer3s tooltip">
<p>"Master, General Grievous's ship is directly ahead, the one crawling with vulture droids."</p>
<span>―Anakin Skywalker to Obi-Wan Kenobi, referring to the Invisible Hand during the Battle of Coruscant</span>
</div>
</div>
<!-- Cruisers -->
<div class="frame">
<img id="moncalamari" class="layer3r layer3" src="css/images/rebel/moncalamari.png"/>
<div class="layer3r tooltip">
<p>"Make no mistake, the Mon Calamari saved the galaxy. Their cruisers protected our fleet at the Battle of Endor, allowing the starfighters to penetrate the second Death Star's core. Without Admiral Ackbar and his people, we would all be the Emperor's slaves."<br></p>
<span>―Mon Mothma</span>
</div>
<img id="executor" class="layer3e layer3" src="css/images/empire/executor.png"/>
<div class="layer3e tooltip">
<p>"This is my personal battle cruiser…and I did not name it the Executor for nothing!"<br></p>
<span>―Darth Vader</span>
</div>
<img id="venator" class="layer3or layer3" src="css/images/rebel/repattackcruiser.png"/>
<div class="layer3or tooltip">
<p>"The Separatists are also on the run. We managed to save most of our troops."<br>
"How? It looked like they were rolling right over us."<br>
"That's how."<br>
"Whoa!"<br></p>
<span>―Admiral Erel Kersos and Dr. Kornell Divini upon seeing the Resolution</span>
</div>
<img id="sepbattleship" class="layer3s layer3" src="css/images/empire/sepbattleship.png"/>
<div class="layer3s tooltip">
<p>"Their deflector shield is too strong! We'll never get through it!"<br></p>
<span>―Ric Olié during the attack on the Droid Control Ship</span>
</div>
</div>
<div class="frame">
<img id="nebulon" class="layer3r layer3" src="css/images/rebel/nebulon.png"/>
<div class="layer3r tooltip">
<p>"Just once, I'd like to destroy a starship that we didn't pay for!"<br></p>
<span>―Imperial Admiral Hurkk at the Battle of Oovo IV</span>
</div>
<img id="stardestroyer" class="layer3e layer3" src="css/images/empire/stardestroyer.png"/>
<div class="layer3e tooltip">
<p>"At that close range, we won't last long against those Star Destroyers!"<br></p>
<span>―Admiral Ackbar, during the Battle of Endor</span>
</div>
<img id="acclamator" class="layer3or layer3" src="css/images/rebel/acclamator.jpg"/>
<div class="layer3or tooltip">
<p>"Master Sifo-Dyas requested the most powerful army in the galaxy. We have worked with only the best shipbuilders to fulfill that request."<br></p>
<span>―Lama Su</span>
</div>
<img id="sepdreadnought" class="layer3s layer3" src="css/images/empire/sepdreadnought.png"/>
<div class="layer3s tooltip">
<p>"Look. A Separatist dreadnought. The king's murderer must have fled there."<br></p>
<span>―Anakin Skywalker</span>
</div>
</div>
<div class="frame">
<img id="korelian" class="layer3r layer3" src="css/images/rebel/korelian.png"/>
<div class="layer3r tooltip">
<p>"The Rebel blockade runner is the pride of the Corellian Engineering Corporation's military vehicles. With its mess of huge engines, it can whoop any jerk-ass Imperial."<br></p>
<span>―Corellian Engineering Corporation advertisement</span>
</div>
<img id="interdictor" class="layer3e layer3" src="css/images/empire/interdictor.png"/>
<div class="layer3e tooltip">
<p>"EMPIRE HAS ORDERED A SYSTEMWIDE BLOCKADE TO SEIZE REBEL SPIES. INTERDICTOR CRUISERS EN ROUTE. ALL SHIPS THAT DEPART PRIOR TO IMPERIAL INSPECTION WILL BE NOTED."<br></p>
<span>―Message from R2-D2</span>
</div>
<img id="arquitens" class="layer3or layer3" src="css/images/rebel/arquitens.png"/>
<div class="layer3or tooltip">
<p>"How do you plan on getting Grievous aboard your ship?"<br>
"Not to worry, the good General and I have a history. I'm sure he'll want to even the score, face to face."<br></p>
<span>―Adi Gallia and Obi-Wan Kenobi, the latter electing to capture General Grievous aboard an Arquitens-class light cruiser</span>
</div>
<img id="sepsupply" class="layer3s layer3" src="css/images/empire/sepsupply.png"/>
<div class="layer3s tooltip">
<p>"It seems they're receiving new arms shipments directly from a supply ship orbiting—"<br></p>
<span>―Jedi Master Obi-Wan Kenobi, informing Jedi General Pong Krell of the Umbarans' Separatist supply ship</span>
</div>
</div>
<div class="frame">
<img id="transport" class="layer3r layer3" src="css/images/rebel/transport.png"/>
<div class="layer3r tooltip">
<p>"I don't think we can protect two transports at a time."<br></p>
<span>―General Rieekan</span>
</div>
<img id="victory" class="layer3e layer3" src="css/images/empire/victory.jpg"/>
<div class="layer3e tooltip">
<p>A single Victory I-class Star Destroyer required 4,798 crew members and 402 gunners for optimal operation and could transport up to 2,040 troops, 8,100 metric tons of cargo, several ground vehicles like the AT-AT, and two squadrons of starfighters. <br></p>
<span>Lorem</span>
</div>
<img id="repattackgunship" class="layer3or layer3" src="css/images/rebel/repattackgunship.png"/>
<div class="layer3or tooltip">
<p>"These gunships fly like butcherbugs and cut into us like Blood Carvers. We must have one."<br></p>
<span>―Archduke Poggle the Lesser</span>
</div>
<img id="sepcore" class="layer3s layer3" src="css/images/empire/sepcore.png"/>
<div class="layer3s tooltip">
<p>"Attack those Federation starships, quickly!" <br></p>
<span>―Obi-Wan Kenobi, during the Battle of Geonosis</span>
</div>
</div>
</div>
<div id="menu">
<img id="rebelLogo" class="layer3r factionLogo" src="css/images/rebellogo2.png"/>
<img id="empireLogo"class="layer3e factionLogo" src="css/images/empirelogo2.png"/>
<img id="orLogo"class="layer3or factionLogo"src="css/images/oldrepublic.png"/>
<img id="sLogo"class="layer3s factionLogo"src="css/images/confederacy.png"/>
</div>
<div class="empty">
</div>
</div>
<!-- Bottom part -->
<div class="row">
<div class="empty">
</div>
<div id="infoContainer">
<div id="blastContainerText">
<img class="blastdoorsText" src="css/images/blastdoors1.png"/>
<img class="blastdoorsText" src="css/images/blastdoors2.png"/>
</div>
<div id="info">
</div>
</div>
<div class="empty">
</div>
</div>
</div>
<!-- scripts -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>