WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neumorphic Profile Card</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="profile-card"> <div class="profile-image"> <img src="https://i.ibb.co/1f5RVjVt/764fdbe2-f549-4a55-bb87-c0396839183f.jpg" alt="764fdbe2-f549-4a55-bb87-c0396839183f" border="0"></a> </div> <div class="profile-info"> <h2 id="name">John Doe</h2> <p id="title">Software Developer</p> <div class="social-links"> <a href="#" class="social-link" id="github">GitHub</a> <a href="#" class="social-link" id="linkedin">LinkedIn</a> </div> <button id="contact-btn">Contact Me</button> </div> </div> <script src="script.js"></script> </body> </html>
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #e0e0e0; font-family: Arial, sans-serif; } .profile-card { width: 300px; border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; padding: 30px; text-align: center; transition: all 0.3s ease; } .profile-card:hover { box-shadow: 10px 10px 30px #bebebe, -10px -10px 30px #ffffff; } .profile-image { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 20px; overflow: hidden; box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; } .profile-image img { width: 100%; height: 100%; object-fit: cover; } .profile-info h2 { margin: 10px 0; color: #333; } .profile-info p { color: #666; margin-bottom: 20px; } .social-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; } .social-link { text-decoration: none; color: #333; padding: 8px 15px; border-radius: 20px; background: #e0e0e0; box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; transition: all 0.3s ease; } .social-link:hover { box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; } #contact-btn { padding: 10px 20px; border: none; border-radius: 25px; background: #e0e0e0; color: #333; box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; cursor: pointer; transition: all 0.3s ease; } #contact-btn:hover { box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; }
document.addEventListener('DOMContentLoaded', () => { const contactBtn = document.getElementById('contact-btn'); const githubLink = document.getElementById('github'); const linkedinLink = document.getElementById('linkedin'); contactBtn.addEventListener('click', () => { alert('Contact information coming soon!'); }); githubLink.addEventListener('click', (e) => { e.preventDefault(); window.open('https://github.com/yourusername', '_blank'); }); linkedinLink.addEventListener('click', (e) => { e.preventDefault(); window.open('https://linkedin.com/in/yourusername', '_blank'); }); });
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neumorphic Profile Card</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="profile-card"> <div class="profile-image"> <img src="https://i.ibb.co/1f5RVjVt/764fdbe2-f549-4a55-bb87-c0396839183f.jpg" alt="764fdbe2-f549-4a55-bb87-c0396839183f" border="0"></a> </div> <div class="profile-info"> <h2 id="name">John Doe</h2> <p id="title">Software Developer</p> <div class="social-links"> <a href="#" class="social-link" id="github">GitHub</a> <a href="#" class="social-link" id="linkedin">LinkedIn</a> </div> <button id="contact-btn">Contact Me</button> </div> </div> <script src="script.js"></script> </body> </html>
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #e0e0e0; font-family: Arial, sans-serif; } .profile-card { width: 300px; border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; padding: 30px; text-align: center; transition: all 0.3s ease; } .profile-card:hover { box-shadow: 10px 10px 30px #bebebe, -10px -10px 30px #ffffff; } .profile-image { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto 20px; overflow: hidden; box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; } .profile-image img { width: 100%; height: 100%; object-fit: cover; } .profile-info h2 { margin: 10px 0; color: #333; } .profile-info p { color: #666; margin-bottom: 20px; } .social-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; } .social-link { text-decoration: none; color: #333; padding: 8px 15px; border-radius: 20px; background: #e0e0e0; box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; transition: all 0.3s ease; } .social-link:hover { box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; } #contact-btn { padding: 10px 20px; border: none; border-radius: 25px; background: #e0e0e0; color: #333; box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; cursor: pointer; transition: all 0.3s ease; } #contact-btn:hover { box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff; }
document.addEventListener('DOMContentLoaded', () => { const contactBtn = document.getElementById('contact-btn'); const githubLink = document.getElementById('github'); const linkedinLink = document.getElementById('linkedin'); contactBtn.addEventListener('click', () => { alert('Contact information coming soon!'); }); githubLink.addEventListener('click', (e) => { e.preventDefault(); window.open('https://github.com/yourusername', '_blank'); }); linkedinLink.addEventListener('click', (e) => { e.preventDefault(); window.open('https://linkedin.com/in/yourusername', '_blank'); }); });