Merge pull request #50 from Lavanya-Sathya/lavanya-cssUpdate

homePage-issue
jaysomani · Jan 11, 2024 · cd51731 · cd51731
2 parents 614a3f5 + 5d4b829
commit cd51731
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 4 deletions.
diff --git a/css/style.css b/css/style.css
@@ -26258,4 +26258,77 @@ screen and (max-height: 300px) {
     .banner-top {
         display: none;
     }
-}
+}
+/* swiper-slide button positioning */
+.button-explore{
+    position: absolute;
+    left: 20.3%;
+}
+.button-git{
+    position: absolute;
+    left: 16%;
+}
+.button-tour{
+    position: absolute;
+    left: 22.95%;
+}
+@media screen and (max-width: 1200px){
+    .button-explore{
+        left: 18%;
+    }
+    .button-git{
+        left: 12.4%;
+    }
+    .button-tour{
+        left: 20.99%;
+    }
+}
+@media screen and (max-width:991px){
+    .button-explore{
+        left: 12%;
+    }
+    .button-git{
+        left: 5.15%;
+    }
+    .button-tour{
+        left: 15%;
+    }
+}
+@media screen and (max-width:767px){
+    .button-explore{
+        left: 19%;
+    }
+    .button-git{
+        left: 14%;
+    }
+    .button-tour{
+        left: 21.99%;
+    }
+}
+@media screen and (max-width: 425px){
+    .button-explore{
+        left: 10%;
+    }
+    .button-git{
+        left: 5%;
+    }
+    .button-tour{
+        left: 14%;
+    }
+}
+@media screen and (max-width: 422px){
+    .button-git{
+        left: 25%;
+    }
+}
+@media screen and (max-width: 375px){
+    .button-explore{
+        left: 27%;
+    }
+    .button-git{
+        left: 27%;
+    }
+    .button-tour{
+        left: 27%;
+    }
+}
diff --git a/index.html b/index.html
@@ -133,7 +133,7 @@ <h2 style="color: black;" class="oh font-weight-light" data-caption-animate="sli
                                         <span>Explore</span
                       ><span class="font-weight-bold"> The World</span>
                                     </h2>
-                                    <a style="color: black;" class="button button-black-outline button-ujarak" href="./pages/contact/contact.html" data-caption-animate="fadeInLeft" data-caption-delay="0">Get in touch</a
+                                    <a style="color: black;" class="button button-black-outline button-ujarak button-explore" href="./pages/contact/contact.html" data-caption-animate="fadeInLeft" data-caption-delay="0">Get in touch</a
                     >
                   </div>
                 </div>
@@ -164,7 +164,7 @@ <h2 style="color: black;" class="oh font-weight-light" data-caption-animate="sli
                       ><span class="font-weight-bold"> Our Experience</span>
                     </h2>
                     <a
-                      class="button button-default-outline button-ujarak"
+                      class="button button-default-outline button-ujarak button-git"
                       href="./pages/contact/contact.html"
                       data-caption-animate="fadeInLeft"
                       data-caption-delay="0"
@@ -186,7 +186,7 @@ <h2 class="oh font-weight-light" data-caption-animate="slideInUp" data-caption-d
                                         <span>Create</span
                       ><span class="font-weight-bold"> Your Tour</span>
                                     </h2>
-                                    <a class="button button-default-outline button-ujarak" href="./pages/contact/contact.html" data-caption-animate="fadeInLeft" data-caption-delay="0">Learn more</a
+                                    <a class="button button-default-outline button-ujarak button-tour" href="./pages/contact/contact.html" data-caption-animate="fadeInLeft" data-caption-delay="0">Learn more</a
                     >
                   </div>
                 </div>