diff --git a/back-image.PNG b/back-image.PNG
new file mode 100644
index 0000000..954f68b
Binary files /dev/null and b/back-image.PNG differ
diff --git a/front-image.jpg b/front-image.jpg
new file mode 100644
index 0000000..304140f
Binary files /dev/null and b/front-image.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..830dc98
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
+  <title>Card Animation</title>
+</head>
+<body>
+  <div class="card">
+    <div class="card-inner">
+      <div class="card-front">
+        <img src="front-image.jpg" alt="Front Image">
+      </div>
+      <div class="card-back">
+        <img src="back-image.PNG" alt="Back Image">
+        <p id="back-text">Initial Text</p>
+      </div>
+    </div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..247c430
--- /dev/null
+++ b/script.js
@@ -0,0 +1,21 @@
+const card = document.getElementById('card');
+const cardInner = document.getElementById('card-inner');
+const cardBack = document.querySelector('.card-back');
+const messages = [
+  "Message 1",
+  "Message 2",
+  "Message 3",
+  // Add more messages
+];
+let flipCount = 0;
+
+card.addEventListener('click', () => {
+  if (flipCount < messages.length) {
+    cardInner.style.transform = 'rotateY(180deg)';
+    setTimeout(() => {
+      cardBack.querySelector('p').textContent = messages[flipCount];
+      cardInner.style.transform = 'rotateY(0deg)';
+    }, 250);
+    flipCount++;
+  }
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..f5a9c72
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,50 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+  background-color: #f0f0f0;
+}
+
+.card {
+  width: 300px;
+  height: 400px;
+  perspective: 1000px;
+}
+
+.card-inner {
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 0.5s;
+}
+
+.card:hover .card-inner {
+  transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.card-front {
+  background-image: url('front-image.jpg');
+  background-size: cover;
+}
+
+.card-back {
+  background-image: url('back-image.PNG');
+  background-size: cover;
+  transform: rotateY(180deg);
+}
