Added responsive 'Read More' buttons in the 'Plan a Trip' page under …

…the Trip Suggestions section. Clicking on the buttons provides detailed information about each tourist place, including popular attractions.
apu52 · Dec 24, 2024 · dbd39d2 · dbd39d2
1 parent f6ded77
commit dbd39d2
Show file tree

Hide file tree

Showing 38 changed files with 580 additions and 1 deletion.
diff --git a/Amber Fort.jpeg b/Amber Fort.jpeg
diff --git a/Hidimba Temple.jpeg b/Hidimba Temple.jpeg
diff --git a/Rohtang Pass.jpeg b/Rohtang Pass.jpeg
diff --git a/addu-atoll.jpeg b/addu-atoll.jpeg
diff --git a/banana-reef.jpeg b/banana-reef.jpeg
diff --git a/bangkok.jpeg b/bangkok.jpeg
diff --git a/cherrapunji.jpeg b/cherrapunji.jpeg
diff --git a/chiang-mai.jpeg b/chiang-mai.jpeg
diff --git a/city-palace.jpeg b/city-palace.jpeg
diff --git a/hawa-mahal.jpeg b/hawa-mahal.jpeg
diff --git a/jaipur-background.jpeg b/jaipur-background.jpeg
diff --git a/jaipur-background1.jpeg b/jaipur-background1.jpeg
diff --git a/jaipur-details.html b/jaipur-details.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Explore Jaipur</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-image: url('jaipur-background1.jpeg');
+            background-size: cover;
+            background-attachment: fixed;
+            background-position: center;
+            color: #0b0b0b;
+        }
+        .tourist-photos img {
+            width: 100%;
+            border-radius: 10px;
+        }
+        .photo-caption {
+            text-align: center;
+            font-size: 1.2em;
+            margin-top: 10px;
+        }
+        h1 {
+            font-size: 2.5em;
+            color: #01070d;
+        }
+        h3 {
+            color: #000408;
+            margin-top: 30px;
+        }
+        .tourist-card {
+            margin-bottom: 30px;
+        }
+        .tourist-card img {
+            border-radius: 8px;
+            max-height: 300px;
+            object-fit: cover;
+        }
+    </style>
+</head>
+<body>
+    <div class="container my-5">
+        <!-- Page Title -->
+        <h1 class="text-center">Explore Jaipur</h1>
+        <p class="lead text-center">Jaipur, the Pink City of India, is renowned for its vibrant culture, majestic forts, and royal palaces.</p>
+
+        <!-- Popular Tourist Places -->
+        <h3>Popular Tourist Places:</h3>
+        <ul class="list-group mb-5">
+            <li class="list-group-item">Amber Fort</li>
+            <li class="list-group-item">Hawa Mahal</li>
+            <li class="list-group-item">City Palace</li>
+            <li class="list-group-item">Jantar Mantar</li>
+            <li class="list-group-item">Nahargarh Fort</li>
+        </ul>
+
+        <!-- Tourist Photos -->
+        <h3>Tourist Photos:</h3>
+        <div class="row">
+            <!-- Amber Fort -->
+            <div class="col-md-4 tourist-card">
+                <img src="Amber Fort.jpeg" alt="Amber Fort" class="img-fluid">
+                <div class="photo-caption">Amber Fort</div>
+            </div>
+
+            <!-- Hawa Mahal -->
+            <div class="col-md-4 tourist-card">
+                <img src="hawa-mahal.jpeg" alt="Hawa Mahal" class="img-fluid">
+                <div class="photo-caption">Hawa Mahal</div>
+            </div>
+
+            <!-- City Palace -->
+            <div class="col-md-4 tourist-card">
+                <img src="city-palace.jpeg" alt="City Palace" class="img-fluid">
+                <div class="photo-caption">City Palace</div>
+            </div>
+        </div>
+
+        <!-- Additional Photos -->
+        <div class="row mt-4">
+            <!-- Jantar Mantar -->
+            <div class="col-md-4 tourist-card">
+                <img src="jantar-mantar.jpeg" alt="Jantar Mantar" class="img-fluid">
+                <div class="photo-caption">Jantar Mantar</div>
+            </div>
+
+            <!-- Nahargarh Fort -->
+            <div class="col-md-4 tourist-card">
+                <img src="nahargarh-fort.jpeg" alt="Nahargarh Fort" class="img-fluid">
+                <div class="photo-caption">Nahargarh Fort</div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/jantar-mantar.jpeg b/jantar-mantar.jpeg
diff --git a/krabi.jpeg b/krabi.jpeg
diff --git a/living-root-bridges.jpeg b/living-root-bridges.jpeg
diff --git a/maafushi-island.jpeg b/maafushi-island.jpeg
diff --git a/maldives-background.jpeg b/maldives-background.jpeg
diff --git a/maldives-details.html b/maldives-details.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Explore Maldives</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-image: url('maldives-background.jpeg');
+            background-size: cover;
+            background-attachment: fixed;
+            background-position: center;
+            color: black;
+        }
+        .tourist-photos img {
+            width: 100%;
+            border-radius: 10px;
+        }
+        .photo-caption {
+            text-align: center;
+            font-size: 1.2em;
+            margin-top: 10px;
+        }
+        h1 {
+            font-size: 2.5em;
+            color: #01080f;
+        }
+        h3 {
+            color: #0a0a0a;
+            margin-top: 30px;
+        }
+        .tourist-card {
+            margin-bottom: 30px;
+        }
+        .tourist-card img {
+            border-radius: 8px;
+            max-height: 300px;
+            object-fit: cover;
+        }
+    </style>
+</head>
+<body>
+    <div class="container my-5">
+        <!-- Page Title -->
+        <h1 class="text-center">Explore Maldives</h1>
+        <p class="lead text-center">The Maldives is a tropical paradise known for its crystal-clear waters, white sandy beaches, and luxurious overwater bungalows.</p>
+
+        <!-- Popular Tourist Places -->
+        <h3>Popular Tourist Places:</h3>
+        <ul class="list-group mb-5">
+            <li class="list-group-item">Maafushi Island</li>
+            <li class="list-group-item">Male City</li>
+            <li class="list-group-item">Banana Reef</li>
+            <li class="list-group-item">Vaadhoo Island (Sea of Stars)</li>
+            <li class="list-group-item">Addu Atoll</li>
+        </ul>
+
+        <!-- Tourist Photos -->
+        <h3>Tourist Photos:</h3>
+        <div class="row">
+            <!-- Maafushi Island -->
+            <div class="col-md-4 tourist-card">
+                <img src="maafushi-island.jpeg" alt="Maafushi Island" class="img-fluid">
+                <div class="photo-caption">Maafushi Island</div>
+            </div>
+
+            <!-- Male City -->
+            <div class="col-md-4 tourist-card">
+                <img src="male-city.jpeg" alt="Male City" class="img-fluid">
+                <div class="photo-caption">Male City</div>
+            </div>
+
+            <!-- Banana Reef -->
+            <div class="col-md-4 tourist-card">
+                <img src="banana-reef.jpeg" alt="Banana Reef" class="img-fluid">
+                <div class="photo-caption">Banana Reef</div>
+            </div>
+        </div>
+
+        <!-- Additional Photos -->
+        <div class="row mt-4">
+            <!-- Vaadhoo Island -->
+            <div class="col-md-4 tourist-card">
+                <img src="vaadhoo-island.jpeg" alt="Vaadhoo Island" class="img-fluid">
+                <div class="photo-caption">Vaadhoo Island (Sea of Stars)</div>
+            </div>
+
+            <!-- Addu Atoll -->
+            <div class="col-md-4 tourist-card">
+                <img src="addu-atoll.jpeg" alt="Addu Atoll" class="img-fluid">
+                <div class="photo-caption">Addu Atoll</div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/male-city.jpeg b/male-city.jpeg
diff --git a/manali-background.jpeg b/manali-background.jpeg
diff --git a/manali-details.html b/manali-details.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Explore Manali</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-image: url('manali-background.jpeg');
+            background-size: cover;
+            background-attachment: fixed;
+            background-position: center;
+            color: black;
+        }
+        .tourist-photos img {
+            width: 100%;
+            border-radius: 10px;
+        }
+        .photo-caption {
+            text-align: center;
+            font-size: 1.2em;
+            margin-top: 10px;
+        }
+        h1 {
+            font-size: 2.5em;
+            color: #01080f;
+        }
+        h3 {
+            color: #0a0a0a;
+            margin-top: 30px;
+        }
+        .tourist-card {
+            margin-bottom: 30px;
+        }
+        .tourist-card img {
+            border-radius: 8px;
+            max-height: 300px;
+            object-fit: cover;
+        }
+    </style>
+</head>
+<body>
+    <div class="container my-5">
+        <!-- Page Title -->
+        <h1 class="text-center">Explore Manali</h1>
+        <p class="lead text-center">Manali is a beautiful hill station in Himachal Pradesh, known for its scenic views, adventure activities, and famous tourist spots.</p>
+
+        <!-- Popular Tourist Places -->
+        <h3>Popular Tourist Places:</h3>
+        <ul class="list-group mb-5">
+            <li class="list-group-item">Solang Valley</li>
+            <li class="list-group-item">Rohtang Pass</li>
+            <li class="list-group-item">Hidimba Temple</li>
+            <li class="list-group-item">Old Manali</li>
+            <li class="list-group-item">Manu Temple</li>
+        </ul>
+
+        <!-- Tourist Photos -->
+        <h3>Tourist Photos:</h3>
+        <div class="row">
+            <!-- Solang Valley -->
+            <div class="col-md-4 tourist-card">
+                <img src="solang-valley.jpeg" alt="Solang Valley" class="img-fluid">
+                <div class="photo-caption">Solang Valley</div>
+            </div>
+
+            <!-- Rohtang Pass -->
+            <div class="col-md-4 tourist-card">
+                <img src="Rohtang Pass.jpeg" alt="Rohtang Pass" class="img-fluid">
+                <div class="photo-caption">Rohtang Pass</div>
+            </div>
+
+            <!-- Hidimba Temple -->
+            <div class="col-md-4 tourist-card">
+                <img src="Hidimba Temple.jpeg" alt="Hidimba Temple" class="img-fluid">
+                <div class="photo-caption">Hidimba Temple</div>
+            </div>
+        </div>
+
+        <!-- Additional Photos -->
+        <div class="row mt-4">
+            <!-- Old Manali -->
+            <div class="col-md-4 tourist-card">
+                <img src="old-manali.jpeg" alt="Old Manali" class="img-fluid">
+                <div class="photo-caption">Old Manali</div>
+            </div>
+
+            <!-- Manu Temple -->
+            <div class="col-md-4 tourist-card">
+                <img src="manu-temple.jpeg" alt="Manu Temple" class="img-fluid">
+                <div class="photo-caption">Manu Temple</div>
+            </div>
+        </div>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/manu-temple.jpeg b/manu-temple.jpeg
diff --git a/meghalaya-background.jpeg b/meghalaya-background.jpeg