-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathColosseum.html
136 lines (128 loc) · 3.44 KB
/
Colosseum.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=divice-width,initial-scale=1.0">
<title>Colosseum</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
//$('#HideImage').click(function(){
//$('.img').slideUp();
//$('HideImage').html('<button>Show Image</button>');
});
});
</script>
<style>
.idk{
border:5px dotted red;
animation:textanimation 3s infinite;
text-align:center;
}
body{
background-color:yellow;
}
.Homenav{
text-decoration:none;
color:black;
text-align:center;
}
.nav{
text-decoration:none;
color:red;
}
.footer{
text-align:center;
}
.Homenav:hover{color:blue;}
.Homenav:before{color:black;}
<!--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;}
@keyframes textanimation{
0%{background-color:lightblue;}
25%{background-color:orange;}
50%{background-color:mediumSeaGreen;}
75%{background-color:yellow;}
100%{background-color:purple;}
}
.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>Colosseum</h2></center>
</div>
<div class="middle">
<table>
<tr>
<td>
<div class="idk">
The Colosseum is an elliptical amphitheatre in the center of Rome.<br>Construction began under the king Vespasian (69–79 AD) and ended in 80 AD.
The Colosseum is built of travertine limestone, tuff (volcanic rock), and brick-faced concrete.
</div>
</td>
</tr>
<tr>
<td>
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/09meiYkTsBo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</center>
<br>
</td>
</tr>
<tr>
<td>
<center>
<div class="img">
<img src="Colosseum.jpg">
</div>
</center>
</td>
<td>
</td>
</tr>
<tr>
<td>
<div class="idk">
Although ruined by earthquakes and stone robbers, it is still alive and thriving.
</div>
</td>
</tr>
</table>
</div>
<div class="footer">
<br>
<a href="https://en.wikipedia.org/wiki/Colosseum" target="_blank">Click here</a> to know more about The Colosseum
</div>
</body>
</html>