-
Notifications
You must be signed in to change notification settings - Fork 0
/
explore.html
133 lines (119 loc) · 8.96 KB
/
explore.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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./BIBassets/bigImgView/style.css">
<link rel="shortcut icon" type="image/jpg" href="./BIBassets/favicon.ico">
</head>
<body>
<nav>
<div class="heading">
Wonders
</div>
<div class="links">
<ul>
<li><a href="./index.html">Home</a></li>
<li class="cur"><a href="./explore.html">Explore</a></li>
<li><a href="./about.html">About</a></li>
</ul>
</div>
</nav>
<div class="container">
<h3 class="top-heading">Seven wonders of world <span><img src="./BIBassets/star.png" alt=""></span></h3>
<h4>Great Wall of China</h4>
<div class="imgandtext">
<p class="insideimg"><img src="./BIBassets/Great-Wall-of-China.jpg" onclick='bigImgView(this.src)' alt=""></p>
<p class="text">One of the world’s largest building-construction projects, the Great Wall of China is widely thought to be about 5,500 miles (8,850 km) long; a disputed Chinese study, however, claims the length is 13,170 miles (21,200 km). Work began in the 7th century BCE and continued for two millennia. Although called a “wall,” the structure actually features two parallel walls for lengthy stretches. In addition, watchtowers and barracks dot the bulwark. One not-so-great thing about the wall, however, was its effectiveness.</p>
</div>
<h4>Chichén Itzá</h4>
<div class="imgandtext">
<p class="text">Chichén Itzá is a Mayan city on the Yucatán Peninsula in Mexico, which flourished in the 9th and 10th centuries CE. Under the Mayan tribe Itzá—who were strongly influenced by the Toltecs—a number of important monuments and temples were built. Among the most notable is the stepped pyramid El Castillo (“The Castle”), which rises 79 feet (24 meters) above the Main Plaza. A testament to the Mayans’ astronomical abilities, the structure features a total of 365 steps, the number of days in the solar year. During the spring and autumnal equinoxes, the setting sun casts shadows on the pyramid that give the appearance of a serpent slithering down the north stairway; at the base is a stone snake head.</p>
<p class="insideimg"><img src="./BIBassets/El-Castillo-pyramid-plaza-Toltec-state-Yucatan.jpg" onclick='bigImgView(this.src)' alt=""></p>
</div>
<h4>Petra</h4>
<div class="imgandtext">
<p class="insideimg"><img src="./BIBassets/Khaznah-Petra-Jordan.jpg" onclick='bigImgView(this.src)' alt=""></p>
<p class="text">The ancient city of Petra, Jordan, is located in a remote valley, nestled among sandstone mountains and cliffs. It was purported to be one of the places where Moses struck a rock and water gushed forth. Later the Nabataeans, an Arab tribe, made it their capital, and during this time it flourished, becoming an important trade center, especially for spices. Noted carvers, the Nabataeans chiseled dwellings, temples, and tombs into the sandstone, which changed color with the shifting sun. In addition, they constructed a water system that allowed for lush gardens and farming. At its height, Petra reportedly had a population of 30,000. The city began to decline, however, as trade routes shifted.</p>
</div>
<h4>Machu Picchu</h4>
<div class="imgandtext">
<p class="text">This Incan site near Cuzco, Peru, was “discovered” in 1911 by Hiram Bingham, who believed it was Vilcabamba, a secret Incan stronghold used during the 16th-century rebellion against Spanish rule. Although that claim was later disproved, the purpose of Machu Picchu has confounded scholars. Bingham believed it was home to the “Virgins of the Sun,” women who lived in convents under a vow of chastity. Others think that it was likely a pilgrimage site, while some believe it was a royal retreat.What is known is that Machu Picchu is one of the few major pre-Columbian ruins found nearly intact.</p>
<p class="insideimg"><img src="./BIBassets/Machu-Picchu.jpg" onclick='bigImgView(this.src)' alt=""></p>
</div>
<h4>Christ the Redeemer</h4>
<div class="imgandtext">
<p class="insideimg"><img src="./BIBassets/statue-Christ-the-Redeemer-Rio-de-Janeiro.jpg" onclick='bigImgView(this.src)' alt=""></p>
<p class="text">Christ the Redeemer, a colossal statue of Jesus, stands atop Mount Corcovado in Rio de Janeiro. Its origins date to just after World War I, when some Brazilians feared a “tide of godlessness.” They proposed a statue, which was ultimately designed by Heitor da Silva Costa, Carlos Oswald, and Paul Landowski. Construction began in 1926 and was completed five years later. The resulting monument stands 98 feet (30 meters) tall—not including its base, which is about 26 feet (8 meters) high—and its outstretched arms span 92 feet (28 meters). It is the largest Art Deco sculpture in the world. Christ the Redeemer is made of reinforced concrete and is covered in approximately six million tiles. </p>
</div>
<h4>Colosseum</h4>
<div class="imgandtext">
<p class="text">The Colosseum in Rome was built in the first century by order of the Emperor Vespasian. A feat of engineering, the amphitheater measures 620 by 513 feet (189 by 156 meters) and features a complex system of vaults. It was capable of holding 50,000 spectators, who watched a variety of events. Perhaps most notable were gladiator fights, though men battling animals was also common. In addition, water was sometimes pumped into the Colosseum for mock naval engagements. However, the belief that Christians were martyred there—namely, by being thrown to lions—is debated.</p>
<p class="insideimg"><img src="./BIBassets/Colosseum-Rome-Italy.jpg" onclick='bigImgView(this.src)' alt=""></p>
</div>
<h4>Taj Mahal</h4>
<div class="imgandtext">
<p class="insideimg"><img src="./BIBassets/Taj-Mahal-Agra-India.jpg" onclick='bigImgView(this.src)' alt=""></p>
<p class="text">This mausoleum complex in Agra, India, is regarded as one of the world’s most iconic monuments and is perhaps the finest example of Mughal architecture. It was built by Emperor Shah Jahān (reigned 1628–58) to honor his wife Mumtāz Maḥal (“Chosen One of the Palace”), who died in 1631 giving birth to their 14th child. It took about 22 years and 20,000 workers to construct the complex, which includes an immense garden with a reflecting pool. The mausoleum is made of white marble that features semiprecious stones in geometric and floral patterns. Its majestic central dome is surrounded by four smaller domes.</p>
</div>
</div>
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h3>Gallery</h3>
<ul>
<li><a href="#">Community</a></li>
<li><a href="#">Trending</a></li>
<li><a href="#">Picks</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Marketplace</h3>
<ul>
<li><a href="#">Trending</a></li>
<li><a href="#">Best selling</a></li>
<li><a href="#">Latest</a></li>
</ul>
</div>
<div class="footer-section form">
<h3>Newsletter</h3>
<p>Subscribe to our newsletter to get your weekly dose of news,updates,tips and special offers.</p>
<input type="email" placeholder="Enter your email address">
<button>Subscribe</button>
</div>
</div>
<div class="footer-bottom">
© Keshav Agarwal
</div>
</footer>
</body>
<script>
// Preview function which takes a image url ( IMG tag's src sttribute ) as parameter.
let bigImgView = (imgSrc) => {
// Making elements
let divP = document.createElement('DIV');
let spanC = document.createElement('SPAN');
let imgC = document.createElement("IMG");
// Setting attributes
divP.setAttribute('class', 'bib-modal');
spanC.setAttribute('class', 'bib-close');
imgC.setAttribute('class', 'bib-modal-content');
imgC.setAttribute('src', imgSrc);
// Adding texts
spanC.innerHTML = '×';
// Handling events
spanC.onclick = function(){
this.parentElement.remove();
}
// Appending childs
divP.appendChild(spanC);
divP.appendChild(imgC);
// Appending to body
document.body.appendChild(divP);
divP.style.display = 'block';
console.log("Big image");
}
</script>
</html>