-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
366 lines (326 loc) · 23.7 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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="icons\icons8-pyramids-120.png" type="image/x-icon">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Seven Wonders of the Ancient World</title>
</head>
<body>
<div class="time-line">
<ul class="ul-list">
<li><a class="border-gradient" href="#content">Content</a></li>
<!-- <li><a class="border-gradient" href=""></a></li> -->
<li><a class="border-gradient" href="#message">Message</a></li>
</ul>
<div class="heading">
<span class="fancy-1">The Seven</span> <br> <span class="fancy-2">Wonders of the Ancient</span><br><span class="fancy-3">World</span>
</div>
</div>
<main class="container ">
<section class="content pt-40px" id="content">
<aside>
<ol class="ol-list-2">
<h1 class="border-gradient" >Content</h1>
<li><a href="#sec-1">Great Pyramid of Giza, Egypt</a></li>
<li><a href="#sec-2">Hanging Gardens of Babylon</a></li>
<li><a href="#sec-3">Statue of Zeus at Olympia</a></li>
<li><a href="#sec-4">Temple of Artemis at Ephesus</a></li>
<li><a href="#sec-5">Mausoleum at Halicarnassus</a></li>
<li><a href="#sec-6">Colossus of Rhodes</a></li>
<li><a href="#sec-7">Lighthouse of Alexandria</a></li>
</ol>
</aside>
<article class="intro">
The amazing works of art and architecture known as the Seven Wonders of the Ancient World serve as a testament to the ingenuity, imagination and sheer hard work of which human beings are capable. They are also, however, reminders of the human capacity for disagreement, destruction and, possibly, embellishment. As soon as ancient writers compiled a list of “seven wonders,” it became fodder for debate over which achievements deserved inclusion. The original list comes from a work by Philo of Byzantium written in 225 B.C. <i>On The Seven Wonders</i> .
".Ultimately, human hands joined with natural forces to destroy all but one of the wonders. Furthermore, it is possible that at least one of the wonders might not have existed at all. Still, all seven continue to inspire and be celebrated as the remarkable products of the creativity and skill of Earth’s early civilizations."
</article>
<section class="seven-wonders pt-40px" id="sec-1">
<h1 class="mt-40px seven-header border-gradient ">Great Pyramid of Giza,Egypt</h1>
<div class="slider">
<div class="img_slides">
<!-- Radio button start -->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<div class="first slide">
<img src="Great pyramid of giza\Pyramids-Cairo-Giza-plateau.jpg" alt="">
</div>
<div class="slide">
<img src="Great pyramid of giza\Mortuary-temple-pyramid-Khafre-Egypt-Giza.jpg" alt="">
</div>
<div class="slide">
<img src="Great pyramid of giza\kevin-et-laurianne-langlais-Rk8yY0UfPx0-unsplash.jpg" alt="">
</div>
<div class="slide">
<img src="Great pyramid of giza\joshua-michaels-ejqfevj3Xv8-unsplash.jpg" alt="">
</div>
</div>
<!-- navigation begins -->
<div class="navigation">
<label for="radio1" class="navigation-btn"></label>
<label for="radio2" class="navigation-btn"></label>
<label for="radio3" class="navigation-btn"></label>
<label for="radio4" class="navigation-btn"></label>
</div>
</div>
<span class="mt-40px seven-para">
Co-ordinates: <a href="https://www.google.com/maps/place/29%C2%B058'45.0%22N+31%C2%B008'03.0%22E/@29.9791667,31.1341667,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d29.9791667!4d31.1341667" target="_blank">29° 58′ 45″ N, 31° 8′ 3″ E</a>
</span>
<p class="seven-para mt-40px mb-40px">
The Great Pyramid, located at Giza on the west bank of the Nile River north of Cairo in Egypt, is the only wonder of the ancient world that has survived to the present day. It is part of a group of three pyramids–Khufu (Cheops), Khafra (Chephren) and Menkaura (Mycerimus)–that were built between 2700 B.C. and 2500 B.C. as royal tombs. The largest and most impressive is Khufu, known as “The Great Pyramid,” which covers 13 acres and is believed to contain more than 2 million stone blocks that weigh from two to 30 tons each. For more than 4,000 years, Khufu reigned as the tallest building in the world. In fact, it took modern man until the 19th century to build a taller structure. Amazingly, the nearly symmetrical Egyptian pyramids were built without the aid of modern tools or surveying equipment. So, how did Egyptians build the pyramids? Scientists believe that the Egyptians used log rollers and sledges to move the stones into place. The sloped walls, which were intended to mimic the rays of Ra, the sun god, were originally built as steps, and then filled in with limestone. The interior of the pyramids included narrow corridors and hidden chambers in an unsuccessful attempt to foil grave robbers. Although modern archeologists have found some great treasures among the ruins, they believe most of what the pyramids once contained was looted within 250 years of their completion.
</p>
</section>
<section class="seven-wonders pt-40px" id="sec-2">
<h1 class="mt-40px seven-header border-gradient ">Hanging Gardens of Babylon</h1>
<div class="slider">
<div class="img_slides">
<!-- Radio button start -->
<input type="radio" name="radio-btn" id="radio5">
<input type="radio" name="radio-btn" id="radio6">
<input type="radio" name="radio-btn" id="radio7">
<input type="radio" name="radio-btn" id="radio8">
<div class="second slide">
<img src="Hanging garden of babylon\Finished_Gardens.jpg" alt="">
</div>
<div class="slide">
<img src="Hanging garden of babylon\word-image-27.jpeg" alt="">
</div>
<div class="slide">
<img src="Hanging garden of babylon\Waldeck_Hängende_Gärten_der_Semiramis.jpg" alt="">
</div>
<div class="slide">
<img src="Hanging garden of babylon\04255b49be078e60142c898cc5f6b9b6.jpg" alt="">
</div>
</div>
<!-- navigation begins -->
<div class="navigation">
<label for="radio5" class="navigation-btn"></label>
<label for="radio6" class="navigation-btn"></label>
<label for="radio7" class="navigation-btn"></label>
<label for="radio8" class="navigation-btn"></label>
</div>
</div>
<span class="mt-40px seven-para">
Co-ordinates: <a href="https://www.google.com/maps/place/32%C2%B032'07.8%22N+44%C2%B025'39.0%22E/@32.537307,44.4183528,15.61z/data=!4m5!3m4!1s0x0:0x0!8m2!3d32.5355!4d44.4275" target="_blank">32° 32′ 7.8″ N, 44° 25′ 39″ E</a>
</span>
<p class="seven-para mt-40px mb-40px">
According to ancient Greek poets, the Hanging Gardens of Babylon were built near the Euphrates River in modern-day Iraq by the Babylonian king Nebuchadnezzar II around 600 B.C. The gardens were said to have been planted as high as 75 feet in the air on a huge square brick terrace that was laid out in steps like a theater. The king allegedly built the towering gardens to ease his lover Amytis’ homesickness for the natural beauty of her home in Media (the northwestern part of modern-day Iran). Later writers described how people could walk underneath the beautiful gardens, which rested on tall stone columns. Modern scientists have deduced that for the gardens to survive they would have had to be irrigated using a system consisting of a pump, waterwheel and cisterns to carry water from the Euphrates many feet into the air. Though there are multiple accounts of the gardens in both Greek and Roman literature, none of them are firsthand, and no mention of the gardens has been found in Babylonian cuneiform inscriptions. As a result, most modern scholars believe that the existence of the gardens was part of an inspired and widely believed but still fictional tale.
</p>
</section>
<section class="seven-wonders pt-40px" id="sec-3">
<h1 class="mt-40px seven-header border-gradient ">Statue of Zeus at Olympia</h1>
<div class="slider">
<div class="img_slides">
<!-- Radio button start -->
<input type="radio" name="radio-btn" id="radio9">
<input type="radio" name="radio-btn" id="radio10">
<input type="radio" name="radio-btn" id="radio11">
<input type="radio" name="radio-btn" id="radio12">
<div class="third slide">
<img src="the statue of zeus\Statue-of-Zeus-at-Olympia.jpg" alt="">
</div>
<div class="slide">
<img src="the statue of zeus\Statue-of-Zeus-31-12-1.jpg" alt="">
</div>
<div class="slide">
<img src="the statue of zeus\5267199.jpg" alt="">
</div>
<div class="slide">
<img src="the statue of zeus\olympia-statue-zeus-1280.jpg" alt="">
</div>
</div>
<!-- navigation begins -->
<div class="navigation">
<label for="radio9" class="navigation-btn"></label>
<label for="radio10" class="navigation-btn"></label>
<label for="radio11" class="navigation-btn"></label>
<label for="radio12" class="navigation-btn"></label>
</div>
</div>
<span class="mt-40px seven-para">
Co-ordinates: <a href="https://www.google.com/maps/search/37%C2%B0+38%E2%80%B2+16.3%E2%80%B3+N,+21%C2%B0+37%E2%80%B2+48%E2%80%B3+E?sa=X&ved=2ahUKEwi4z-7IxdvyAhUFU30KHR69AlwQ8gF6BAgOEAE" target="_blank">37°38'16.3"N 21°37'48.0"E</a>
</span>
<p class="seven-para mt-40px mb-40px">
The famed statue of Zeus, the king of the gods in Greek Mythology, was crafted by the Athenian sculptor Phidias and completed and placed in the temple of Zeus at Olympia, site of the ancient Olympics, around the mid-fifth century B.C. The statue depicted the god of thunder seated bare-chested at a wooden throne. Holding up the thrones’ armrests were two carved sphinxes, mythical creatures with the head and chest of a woman, the body of lion and the wings of a bird. The statue of Zeus was richly decorated with gold and ivory. At 40 feet, it was so tall that its head nearly touched the top of the temple. According to legend, the sculptor Phidias asked Zeus for a sign of his approval after finishing the statue; soon after, the temple was struck by lightning. The Zeus statue graced the temple at Olympia for more than eight centuries before Christian priests persuaded the Roman emperor to close the temple in the fourth century A.D. At that time, the statue was moved to a temple in Constantinople, where it is believed to have been destroyed in a fire in the year 462.
</p>
</section>
<section class="seven-wonders pt-40px" id="sec-4">
<h1 class="mt-40px seven-header border-gradient ">Temple of Artemis at Ephesus
</h1>
<div class="slider">
<div class="img_slides">
<!-- Radio button start -->
<input type="radio" name="radio-btn" id="radio13">
<input type="radio" name="radio-btn" id="radio14">
<input type="radio" name="radio-btn" id="radio15">
<input type="radio" name="radio-btn" id="radio16">
<div class="fourth slide">
<img src="temple of artem\Miniaturk_009.jpg" alt="">
</div>
<div class="slide">
<img src="temple of artem\istockphoto-115790249-612x612.jpg" alt="">
</div>
<div class="slide">
<img src="temple of artem\temple_of_artemis_sardis_turkey4.jpg" alt="">
</div>
<div class="slide">
<img src="temple of artem\Templo-Artemisa-Efeso-2017.jpg" alt="">
</div>
</div>
<!-- navigation begins -->
<div class="navigation">
<label for="radio13" class="navigation-btn"></label>
<label for="radio14" class="navigation-btn"></label>
<label for="radio15" class="navigation-btn"></label>
<label for="radio16" class="navigation-btn"></label>
</div>
</div>
<span class="mt-40px seven-para">
Co-ordinates: <a href="https://www.google.com/maps/place/37%C2%B056'59.0%22N+27%C2%B021'50.0%22E/@37.9497222,27.3638889,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d37.9497222!4d27.3638889" target="_blank">37° 56′ 59″ N, 27° 21′ 50″ E</a>
</span>
<p class="seven-para mt-40px mb-40px">
The Temple of Artemis or Artemision (Greek: Ἀρτεμίσιον; Turkish: Artemis Tapınağı), also known as the Temple of Diana, was a Greek temple dedicated to an ancient, local form of the goddess Artemis (associated with Diana, a Roman goddess). It was located in Ephesus (near the modern town of Selçuk in present-day Turkey). It was completely rebuilt twice, once after a devastating flood and three hundred years later after an act of arson, and in its final form was one of the Seven Wonders of the Ancient World. By 401 AD it had been ruined or destroyed.[1] Only foundations and fragments of the last temple remain at the site.<br>
The earliest version of the temple (a temenos) antedated the Ionic immigration by many years, and dates to the Bronze Age. Callimachus, in his Hymn to Artemis, attributed it to the Amazons. In the 7th century BC, it was destroyed by a flood. Its reconstruction, in more grandiose form, began around 550 BC, under Chersiphron, the Cretan architect, and his son Metagenes. The project was funded by Croesus of Lydia, and took 10 years to complete. This version of the temple was destroyed in 356 BC by Herostratus in an act of arson.
The next, greatest and last form of the temple, funded by the Ephesians themselves, is described in Antipater of Sidon's list of the world's Seven Wonders:
</p>
</section>
<section class="seven-wonders pt-40px" id="sec-5">
<h1 class="mt-40px seven-header border-gradient ">Mausoleum at Halicarnassus</h1>
<div class="slider">
<div class="img_slides">
<!-- Radio button start -->
<input type="radio" name="radio-btn" id="radio17">
<input type="radio" name="radio-btn" id="radio18">
<input type="radio" name="radio-btn" id="radio19">
<input type="radio" name="radio-btn" id="radio20">
<div class="fifth slide">
<img src="Mausoleum at Halicarnassus\2e2a9008f8bb074212f0cc60748e9469.jpg" alt="">
</div>
<div class="slide">
<img src="Mausoleum at Halicarnassus\C0228910-Mausoleum_at_Halicarnassus,_illustration.jpg" alt="">
</div>
<div class="slide">
<img src="Mausoleum at Halicarnassus\Tomb-of-Mausolus-31-12-1.jpg" alt="">
</div>
<div class="slide">
<img src="Mausoleum at Halicarnassus\Amazonomachy_Halicarnassus_BM_n3.jpg" alt="">
</div>
</div>
<!-- navigation begins -->
<div class="navigation">
<label for="radio17" class="navigation-btn"></label>
<label for="radio18" class="navigation-btn"></label>
<label for="radio19" class="navigation-btn"></label>
<label for="radio20" class="navigation-btn"></label>
</div>
</div>
<span class="mt-40px seven-para">
Co-ordinates: <a href="https://www.google.com/maps/place/37%C2%B002'16.4%22N+27%C2%B025'26.8%22E/@37.0379,27.4241,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d37.0379!4d27.4241" target="_blank">37°02'9.96" N 27°25'15.95" E</a>
</span>
<p class="seven-para mt-40px mb-40px">
Located in what is now southeastern Turkey, the Mausoleum at Halicarnassus was a tomb built by Artemisia for her husband, Mausolus, the king of Carnia in Asia Minor, after his death in 353 B.C. Mausolus was also Artemisia’s brother, and, according to legend, she was so grief-stricken at his passing that she mixed his ashes with water and drank them in addition to ordering the mausoleum’s construction. The massive mausoleum was made entirely of white marble and is thought to have been about 135 feet high. The building’s complicated design, consisting of three rectangular layers, may have been an attempt to reconcile Lycian, Greek and Egyptian architectural styles. The first layer was a 60-foot base of steps, followed by a middle layer of 36 Ionic columns and a stepped, pyramid-shaped roof. At the very top of the roof lay the tomb, decorated by the work of four sculptors, and a 20-foot marble rendition of a four-horse chariot. The mausoleum was largely destroyed in an earthquake in the 13th century and its remains were later used in the fortification of a castle. In 1846, pieces of one of the mausoleum’s friezes were extracted from the castle and now reside, along with other relics from the Halicarnassus site, in London’s British Museum
</p>
</section>
<section class="seven-wonders pt-40px" id="sec-6">
<h1 class="mt-40px seven-header border-gradient ">Colossus of Rhodes</h1>
<div class="slider">
<div class="img_slides">
<!-- Radio button start -->
<input type="radio" name="radio-btn" id="radio21">
<input type="radio" name="radio-btn" id="radio22">
<input type="radio" name="radio-btn" id="radio23">
<input type="radio" name="radio-btn" id="radio24">
<div class="six slide">
<img src="Colossus of Rhodes\Colossus-of-Rhodes.jpg" alt="">
</div>
<div class="slide">
<img src="Colossus of Rhodes\Colossus_of_Rhodes.jpg" alt="">
</div>
<div class="slide">
<img src="Colossus of Rhodes\conception-Artist-Chares-of-Lindos-Colossus-Rhodes-1875.jpg" alt="">
</div>
<div class="slide">
<img src="Colossus of Rhodes\Temple_Apollon_Rhodes.jpg" alt="">
</div>
</div>
<!-- navigation begins -->
<div class="navigation">
<label for="radio21" class="navigation-btn"></label>
<label for="radio22" class="navigation-btn"></label>
<label for="radio23" class="navigation-btn"></label>
<label for="radio24" class="navigation-btn"></label>
</div>
</div>
<span class="mt-40px seven-para">
Co-ordinates: <a href="https://www.google.com/maps/place/36%C2%B027'03.6%22N+28%C2%B013'32.9%22E/@36.451,28.2258,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d36.451!4d28.2258" target="_blank">36.4510° N, 28.2258° E</a>
</span>
<p class="seven-para mt-40px mb-40px">
The Colossus of Rhodes was an enormous bronze sculpture of the sun god Helios built by the Rhodians over 12 years in the third century B.C. The city was the target of a Macedonian siege early in the fourth century B.C. and, according to legend, the Rhodians sold the tools and equipment left behind by the Macedonians to pay for the Colossus. Designed by the sculptor Chares, the statue was, at 100 feet, the tallest of the ancient world. It was completed around 280 B.C. and stood for sixty years until it was toppled in an earthquake. It was never rebuilt. Hundreds of years later, Arabs invaded Rhodes and sold the remains of the statue as scrap metal. Because of this, archeologists do not know much about the exact location of the statue or what it looked like. Most believe that it depicted the sun god standing naked while he lifted a torch with one hand and held a spear in the other. It was once believed that the statue stood with one leg on each side of a harbor, but most scholars now agree that the statue’s legs were most likely built close together to support its immense weight.
</p>
</section>
<section class="seven-wonders pt-40px" id="sec-7">
<h1 class="mt-40px seven-header border-gradient ">Lighthouse of Alexandria</h1>
<div class="slider">
<div class="img_slides">
<!-- Radio button start -->
<input type="radio" name="radio-btn" id="radio25">
<input type="radio" name="radio-btn" id="radio26">
<input type="radio" name="radio-btn" id="radio27">
<input type="radio" name="radio-btn" id="radio28">
<div class="seven slide">
<img src="Light house\7615.jpg" alt="">
</div>
<div class="slide">
<img src="Light house\Pharos-Alexandria.jpg" alt="">
</div>
<div class="slide">
<img src="Light house\Ancient Alexandria Of Egypt_ History And Reconstruction.jpg" alt="">
</div>
<div class="slide">
<img src="Light house\Leuchtturm_von_Alexandria.png" alt="">
</div>
</div>
<!-- navigation begins -->
<div class="navigation">
<label for="radio25" class="navigation-btn"></label>
<label for="radio26" class="navigation-btn"></label>
<label for="radio27" class="navigation-btn"></label>
<label for="radio28" class="navigation-btn"></label>
</div>
</div>
<span class="mt-40px seven-para">
Co-ordinates: <a href="https://www.google.com/maps/place/31%C2%B012'50.0%22N+29%C2%B053'08.0%22E/@31.2138889,29.8855556,17z/data=!3m1!4b1!4m5!3m4!1s0x0:0x0!8m2!3d31.2138889!4d29.8855556" target="_blank">31°12'50.0"N 29°53'08.0"E</a>
</span>
<p class="seven-para mt-40px mb-40px">
The famed statue of Zeus, the king of the gods in Greek Mythology, was crafted by the Athenian sculptor Phidias and completed and placed in the temple of Zeus at Olympia, site of the ancient Olympics, around the mid-fifth century B.C. The statue depicted the god of thunder seated bare-chested at a wooden throne. Holding up the thrones’ armrests were two carved sphinxes, mythical creatures with the head and chest of a woman, the body of lion and the wings of a bird. The statue of Zeus was richly decorated with gold and ivory. At 40 feet, it was so tall that its head nearly touched the top of the temple. According to legend, the sculptor Phidias asked Zeus for a sign of his approval after finishing the statue; soon after, the temple was struck by lightning. The Zeus statue graced the temple at Olympia for more than eight centuries before Christian priests persuaded the Roman emperor to close the temple in the fourth century A.D. At that time, the statue was moved to a temple in Constantinople, where it is believed to have been destroyed in a fire in the year 462.
</p>
</section>
<section id="message" class="contact">
<span class="border-gradient"><h1 class="mt-40px gradient-text contact-heading">Contact Us</h1></span>
<form class="mt-40px" action="">
<input type="text" name="First Name" placeholder="First Name" required>
<input type="text" name="Last Name" placeholder="Last Name" required>
<input type="email" name="Email" placeholder="Email" required>
<input type="number" name="Mobile Num" placeholder="Mobile Num" maxlength="10" required>
<button type="submit">SEND</button>
</form>
<div class="author-name">
<p class="gradient-text">Made with ♥ by <a href="https://www.linkedin.com/in/akash-parmar-3511121a4" target="_blank">Akash Parmar</a></p>
</div>
<div class="social-symbols">
<ul>
<li><a href=""><img src="social symbols/icons8-facebook-512.png" alt=""></a></li>
<li><a href=""><img src="social symbols/icons8-github-512.png" alt=""></a></li>
<!-- <li><a href=""><img src="social symbols/icons8-gmail-logo-512.png" alt=""></a></li> -->
<li><a href=""><img src="social symbols/icons8-linkedin-512.png" alt=""></a></li>
</ul>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>