Tourism/section2.html at main · arsh118/Tourism · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Info Page</title>
    <meta name="description" content="This is the main info page" />
    <link rel="website icon" type="png/jpg"href="infoicon.jpg">
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
      * {
        margin: 0;
        padding: 0;
        font-family: "Roboto", serif;
      }
      body {
        background-image: url("sec2image.jpg");
        height: 100vh;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }
      .opacity {
        background-color: rgb(74, 74, 74);
        height: 100vh;
        width: 100vw;
        opacity: 0.6;
        position: absolute;
      }

      .container {
        margin-left: 15px;
        padding-top: 10px;
        z-index: 10;
        position: relative;
        max-height: 98vh;
        overflow-y: auto;
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-left: 5px;
          overflow-x: hidden;

      }
      /* Custom scrollbar */
      ::-webkit-scrollbar {
        width: 10px; /* Width of the vertical scrollbar */
        height: 10px; /* Height of the horizontal scrollbar */
      }

      ::-webkit-scrollbar-track {
        background-color: #333; /* Dark background for the scrollbar track */
        border-radius: 10px; /* Rounded corners for the track */
      }

      ::-webkit-scrollbar-thumb {
        background-color: #555; /* Darker thumb color */
        border-radius: 10px; /* Rounded corners for the thumb */
      }

      ::-webkit-scrollbar-thumb:hover {
        background-color: #888; /* Lighter color when hovering over the thumb */
      }

      .place1,
      .place2,
      .place3,
      .place4,
      .place5,
      .place6 {
        background-color: white;
        width: 95vw;
        height: auto;
        margin-top: 20px;
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        gap: 100px;
        cursor: pointer;
      }
      .place1:hover,
      .place2:hover,
      .place3:hover,
      .place4:hover,
      .place5:hover,
      .place6:hover {
        transform: scale(1.01);
      }

      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .place1 img,
      .place2 img,
      .place3 img,
      .place4 img,
      .place5 img,
      .place6 img {
        height: 18vh;
        max-width: 20vh;
      }
      @media (max-width: 620px) {
        .place1,
        .place2,
        .place3,
        .place4,
        .place5,
        .place6 {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 40px;
          padding: 10px;
          border-radius: 30px;
          font-size: 10px;
        }
        img {
          min-width: 35vw;
        }
        .info {
          display: flex;
          flex-direction: column;
          align-items: center;
        }


        .info p {
          width: 90vw;
        }
      }
    </style>
  </head>
  <body>
    <div class="opacity"></div>
    <div class="container">
      <h1>Favourite Places</h1>
      <div class="place1" onclick="openTajMahalPage()">
        <div class="info">
          <h2>Taj Mahal</h2>
          <p>
            The Taj Mahal is an ivory-white marble mausoleum on the south bank
            of the Yamuna river in the Indian city of Agra. It was commissioned
            in 1632 by the Mughal emperor, Shah Jahan (reigned from 1628 to
            1658), to house the tomb of his favourite wife, Mumtaz Mahal.
          </p>
        </div>
        <img src="tajMahal.jpg" alt="Tajmahal" />
      </div>
      <div class="place2" onclick="openJamaMasjidPage()">
        <div class="info">
          <h2>Jama Masjid</h2>
          <p>
            The Jama Masjid was regarded as a symbolic gesture of Islamic power
            across India, well into the colonial era. It was also a site of
            political significance during several key periods of British rule.
            It remains in active use, and is one of Delhi's most iconic sites,
            closely identified with the ethos of Old Delhi.
          </p>
        </div>
        <img src="Jama-Masjid.jpg" alt="Jama-Masjid" />
      </div>
      <div class="place3">
        <div class="info">
          <h2>Qutub Minar</h2>
          <p>
            It is a UNESCO World Heritage Site in the Mehrauli area of South
            Delhi, India. It was mostly built between 1199 and 1220, contains
            399 steps, and is one of the most visited tourist spots in the city.
            Qutab-ud-din Aibak initiated construction of the Qutub Minar, but
            only managed to finish the first level.
          </p>
        </div>
        <img src="Qutub-Minar.jpg" alt="Qutub-Minar" />
      </div>
      <div class="place4">
        <div class="info">
          <h2>India Gate</h2>
          <p>
            The foundation stone of India Gate was laid by His Royal Highness,
            the Duke of Connaught in 1921 and it was designed by Edwin Lutyens.
            The monument was dedicated to the nation 10 years later by the then
            Viceroy, Lord Irwin. Another memorial, Amar Jawan Jyoti was added
            much later, after India got its independence.
          </p>
        </div>
        <img src="indiagate.jpg" alt="india gate" />
      </div>
      <div class="place5">
        <div class="info">
          <h2>Kashmir</h2>
          <p>
            Kashmir has a total area of some 85,800 square miles (222,200 square
            km), and its climate ranges from subtropical in the southwestern
            lowlands to alpine throughout the high mountain areas
          </p>
        </div>
        <img src="kashmir.jpg" alt="Kashmir" />
      </div>
      <div class="place6">
        <div class="info">
          <h2>Manali</h2>
          <p>
            Manali, a town in the Kullu district of Himachal Pradesh, is known
            as the "Valley of the Gods". It's a popular tourist destination in
            the Himalayas that's known for its natural beauty, history, and
            culture
          </p>
        </div>
        <img src="manali.jpg" alt="manali" />
      </div>
    </div>
    <script>
      function openTajMahalPage() {
        window.location.href = "tajmahal.html";
      }
      function openJamaMasjidPage() {
        window.location.href = "jamamasjid.html";
      }
    </script>
  </body>
</html>