Improved CSS

apu52 · Jul 17, 2024 · aafc0a1 · aafc0a1
1 parent afba26b
commit aafc0a1
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -973,30 +973,33 @@ <h4 style="color: rgb(231, 62, 118); font-style: italic;font-family: cursive;">H
 
     <!-- Hotel & Resort Section -->
     <section class="hotel" id ="hotel">
-      <h2 class="tourist-heading section__title" align-items="center" data-aos="fade-in">Hotels & Resorts</h2>
 
-       <br></br>
-       <h3 style="color: rgb(151, 6, 241); font-style: italic;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">Best Place for Beautiful Trip</h3>
-       <br></br>
-       <div class="center-card">
-       <img src="./h1.png" alt="hr1"/>
-       <br></br>
-       <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
-       <br></br>
-       <br></br>
-       <img src="./h2.png" alt="hr2"/>
-       <br></br>
-       <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
-       <br></br>
-       <br></br>
-       <img src="./h3.png" alt="hr3"/>
-       <br></br>
-       <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
-       <br></br>
-       <br></br>
-       <img src="./h4.png" alt="hr4"/>
-       <br></br>
-       <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
+      <div class="center-card">
+        <div>
+          <h2 class="tourist-heading section__title" align-items="center" data-aos="fade-in">Hotels & Resorts</h2> 
+          <h3 style="color: rgb(151, 6, 241); font-style: italic;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">Best Place for Beautiful Trip</h3>
+        </div>
+
+        <div>
+          <img src="./h1.png" alt="hr1"/>
+          <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
+        </div>
+
+        <div>
+          <img src="./h2.png" alt="hr2"/>
+          <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
+        </div>
+
+        <div>
+          <img src="./h3.png" alt="hr3"/>
+          <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
+        </div>
+
+        <div>
+          <img src="./h4.png" alt="hr4"/>
+          <a class="btn btn-primary" href="./hotel.html" role="button">Book Now</a>
+        </div>
+
       </div>
       </section>
     <br /><br /><br /><br />

diff --git a/styles.css b/styles.css
@@ -2531,6 +2531,27 @@ body {
     0 0 200px black;
 }
 
+.hotel .center-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  margin-top: 50px;
+}
+
+.hotel .center-card div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.hotel .center-card div .btn{
+  bottom: 0;
+}
+
+
+
 /* Testimonial Section */
 @media (min-width: 320px) {
   .testimonials {