<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Responsive Flip Cards</title>
<link href=
rel="stylesheet">
<style>
.flip-card {
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #f8f9fa;
color: #000;
}
.flip-card-back {
background-color: #343a40;
color: #000;
transform: rotateY(180deg);
}
.card-img-top {
max-height: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="card">
<img src=
class="card-img-top" alt="Front Image">
<div class="card-body">
<h5 class="card-title">Front Side</h5>
<p class="card-text">HTML</p>
</div>
</div>
</div>
<div class="flip-card-back">
<div class="card">
<img src=
class="card-img-top" alt="Back Image">
<div class="card-body">
<h5 class="card-title">Back Side</h5>
<p class="card-text">React JS</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>