diff --git a/index.css b/index.css
index 0279f4e..01a40f0 100644
--- a/index.css
+++ b/index.css
@@ -3543,4 +3543,151 @@ em {
    transition-delay: 0.2s;
 }
 
-/* ---------------------------END UI-23------------------------*/
\ No newline at end of file
+/* ---------------------------END UI-23------------------------*/
+/* ======================== UI 25 begin ============================= */
+
+:root {
+    --d: 700ms;
+    --e: cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  .page-content {
+    display: flex;
+    flex-wrap: wrap;
+    grid-gap: 1.3vw;
+    padding: 1vw;
+    justify-content: left;
+    /* width: 100vw; */
+    max-width: 1025px;
+    margin: 0 auto;
+  }
+  @media (min-width: 600px) {
+    .page-content {
+      grid-template-columns: repeat(2, 1fr);
+   }
+  }
+  @media (min-width: 800px) {
+    .page-content {
+      grid-template-columns: repeat(4, 1fr);
+   }
+  }
+  .card25 {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    overflow: hidden;
+    padding: 1vw;
+    margin:2vw auto;
+    width: 18vw;
+    height: 25vw !important;
+    border-radius: 1vw;
+    text-align: center;
+    color: rgb(255, 255, 255);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
+  }
+  @media (min-width: 600px) {
+    .card25 {
+      height: 350px;
+   }
+  }
+  .card25:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 110%;
+    background-size: cover;
+    background-position: 0 0;
+    transition: transform calc(var(--d) * 1.5) var(--e);
+    pointer-events: none;
+  }
+  .card25:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 200%;
+    pointer-events: none;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.259) 53.1%, rgba(0, 0, 0, 0.320) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.540) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.790) 100%);
+    transform: translateY(-50%);
+    transition: transform calc(var(--d) * 2) var(--e);
+  }
+  .card25:before {
+    background-image: url(https://image.winudf.com/v2/image1/Y29tLmZyZXNoZW52aXJvbm1lbnQuY29vbHdhbGxwYXBlcnNoZF9zY3JlZW5fMF8xNTk4OTcwMDU3XzA3MQ/screen-0.jpg?fakeurl=1&type=.webp);
+  
+  }
+  .contet {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 1vw;
+    transition: transform var(--d) var(--e);
+    z-index: 1;
+  }
+  
+  .MyName25 {
+    font-size: 1.3vw;
+    font-weight: bold;
+    line-height: 1.2;
+  }
+  .Info25 {
+    margin: 2vw;
+    font-size: 1.125vw;
+    font-style: italic;
+    line-height: 1.35;
+    color: #fcfffa;
+  }
+  .connent{
+   display: flex;
+  }
+  .bttn {
+    cursor: pointer;
+    margin: 1.3vw 0.3vw;
+    filter: grayscale(1);
+    border: none;
+  }
+  .bttn:hover {
+    filter: grayscale(0);
+    transition: all 0.5s;
+  }
+  
+  @media (hover: hover) and (min-width: 600px) {
+    .card25:after {
+      transform: translateY(0);
+   }
+    .contet {
+      transform: translateY(calc(100% - 4.5rem));
+   }
+    .contet > *:not(.MyName25) {
+      opacity: 0;
+      transform: translateY(1rem);
+      transition: transform var(--d) var(--e), opacity var(--d) var(--e);
+   }
+    .card25:hover, .card25:focus-within {
+      align-items: center;
+   }
+    .card25:hover:before, .card25:focus-within:before {
+      transform: translateY(-4%);
+      filter: blur(8px);
+      transition: all 0.7s;
+   }
+    .card25:hover:after, .card25:focus-within:after {
+      transform: translateY(-50%);
+   }
+    .card25:hover .contet, .card25:focus-within .contet {
+      transform: translateY(0);
+   }
+    .card25:hover .contet > *:not(.MyName25), .card25:focus-within .contet > *:not(.MyName25) {
+      opacity: 1;
+      transform: translateY(0);
+      transition-delay: calc(var(--d) / 8);
+   }
+    .card25:focus-within:before, .card25:focus-within:after, .card25:focus-within .contet, .card25:focus-within .contet > *:not(.MyName25) {
+      transition-duration: 0s;
+   }
+  }
+  
\ No newline at end of file
diff --git a/index.html b/index.html
index 23e84fc..e805d52 100644
--- a/index.html
+++ b/index.html
@@ -909,6 +909,38 @@ <h2>AseanK</h2><br>
                 </div>
               </div>
               <!-----------------------------End  UI-23-------------------------->
+              <!-----------------------------Start  UI-25-------------------------->
+              <div class="wrapper">
+                <h1 class="effect-title">24. UI-24 by <em>Shivesh Nandan</em></h1>
+                <div class="containerr">
+                  <div class="card25">
+                    <div class="contet">
+                      <h1 class="MyName16">Shivesh Nandan</h1>
+                      <p class="Info25">
+                        Hello everyone, I am a full stack Web Developer
+                      </p>
+                      <div class="connent">
+                        <a href="https://www.instagram.com/shivesh_nandan/" target="_blank" class="bttn"><img src="https://img.icons8.com/color/48/000000/instagram-new.png" /></a>
+                        <a href="https://www.linkedin.com/in/shivesh-nandan-39a1b219a/" target="_blank" class="bttn"><img src="https://img.icons8.com/color/48/000000/linkedin.png" /></a>
+                        <a href="https://github.com/ShiveshNandan" target="_blank" class="bttn"><img src="https://img.icons8.com/color/48/000000/github--v1.png" /></a>
+                        
+                        
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="effect-code">
+                    <a href="https://github.com/ShiveshNandan/CardUI-Hacktober22"><button class="cta">
+                            <span>Source Code</span>
+                            <svg viewBox="0 0 13 10" height="10px" width="15px">
+                                <path d="M1,5 L11,5"></path>
+                                <polyline points="8 1 12 5 8 9"></polyline>
+                            </svg>
+                        </button></a>
+                </div>
+              </div>
+              <!-- ends ui 25 -->
+
 
             <div id="contribute">
                 <h2 id="Merriweather" style="color: unset;">Want to Contribute?</h2>