From 74563d9734a5dcf3c6dd13aa9fdd3d2e876bf9c3 Mon Sep 17 00:00:00 2001
From: Yash Verma <114978813+Rajput-xv@users.noreply.github.com>
Date: Sun, 14 Jul 2024 20:48:17 +0530
Subject: [PATCH] Update alignment to horizontal.

---
 explore.css | 224 ++++++++++++++++++++++++++--------------------------
 index.html  |  85 ++++++++++----------
 styles.css  |   1 -
 3 files changed, 152 insertions(+), 158 deletions(-)

diff --git a/explore.css b/explore.css
index 8429c218..646224f1 100644
--- a/explore.css
+++ b/explore.css
@@ -1,125 +1,123 @@
 * {
-    box-sizing: border-box;
-    /* ADDED BORDER RADIUS IN IMAGE SECTION */
-    border-radius: 20px;
-  }
-  
-  .outer-box {
-    font-family: Verdana, Geneva, Tahoma, sans-serif;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    overflow: hidden;
-    margin: 0;
-    
-  }
-  
-  .containers {
-    display: flex;
-    width: 90vw;
-    
-  }
-  
-  .card {
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    height: 70vh;
-    border-radius: 35px 35px;
-    /* border-radius: 20px; */
-    color: #fff;
-    cursor: pointer;
-    flex: 0.5;
-    margin: 10px;
-    position: relative;
-    transition: flex 0.7s ease-in;
-    display: flex;
-    flex-direction: column; 
-  }
-  
-  /* .card:hover {
-      flex: 3;
-  }
+  box-sizing: border-box;
+  /* ADDED BORDER RADIUS IN IMAGE SECTION */
+  border-radius: 20px;
+}
 
-  .card:hover h3, .card:hover p {
-      opacity: 1;
-      transition: opacity 0.5s ease-in 0.8s;
-  }
+.outer-box {
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow: hidden;
+  margin: 0;
+}
 
-  .card:hover .info {
-      visibility: visible;
-  } */
-  
-  .info {
-    position: absolute;
-    bottom: 20px;
-    left: 25%;
-    visibility: hidden;
-    background: rgba(221, 206, 216, 0.462);
-    backdrop-filter:blur(0px);
-    width: 500px;
-    border-radius: 15px 15px;
-  }
-  
-  .card h3 {
-    font-size: 24px;
-    opacity: 0;
-    color: black !important;
-    font-family:Georgia, 'Times New Roman', Times, serif ;
-    font-weight: bolder;
-    -webkit-text-stroke:1px navy;
-  }
-  
-  .card p {
-    font-size: 16px;
-    opacity: 0;
-    color:black !important;
-    margin-top: 10px;
-    font-weight: 500;
-    /* -webkit-text-stroke:0.5px beige; */
-  }
+.containers {
+  display: flex;
+  width: 90vw;
   
-  .card.active {
+}
+
+.card {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 70vh;
+  border-radius: 35px 35px;
+  /* border-radius: 20px; */
+  color: #fff;
+  cursor: pointer;
+  flex: 0.5;
+  margin: 10px;
+  position: relative;
+  transition: flex 0.7s ease-in;
+  display: flex;
+  flex-direction: column; 
+}
+
+/* .card:hover {
     flex: 3;
-  }
-  
-  .card.active h3, .card.active p {
+}
+
+.card:hover h3, .card:hover p {
     opacity: 1;
     transition: opacity 0.5s ease-in 0.8s;
-  }
-  
-  .card.active .info {
+}
+
+.card:hover .info {
     visibility: visible;
+} */
+
+.info {
+  position: absolute;
+  bottom: 20px;
+  left: 25%;
+  visibility: hidden;
+  background: rgba(221, 206, 216, 0.462);
+  backdrop-filter:blur(0px);
+  width: 500px;
+  border-radius: 15px 15px;
+}
+
+.card h3 {
+  font-size: 24px;
+  opacity: 0;
+  color: black !important;
+  font-family:Georgia, 'Times New Roman', Times, serif ;
+  font-weight: bolder;
+  -webkit-text-stroke:1px navy;
+}
+
+.card p {
+  font-size: 16px;
+  opacity: 0;
+  color:black !important;
+  margin-top: 10px;
+  font-weight: 500;
+  /* -webkit-text-stroke:0.5px beige; */
+}
+
+.card.active {
+  flex: 3;
+}
+
+.card.active h3, .card.active p {
+  opacity: 1;
+  transition: opacity 0.5s ease-in 0.8s;
+}
+
+.card.active .info {
+  visibility: visible;
+}
+
+@media (max-width: 1300px) {
+  .containers {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
   }
-  
-  @media (max-width: 1300px) {
-    .containers {
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-    }
-    .info{
-      left: 10%;
-    }
-    .card h3 {
-      font-size: 16px;
-    }
-  
-    .card p {
-      font-size: 12px;
-    }
+  .info{
+    left: 10%;
+  }
+  .card h3 {
+    font-size: 16px;
+  }
+
+  .card p {
+    font-size: 12px;
   }
-  @media (max-width: 620px){
-    .info{
-      width: 200px;
-      left: 20px;
-    }
+}
+@media (max-width: 620px){
+  .info{
+    width: 200px;
+    left: 20px;
   }
-  @media (max-width: 280px){
-    .info{
-      width: 100px;
-      left: 0px;
-    }
+}
+@media (max-width: 280px){
+  .info{
+    width: 100px;
+    left: 0px;
   }
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index fa0b13eb..bd2135fa 100644
--- a/index.html
+++ b/index.html
@@ -658,61 +658,58 @@ <h2 class="section__title" data-aos="fade-in"><span style="margin-left: 300px;">
         </div>
       </div> -->
 
-    <div class="outer-box">
-      <div class="containers">
-            
-          <div class="card active" style="
-            background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-              url('./img/paris.jpg')
-          ">
-          <div class="info">
-
-            <p>
-              ||Eiffel Tower||
-            </p>
-            <h3>PARIS</h3>
-      
-
-          </div>
-
-          <div class="card" style="
-      background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
-        url('./img/london.jpg')
-    ">
-
+      <div class="outer-box">
+        <div class="containers">
+              
+            <div class="card active" style="
+              background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+                url('./img/paris.jpg')
+            ">
             <div class="info">
-
-              <p>||Giant Wheel||</p>
-              <h3>LONDON</h3>
+  
+              <p>
+                ||Eiffel Tower||
+              </p>
+              <h3>PARIS</h3>
             </div>
           </div>
-
-
-          <div class="card" style="
+  
+      <div class="card" style="
+        background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
+          url('./img/london.jpg')
+      ">
+        <div class="info">
+          
+          <p>||Giant Wheel||</p>
+          <h3>LONDON</h3>
+        </div>
+      </div>
+  
+      <div class="card" style="
         background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
           url('./img/goa.jpg')
       ">
-            <div class="info">
-
-              <p>||Goa Beach||</p>
-              <h3>GOA</h3>
-            </div>
-          </div>
-
-          <div class="card" style="
+        <div class="info">
+          
+          <p>||Goa Beach||</p>
+          <h3>GOA</h3>
+        </div>
+      </div>
+  
+      <div class="card" style="
         background-image: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, rgba(255, 255, 255, 0) 50%),
           url('./img/maldives.jpg')
       ">
-            <div class="info">
-              <p>||Male Beach||</p>
-              <h3>MALDIVES</h3>
-            </div>
-          </div>
-
+        <div class="info">
+         
+          <p>||Male Beach||</p>
+          <h3>MALDIVES</h3>
         </div>
       </div>
-
-
+  
+    </div>
+  </div>
+  
       <script src="explore.js"></script>
     </section>
 
diff --git a/styles.css b/styles.css
index ff951a85..d34ca62c 100644
--- a/styles.css
+++ b/styles.css
@@ -357,7 +357,6 @@ body {
   justify-content: space-between;
   gap: 2rem;
   flex-wrap: wrap;
-  margin-bottom: 4rem;
 }
 
 .section__title {