Card CSS (NEW)

about1.css

@@ -0,0 +1,188 @@
+/* @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro');
+*{
+    margin:0;
+    padding: 0;
+    font-family: poppins;
+    color: #fff;
+}
+.body {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    min-height: 100vh;
+    background: black;
+  }
+
+  .container{
+    height: 470px;
+    width: 250px;
+    border: 2px solid;
+    border-left-color: #0cf;
+    border-right-color: #0cf;
+    border-top-color: #ec45f2;
+    border-bottom-color: #ec45f2;
+    border: 25px;
+    display: flex;
+    justify-content: space-around;
+    align-content: center;
+
+  }
+  .container .img-section{
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(#0cf,#ec45f2,#0cf,#ec45f2);
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    position:absolute;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: .6s ease;
+  }
+  .container:hover .img-section{
+    top: 20%;
+    height: 200px;
+    width: 200px;
+  }
+  .img{
+    height: 25%;
+    width: 25%;
+    border-radius: 50%;
+    background:black;
+  }
+
+  .text-content{
+    text-align: center;
+    color:#fff;
+    font-weight: 500;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    top: 40%;
+  }
+
+  .text-content span:nth-child(1){
+    letter-spacing: 1px;
+    font-size: 32px;
+  }
+
+  .text-content span:nth-child(2){
+    letter-spacing: 1px;
+    font-size: 18px;
+  }
+
+  .text-content p{
+    font-size: 13px;
+    max-width: 300px;
+    margin-bottom: 10px;
+  }
+
+  .btn{
+    height: 35px;
+    width: 100px;
+    font-size: 15px;
+    background:#222;
+    color: #0cf;
+    border: 2px solid #0cf;
+    cursor: pointer;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    transition: 0.5s;
+  }
+
+  .btn:hover{
+    background: #0cf;
+    color:#222;
+    box-shadow:0 0 10px #0cf;
+  }
+
+  .social-media{
+    cursor:pointer;
+    height:40px;
+    width: 40px;
+    border: 2px solid #0cf;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    color: #0cf;
+    margin-left: 20px;
+    transition:0.4s;
+  }
+
+  .social-media i:hover{
+    box-shadow: 0 0 10px #0cf;
+    color: #222;
+    background: #0cf;
+  } */
+
+  body {
+    background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    font-family: Arial, sans-serif;
+  }
+  .profile-card {
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+    padding: 2rem 1.5rem;
+    text-align: center;
+    width: 320px;
+    transition: transform 0.3s;
+  }
+  .profile-card:hover {
+    transform: translateY(-10px) scale(1.03);
+    box-shadow: 0 16px 32px rgba(0,0,0,0.18);
+  }
+  .profile-image img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.10);
+    margin-bottom: 1rem;
+  }
+  .profile-card h2 {
+    margin: 0.5rem 0 0.25rem;
+  }
+  .profile-card .title {
+    color: #888;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+  }
+  .profile-card p {
+    margin: 0.25rem 0;
+  }
+  .social-links {
+    margin: 1rem 0;
+  }
+  .social-links a {
+    color: #555;
+    margin: 0 0.5rem;
+    font-size: 1.2rem;
+    transition: color 0.2s;
+  }
+  .social-links a:hover {
+    color: #0077b5;
+  }
+  .profile-card button {
+    background: #0077b5;
+    color: #fff;
+    border: none;
+    padding: 0.6rem 1.5rem;
+    border-radius: 24px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background 0.2s;
+  }
+  .profile-card button:hover {
+    background: #005983;
+  }