-
Notifications
You must be signed in to change notification settings - Fork 0
/
accordian.html
218 lines (193 loc) · 15.5 KB
/
accordian.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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Accordian</title>
<style type="text/css">
.img-h{
height: 20vh;
width: 10vw;
margin: 0.4% 0.4% 2% 0.4%;
}
.second-card{
background-color: #ca8924;
}
</style>
</head>
<body>
<div class="container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header bg-warning" id="headingOne">
<h2 class="mb-0">
<button class="btn text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="card mb-3 second-card" style="max-width:100vh;max-height: 20.5vh;">
<div class="row">
<div class="col-md-4 ">
<img src="mysore2.jpg" class="card-img img-h" alt="Mysore Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Mysore</h5>
<p class="card-text text-success">Mysore,in India's southwestern Karnataka state, was the capital of the Kingdom of Mysore from 1399 to 1947...Read More</p>
</div>
</div>
</div>
</div>
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body bg-success">
<h5 class="card-title text-warning">Details of Mysore</h5>
<p class="text-white card-text">
<img src="mysore2.jpg" alt="Mysore Image" class="img-fluid" style="width: 30%;height:10rem;float:left; margin: 1%;">
Mysore (or Mysuru), a city in India's southwestern Karnataka state, was the capital of the Kingdom of Mysore from 1399 to 1947. In its center is opulent Mysore Palace, seat of the former ruling Wodeyar dynasty. The palace blends Hindu, Islamic, Gothic and Rajput styles. Mysore is also home to the centuries-old Devaraja Market, filled with spices, silk and sandalwood.
Referred to as the cultural capital of Karnataka, Mysore is well known for the festivities that take place during the period of Dasara; the state festival of Karnataka. The Dasara festivities, which are celebrated over a ten-day period, were first introduced by King Raja Wodeyar I in 1610.[80] On the ninth day of Dasara, called Mahanavami, the royal sword is worshipped and is taken on a procession of decorated elephants, camels and horses.[80] On the tenth day, called Vijayadashami, the traditional Dasara procession (locally known as Jumboo Savari) is held on the streets of Mysore which usually falls in the month of September or October. The idol of the Goddess Chamundeshwari is placed on a golden mantapa on the back of a decorated elephant and taken on a procession, accompanied by tabla, dance groups, music bands, decorated elephants, horses and camels.[80] The procession starts from the Mysore Palace and culminates at a place called Bannimantapa, where the banni tree (Prosopis spicigera) is worshipped.[80] The Dasara festivities culminate on the night of Vijayadashami with a torchlight parade, known locally as Panjina Kavayatthu.[80]
Mysore is called the City of Palaces because of several ornate examples in the city. Among the most notable are Amba Vilas, popularly known as Mysore Palace; Jaganmohana Palace, which also serves as an art gallery; Rajendra Vilas, also known as the summer palace; Lalitha Mahal, which has been converted into a hotel; and Jayalakshmi Vilas.[81]:87–88 The main palace of Mysore was burned down in 1897, and the present-day structure was built on the same site. Amba Vilas palace exhibits an Indo-Saracenic style of architecture on the outside, but a distinctly Hoysala style in the interior.[81]:82 Even though the Government of Karnataka maintains the Mysore palace, a small portion has been allocated for the erstwhile Royal family to live in. The Jayalakshmi Vilas Mansion was constructed by Sri Chamaraja Wodeyar for his daughter Jayalakshammanni. It is now a museum dedicated to folk culture and artifacts of the royal family
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-warning" id="headingTwo">
<h2 class="mb-0">
<button class="btn text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<div class="card mb-3 second-card" style="max-width:100vh;max-height: 20.5vh;">
<div class="row">
<div class="col-md-4 ">
<img src="jaipur-first.jpg" class="card-img img-h" alt="Mysore Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Jaipur</h5>
<p class="card-text text-success">The city of Jaipur was founded in 1727 by Jai Singh II, the King of Amer who ruled from 1699 to 1743...Read More</p>
</div>
</div>
</div>
</div>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body bg-success">
<h5 class="card-title text-warning">Details of Jaipur</h5>
<p class="text-white card-text">
<img src="jaipur-second.jpg" alt="Mysore Image" class="img-fluid" style="width: 30%;height:10rem;float:left; margin: 1%;">
Jaipur is a major tourist destination in India forming a part of the Golden Triangle.[30] In the 2008 Conde Nast Traveller Readers Choice Survey, Jaipur was ranked the 7th best place to visit in Asia.[31] According to TripAdvisor's 2015 Traveller's Choice Awards for Destination, Jaipur ranked 1st among the Indian destinations for the year.[32] The Presidential Suite at the Raj Palace Hotel, billed at US$45,000 per night, was listed in second place on CNN's World's 15 most expensive hotel suites in 2012.[33]
Jaipur Exhibition & Convention Centre (JECC) is Rajasthan's biggest convention and exhibition centre.[34] It is famous for organising events such as Vastara, Jaipur Jewellery Show, Stonemart 2015 and Resurgent Rajasthan Partnership Summit 2015.[35]
Visitor attractions include the Albert Hall Museum, Hawa Mahal, Jal Mahal, City Palace, Amer Fort, Jantar Mantar, Nahargarh Fort, Jaigarh Fort, Birla Mandir, Galtaji, Govind Dev Ji Temple, Garh Ganesh Temple, Moti Dungri Ganesh Temple, Sanghiji Jain temple and the Jaipur Zoo.[36] The Jantar Mantar observatory and Amer Fort are one of the World Heritage Sites.[37] Hawa Mahal is a five-storey pyramidal shaped monument with 953 windows[38] that rises 15 metres (50 ft) from its high base. Sisodiya Rani Bagh and Kanak Vrindavan are the major parks in Jaipur.[39] Raj Mandir is a notable cinema hall in Jaipur.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-warning" id="headingThree">
<h2 class="mb-0">
<button class="btn text-left" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
<div class="card mb-3 second-card" style="max-width:100vh;max-height: 20.5vh;">
<div class="row">
<div class="col-md-4 ">
<img src="taj1.jpg" class="card-img img-h" alt="Mysore Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Taj Mahal</h5>
<p class="card-text text-success">One can go on praising the Taj Mahal, a UNESCO World Heritage Site, with an uninterrupted flow of...Read More</p>
</div>
</div>
</div>
</div>
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body bg-success">
<h5 class="card-title text-warning">Details of Taj Mahal</h5>
<p class="text-white card-text">
<img src="taj2.jpg" alt="Mysore Image" class="img-fluid" style="width: 30%;height:10rem;float:left; margin: 1%;">
One can go on praising the Taj Mahal, a UNESCO World Heritage Site, with an uninterrupted flow of adjectives – magnificent, outstanding, amazing and incredible. However, none of those can accurately do justice to its beauty. The only way to do that is to visit this incredible structure made of pure white marble. Everything about it reflects grandeur, from its minarets to its dome.
Shah Jahan had this monument built for his wife Mumtaz to express his undying love for her, and today, lovers cite this as an example when expressing their love to each other. The construction of the Taj Mahal, which is also one of the must visit UNESCO World Heritage Sites In India, took around 22 years to complete, and no wonder, the effort of every year is reflected in its construction.
<b>Do you know?</b> Inspired by the Taj Mahal, Dubai is planning to build a hotel and shopping complex which is estimated to be four times larger than the original structure.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-warning" id="headingFour">
<h2 class="mb-0">
<button class="btn text-left" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<div class="card mb-3 second-card" style="max-width:100vh;max-height: 20.5vh;">
<div class="row">
<div class="col-md-4 ">
<img src="red-fort.jpg" class="card-img img-h" alt="Mysore Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Red Fort of Delhi</h5>
<p class="card-text text-success">Red Fort, a UNESCO World Heritage Site, is a symbol of the Mughal Empire at its peak....Read More</p>
</div>
</div>
</div>
</div>
</button>
</h2>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body bg-success">
<h5 class="card-title text-warning">Details of Red Fort</h5>
<p class="text-white card-text">
<img src="red-fort.2jpg" alt="Mysore Image" class="img-fluid" style="width: 30%;height:10rem;float:left; margin: 1%;">
Red Fort, a UNESCO World Heritage Site, is a symbol of the Mughal Empire at its peak. The enormous size, aesthetic proportions and style, all represent an age of unrestrained opulence. Amidst the unceasing bustle of Old Delhi, stands this colossal monument, evoking nothing but admiration from the onlookers.
Red Fort, which is one of the popular forts and palaces in India, was also built by the Mughal emperor, Shah Jahan. It took over 10 years to complete, and was constructed when the emperor decided to shift his capital from Agra to Delhi. Back then, the fort was known as Qila-e-Mubarak. It is from the ramparts of Red Fort that the Prime Minister delivers his speech on Independence Day.
<b>Do you know?</b> The Red Fort, as you know it, wasn’t always red. In fact, it was white as it was made of limestone. It was the British who painted it red when the limestone began peeling off.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header bg-warning" id="headingFive">
<h2 class="mb-0">
<button class="btn text-left" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
<div class="card mb-3 second-card" style="max-width:100vh;max-height: 20.5vh;">
<div class="row">
<div class="col-md-4 ">
<img src="qutub-minar.jpg" class="card-img img-h" alt="Mysore Image">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Qutub Minar</h5>
<p class="card-text text-success">The Qutub Minar, another UNESCO World Heritage Site, is an incredible example of Indo-Muslim architecture that touches...Read More</p>
</div>
</div>
</div>
</div>
</button>
</h2>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body bg-success">
<h5 class="card-title text-warning">Details of Qutub Minar</h5>
<p class="text-white card-text">
<img src="qutub-minar2.jpg" alt="Mysore Image" class="img-fluid" style="width: 30%;height:10rem;float:left; margin: 1%;">
The Qutub Minar, another UNESCO World Heritage Site, is an incredible example of Indo-Muslim architecture that touches the skies at an incredible height of 240ft. It is named after Qutub-ud-din Aibak, the first Muslim ruler of North India. The place where Qutub Minar stands is usually regarded as the site of the first Muslim kingdom in northern India.
Verses from the Quran are finely carved onto its red sandstone stories, with most of them being mostly in Arabic. Another interesting fact is that the first mosque in India, Quwwat-ul-Islam Masjid, is located at the foot of the Qutub Minar.
<b>Do you know?</b>The Qutub Minar Complex also consists of an iron pillar which has not rusted even after a period of 2,000 years.
<b>Don’t miss:</b> You should absolutely attend the decorative light show every evening from 6:30pm to 8:00pm. The Qutub Minar Festival which is held in October / November should also not be missed.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>