diff --git a/ExpandableCards/Nchhabra25/Readme.md b/ExpandableCards/Nchhabra25/Readme.md
new file mode 100644
index 000000000..f95df8d74
--- /dev/null
+++ b/ExpandableCards/Nchhabra25/Readme.md
@@ -0,0 +1,2 @@
+# Expandable Cards
+
diff --git a/ExpandableCards/Nchhabra25/index.html b/ExpandableCards/Nchhabra25/index.html
new file mode 100644
index 000000000..52b698eba
--- /dev/null
+++ b/ExpandableCards/Nchhabra25/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+ Document
+
+
+ Welcome
+ Click on one of these cards
+
+
+
stars
+
+
+
beaches
+
+
+
clouds
+
+
+
scenery
+
+
+
+
+
diff --git a/ExpandableCards/Nchhabra25/script.js b/ExpandableCards/Nchhabra25/script.js
new file mode 100644
index 000000000..594a05232
--- /dev/null
+++ b/ExpandableCards/Nchhabra25/script.js
@@ -0,0 +1,12 @@
+const cards=document.querySelectorAll(".cards");
+
+cards.forEach(cards=>{
+ cards.addEventListener('click',()=>{
+ cards.classList.toggle('active');
+ })
+})
+function remove(){
+ cards.forEach(cards=>{
+ cards.classList.remove('active');
+})
+}
diff --git a/ExpandableCards/Nchhabra25/style.css b/ExpandableCards/Nchhabra25/style.css
new file mode 100644
index 000000000..fdfeb3d00
--- /dev/null
+++ b/ExpandableCards/Nchhabra25/style.css
@@ -0,0 +1,70 @@
+body{
+ background: radial-gradient(at left, #81e8f2, #f8bbc5);
+}
+h1,h3{
+ text-align: center;
+ font-family: 'Times New Roman', Times, serif;
+ color: #202020;
+ font-size: 2.2rem;
+}
+.cards{
+ /*border:2px solid red;*/
+ margin: 1.5em;
+ height: 50vh;
+ width: 5vw;
+ border-radius: 38px;
+ display: flex;
+ align-items: flex-end;
+ transition: 0.5s ease-out;
+}
+.cards:hover{
+ cursor: pointer;
+ box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.13);
+}
+.main{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+}
+.cards h3{
+ color:white;
+ font-weight: bold;
+ position:relative;
+ left: 10px;
+ opacity: 0;
+ transition: 0.5s ease-out;
+}
+.cards.active{
+ width:20vw;
+ transition: 0.5s ease-out;
+}
+.cards.active h3{
+ opacity: 1;
+ transition: 0.5s ease-out;
+}
+#pvt1{
+ background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
+}
+#pvt2{
+ background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
+}
+#pvt3{
+ background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80');
+}
+#pvt4{
+ background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
+}
+@media(max-width:680px){
+ .main{
+ flex-direction: column;
+ }
+ .cards{
+ width:80vw;
+ height: 10vh;
+ }
+ .cards.active{
+ width:80vw;
+ height:40vh;
+ }
+}