diff --git a/Card Show/Card show.png b/Card Show/Card show.png
new file mode 100644
index 00000000..0aa9a5c1
Binary files /dev/null and b/Card Show/Card show.png differ
diff --git a/Card Show/index.html b/Card Show/index.html
new file mode 100644
index 00000000..a44781f0
--- /dev/null
+++ b/Card Show/index.html	
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Product Card with Focus</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="card" tabindex="0">
+        <img src="https://images.pexels.com/photos/1955134/pexels-photo-1955134.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Product Image" class="card-image">
+        <div class="card-content">
+            <h2 class="card-title">Product Name</h2>
+            <p class="card-description">This is a brief description of the product. It highlights key features and benefits.</p>
+            <button class="card-button">Buy Now</button>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Card Show/style.css b/Card Show/style.css
new file mode 100644
index 00000000..cf94eb62
--- /dev/null
+++ b/Card Show/style.css	
@@ -0,0 +1,109 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #f0f0f0;
+  transition: background-color 0.3s ease;
+}
+
+.card {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  width: 300px;
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1;
+  padding: 15px;
+}
+
+.card:hover, .card:focus-within {
+  transform: translateY(-5px) scale(1.03);
+  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
+  outline: none;
+}
+
+.card:focus-within ~ .focus-overlay {
+  opacity: 1;
+  visibility: visible;
+}
+
+.card-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.card-content {
+  padding: 20px;
+}
+
+.card-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 0 0 10px 0;
+}
+
+.card-description {
+  color: #666;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  margin-bottom: 20px;
+}
+
+.card-button {
+  background-color: #007bff;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 10px 20px;
+  transition: background-color 0.3s ease;
+}
+
+.card-button:hover, .card-button:focus {
+  background-color: #0056b3;
+  outline: none;
+}
+
+.card-button:focus {
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
+}
+
+.focus-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  z-index: 0;
+}
+
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(247, 0, 0, 0.5);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  z-index: 0;
+  pointer-events: none;
+}
+
+body:focus-within::after {
+  opacity: 1;
+  visibility: visible;
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 26801e9e..c7b4070b 100644
--- a/README.md
+++ b/README.md
@@ -924,6 +924,15 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 **[⬆ back to top](#quick-links)**
 
 ---
+
+## <a id="Card-show"></a>Card SHow
+
+[<img src="images/card-shw.gif" height="230" title="Card show">] (https://codepen.io/Sp39/pen/gOEdpeq)
+
+**[⬆ back to top](#quick-links)**
+
+---
+
 ## Contributors
 
 Thanks to these wonderful people who have contributed to this project!
diff --git a/index.html b/index.html
index 861b959b..de15065c 100644
--- a/index.html
+++ b/index.html
@@ -372,6 +372,7 @@ <h1><a href="https://github.com/you-dont-need/You-Dont-Need-JavaScript">You Dont
 					<a href="./Slideshow/purnasth/index.html">Slideshow</a>
 					<a href="./Css Tables/index.html">CSS Tables</a>
 					<a href="./CSS Toggle/index.html">CSS Toggle</a>
+					<a href="./Card Show/index.html">Card-Show</a>
 					<a href="./flex Property/new.html">Flex Property</a>
 					<a href="./grid/abc.html">Grid</a>
 					<a href="./infinitecarousel/infinite.html">Infinite Carousel</a>
@@ -485,19 +486,19 @@ <h1><a href="https://github.com/you-dont-need/You-Dont-Need-JavaScript">You Dont
 	<script>
 		const darkModeToggle = document.getElementById("dark-mode");
 		const body = document.body;
-	
+
 		if (localStorage.getItem('darkMode') === 'enabled') {
 			body.classList.replace("light-mode", "dark-mode");
 			darkModeToggle.checked = true;
 		}
-	
+
 		darkModeToggle.addEventListener("change", () => {
 			if (darkModeToggle.checked) {
 				body.classList.replace("light-mode", "dark-mode");
-				localStorage.setItem('darkMode', 'enabled'); 
+				localStorage.setItem('darkMode', 'enabled');
 			} else {
 				body.classList.replace("dark-mode", "light-mode");
-				localStorage.setItem('darkMode', 'disabled'); 
+				localStorage.setItem('darkMode', 'disabled');
 			}
 		});
 	</script>
