Skip to content

Commit

Permalink
Merge pull request #1052 from kosuri-indu/add/about-us-flipping-cards
Browse files Browse the repository at this point in the history 
Improved styling: flipping of cards nder about us
  • Loading branch information
@varshith257
varshith257 authored Jul 28, 2024
2 parents 32bcd54 + c9d5896 commit dd8bdca
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 32 deletions.
35 changes: 35 additions & 0 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -904,3 +904,38 @@ body {
.btn1{
padding:10px;
}
.about-card {
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.about-card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-back {
transform: rotateY(180deg);
background-color: black;
backface-visibility: hidden !important;
}
.card-front {
backface-visibility: hidden !important;
}
.card-back img {
width: 100%;
height: auto;
max-width: 300px;
max-height: 300px;
display: block;
margin: 0 auto;
}
76 changes: 44 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,50 +271,62 @@ <h1 class="about-us-heading">About Us</h1>
</section>
<div class="about-us-block">
<div class="about-us-community about-card">
<div style="display: flex; align-items: center; gap: 1rem;">
<img id="community-img" src="./images/checkup.png" alt=""
style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
<div class="about-us-blk-text">Comprehensive Health Checkups</div>
<div class="card-inner">
<div class="card-front">
<div style="display: flex; align-items: center; gap: 1rem;">
<img id="community-img" src="./images/checkup.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
<div class="about-us-blk-text">Comprehensive Health Checkups</div>
</div>
<p class="about-us-blk-para">At Rapidoc, we prioritize your well-being with thorough health checkups that are designed to detect potential health issues early. Our comprehensive packages include a range of tests and screenings, providing a detailed analysis of your health status. Book your health checkup easily through our platform and receive personalized recommendations from our medical experts.</p>
</div>
<div class="card-back">
<img src="./images/checkuphover.png" alt="Checkup Hover Image" style="width: 100%; height: 100%;">
</div>
</div>
<p class="about-us-blk-para">At Rapidoc, we prioritize your well-being with thorough health checkups that
are designed to detect potential health issues early. Our comprehensive packages include a range of tests
and screenings, providing a detailed analysis of your health status. Book your health checkup easily
through our platform and receive personalized recommendations from our medical experts.</p>
</div>
<div class="about-us-product about-card">
<div style="display: flex; align-items: center; gap: 1rem;">
<img id="product-img" src="./images/ward.png" alt=""
style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
<div class="about-us-blk-text">Emergency Ward Availability</div>
<div class="card-inner">
<div class="card-front">
<div style="display: flex; align-items: center; gap: 1rem;">
<img id="product-img" src="./images/ward.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
<div class="about-us-blk-text">Emergency Ward Availability</div>
</div>
<p class="about-us-blk-para">In critical situations, every second counts. Rapidoc offers real-time updates on the availability of emergency wards across various hospitals. This feature ensures that you can find the nearest hospital with an open emergency ward promptly, facilitating quicker access to urgent medical care when you need it most.</p>
</div>
<div class="card-back">
<img src="./images/wardhover.png" alt="Ward Hover Image" style="width: 100%; height: 100%;">
</div>
</div>
<p class="about-us-blk-para">In critical situations, every second counts. Rapidoc offers real-time updates
on the availability of emergency wards across various hospitals. This feature ensures that you can find
the nearest hospital with an open emergency ward promptly, facilitating quicker access to urgent medical
care when you need it most.</p>
</div>
</div>
<div class="about-us-block">
<div class="about-us-location about-card">
<div style="display: flex; align-items: center; gap: 1rem;">
<img id="location-img" src="./images/appointment.png" alt=""
style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
<div class="about-us-blk-text">Seamless Appointment Booking</div>
<div class="card-inner">
<div class="card-front">
<div style="display: flex; align-items: center; gap: 1rem;">
<img id="location-img" src="./images/appointment.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
<div class="about-us-blk-text">Seamless Appointment Booking</div>
</div>
<p class="about-us-blk-para">Say goodbye to long queues and waiting times with Rapidoc's seamless appointment booking system. Our platform allows you to prebook appointments with specialists across numerous hospitals. This ensures you receive timely consultations and reduces the hassle of waiting, making your healthcare experience more efficient and convenient.</p>
</div>
<div class="card-back">
<img src="./images/appointmenthover.png" alt="Appointment Hover Image" style="width: 100%; height: 100%;">
</div>
</div>
<p class="about-us-blk-para">Say goodbye to long queues and waiting times with Rapidoc's seamless
appointment booking system. Our platform allows you to prebook appointments with specialists across
numerous hospitals. This ensures you receive timely consultations and reduces the hassle of waiting,
making your healthcare experience more efficient and convenient.</p>
</div>
<div class="about-us-event about-card">
<div style="display: flex; align-items: center; gap: 1rem;">
<img id="event-img" src="./images/services.png" alt=""
style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
<div class="about-us-blk-text">Personalized Healthcare Services</div>
<div class="card-inner">
<div class="card-front">
<div style="display: flex; align-items: center; gap: 1rem;">
<img id="event-img" src="./images/services.png" alt="" style="margin-left: 1rem; margin-top: 1rem; width: 4rem;">
<div class="about-us-blk-text">Personalized Healthcare Services</div>
</div>
<p class="about-us-blk-para">Rapidoc is dedicated to offering personalized healthcare services tailored to meet your unique needs. Our platform connects you with a variety of specialists and healthcare providers, ensuring you receive the best possible care. From tailored treatment plans to ongoing health management, Rapidoc supports your journey to optimal health with expert guidance and personalized attention.</p>
</div>
<div class="card-back">
<img src="./images/serviceshover.png" alt="Services Hover Image" style="width: 100%; height: 100%;">
</div>
</div>
<p class="about-us-blk-para">Rapidoc is dedicated to offering personalized healthcare services tailored to
meet your unique needs. Our platform connects you with a variety of specialists and healthcare providers,
ensuring you receive the best possible care. From tailored treatment plans to ongoing health management,
Rapidoc supports your journey to optimal health with expert guidance and personalized attention.</p>
</div>
</div>
</div>
Expand Down

0 comments on commit dd8bdca

Please sign in to comment.