Update index.html

07sumit1002 · Oct 20, 2024 · c02df45 · c02df45
1 parent 1b1cded
commit c02df45
Showing 1 changed file with 154 additions and 91 deletions.
diff --git a/index.html b/index.html
@@ -140,98 +140,161 @@
             margin-bottom: 20px;
         }
 
-        .swiper-slide {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            padding: 20px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            background-color: #fff;
-            border-radius: 10px;
-            transition: transform 0.3s;
-        }
-
-        .swiper-slide img {
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            margin-bottom: 10px;
-        }
-
-        .swiper-slide h3 {
-            font-size: 1.5rem;
-            margin: 10px 0;
-        }
-
-        .swiper-slide p {
-            font-size: 1rem;
-            color: #777;
-            margin-bottom: 15px;
-        }
-
-        .stars i {
-            color: #fbc02d;
-        }
-
-        /* Hover effect */
-        .swiper-slide:hover {
-            transform: scale(1.05);
-        }
-
-        /* Responsive Styles */
-        @media screen and (max-width: 1200px) {
-            .swiper-slide {
-                max-width: 80%;
-            }
-        }
-
-        @media screen and (max-width: 768px) {
-            .heading {
-                font-size: 2rem;
-            }
-
-            .swiper-slide {
-                max-width: 90%;
-                padding: 15px;
-            }
-
-            .swiper-slide h3 {
-                font-size: 1.3rem;
-            }
+      /* Main Swiper Slide Styling */
+.swiper-slide {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    border-radius: 10px;
+    transition: transform 0.3s ease-in-out;
+}
+
+.swiper-slide img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    margin-bottom: 10px;
+}
+
+.swiper-slide h3 {
+    font-size: 1.5rem;
+    margin: 10px 0;
+}
+
+.swiper-slide p {
+    font-size: 1rem;
+    color: #777;
+    margin-bottom: 15px;
+}
+
+.stars i {
+    color: #fbc02d;
+}
+
+/* Hover effect */
+.swiper-slide:hover {
+    transform: scale(1.05);
+}
+
+/* Responsive Styles */
+/* Medium Devices (Up to 1200px) */
+@media screen and (max-width: 1200px) {
+    .swiper-slide {
+        max-width: 100%;
+        padding: 16px;
+    }
+}
+
+/* Small Devices (Up to 768px) */
+@media screen and (max-width: 768px) {
+    .heading {
+        font-size: 2rem;
+        text-align: center;
+    }
+
+    .swiper-slide {
+        max-width: 100%;
+        padding: 12px;
+    }
+
+    .swiper-slide img {
+        width: 80px;
+        height: 80px;
+    }
+
+    .swiper-slide h3 {
+        font-size: 1.2rem;
+        margin: 8px 0;
+    }
+
+    .swiper-slide p {
+        font-size: 0.9rem;
+        margin-bottom: 10px;
+    }
+}
+
+/* Extra Small Devices (Up to 576px) */
+@media screen and (max-width: 576px) {
+    .heading {
+        font-size: 1.5rem;
+        text-align: center;
+    }
+
+    .swiper-slide {
+        max-width: 100%;
+        padding: 10px;
+    }
+
+    .swiper-slide img {
+        width: 70px;
+        height: 70px;
+    }
+
+    .swiper-slide h3 {
+        font-size: 1rem;
+        margin: 8px 0;
+    }
+
+    .swiper-slide p {
+        font-size: 0.85rem;
+    }
+}
+
+/* Ultra Small Devices (Up to 400px) */
+@media screen and (max-width: 400px) {
+    .heading {
+        font-size: 1.2rem;
+        text-align: center;
+    }
+
+    .swiper-slide {
+        max-width: 100%;
+        padding: 8px;
+    }
+
+    .swiper-slide img {
+        width: 60px;
+        height: 60px;
+    }
+
+    .swiper-slide h3 {
+        font-size: 0.9rem;
+        margin: 5px 0;
+    }
+
+    .swiper-slide p {
+        font-size: 0.75rem;
+    }
+}
+
+/* Additional styling for swiper pagination */
+.swiper-pagination {
+    position: relative;
+    bottom: 10px;
+    display: flex;
+    justify-content: center;
+}
+
+/* Additional responsive pagination size adjustments */
+@media screen and (max-width: 768px) {
+    .swiper-pagination-bullet {
+        width: 10px;
+        height: 10px;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .swiper-pagination-bullet {
+        width: 8px;
+        height: 8px;
+    }
+}
 
-            .swiper-slide p {
-                font-size: 0.9rem;
-            }
-        }
-
-        @media screen and (max-width: 576px) {
-            .heading {
-                font-size: 1.8rem;
-            }
-
-            .swiper-slide {
-                max-width: 100%;
-                padding: 10px;
-            }
-
-            .swiper-slide h3 {
-                font-size: 1.2rem;
-            }
-
-            .swiper-slide p {
-                font-size: 0.8rem;
-            }
-        }
-
-        /* Additional styling for swiper pagination */
-        .swiper-pagination {
-            position: relative;
-            bottom: 10px;
-            display: flex;
-            justify-content: center;
-        }
 
         /* General Styles */
         .container_1 {