WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सूचना प्रोफ़ाइल
2290
Andev.web
संपादक में खोलें
Video
अपना कोड प्रकाशित करें
2
अनुशंसित
10 September 2024
स्पलैश्ड टोस्ट अधिसूचनाएँ
22 August 2025
CSS ब्लॉब अधिसूचना एनीमेशन
21 September 2024
सत्यापन के साथ प्रोफ़ाइल डेटा जोड़ने के लिए जोड़ें बटन खोलें
HTML
Copy
Andev Web
CSS
Copy
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #212121; font-family: 'Poppins', sans-serif; } /*Andev Web*/ .card { width: 280px; height: 280px; background: white; border-radius: 32px; padding: 3px; position: relative; box-shadow: #604b4a30 0px 70px 30px -50px; transition: all 0.5s ease-in-out; } .card .mail { position: absolute; right: 2rem; top: 1.4rem; background: transparent; border: none; } .card .mail svg { stroke: #fbb9b6; stroke-width: 3px; } .card .mail svg:hover { stroke: #f55d56; } .card .profile-pic { position: absolute; width: calc(100% - 6px); height: calc(100% - 6px); top: 3px; left: 3px; border-radius: 29px; z-index: 1; border: 0px solid #fbb9b6; overflow: hidden; transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s; } .card .profile-pic img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; -o-object-position: 0px 0px; object-position: 0px 0px; transition: all 0.5s ease-in-out 0s; } .card .profile-pic svg { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 0px 0px; object-position: 0px 0px; transform-origin: 45% 20%; transition: all 0.5s ease-in-out 0s; } .card .bottom { position: absolute; bottom: 3px; left: 3px; right: 3px; background: #fbb9b6; top: 80%; border-radius: 29px; z-index: 2; box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset; overflow: hidden; transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; } .card .bottom .content { position: absolute; bottom: 0; left: 1.5rem; right: 1.5rem; height: 160px; } .card .bottom .content .name { display: block; font-size: 1.2rem; color: white; font-weight: bold; } .card .bottom .content .about-me { display: block; font-size: 0.9rem; color: white; margin-top: 1rem; } .card .bottom .bottom-bottom { position: absolute; bottom: 1rem; left: 1.5rem; right: 1.5rem; display: flex; align-items: center; justify-content: space-between; } .card .bottom .bottom-bottom .social-links-container { display: flex; gap: 1rem; } .card .bottom .bottom-bottom .social-links-container svg { height: 20px; fill: white; filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333)); } .card .bottom .bottom-bottom .social-links-container svg:hover { fill: #f55d56; transform: scale(1.2); } .card .bottom .bottom-bottom .button { background: white; color: #fbb9b6; border: none; border-radius: 20px; font-size: 0.6rem; padding: 0.4rem 0.6rem; box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px; } .card .bottom .bottom-bottom .button:hover { background: #f55d56; color: white; } .card:hover { border-top-left-radius: 55px; } .card:hover .bottom { top: 20%; border-radius: 80px 29px 29px 29px; transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s; } .card:hover .profile-pic { width: 100px; height: 100px; aspect-ratio: 1; top: 10px; left: 10px; border-radius: 50%; z-index: 3; border: 7px solid #fbb9b6; box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px; transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s; } .card:hover .profile-pic:hover { transform: scale(1.3); border-radius: 0px; } .card:hover .profile-pic img { transform: scale(2.5); -o-object-position: 0px 25px; object-position: 0px 25px; transition: all 0.5s ease-in-out 0.5s; } .card:hover .profile-pic svg { transform: scale(2.5); transition: all 0.5s ease-in-out 0.5s; }
JS
Copy