Merge pull request #1237 from SMARTHMALIK/branch-newbranch

Improved the structure of service cards #1230
anuragverma108 · Oct 18, 2024 · da6c275 · da6c275
2 parents fad73a7 + fa13a46
commit da6c275
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1187,8 +1187,11 @@ html {
 }
 
 .service-list {
-  display: grid;
-  gap: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  /* gap: 30px; */
 }
 
 .service-card {
@@ -2861,8 +2864,8 @@ data{
 .service-card {
   perspective: 1000px;
   cursor: pointer;
-  width: 270px; /* Adjust the width as needed */
-  height: 400px; /* Adjust the height as needed */
+  width: 300px; /* Adjust the width as needed */
+  height: 500px; /* Adjust the height as needed */
   margin: 20px; /* Add some margin around the card */
 }
 
@@ -2881,7 +2884,9 @@ data{
 .card-text {
   font-size: 1em; /* Text font size */
   text-align: center; /* Center align text */
-  margin: 10px 0; /* Space above and below the text */
+  /* margin: 10px 0; Space above and below the text */
+  height: 120px;
+  padding: 0 7px;
 }
 
 .btn-link {

diff --git a/index.html b/index.html
@@ -643,9 +643,9 @@ <h2 class="h2 section-title">
             We Work Differently to <strong>keep The World Safe</strong>
           </h2>
 
-          <ul class="service-list">
+          <div class="service-list">
 
-            <li>
+            <div>
               <div class="service-card" id="service-card1">
                   <div class="card-inner">
                       <div class="card-front">
@@ -672,9 +672,9 @@ <h3 class="h3 card-title">Thank You!</h3>
                       </div>
                   </div>
               </div>
-          </li>
+            </div>
 
-          <li>
+          <div>
             <div class="service-card" id="service-card2">
                 <div class="card-inner">
                     <div class="card-front">
@@ -701,9 +701,9 @@ <h3 class="h3 card-title">Thank You!</h3>
                     </div>
                 </div>
             </div>
-        </li>
+          </div>
 
-        <li>
+        <div>
             <div class="service-card" id="service-card3">
                 <div class="card-inner">
                     <div class="card-front">
@@ -730,9 +730,9 @@ <h3 class="h3 card-title">Thank You!</h3>
                     </div>
                 </div>
             </div>
-        </li>
+          </div>
 
-        <li>
+        <div>
             <div class="service-card" id="service-card4">
                 <div class="card-inner">
                     <div class="card-front">
@@ -759,9 +759,9 @@ <h3 class="h3 card-title">Thank You!</h3>
                     </div>
                 </div>
             </div>
-        </li>
+          </div>
 
-          </ul>
+        </div>
 
         </div>
       </section>