-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
295 lines (292 loc) · 13.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Marcellus&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Acme&family=Amatic+SC:wght@400;700&family=Emilys+Candy&family=Monoton&family=Rye&family=Satisfy&family=Style+Script&family=Zeyada&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image" href="Assets\indiamapFavicon.ico">
<title>India</title>
</head>
<body>
<nav>
<a href="#">
<div class="indiatitle">
<img src="Assets\indiatitle.png" alt="India Flag"/>
</div>
</a>
<a href="#intro">INTRODUCTION</a>
<a href="#statescaps">STATES & UT's</a>
<a href="#culture">CULTURE</a>
</nav>
<div class="intro" id="intro">
<div class="map">
<img src="Assets\indiamap.png" alt="">
</div>
<div class="text">
<h2>INDIA : A Tapestry of Culture, Heritage, and Diversity</h2>
<div class="para">
India is one of the oldest civilizations in the world with a kaleidoscopic variety and rich cultural heritage. It has achieved all-round socio-economic progress since Independence. As the 7th largest country in the world, India stands apart from the rest of Asia, marked off as it is by mountains and the sea, which give the country a distinct geographical entity. Bounded by the Great Himalayas in the north, it stretches southwards and at the Tropic of Cancer, tapers off into the Indian Ocean between the Bay of Bengal on the east and the Arabian Sea on the west.
<br><br>Lying entirely in the northern hemisphere, the mainland extends between latitudes 8° 4' and 37° 6' north, longitudes 68° 7' and 97° 25' east and measures about 3,214 km from north to south between the extreme latitudes and about 2,933 km from east to west between the extreme longitudes. It has a land frontier of about 15,200 km. The total length of the coastline of the mainland, Lakshadweep Islands and Andaman & Nicobar Islands is 7,516.6 km.
</div>
</div>
</div>
<div class="statescaps" id="statescaps">
<h1>STATES & CAPITALS</h1>
<div class="states">
<div>
<a href="#">Andhra Pradesh</a><br>
<span>(Amravati)</span>
</div>
<div>
<a href="#">Arunachal Pradesh</a><br>
<span>(Itanagar)</span>
</div>
<div>
<a href="#">Assam</a><br>
<span>(Dispur)</span>
</div>
<div>
<a href="#">Bihar</a><br>
<span>(Patna)</span>
</div>
<div>
<a href="#">Chattisgarh</a><br>
<span>(Raipur)</span>
</div>
<div>
<a href="#">Goa</a><br>
<span>(Panaji)</span>
</div>
<div>
<a href="#">Gujarat</a><br>
<span>(Gandhinagar)</span>
</div>
<div>
<a href="#">Haryana</a><br>
<span>(Chandigarh)</span>
</div>
<div>
<a href="#">Himachal Pradesh</a><br>
<span>(Shimla)</span>
</div>
<div>
<a href="#">Jharkhand</a><br>
<span>(Ranchi)</span>
</div>
<div>
<a href="#">Karnataka</a><br>
<span>(Bangalore)</span>
</div>
<div>
<a href="#">Kerala</a><br>
<span>(Thiruvananthapuram)</span>
</div>
<div>
<a href="#">Madhya Pradesh</a><br>
<span>(Bhopal)</span>
</div>
<div>
<a href="#">Maharashtra</a><br>
<span>(Mumbai)</span>
</div>
<div>
<a href="#">Manipur</a><br>
<span>(Imphal)</span>
</div>
<div>
<a href="#">Meghalaya</a><br>
<span>(Shillong)</span>
</div>
<div>
<a href="#">Mizoram</a><br>
<span>(Aizawl)</span>
</div>
<div>
<a href="#">Nagaland</a><br>
<span>Kohima</span>
</div>
<div>
<a href="#">Odisha</a><br>
<span>(Bhubaneshwar)</span>
</div>
<div>
<a href="#">Punjab</a><br>
<span>(Chandigarh)</span>
</div>
<div>
<a href="#">Rajasthan</a><br>
<span>(Jaipur)</span>
</div>
<div>
<a href="#">Sikkim</a><br>
<span>(Gangtok)</span>
</div>
<div>
<a href="#">Tamil Nadu</a><br>
<span>(Chennai)</span>
</div>
<div>
<a href="#">Telangana</a><br>
<span>(Hyderabad)</span>
</div>
<div>
<a href="#">Tripura</a><br>
<span>(Agartala)</span>
</div>
<div>
<a href="#">Uttarakhand</a><br>
<span>(Dehradun)</span>
</div>
<div>
<a href="#">Uttar Pradesh</a><br>
<span>(Lucknow)</span>
</div>
<div>
<a href="#">West Bengal</a><br>
<span>(Kolkata)</span>
</div>
</div>
</div>
<div class="unionterritories" id="unionterritories">
<h1>UNION TERRITORIES</h1>
<div class="uts">
<div>
<a href="#">Andaman and Nicobar Islands</a><br>
<span>(Port Blair)</span>
</div>
<div>
<a href="#">Chandigarh</a><br>
<span>(Chandigarh)</span>
</div>
<div>
<a href="#">Dadra and Nagar Haveli and Daman & Diu</a><br>
<span>(Daman)</span>
</div>
<div>
<a href="#">The Government of NCT of Delhi</a><br>
<span>(Delhi)</span>
</div>
<div>
<a href="#">Jammu & Kashmir</a><br>
<span>(Srinagar / Jammu)</span>
</div>
<div>
<a href="#">Ladakh</a><br>
<span>(Leh)</span>
</div>
<div>
<a href="#">Lakshadweep</a><br>
<span>(Kavaratti)</span>
</div>
<div>
<a href="#">Puducherry</a><br>
<span>(Puducherry)</span>
</div>
</div>
</div>
<div class="culture" id="culture">
<h1>CULTURE</h1>
<section class="wrapper">
<div class="image-holder">
<img src="Assets\temple.jpg"\>
</div>
<div class="photo-gallery__wrapper">
<div class="image-thumbnail">
<img src='Assets\temple.jpg' alt='' onclick="changeImage(this);" class="active">
</div>
<div class="image-thumbnail">
<img src='Assets\dance.jpg' alt='' onclick="changeImage(this);">
</div>
<div class="image-thumbnail">
<img src='Assets\holi.jpg' alt='' onclick="changeImage(this);">
</div>
<div class="image-thumbnail">
<img src='Assets\spices.png' alt='' onclick="changeImage(this);">
</div>
<div class="image-thumbnail">
<img src='Assets\food.jpg' alt='' onclick="changeImage(this);">
</div>
<div class="image-thumbnail">
<img src='Assets\languages.png' alt='' onclick="changeImage(this);">
</div>
<div class="image-thumbnail">
<img src='Assets\dresses.jpg' alt='' onclick="changeImage(this);">
</div>
<div class="image-thumbnail">
<img src='Assets\diwali.jpg' alt='' onclick="changeImage(this);">
</div>
<div class="image-thumbnail">
<img src='Assets\monument.png' alt='' onclick="changeImage(this);">
</div>
<div class="image-thumbnail">
<img src='Assets\valley.jpg' alt='' onclick="changeImage(this);">
</div>
</div>
</section>
<div class="culture-info">
<div class="temple">
<h2>Temple:</h2><br>
Temples in Indian culture are not just places of worship but also architectural marvels, embodying centuries of tradition and spirituality. They serve as centers of community life, where rituals, festivals, and cultural events take place, fostering a sense of devotion and connection to the divine.
</div>
<br>
<div class="dance">
<h2>Dance:</h2><br>
Indian dance forms like Bharatanatyam, Kathak, Odissi, and others are expressions of ancient storytelling and spiritual themes. Each dance style is rich in symbolism, intricate footwork, and graceful movements, reflecting the diverse cultural heritage of India and serving as a means of artistic expression and celebration.
</div>
<br>
<div class ="festival" >
<h2>Festival:</h2><br>
Indian festivals are vibrant expressions of joy, spirituality, and tradition. From Diwali, the festival of lights, to Holi, the festival of colors, and Eid, Christmas, and other religious celebrations, festivals bring communities together, transcending barriers of caste, creed, and region.
</div>
<br>
<div class="spices">
<h2>Spices:</h2><br>
Spices are the heart of Indian cuisine, adding depth, flavor, and aroma to dishes. From the fiery heat of chili to the subtle fragrance of cardamom, Indian spices like turmeric, cumin, and coriander are integral to both traditional and modern cooking, reflecting India's rich culinary heritage.
</div>
<br>
<div class="food">
<h2>Food:</h2><br>
Indian cuisine is a tapestry of flavors, colors, and textures, reflecting the country's diverse geography, history, and culture. From aromatic biryanis and flavorful curries to savory street food and sweet delicacies like gulab jamun and jalebi, Indian food is a celebration of culinary diversity and innovation.
</div>
<br>
<div class="language">
<h2>Languages:</h2><br>
India is a linguistic mosaic, with hundreds of languages spoken across its vast expanse. From Hindi and Bengali to Tamil and Telugu, each language carries its own unique identity, literature, and cultural nuances, contributing to India's rich tapestry of linguistic diversity.
</div>
<br>
<div class="diversity">
<h2>Diversity:</h2><br>
India's cultural diversity is a testament to its history of migration, trade, and intermingling of civilizations. With its myriad languages, religions, customs, and traditions, India is a melting pot of cultures, fostering a spirit of tolerance, acceptance, and coexistence.
</div>
<br>
<div class="monument">
<h2>Monuments:</h2><br>
India's monuments, from the iconic Taj Mahal to the ancient temples of Khajuraho and the majestic forts of Rajasthan, are timeless symbols of the country's rich heritage and architectural prowess. Each monument tells a story of India's past, showcasing its artistic, cultural, and historical legacy.
</div>
<br>
<div class="landscape">
<h2>Landscapes:</h2><br>
India's landscapes are as diverse as its culture, ranging from the snow-capped Himalayas in the north to the sun-kissed beaches in the west, the lush greenery of backwaters in the south, and the arid deserts in the west. These varied landscapes provide a stunning backdrop to India's culture, inspiring artists, poets, and travelers alike.
</div>
<br>
</div>
</div>
<footer>
ISHANVI CHAUHAN
</footer>
<script>
let changeImage = (e) => {
let imgSrc = e.src;
imgSrc = imgSrc.replace(/400/g, '800');
document.querySelector('.image-holder > img').src = imgSrc;
document.querySelector('.image-thumbnail > img.active').classList.toggle('active');
e.classList.toggle('active');
};
</script>
</body>
</html>