From c447bcbad763a84a6ff89b7f7cce072eb245499a Mon Sep 17 00:00:00 2001
From: Kshitij Hadke <kshitijhadke26@gmail.com>
Date: Thu, 3 Oct 2024 13:47:43 +0530
Subject: [PATCH] Upgraded user interface of services section

---
 .vscode/settings.json |   4 +-
 index.html            |  90 +++++++++++++++-------------
 style.css             | 136 +++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 183 insertions(+), 47 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 63662ed..c76d7df 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5502
-}
\ No newline at end of file
+  "liveServer.settings.port": 5503
+}
diff --git a/index.html b/index.html
index 8a0b80f..e6cae4a 100644
--- a/index.html
+++ b/index.html
@@ -152,67 +152,71 @@ <h3>Health Screening</h3>
 
     <!-- icons section ends -->
 
-    <div class="py-5" id="services">
+    
+    <!-- ======= Services Section ======= -->
+    <section id="services" class="services">
         <div class="container">
-            <div class="row ">
-                <div class="col-md-4 justify-content-center flex-column">
-                    <div class="card my-5 border-0 align-items-center">
-                        <img src="img/ic.jpeg" class="card-img-top serviceimgs" alt="Radiology">
-                        <div class="card-body text-center">
-                            <h5 class="card-title">Radiology</h5>
-                            <h5 class="card-text">To visualize internal structures and diagnose conditions.</h5>
-                        </div>
+
+            <div class="section-title">
+                <h2>Services</h2>
+                <p><br></p>
+            </div>
+
+            <div class="row">
+                <div class="col-lg-4 col-md-6 d-flex align-items-stretch">
+                    <div class="icon-box">
+                        <div class="icon"><img src="img/ic.jpeg" class="card-img-top serviceimgs" alt="Radiology"></div>
+                        <h4><a href="">Radiology</a></h4>
+                        <p>To visualize internal structures and diagnose conditions.</p>
                     </div>
+                </div>
 
-                    <div class="card border-0 align-items-center">
-                        <img src="img/ic2.jpeg" class="card-img-top serviceimgs" alt="Blood Bank">
-                        <div class="card-body text-center">
-                            <h5 class="card-title">Blood Bank</h5>
-                            <h5 class="card-text">Transfusion medicine and blood donation center</h5>
-                        </div>
+                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
+                    <div class="icon-box">
+                        <div class="icon"><img src="img/ic3.jpeg" class="card-img-top serviceimgs" alt="Psychiatrist"></div>
+                        <h4><a href="">Psychiatrist</a></h4>
+                        <p>Specializes in mental health.</p>
                     </div>
                 </div>
 
-                <div class="col-md-4 ">
-                    <div class="card my-5 border-0 align-items-center">
-                        <img src="img/ic3.jpeg" class="card-img-top serviceimgs" alt="Psychiatrist">
-                        <div class="card-body text-center">
-                            <h5 class="card-title ">Psychiatrist</h5>
-                            <h5 class="card-text">Specializes in mental health</h5>
-                        </div>
+                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
+                    <div class="icon-box">
+                        <div class="icon"><img src="img/ic5.jpeg" class="card-img-top serviceimgs" alt="Dermatologist"></div>
+                        <h4><a href="">Dermatologist</a></h4>
+                        <p>Diagnosis and treatment of skin, hair, and nail conditions.</p>
                     </div>
+                </div>
 
-                    <div class="card border-0 align-items-center">
-                        <img src="img/ic4.jpeg" class="card-img-top serviceimgs" alt="Urologist">
-                        <div class="card-body text-center">
-                            <h5 class="card-title">Urologist</h5>
-                            <h5 class="card-text">Focuses on conditions affecting the urinary tract</h5>
-                        </div>
+                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
+                    <div class="icon-box">
+                        <div class="icon"><img src="img/ic2.jpeg" class="card-img-top serviceimgs" alt="Blood Bank"></div>
+                        <h4><a href="">Blood Bank</a></h4>
+                        <p>Transfusion medicine and blood donation center.</p>
                     </div>
                 </div>
 
-                <div class="col-md-4">
-                    <div class="card my-5 border-0 align-items-center">
-                        <img src="img/ic5.jpeg" class="card-img-top serviceimgs" alt="Dermatologist">
-                        <div class="card-body text-center">
-                            <h5 class="card-title">Dermatologist</h5>
-                            <h5 class="card-text">diagnosis and treatment of skin, hair, and nail conditions.</h5>
-                        </div>
+                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
+                    <div class="icon-box">
+                        <div class="icon"><img src="img/ic4.jpeg" class="card-img-top serviceimgs" alt="Urologist"></div>
+                        <h4><a href="">Urologist</a></h4>
+                        <p>Focuses on conditions affecting the urinary tract.</p>
                     </div>
+                </div>
 
-                    <div class="card border-0 align-items-center">
-                        <img src="img/ic6.jpeg" class="card-img-top serviceimgs" alt="Pediatrician">
-                        <div class="card-body text-center">
-                            <h5 class="card-title">Pediatrician</h5>
-                            <h6 class="card-text">Specializes in the medical care of infants, children</h5>
-                        </div>
+
+                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4">
+                    <div class="icon-box">
+                        <div class="icon"><img src="img/ic6.jpeg" class="card-img-top serviceimgs" alt="Pediatrician"></div>
+                        <h4><a href="">Pediatrician</a></h4>
+                        <p>Specializes in the medical care of infants, children.</p>
                     </div>
                 </div>
 
             </div>
-        </div>
-    </div>
 
+        </div>
+    </section><!-- End Services Section -->
+    
     <!-- <div class="bg-boz py-3">
             <div class="container">
                 <div class="row">
diff --git a/style.css b/style.css
index 7a0abc5..8be7434 100644
--- a/style.css
+++ b/style.css
@@ -324,8 +324,9 @@ ul li .nav-link:hover{
 }
 
 .serviceimgs {
-    width: 100px;
-    height: 100px;
+    width: 98%;
+    height: 98%;
+    border: 2px solid #97aac3;
 }
 
 .carousel-caption,
@@ -393,6 +394,136 @@ footer h5 {
 
 
 
+/*--------------------------------------------------------------
+# Services
+--------------------------------------------------------------*/
+
+section {
+    padding: 60px 0;
+    overflow: hidden;
+}
+
+.section-title {
+    text-align: center;
+    padding-bottom: 30px;
+  }
+  
+  .section-title h2 {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    position: relative;
+    color: #2c4964;
+  }
+  
+  .section-title h2::before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 120px;
+    height: 1px;
+    background: #ddd;
+    bottom: 1px;
+    left: calc(50% - 60px);
+  }
+  
+  .section-title h2::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 40px;
+    height: 3px;
+    background: #1977cc;
+    bottom: 0;
+    left: calc(50% - 20px);
+  }
+  
+  .section-title p {
+    margin-bottom: 0;
+  }
+
+.services .icon-box {
+    text-align: center;
+    border: 1px solid #d5e1ed;
+    padding: 20px 20px 10px 20px;
+    transition: all ease-in-out 0.3s;
+    width: 95%;
+
+  }
+  
+  .services .icon-box .icon {
+    margin: 0 auto;
+    width: 140px;
+    height: 140px;
+    background: #1977cc;
+    border-radius: 5px;
+    transition: all 0.3s ease-out 0s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    transform-style: preserve-3d;
+  }
+  
+  .services .icon-box .icon i {
+    color: #fff;
+    font-size: 28px;
+  }
+  
+  .services .icon-box .icon::before {
+    position: absolute;
+    content: "";
+    left: -8px;
+    top: -8px;
+    height: 100%;
+    width: 100%;
+    background: #badaf7;
+    border-radius: 5px;
+    transition: all 0.3s ease-out 0s;
+    transform: translateZ(-1px);
+  }
+  
+  .services .icon-box h4 {
+    font-weight: 700;
+    margin-bottom: 15px;
+    font-size: 24px;
+  }
+  
+  .services .icon-box h4 a {
+    color: #2c4964;
+  }
+  
+  .services .icon-box p {
+    line-height: 24px;
+    font-size: 18px;
+    margin-bottom: 0;
+  }
+  
+  .services .icon-box:hover {
+    background: #1977cc;
+    border-color: #1977cc;
+  }
+  
+  .services .icon-box:hover .icon {
+    background: #fff;
+  }
+  
+  .services .icon-box:hover .icon i {
+    color: #1977cc;
+  }
+  
+  .services .icon-box:hover .icon::before {
+    background: #3291e6;
+  }
+  
+  .services .icon-box:hover h4 a,
+  .services .icon-box:hover p {
+    color: #fff;
+  }
+  
+
+
 
 
 
@@ -495,6 +626,7 @@ textarea {
 
 #gallery .image-container img {
     transition: transform .5s ease;
+    border: none;
 }
 
 #gallery .image-container:hover img {