Skip to content

Commit

Permalink
Merge pull request #146 from kshitijhadke26/fix/services-ui-upgraded
Browse files Browse the repository at this point in the history 
Upgraded user interface of services section
  • Loading branch information
@tushargupta1504
tushargupta1504 authored Oct 3, 2024
2 parents e22e0c3 + c447bcb commit 4504cbc
Show file tree
Hide file tree
Showing 3 changed files with 183 additions and 47 deletions.
4 changes: 2 additions & 2 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"liveServer.settings.port": 5502
}
"liveServer.settings.port": 5503
}
90 changes: 47 additions & 43 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
136 changes: 134 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,8 +336,9 @@ ul li .nav-link:hover{
}

.serviceimgs {
width: 100px;
height: 100px;
width: 98%;
height: 98%;
border: 2px solid #97aac3;
}

.carousel-caption,
Expand Down Expand Up @@ -405,6 +406,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;
}






Expand Down Expand Up @@ -507,6 +638,7 @@ textarea {

#gallery .image-container img {
transition: transform .5s ease;
border: none;
}

#gallery .image-container:hover img {
Expand Down

0 comments on commit 4504cbc

Please sign in to comment.