<!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
>