-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathGreat Wall Of China.html
144 lines (133 loc) · 3.64 KB
/
Great Wall Of China.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=divice-width,initial-scale=1.0">
<title>Great Wall Of China</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
});
</script>
<style>
body{
background-color:yellow;
}
.Homenav{
text-decoration:none;
color:black;
text-align:center;
}
.footer{
text-align:center;
}
.Homenav:hover{color:blue;}
.Homenav:before{color:black;}
@keyframes twisted{
0%{background-color:green; border:5px dotted orange;}
25%{background-color:red; border:5px dotted orange;}
50%{background-color:blue; border:5px dotted orange;}
75%{background-color:whitesmoke; border:5px dotted orange;}
100%{background-color:green; border:5px dotted orange;}
.boxed{
width:500px;
animation:twisted 3s infinite;
}
<!--Nav Bar-->
ul{list-style-type:none; margin:0; padding:0;}
li{display:inline-block; padding-top:5px; position:relative; margin-left:0px; padding-bottom:5px;}
nav a:hover{color:blue;}
nav a:hover::before{width:100%;}
Nav a {text-decoration:none; color:red; text-transform:uppercase; font-size:14px}
nav a::before{display:block; background-color:red; position:absolute; width:0%; height:5px; top:0; transition: all ease-in-out 250ms;}
nav{text-align:center;}
<!--animation-->
.ani{animation: headanimation 5s infinite;}
@keyframes headanimation{
0%{top:80px; left:0px;}
25%{top:80px; left:150px;}
50%{top:80px; left:300px;}
75%{top:80px; left:150px;}
100%{top:80px; left:0px;}
}
.diagla{animation:stfoftt 3s infinite;}
@keyframes stfoftt{
0%{background-color:whitesmoke;}
25%{background-color:orange;}
50%{background-color:yellow;}
75%{background-color:green;}
100%{background-color:purple;}
}
</style>
</head>
<body>
<div class="header">
<a href="index.html" class="Homenav"><h1>Seven Wonders of the World</h1></a>
<div class="diagla">
<hr>
<nav>
<ul class="nav">
<li class="gg"><a href="Great Wall Of China.html">Great Wall Of China</a> </li>
<li><a href="Taj Mahal.html">Taj Mahal</a> </li>
<li><a href="Colosseum.html">Colosseum</a> </li>
<li><a href="Christ the Redeemer.html">Christ the Redeemer</a> </li>
<li><a href="Chichen Itza.html">Chichen Itza</a> </li>
<li><a href="Petra.html">Petra</a> </li>
<li><a href="Machu Picchu.html">Machu Picchu</a> </li>
</ul>
</nav>
<hr>
</div>
<center><h2>The Great Wall Of China</h2></center>
</div>
<center>
<div class="middle">
<table>
<tr>
<td>
<div class="boxed">
The Great Wall of China is not a wall but a series of fortifications.<br>
The Great Wall of China was built by many Chinese emperors to protect their land and the Silk Road.<br>
And took 2300+ years to construct.
</div>
</td>
</tr>
<tr>
<td>
<img src="2.jpg" width="400" height="300">
</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<div class="boxed">
The Great Wall Of China is about 13,171 miles (21,196 kilometers) long.
<br>
Here are all the different dynasties:
<ul>
<li>The Qin Dynasty (221–206 BC)</li>
<li>The Han Dynasty (206 BC – 220 AD) </li>
<li>The Yuan Dynasty (1271–1368)
</li>
<li>The Ming Dynasty (1368–1644)</li>
<li>Post-Ming History (1644–present)</li>
</ul>
</div>
<div class="img">
<img src="Great Wall Map.jpg" width="400" height="350">
</div>
<br>
<br>
<br>
<br>
</div>
</center>
<div class="footer">
<a href="https://en.wikipedia.org/wiki/Great_Wall_of_China" target="_blank">Click here</a> to know more about The Great Wall Of China
</div>
</body>
</html>