forked from MargaretOrton/wonders-of-the-world
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhanging-gardens-of-babylon.html
221 lines (190 loc) · 11.2 KB
/
hanging-gardens-of-babylon.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
<!DOCTYPE HTML>
<html>
<head>
<title>The Hanging Gardens Of Babylon</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
@media only screen and (max-width: 768px) {
.bgimage {
background-image: url("https://slm-assets.secondlife.com/assets/23289658/lightbox/The_Hanging_Gardens_of_Babylon.jpg?1554431545");
background-size: cover;
min-height: 250px;
background-repeat: no-repeat;
}
}
@media only screen and (min-width: 768px) {
.bgimage {
background-image: url("https://slm-assets.secondlife.com/assets/23289658/lightbox/The_Hanging_Gardens_of_Babylon.jpg?1554431545");
background-size: cover;
min-height: 300px;
background-repeat: no-repeat;
background-position-y: -110px;
}
}
#side-nav{
border-top: white solid 1px;
}
#side-nav .nav-item{
border-bottom:#6c757d solid 1px;
}
#side-nav .nav-item:hover{
border-bottom: white solid 1px;
}
#side-nav .navbar-nav{
width:100%;
padding-bottom: 20px;;
}
#main-content{
padding-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="d-flex flex-column align-items-center flex-md-row p-3 px-md-4 bgimage">
</div>
<nav id="main-nav" class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#" style="font-family:Arial Black, Gadget, sans-serif; text-transform: uppercase;">7 Wonders of the Ancient World</a>
</nav>
<div class="row">
<div id="main-content" class="col-md-9 text-justify">
<h1>The Hanging Gardens Of Babylon</h1>
<p>
The Hanging Gardens of Babylon are mysterious places -
(if they even were places) they might not have existed!
They are thought to have been built by Nebuchadnezzar II in
around 600 BC. His wife wanted to see the trees and plants
of her country. The Hanging Gardens were destroyed by an
earthquake in year 1 - 99.
</p>
<h2>The Garden's Existence</h2>
<p>
In ancient writings the Hanging Gardens of Babylon were first described by Berossus,
a Chaldean priest. He lived in the late 4th century B.C. Greek historians later wrote
more about them.
</p>
<p>
Recent archaeological digs of the palace in Iraq have uncovered evidence of a building
with vaults and a well nearby. However, the place of the palace complex is different
from where Greek historians said they were, which was on the banks of the Euphrates River.
Also recently, there have been digs on the banks of the Euphrates River of some large
25 metre-thick walls.
</p>
<div class="card">
<img class="card-img-top" src="img/25-metre thick wall.png" width="100%"/>
<div class="card-body">
<p class="card-text">
The Assyrian wall showing the garden in the ancient city of Nineveh (Mosul, Iraq)
</p>
</div>
</div>
<p>
They are the only wonder whose existence is disputed amongst historians. Some scholars
think the gardens were actually at Nineveh, capital of the Assyrian Empire, some stick
with the ancient writers and await archaeology to provide positive proof, and still
others believe they are merely people's imagination.
</p>
<div class="card">
<img class="card-img-top" src="img/Hanging Gardens Of Babylon.jpg" width="100%"/>
<div class="card-body">
<p class="card-text">
<a href="Https://alex-toi.com" target="_blank">Click Here For More Information</a>
</p>
</div>
</div>
<h2>Check your knowlage!</h2>
<form class="card">
<div class="card-body">
<div class="alert alert-success collapse" id="correct">Correct!!! Well Done!</div>
<div class="alert alert-danger collapse" id="wrong">Whoops!!! Not Quite Right! Try Again!</div>
<h5>
Q1: How thick was this extract of the Assyrian wall?
</h5>
<input type="radio" name="question1" value="option1" id="rd1"/> <label for="rd1">25cm</label>
<br/>
<input type="radio" name="question1" value="option2" id="rd2"/> <label for="rd2">27m</label>
<br/>
<input type="radio" name="question1" value="option3" id="rd3"/> <label for="rd3">25m</label>
<br/>
<h5>
Q2: We know who made the site, but who did he make it for?
</h5>
<input type="radio" name="question2" value="option1" id="rd4"/> <label for="rd4">The King</label>
<br/>
<input type="radio" name="question2" value="option2" id="rd5"/> <label for="rd5">His wife</label>
<br/>
<input type="radio" name="question2" value="option3" id="rd6"/> <label for="rd6">A nobleman</label>
<br/>
<h5>
Q3: How were the gardens destroyed, and when?
</h5>
<input type="radio" name="question3" value="option1" id="rd7"/> <label for="rd7">A volcanic eruption in 1500</label>
<br/>
<input type="radio" name="question3" value="option2" id="rd8"/> <label for="rd8">A hurricane in 3000 BC</label>
<br/>
<input type="radio" name="question3" value="option3" id="rd9"/> <label for="rd9">An earthquake in year 1 - 99</label>
<br/>
<input type="button" onclick="return checkAnswers()" class="btn btn-info" value=Check! />
</div>
</form>
<script type="text/javascript">
function checkAnswers()
{
var answer1 = $('input[name="question1"]:checked').val();
var correctAnswer1 = "option3";
var isAnswer1Correct = answer1 == correctAnswer1;
var answer2 = $('input[name="question2"]:checked').val();
var correctAnswer2 = "option2";
var isAnswer2Correct = answer2 == correctAnswer2;
var answer3 = $('input[name="question3"]:checked').val();
var correctAnswer3 = "option3";
var isAnswer3Correct = answer3 == correctAnswer3;
if(isAnswer1Correct == true && isAnswer2Correct == true && isAnswer3Correct == true) {
$("#correct").show();
$("#wrong").hide();
} else {
$("#wrong").show();
$("#correct").hide();
}
return false;
}
</script>
</div>
<div class="col-md-3" id="side-nav">
<nav class="navbar navbar-dark bg-dark">
<ul class="navbar-nav" >
<li class="nav-item">
<a class="nav-link" href="Pyramid-of-Giza.HTML">The Great Pyramid of Giza</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="hanging-gardens-of-babylon.html">The Hanging Gardens of Babylon </a>
</li>
<li class="nav-item">
<a class="nav-link" href="statue-of-zeus-at-olympia.html">The Statue of Zeus at Olympia</a>
</li>
<li class="nav-item">
<a class="nav-link" href="temple-of-artimis.html">The Temple of Artemis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mausoleum-at-halicarnassus.html">The Mausoleum of Maussollos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="the-colossus-of-rhodes.html">The Colossus of Rhodes </a>
</li>
<li class="nav-item">
<a class="nav-link" href="Lighthouse-of-Alexandria.HTML">The Lighthouse of Alexandria</a>
</li>
</ul>
</nav>
</div>
</div> <!-- /container -->
<footer class="container">
<div class="container d-flex flex-column align-items-center flex-md-row p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
</div>
</footer>
</body>
</html>