Profile cards are essential elements in modern web design, offering a snapshot of user information in a visually appealing format. They serve as a quick reference point, enhancing user experience and engagement.
In this article, we will explore 10 exemplary profile card designs that stand out for their creativity and functionality. These examples will inspire you to create stunning profile cards for your own projects.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your profile card designs with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect UI every time, making it a favorite among professionals.
Ready to create stunning designs effortlessly? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design stunning UIs with ease. Whether you're crafting a profile card or a complete interface, Subframe's drag-and-drop editor ensures efficiency and pixel-perfect results.
Ready to elevate your designs? Start for free and begin creating immediately!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); :root { --primary: #4a6cf7; --secondary: #8394ff; --accent: #ff6b6b; --dark: #2d3748; --light: #f7fafc; --gray: #a0aec0; --gray-light: #e2e8f0; --success: #48bb78; --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --card-radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #f5f7ff; display: flex; justify-content: center; align-items: center; min-height: 700px; color: var(--dark); overflow-x: hidden; padding: 20px; } .container { width: 100%; max-width: 600px; padding: 20px; } .search-container { margin-bottom: 30px; position: relative; } .search-input { width: 100%; padding: 15px 20px; padding-left: 45px; border: none; border-radius: 12px; background-color: white; box-shadow: var(--card-shadow); font-size: 16px; transition: all 0.3s ease; } .search-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.3); } .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray); } .network-stats { display: flex; justify-content: space-between; margin-bottom: 30px; } .stat-card { background: white; border-radius: 12px; padding: 15px; min-width: 100px; box-shadow: var(--card-shadow); text-align: center; transition: transform 0.3s ease; } .stat-card:hover { transform: translateY(-5px); } .stat-number { font-weight: 700; font-size: 24px; color: var(--primary); margin-bottom: 5px; } .stat-label { font-size: 14px; color: var(--gray); } .profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .profile-card { background: white; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); transition: all 0.3s ease; position: relative; } .profile-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .card-header { position: relative; height: 80px; background: linear-gradient(135deg, var(--primary), var(--secondary)); } .card-header.designer { background: linear-gradient(135deg, #6b46c1, #805ad5); } .card-header.developer { background: linear-gradient(135deg, #2b6cb0, #4299e1); } .card-header.marketing { background: linear-gradient(135deg, #dd6b20, #ed8936); } .profile-status { position: absolute; top: 15px; right: 15px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--success); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); } .offline { background-color: var(--gray); } .avatar-container { position: absolute; left: 50%; transform: translateX(-50%); bottom: -40px; width: 80px; height: 80px; border-radius: 50%; background: white; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 2; } .avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid white; transition: transform 0.3s ease; } .profile-card:hover .avatar { transform: scale(1.1); } .profile-content { padding: 50px 20px 20px; text-align: center; } .profile-name { font-weight: 600; font-size: 18px; margin-bottom: 5px; } .profile-role { color: var(--gray); font-size: 14px; margin-bottom: 15px; } .profile-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 15px; } .tag { background-color: var(--gray-light); color: var(--dark); font-size: 12px; padding: 4px 10px; border-radius: 12px; } .mutual-connections { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; } .connection-avatars { display: flex; margin-right: 10px; } .connection-avatar { width: 24px; height: 24px; border-radius: 50%; border: 2px solid white; object-fit: cover; margin-left: -8px; } .connection-avatar:first-child { margin-left: 0; } .connection-text { font-size: 13px; color: var(--gray); } .profile-actions { display: flex; justify-content: space-between; margin-top: 20px; } .action-button { padding: 8px 0; flex-grow: 1; border: none; background: none; cursor: pointer; color: var(--dark); font-weight: 500; font-size: 14px; border-radius: 8px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .action-button:hover { background-color: var(--gray-light); } .action-button.primary { background-color: var(--primary); color: white; margin-right: 10px; flex-grow: 2; } .action-button.primary:hover { background-color: var(--secondary); } .social-drawer { height: 0; overflow: hidden; transition: height 0.3s ease; background-color: var(--gray-light); border-radius: 0 0 var(--card-radius) var(--card-radius); } .social-drawer.open { height: 60px; } .social-links { display: flex; justify-content: space-around; padding: 15px; } .social-link { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: white; background-color: var(--dark); text-decoration: none; transition: transform 0.3s ease, background-color 0.3s ease; } .social-link:hover { transform: translateY(-3px); } .social-link.linkedin { background-color: #0077b5; } .social-link.twitter { background-color: #1da1f2; } .social-link.github { background-color: #333; } .social-link.dribbble { background-color: #ea4c89; } .profile-badge { position: absolute; top: 85px; right: 20px; background: var(--accent); color: white; font-size: 11px; padding: 3px 8px; border-radius: 10px; font-weight: 500; box-shadow: 0 2px 5px rgba(0,0,0,0.1); opacity: 0; transform: translateY(10px); transition: all 0.3s ease; } .profile-card:hover .profile-badge { opacity: 1; transform: translateY(0); } .message-indicator { position: absolute; top: 15px; left: 15px; width: 20px; height: 20px; border-radius: 50%; background-color: white; color: var(--primary); display: flex; justify-content: center; align-items: center; font-size: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); opacity: 0; transform: scale(0); transition: all 0.3s ease; } .has-messages .message-indicator { opacity: 1; transform: scale(1); } @media (max-width: 600px) { .network-stats { flex-wrap: wrap; gap: 10px; } .stat-card { flex: 1 0 calc(50% - 10px); } .profile-grid { grid-template-columns: 1fr; } } /* Pulse animation for online status */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(72, 187, 120, 0); } 100% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); } } .profile-status:not(.offline) { animation: pulse 2s infinite; } /* Loading indicator */ .loader { width: 48px; height: 48px; border: 5px solid var(--gray-light); border-bottom-color: var(--primary); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="search-container"> <input type="text" class="search-input" placeholder="Search professionals by skill or name..." id="searchInput"> <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="network-stats"> <div class="stat-card"> <div class="stat-number">342</div> <div class="stat-label">Connections</div> </div> <div class="stat-card"> <div class="stat-number">28</div> <div class="stat-label">Pending</div> </div> <div class="stat-card"> <div class="stat-number">56</div> <div class="stat-label">Groups</div> </div> </div> <span class="loader" id="loader"></span> <div class="profile-grid" id="profileGrid"> <!-- Profile Card 1 --> <div class="profile-card has-messages" data-skills="ux design,product design,figma"> <div class="card-header designer"> <div class="profile-status"></div> <div class="message-indicator">2</div> </div> <div class="avatar-container"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" alt="Sofia Chen" class="avatar"> </div> <div class="profile-content"> <h3 class="profile-name">Sofia Chen</h3> <p class="profile-role">Senior UX Designer at Dropbox</p> <div class="profile-tags"> <span class="tag">UX Design</span> <span class="tag">Figma</span> <span class="tag">Research</span> </div> <div class="mutual-connections"> <div class="connection-avatars"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" class="connection-avatar"> <img src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" class="connection-avatar"> </div> <span class="connection-text">2 mutual connections</span> </div> <div class="profile-actions"> <button class="action-button primary" onclick="showAction('message')"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> Message </button> <button class="action-button toggle-social" onclick="toggleSocial(this)"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="2"></circle> <circle cx="19" cy="12" r="2"></circle> <circle cx="5" cy="12" r="2"></circle> </svg> </button> </div> </div> <div class="social-drawer"> <div class="social-links"> <a href="#" class="social-link linkedin"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path> <rect x="2" y="9" width="4" height="12"></rect> <circle cx="4" cy="4" r="2"></circle> </svg> </a> <a href="#" class="social-link dribbble"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <circle cx="12" cy="12" r="10"></circle> <path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"></path> </svg> </a> <a href="#" class="social-link twitter"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </a> </div> </div> <div class="profile-badge">Top Designer</div> </div> <!-- Profile Card 2 --> <div class="profile-card" data-skills="javascript,react,frontend,node"> <div class="card-header developer"> <div class="profile-status"></div> </div> <div class="avatar-container"> <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" alt="Marcus Kim" class="avatar"> </div> <div class="profile-content"> <h3 class="profile-name">Marcus Kim</h3> <p class="profile-role">Frontend Engineer at Stripe</p> <div class="profile-tags"> <span class="tag">React</span> <span class="tag">TypeScript</span> <span class="tag">GraphQL</span> </div> <div class="mutual-connections"> <div class="connection-avatars"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" class="connection-avatar"> <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" class="connection-avatar"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" class="connection-avatar"> </div> <span class="connection-text">3 mutual connections</span> </div> <div class="profile-actions"> <button class="action-button primary" onclick="showAction('message')"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> Message </button> <button class="action-button toggle-social" onclick="toggleSocial(this)"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="2"></circle> <circle cx="19" cy="12" r="2"></circle> <circle cx="5" cy="12" r="2"></circle> </svg> </button> </div> </div> <div class="social-drawer"> <div class="social-links"> <a href="#" class="social-link linkedin"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path> <rect x="2" y="9" width="4" height="12"></rect> <circle cx="4" cy="4" r="2"></circle> </svg> </a> <a href="#" class="social-link github"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path> </svg> </a> <a href="#" class="social-link twitter"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </a> </div> </div> <div class="profile-badge">Open to Work</div> </div> <!-- Profile Card 3 --> <div class="profile-card has-messages" data-skills="marketing,branding,content"> <div class="card-header marketing"> <div class="profile-status offline"></div> <div class="message-indicator">1</div> </div> <div class="avatar-container"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" alt="Amara Johnson" class="avatar"> </div> <div class="profile-content"> <h3 class="profile-name">Amara Johnson</h3> <p class="profile-role">Marketing Lead at Shopify</p> <div class="profile-tags"> <span class="tag">Content</span> <span class="tag">Growth</span> <span class="tag">Email</span> </div> <div class="mutual-connections"> <div class="connection-avatars"> <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=256&q=80" class="connection-avatar"> </div> <span class="connection-text">1 mutual connection</span> </div> <div class="profile-actions"> <button class="action-button primary" onclick="showAction('message')"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px"> <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path> <polyline points="22,6 12,13 2,6"></polyline> </svg> Message </button> <button class="action-button toggle-social" onclick="toggleSocial(this)"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="2"></circle> <circle cx="19" cy="12" r="2"></circle> <circle cx="5" cy="12" r="2"></circle> </svg> </button> </div> </div> <div class="social-drawer"> <div class="social-links"> <a href="#" class="social-link linkedin"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path> <rect x="2" y="9" width="4" height="12"></rect> <circle cx="4" cy="4" r="2"></circle> </svg> </a> <a href="#" class="social-link twitter"> <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </a> </div> </div> <div class="profile-badge">Trending</div> </div> </div> </div> <script> // Toggle social drawer function toggleSocial(button) { const card = button.closest('.profile-card'); const drawer = card.querySelector('.social-drawer'); if (drawer.classList.contains('open')) { drawer.classList.remove('open'); } else { // Close all other drawers first document.querySelectorAll('.social-drawer.open').forEach(openDrawer => { if (openDrawer !== drawer) { openDrawer.classList.remove('open'); } }); drawer.classList.add('open'); } } // Show action feedback function showAction(action) { // For messaging, we'll show a success toast if (action === 'message') { const toast = document.createElement('div'); toast.style.position = 'fixed'; toast.style.bottom = '20px'; toast.style.left = '50%'; toast.style.transform = 'translateX(-50%)'; toast.style.background = 'var(--dark)'; toast.style.color = 'white'; toast.style.padding = '10px 20px'; toast.style.borderRadius = '8px'; toast.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'; toast.style.zIndex = '1000'; toast.style.transition = 'all 0.3s ease'; toast.style.opacity = '0'; toast.style.transform = 'translate(-50%, 20px)'; toast.textContent = 'Message window opened!'; document.body.appendChild(toast); // Trigger animation setTimeout(() => { toast.style.opacity = '1'; toast.style.transform = 'translate(-50%, 0)'; }, 10); // Remove after delay setTimeout(() => { toast.style.opacity = '0'; toast.style.transform = 'translate(-50%, 20px)'; setTimeout(() => { document.body.removeChild(toast); }, 300); }, 3000); } } // Search functionality const searchInput = document.getElementById('searchInput'); const profileGrid = document.getElementById('profileGrid'); const loader = document.getElementById('loader'); searchInput.addEventListener('input', performSearch); function performSearch() { const query = searchInput.value.toLowerCase().trim(); if (query.length < 2) { // Show all profiles if search query is too short document.querySelectorAll('.profile-card').forEach(card => { card.style.display = 'block'; }); return; } // Show loader loader.style.display = 'block'; profileGrid.style.opacity = '0.5'; // Simulate server request with timeout setTimeout(() => { document.querySelectorAll('.profile-card').forEach(card => { const name = card.querySelector('.profile-name').textContent.toLowerCase(); const role = card.querySelector('.profile-role').textContent.toLowerCase(); const skills = card.getAttribute('data-skills') || ''; const tags = Array.from(card.querySelectorAll('.tag')).map(tag => tag.textContent.toLowerCase()); // Check if the query matches any of the profile data if (name.includes(query) || role.includes(query) || skills.includes(query) || tags.some(tag => tag.includes(query))) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); // Hide loader loader.style.display = 'none'; profileGrid.style.opacity = '1'; }, 500); } // Add hover effects to stat cards document.querySelectorAll('.stat-card').forEach(card => { card.addEventListener('mouseenter', () => { card.querySelector('.stat-number').style.transform = 'scale(1.1)'; card.querySelector('.stat-number').style.transition = 'transform 0.3s ease'; }); card.addEventListener('mouseleave', () => { card.querySelector('.stat-number').style.transform = 'scale(1)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corporate Team Profile Cards</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root { --primary: #1a3a5f; --secondary: #3e6ba0; --accent: #f0a04b; --light: #f7f9fb; --dark: #2c3e50; --success: #28a745; --gray: #6c757d; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: #f7f9fb; color: var(--dark); display: flex; justify-content: center; align-items: center; min-height: 700px; position: relative; overflow-x: hidden; } .container { width: 100%; max-width: 680px; padding: 20px; margin: 0 auto; } .team-header { text-align: center; margin-bottom: 30px; position: relative; } .team-header h1 { font-size: 2.5rem; margin-bottom: 10px; color: var(--primary); position: relative; display: inline-block; } .team-header h1::after { content: ''; position: absolute; width: 60%; height: 3px; background-color: var(--accent); bottom: -5px; left: 50%; transform: translateX(-50%); transition: width 0.3s ease; } .team-header h1:hover::after { width: 100%; } .team-header p { font-size: 1rem; color: var(--gray); max-width: 600px; margin: 0 auto; } .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-top: 20px; } .team-card { background: white; border-radius: 12px; overflow: hidden; position: relative; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; height: 100%; transform-style: preserve-3d; perspective: 1000px; } .team-card:hover { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); transform: translateY(-5px); } .team-card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .team-card:hover:before { transform: scaleX(1); } .card-header { position: relative; padding-top: 20px; z-index: 1; text-align: center; } .profile-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; margin: 0 auto; display: block; position: relative; z-index: 2; } .team-card:hover .profile-img { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .card-body { padding: 20px; flex-grow: 1; position: relative; z-index: 1; } .name { font-size: 1.25rem; font-weight: 600; margin-bottom: 5px; color: var(--primary); text-align: center; } .position { font-size: 0.9rem; color: var(--secondary); font-weight: 500; margin-bottom: 15px; text-align: center; position: relative; display: inline-block; left: 50%; transform: translateX(-50%); } .position::after { content: ''; position: absolute; width: 30px; height: 2px; background-color: var(--accent); bottom: -5px; left: 50%; transform: translateX(-50%); transition: width 0.3s ease; } .team-card:hover .position::after { width: 50px; } .bio { font-size: 0.85rem; line-height: 1.5; color: var(--gray); margin-bottom: 15px; text-align: center; } .expertise { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-bottom: 15px; } .expertise span { background-color: rgba(62, 107, 160, 0.1); color: var(--secondary); padding: 4px 10px; border-radius: 30px; font-size: 0.7rem; font-weight: 500; transition: all 0.3s ease; } .expertise span:hover { background-color: var(--secondary); color: white; transform: scale(1.05); } .social-links { display: flex; justify-content: center; gap: 12px; margin-top: auto; } .social-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--light); color: var(--dark); transition: all 0.3s ease; text-decoration: none; position: relative; overflow: hidden; } .social-icon:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--accent); transform: scale(0); transition: transform 0.3s ease; border-radius: 50%; z-index: -1; } .social-icon:hover:before { transform: scale(1); } .social-icon:hover { color: white; transform: translateY(-3px); } .social-icon i { font-size: 1rem; transition: all 0.3s ease; } .pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(var(--secondary) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.05; z-index: 0; } .card-shape { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(45deg, var(--secondary), var(--primary)); top: -75px; right: -75px; opacity: 0.1; transition: all 0.5s ease; } .team-card:hover .card-shape { transform: scale(1.2) rotate(45deg); } .filter-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 25px; flex-wrap: wrap; } .filter-btn { background: none; border: 1px solid var(--secondary); color: var(--secondary); padding: 8px 15px; border-radius: 30px; cursor: pointer; font-size: 0.85rem; transition: all 0.3s ease; font-weight: 500; outline: none; } .filter-btn:hover, .filter-btn.active { background-color: var(--secondary); color: white; } .card-footer { padding: 15px; border-top: 1px solid rgba(0, 0, 0, 0.05); display: flex; justify-content: space-between; align-items: center; } .contact-btn { padding: 6px 12px; background-color: var(--primary); color: white; border: none; border-radius: 4px; font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .contact-btn:hover { background-color: var(--secondary); transform: translateY(-2px); } .availability { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--dark); } .availability .status { width: 8px; height: 8px; border-radius: 50%; background-color: var(--success); } @media (max-width: 768px) { .team-grid { grid-template-columns: 1fr; } .container { padding: 15px; } .team-header h1 { font-size: 2rem; } } @media (max-width: 480px) { .filter-bar { flex-direction: column; align-items: center; } .filter-btn { width: 100%; text-align: center; } } /* Loading animation */ .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.9); z-index: 1000; opacity: 1; transition: opacity 0.5s ease, visibility 0.5s ease; } .loading.hidden { opacity: 0; visibility: hidden; } .loading-spinner { width: 50px; height: 50px; border: 5px solid var(--light); border-top: 5px solid var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .team-card { animation: fadeIn 0.5s ease forwards; opacity: 0; } .team-card:nth-child(1) { animation-delay: 0.1s; } .team-card:nth-child(2) { animation-delay: 0.2s; } .team-card:nth-child(3) { animation-delay: 0.3s; } .team-card:nth-child(4) { animation-delay: 0.4s; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 12px; } .flip-card-back { transform: rotateY(180deg); background-color: var(--primary); color: white; display: flex; flex-direction: column; padding: 20px; justify-content: center; align-items: center; } .flip-active .flip-card-inner { transform: rotateY(180deg); } .more-info-btn { background: none; border: none; color: var(--secondary); font-size: 0.8rem; cursor: pointer; padding: 5px; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px; } .more-info-btn:hover { color: var(--accent); } .back-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; color: white; cursor: pointer; transition: all 0.3s ease; z-index: 10; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .back-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); } .back-content h3 { margin-bottom: 15px; font-size: 1.2rem; } .back-content p { margin-bottom: 15px; font-size: 0.9rem; line-height: 1.5; } .achievements { margin-top: 15px; width: 100%; } .achievements h4 { font-size: 1rem; margin-bottom: 10px; text-align: center; } .achievement-item { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.85rem; } .achievement-item i { color: var(--accent); } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="loading"> <div class="loading-spinner"></div> </div> <div class="container"> <div class="team-header"> <h1>Our Leadership Team</h1> <p>Meet the talented individuals driving innovation and excellence across our organization.</p> </div> <div class="filter-bar"> <button class="filter-btn active" data-filter="all">All</button> <button class="filter-btn" data-filter="executive">Executive</button> <button class="filter-btn" data-filter="technology">Technology</button> <button class="filter-btn" data-filter="creative">Creative</button> </div> <div class="team-grid"> <!-- Team Member 1 --> <div class="team-card" data-category="executive"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="pattern"></div> <div class="card-shape"></div> <div class="card-header"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Sarah Johnson" class="profile-img"> </div> <div class="card-body"> <h3 class="name">Sarah Johnson</h3> <p class="position">Chief Executive Officer</p> <p class="bio">Strategic visionary with 15+ years driving sustainable growth and digital transformation across global markets.</p> <div class="expertise"> <span>Strategic Planning</span> <span>Digital Transformation</span> <span>Leadership</span> </div> <div class="social-links"> <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a> <a href="#" class="social-icon"><i class="fas fa-envelope"></i></a> </div> </div> <div class="card-footer"> <div class="availability"> <div class="status"></div> <span>Available for meetings</span> </div> <button class="more-info-btn">More Info <i class="fas fa-chevron-right"></i></button> </div> </div> <div class="flip-card-back"> <button class="back-btn"><i class="fas fa-times"></i></button> <div class="back-content"> <h3>Sarah Johnson's Background</h3> <p>Previously led digital transformation at Fortune 500 companies, resulting in 38% revenue growth and establishment of industry-leading customer experience benchmarks.</p> <div class="achievements"> <h4>Key Achievements</h4> <div class="achievement-item"> <i class="fas fa-trophy"></i> <span>Harvard Business Review Leadership Award 2022</span> </div> <div class="achievement-item"> <i class="fas fa-award"></i> <span>Led successful IPO raising $240M in capital</span> </div> <div class="achievement-item"> <i class="fas fa-star"></i> <span>Pioneered company's sustainability initiative</span> </div> </div> </div> </div> </div> </div> <!-- Team Member 2 --> <div class="team-card" data-category="technology"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="pattern"></div> <div class="card-shape"></div> <div class="card-header"> <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Michael Chen" class="profile-img"> </div> <div class="card-body"> <h3 class="name">Michael Chen</h3> <p class="position">Chief Technology Officer</p> <p class="bio">Innovative tech leader with expertise in AI, cloud architecture, and building scalable systems that drive business results.</p> <div class="expertise"> <span>AI/ML</span> <span>Cloud Architecture</span> <span>Software Engineering</span> </div> <div class="social-links"> <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="social-icon"><i class="fab fa-github"></i></a> <a href="#" class="social-icon"><i class="fas fa-envelope"></i></a> </div> </div> <div class="card-footer"> <div class="availability"> <div class="status"></div> <span>Available for meetings</span> </div> <button class="more-info-btn">More Info <i class="fas fa-chevron-right"></i></button> </div> </div> <div class="flip-card-back"> <button class="back-btn"><i class="fas fa-times"></i></button> <div class="back-content"> <h3>Michael Chen's Background</h3> <p>Pioneered our proprietary machine learning platform that reduced operational costs by 42% while increasing processing capabilities tenfold. Former engineering lead at Google Cloud.</p> <div class="achievements"> <h4>Key Achievements</h4> <div class="achievement-item"> <i class="fas fa-trophy"></i> <span>25 patents in cloud computing and AI</span> </div> <div class="achievement-item"> <i class="fas fa-award"></i> <span>MIT Technology Review 35 Under 35</span> </div> <div class="achievement-item"> <i class="fas fa-star"></i> <span>Led team to successful AWS migration</span> </div> </div> </div> </div> </div> </div> <!-- Team Member 3 --> <div class="team-card" data-category="creative"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="pattern"></div> <div class="card-shape"></div> <div class="card-header"> <img src="https://images.unsplash.com/photo-1573496799652-408c2ac9fe98?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Amelia Rodriguez" class="profile-img"> </div> <div class="card-body"> <h3 class="name">Amelia Rodriguez</h3> <p class="position">Creative Director</p> <p class="bio">Award-winning creative leader who transforms brand narratives through design thinking and innovative storytelling.</p> <div class="expertise"> <span>Brand Strategy</span> <span>UX Design</span> <span>Creative Direction</span> </div> <div class="social-links"> <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="social-icon"><i class="fab fa-behance"></i></a> <a href="#" class="social-icon"><i class="fas fa-envelope"></i></a> </div> </div> <div class="card-footer"> <div class="availability"> <div class="status"></div> <span>Available for meetings</span> </div> <button class="more-info-btn">More Info <i class="fas fa-chevron-right"></i></button> </div> </div> <div class="flip-card-back"> <button class="back-btn"><i class="fas fa-times"></i></button> <div class="back-content"> <h3>Amelia Rodriguez's Background</h3> <p>Former design lead at Apple and IDEO, bringing human-centered design principles to every project. Her rebranding work has generated 62% increase in brand recognition metrics.</p> <div class="achievements"> <h4>Key Achievements</h4> <div class="achievement-item"> <i class="fas fa-trophy"></i> <span>3x Cannes Lions Award Winner</span> </div> <div class="achievement-item"> <i class="fas fa-award"></i> <span>D&AD Black Pencil for our rebrand</span> </div> <div class="achievement-item"> <i class="fas fa-star"></i> <span>Featured in Communication Arts Annual</span> </div> </div> </div> </div> </div> </div> <!-- Team Member 4 --> <div class="team-card" data-category="executive"> <div class="flip-card-inner"> <div class="flip-card-front"> <div class="pattern"></div> <div class="card-shape"></div> <div class="card-header"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="David Wilson" class="profile-img"> </div> <div class="card-body"> <h3 class="name">David Wilson</h3> <p class="position">Chief Financial Officer</p> <p class="bio">Financial strategist with deep expertise in scaling operations, capital management, and driving sustainable growth.</p> <div class="expertise"> <span>Financial Strategy</span> <span>Investment</span> <span>Risk Management</span> </div> <div class="social-links"> <a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a> <a href="#" class="social-icon"><i class="fas fa-envelope"></i></a> </div> </div> <div class="card-footer"> <div class="availability"> <div class="status"></div> <span>Available for meetings</span> </div> <button class="more-info-btn">More Info <i class="fas fa-chevron-right"></i></button> </div> </div> <div class="flip-card-back"> <button class="back-btn"><i class="fas fa-times"></i></button> <div class="back-content"> <h3>David Wilson's Background</h3> <p>Former JP Morgan executive who has secured over $500M in funding and managed successful acquisitions totaling $1.2B in value creation for stakeholders.</p> <div class="achievements"> <h4>Key Achievements</h4> <div class="achievement-item"> <i class="fas fa-trophy"></i> <span>CFO of the Year - Financial Times</span> </div> <div class="achievement-item"> <i class="fas fa-award"></i> <span>Reduced operational costs by 31%</span> </div> <div class="achievement-item"> <i class="fas fa-star"></i> <span>Led 4 successful acquisitions</span> </div> </div> </div> </div> </div> </div> </div> </div> <script> // Loading animation document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { document.querySelector('.loading').classList.add('hidden'); }, 1000); }); // Team card flip functionality const moreInfoButtons = document.querySelectorAll('.more-info-btn'); const backButtons = document.querySelectorAll('.back-btn'); moreInfoButtons.forEach(button => { button.addEventListener('click', function() { const card = this.closest('.team-card'); card.classList.add('flip-active'); }); }); backButtons.forEach(button => { button.addEventListener('click', function() { const card = this.closest('.team-card'); card.classList.remove('flip-active'); }); }); // Filter functionality const filterButtons = document.querySelectorAll('.filter-btn'); const teamCards = document.querySelectorAll('.team-card'); filterButtons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons filterButtons.forEach(btn => btn.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); const filter = this.getAttribute('data-filter'); // Filter cards teamCards.forEach(card => { if (filter === 'all' || card.getAttribute('data-category') === filter) { card.style.display = 'block'; setTimeout(() => { card.style.opacity = '1'; }, 100); } else { card.style.opacity = '0'; setTimeout(() => { card.style.display = 'none'; }, 500); } }); }); }); // Simulate random availability status changes function updateAvailabilityStatus() { const statuses = document.querySelectorAll('.status'); statuses.forEach(status => { const isAvailable = Math.random() > 0.3; status.style.backgroundColor = isAvailable ? 'var(--success)' : 'var(--gray)'; const statusText = status.nextElementSibling; statusText.textContent = isAvailable ? 'Available for meetings' : 'In a meeting'; }); } // Initial availability status updateAvailabilityStatus(); // Update availability status every 30 seconds setInterval(updateAvailabilityStatus, 30000); // Add subtle animation to card elements function addSubtleAnimations() { const cards = document.querySelectorAll('.team-card'); cards.forEach(card => { card.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const angleX = (y - centerY) / 30; const angleY = (centerX - x) / 30; this.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg) translateY(-5px)`; }); card.addEventListener('mouseleave', function() { this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)'; }); }); } // Initialize subtle animations addSubtleAnimations(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Educational Profile Card</title> <style> :root { --primary-color: #4a6fa5; --secondary-color: #6c8ac1; --accent-color: #f7b733; --light-color: #f9f9f9; --dark-color: #333; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --border-radius: 12px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fa; display: flex; justify-content: center; align-items: center; min-height: 700px; overflow: hidden; padding: 20px; } .container { width: 100%; max-width: 650px; margin: 0 auto; } .profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; } .profile-card { background: var(--light-color); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); position: relative; height: 280px; cursor: pointer; } .profile-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } .pattern { position: absolute; top: 0; left: 0; right: 0; height: 80px; background: var(--primary-color); clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); z-index: 1; } .pattern:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(var(--secondary-color) 10%, transparent 10%), radial-gradient(var(--secondary-color) 10%, transparent 10%); background-size: 10px 10px; background-position: 0 0, 5px 5px; opacity: 0.3; } .profile-content { position: relative; z-index: 2; padding: 20px; display: flex; flex-direction: column; height: 100%; } .profile-image { width: 90px; height: 90px; border-radius: 50%; border: 4px solid var(--light-color); object-fit: cover; margin-bottom: 15px; transition: var(--transition); } .profile-card:hover .profile-image { transform: scale(1.05); } .profile-name { color: var(--dark-color); font-size: 1.2rem; font-weight: 600; margin-bottom: 5px; } .profile-title { color: var(--primary-color); font-size: 0.9rem; font-weight: 500; margin-bottom: 10px; } .profile-stats { display: flex; gap: 15px; margin-top: auto; } .stat { display: flex; flex-direction: column; align-items: center; } .stat-number { font-size: 1.2rem; font-weight: 600; color: var(--primary-color); } .stat-label { font-size: 0.75rem; color: #666; } .profile-badge { position: absolute; top: 15px; right: 15px; background: var(--accent-color); color: var(--dark-color); font-size: 0.7rem; font-weight: 600; padding: 4px 8px; border-radius: 20px; z-index: 2; } .expanded-info { background: var(--light-color); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 20px; transform: translateY(100%); transition: var(--transition); z-index: 3; border-radius: var(--border-radius); } .profile-card.expanded .expanded-info { transform: translateY(0); } .close-button { position: absolute; top: 15px; right: 15px; background: var(--primary-color); color: white; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 1rem; transition: var(--transition); } .close-button:hover { background: var(--secondary-color); transform: rotate(90deg); } .expanded-title { font-size: 1.2rem; color: var(--primary-color); font-weight: 600; margin-bottom: 15px; position: relative; padding-bottom: 10px; } .expanded-title:after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background: var(--accent-color); } .achievement { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .achievement-icon { background: var(--primary-color); color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.9rem; } .achievement-text { flex: 1; } .achievement-title { font-size: 0.9rem; font-weight: 500; color: var(--dark-color); } .achievement-desc { font-size: 0.8rem; color: #666; } .contact-button { margin-top: auto; background: var(--primary-color); color: white; border: none; padding: 10px; border-radius: 25px; font-weight: 500; cursor: pointer; transition: var(--transition); } .contact-button:hover { background: var(--secondary-color); transform: scale(1.02); } .highlighted { display: inline-block; position: relative; } .highlighted:after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 5px; background: var(--accent-color); opacity: 0.5; border-radius: 2px; z-index: -1; } .heading { font-size: 1.4rem; font-weight: 600; margin-bottom: 20px; color: var(--dark-color); text-align: center; } .highlight-text { color: var(--primary-color); } .filter-tabs { display: flex; justify-content: center; margin-bottom: 20px; gap: 10px; } .filter-tab { padding: 8px 15px; background: var(--light-color); border: none; border-radius: 20px; cursor: pointer; font-size: 0.9rem; transition: var(--transition); color: var(--dark-color); } .filter-tab.active, .filter-tab:hover { background: var(--primary-color); color: white; } /* Responsive adjustments */ @media (max-width: 600px) { .profile-grid { grid-template-columns: 1fr; } .container { padding: 10px; } .heading { font-size: 1.2rem; } } /* Accessibility adjustments */ @media (prefers-reduced-motion) { .profile-card, .profile-image, .expanded-info, .close-button { transition: none; } } /* High contrast mode */ @media (prefers-contrast: high) { :root { --primary-color: #0056b3; --secondary-color: #003973; --accent-color: #ff9900; } } </style> </head> <body> <div class="container"> <h1 class="heading">Meet our <span class="highlight-text">Distinguished</span> Faculty</h1> <div class="filter-tabs"> <button class="filter-tab active" data-filter="all">All</button> <button class="filter-tab" data-filter="professor">Professors</button> <button class="filter-tab" data-filter="researcher">Researchers</button> </div> <div class="profile-grid"> <div class="profile-card" data-type="professor"> <div class="pattern"></div> <div class="profile-badge">Department Chair</div> <div class="profile-content"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Prof. Elena Chen" class="profile-image"> <h2 class="profile-name">Prof. Elena Chen, Ph.D.</h2> <p class="profile-title">Quantum Computing</p> <div class="profile-stats"> <div class="stat"> <span class="stat-number">24</span> <span class="stat-label">Publications</span> </div> <div class="stat"> <span class="stat-number">18</span> <span class="stat-label">Years</span> </div> <div class="stat"> <span class="stat-number">97%</span> <span class="stat-label">Rating</span> </div> </div> </div> <div class="expanded-info"> <button class="close-button">×</button> <h3 class="expanded-title">Academic Achievements</h3> <div class="achievement"> <div class="achievement-icon">🏆</div> <div class="achievement-text"> <div class="achievement-title">IEEE Quantum Computing Award (2023)</div> <div class="achievement-desc">For groundbreaking research in quantum error correction</div> </div> </div> <div class="achievement"> <div class="achievement-icon">📚</div> <div class="achievement-text"> <div class="achievement-title">Author of "Quantum Computing in Practice"</div> <div class="achievement-desc">Required reading in 42 universities worldwide</div> </div> </div> <div class="achievement"> <div class="achievement-icon">🔬</div> <div class="achievement-text"> <div class="achievement-title">Lead Researcher: Q-Logic Project</div> <div class="achievement-desc">$4.2M NSF-funded quantum computing initiative</div> </div> </div> <button class="contact-button">Schedule Office Hours</button> </div> </div> <div class="profile-card" data-type="researcher"> <div class="pattern"></div> <div class="profile-badge">New Faculty</div> <div class="profile-content"> <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Dr. Marcus Jackson" class="profile-image"> <h2 class="profile-name">Dr. Marcus Jackson</h2> <p class="profile-title">Machine Learning & Ethics</p> <div class="profile-stats"> <div class="stat"> <span class="stat-number">12</span> <span class="stat-label">Publications</span> </div> <div class="stat"> <span class="stat-number">5</span> <span class="stat-label">Years</span> </div> <div class="stat"> <span class="stat-number">94%</span> <span class="stat-label">Rating</span> </div> </div> </div> <div class="expanded-info"> <button class="close-button">×</button> <h3 class="expanded-title">Academic Achievements</h3> <div class="achievement"> <div class="achievement-icon">🏆</div> <div class="achievement-text"> <div class="achievement-title">ACM Distinguished Paper Award (2022)</div> <div class="achievement-desc">For work on bias detection in neural networks</div> </div> </div> <div class="achievement"> <div class="achievement-icon">🌐</div> <div class="achievement-text"> <div class="achievement-title">Ethics in AI Initiative Founder</div> <div class="achievement-desc">Established campus-wide responsible AI practices</div> </div> </div> <div class="achievement"> <div class="achievement-icon">📊</div> <div class="achievement-text"> <div class="achievement-title">Industry Collaboration Lead</div> <div class="achievement-desc">Partnership with TechCorp on ethical ML deployment</div> </div> </div> <button class="contact-button">Schedule Office Hours</button> </div> </div> <div class="profile-card" data-type="professor"> <div class="pattern"></div> <div class="profile-badge">Distinguished</div> <div class="profile-content"> <img src="https://randomuser.me/api/portraits/women/58.jpg" alt="Dr. Amara Patel" class="profile-image"> <h2 class="profile-name">Dr. Amara Patel</h2> <p class="profile-title">Cybersecurity & Networks</p> <div class="profile-stats"> <div class="stat"> <span class="stat-number">31</span> <span class="stat-label">Publications</span> </div> <div class="stat"> <span class="stat-number">14</span> <span class="stat-label">Years</span> </div> <div class="stat"> <span class="stat-number">99%</span> <span class="stat-label">Rating</span> </div> </div> </div> <div class="expanded-info"> <button class="close-button">×</button> <h3 class="expanded-title">Academic Achievements</h3> <div class="achievement"> <div class="achievement-icon">🛡️</div> <div class="achievement-text"> <div class="achievement-title">NIST Security Protocol Contributor</div> <div class="achievement-desc">Co-designed protocol implemented in 200+ institutions</div> </div> </div> <div class="achievement"> <div class="achievement-icon">🔒</div> <div class="achievement-text"> <div class="achievement-title">Zero-Day Defense Framework Creator</div> <div class="achievement-desc">Published methodology cited in 120+ papers</div> </div> </div> <div class="achievement"> <div class="achievement-icon">🏫</div> <div class="achievement-text"> <div class="achievement-title">Cybersecurity Teaching Award (2021)</div> <div class="achievement-desc">For innovative cybersecurity education methods</div> </div> </div> <button class="contact-button">Schedule Office Hours</button> </div> </div> <div class="profile-card" data-type="researcher"> <div class="pattern"></div> <div class="profile-badge">Visiting</div> <div class="profile-content"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Prof. David Kwon" class="profile-image"> <h2 class="profile-name">Prof. David Kwon</h2> <p class="profile-title">Sustainable Computing</p> <div class="profile-stats"> <div class="stat"> <span class="stat-number">16</span> <span class="stat-label">Publications</span> </div> <div class="stat"> <span class="stat-number">7</span> <span class="stat-label">Years</span> </div> <div class="stat"> <span class="stat-number">91%</span> <span class="stat-label">Rating</span> </div> </div> </div> <div class="expanded-info"> <button class="close-button">×</button> <h3 class="expanded-title">Academic Achievements</h3> <div class="achievement"> <div class="achievement-icon">🌱</div> <div class="achievement-text"> <div class="achievement-title">Green Computing Research Grant</div> <div class="achievement-desc">$2.8M for energy-efficient algorithm development</div> </div> </div> <div class="achievement"> <div class="achievement-icon">⚡</div> <div class="achievement-text"> <div class="achievement-title">EcoSystems Data Center Optimization</div> <div class="achievement-desc">Reduced energy consumption by 42% in university systems</div> </div> </div> <div class="achievement"> <div class="achievement-icon">🖥️</div> <div class="achievement-text"> <div class="achievement-title">Sustainable Computing Symposium Chair</div> <div class="achievement-desc">Founded annual conference with 1500+ attendees</div> </div> </div> <button class="contact-button">Schedule Office Hours</button> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Handle profile card expansion const profileCards = document.querySelectorAll('.profile-card'); profileCards.forEach(card => { card.addEventListener('click', function() { // Only expand if we're not clicking the close button if (!event.target.closest('.close-button')) { this.classList.add('expanded'); } }); const closeButton = card.querySelector('.close-button'); closeButton.addEventListener('click', function(event) { event.stopPropagation(); // Prevent the card click event card.classList.remove('expanded'); }); }); // Filtering functionality const filterTabs = document.querySelectorAll('.filter-tab'); filterTabs.forEach(tab => { tab.addEventListener('click', function() { // Update active tab filterTabs.forEach(t => t.classList.remove('active')); this.classList.add('active'); const filterValue = this.getAttribute('data-filter'); // Filter the cards profileCards.forEach(card => { if (filterValue === 'all' || card.getAttribute('data-type') === filterValue) { card.style.display = 'block'; // Add a small animation for appearing cards card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 50); } else { // Fade out before hiding card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.display = 'none'; }, 300); } }); // Re-layout the grid nicely setTimeout(() => { const visibleCards = Array.from(profileCards).filter(card => card.style.display !== 'none'); if (visibleCards.length === 0) { return; } }, 350); }); }); // Contact button click handler (prevent default form submission) const contactButtons = document.querySelectorAll('.contact-button'); contactButtons.forEach(button => { button.addEventListener('click', function(event) { event.preventDefault(); event.stopPropagation(); // Visual feedback without actual form submission this.textContent = 'Request Sent!'; this.style.background = '#4CAF50'; // Reset after 2 seconds setTimeout(() => { this.textContent = 'Schedule Office Hours'; this.style.background = ''; }, 2000); }); }); // Apply smooth transitions for profile cards profileCards.forEach(card => { card.style.transition = 'var(--transition)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dating App Profile Card</title> <style> :root { --primary: #ff5a7e; --secondary: #ff8fab; --tertiary: #ffc2d1; --dark: #2c2c2c; --light: #f8f9fa; --shadow: rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #ffe6e6, #fff5f5); overflow: hidden; padding: 20px; } .container { width: 100%; max-width: 360px; height: 600px; position: relative; perspective: 1000px; } .card { width: 100%; height: 100%; position: relative; border-radius: 20px; box-shadow: 0 15px 35px var(--shadow); overflow: hidden; transform-style: preserve-3d; transition: transform 0.5s ease; } .card.swiped-left { transform: translateX(-150%) rotateZ(-20deg); opacity: 0; } .card.swiped-right { transform: translateX(150%) rotateZ(20deg); opacity: 0; } .profile-image { width: 100%; height: 75%; background-size: cover; background-position: center; position: relative; } .profile-image::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); } .profile-details { position: absolute; bottom: 25%; left: 0; width: 100%; padding: 0 20px; color: var(--light); z-index: 1; } .profile-name { font-size: 28px; font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; } .profile-age { margin-left: 10px; font-weight: 500; } .profile-location { display: flex; align-items: center; font-size: 16px; margin-bottom: 8px; } .location-icon { margin-right: 5px; color: var(--secondary); } .profile-bio { background-color: white; height: 25%; padding: 20px; position: relative; } .bio-text { font-size: 14px; color: var(--dark); margin-bottom: 15px; line-height: 1.5; } .profile-tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { background-color: var(--tertiary); color: var(--dark); padding: 5px 10px; border-radius: 20px; font-size: 12px; display: inline-block; transition: all 0.3s ease; } .tag:hover { background-color: var(--secondary); transform: translateY(-2px); } .action-buttons { position: absolute; bottom: 20px; left: 0; width: 100%; display: flex; justify-content: center; gap: 20px; z-index: 10; } .action-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: white; box-shadow: 0 5px 15px var(--shadow); cursor: pointer; transition: all 0.3s ease; border: none; outline: none; } .action-btn:hover { transform: translateY(-5px); } .action-btn.swipe-left { color: #ff4757; } .action-btn.swipe-right { color: #2ed573; } .action-btn i { font-size: 24px; } .swipe-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.8); padding: 15px 25px; border-radius: 30px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); display: flex; align-items: center; font-size: 16px; opacity: 0; animation: fadeIn 2s ease 1s forwards, fadeOut 1s ease 5s forwards; } .swipe-hint i { margin-right: 8px; color: var(--primary); } .photo-count { position: absolute; top: 20px; right: 20px; display: flex; gap: 5px; } .photo-dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); } .photo-dot.active { background-color: white; width: 10px; height: 10px; } .verified-badge { margin-left: 10px; color: #4dabf7; font-size: 20px; animation: pulse 2s infinite; } .additional-photos { position: absolute; top: 0; left: 0; width: 100%; height: 75%; opacity: 0; transition: opacity 0.4s ease; background-size: cover; background-position: center; } .additional-photos.active { opacity: 1; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .dragging { transition: transform 0.1s ease; } /* Responsive adjustments */ @media (max-width: 400px) { .container { height: 550px; } .profile-name { font-size: 24px; } .bio-text { font-size: 13px; } .tag { font-size: 11px; } .action-btn { width: 50px; height: 50px; } } /* Loading animation */ .loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; } .loading-circle { width: 100%; height: 100%; border: 5px solid var(--tertiary); border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } .new-match { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 90, 126, 0.9); border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.5s ease; } .new-match.visible { opacity: 1; visibility: visible; } .match-title { font-size: 32px; font-weight: 700; margin-bottom: 20px; } .match-hearts { font-size: 50px; margin-bottom: 20px; animation: bounce 1s infinite alternate; } .match-message { font-size: 18px; text-align: center; max-width: 80%; margin-bottom: 30px; } .match-btn { background-color: white; color: var(--primary); border: none; padding: 12px 25px; border-radius: 30px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .match-btn:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes bounce { from { transform: scale(1); } to { transform: scale(1.2); } } .photoChange { position: absolute; top: 50%; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 20px; cursor: pointer; transition: all 0.3s ease; z-index: 5; } .photoChange:hover { background-color: rgba(255, 255, 255, 0.6); } .prev-photo { left: 10px; } .next-photo { right: 10px; } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div class="container"> <div class="loading"> <div class="loading-circle"></div> </div> <div class="card" id="profileCard" style="display: none;"> <div class="profile-image" style="background-image: url('https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80');"> <div class="additional-photos" style="background-image: url('https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-1.2.1&auto=format&fit=crop&w=644&q=80');"></div> <div class="additional-photos" style="background-image: url('https://images.unsplash.com/photo-1545912452-8aea7e25a3d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80');"></div> <div class="profile-details"> <div class="profile-name"> Sarah <span class="profile-age">28</span> <i class="fas fa-check-circle verified-badge"></i> </div> <div class="profile-location"> <i class="fas fa-map-marker-alt location-icon"></i> 2 miles away </div> </div> <div class="photo-count"> <div class="photo-dot active"></div> <div class="photo-dot"></div> <div class="photo-dot"></div> </div> <div class="photoChange prev-photo"> <i class="fas fa-chevron-left"></i> </div> <div class="photoChange next-photo"> <i class="fas fa-chevron-right"></i> </div> </div> <div class="profile-bio"> <p class="bio-text">Coffee enthusiast by morning, concert junkie by night. Secretly hoping my dog approves of you. Let's debate whether pineapple belongs on pizza!</p> <div class="profile-tags"> <span class="tag">Travel</span> <span class="tag">Music</span> <span class="tag">Dogs</span> <span class="tag">Hiking</span> <span class="tag">Photography</span> </div> </div> <div class="swipe-hint"> <i class="fas fa-hand-point-up"></i> Swipe or use buttons below </div> <div class="action-buttons"> <button class="action-btn swipe-left"> <i class="fas fa-times"></i> </button> <button class="action-btn swipe-right"> <i class="fas fa-heart"></i> </button> </div> </div> <div class="new-match" id="matchScreen"> <div class="match-hearts">❤️</div> <div class="match-title">It's a Match!</div> <div class="match-message">Sarah liked you too. Start a conversation now!</div> <button class="match-btn">Send a Message</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Simulate loading setTimeout(() => { document.querySelector('.loading').style.display = 'none'; document.getElementById('profileCard').style.display = 'block'; }, 1500); const card = document.getElementById('profileCard'); const matchScreen = document.getElementById('matchScreen'); const additionalPhotos = document.querySelectorAll('.additional-photos'); const photoDots = document.querySelectorAll('.photo-dot'); let currentPhoto = 0; let startX = 0; let currentX = 0; let isDragging = false; // Photo navigation function showPhoto(index) { // Hide all photos additionalPhotos.forEach(photo => { photo.classList.remove('active'); }); // Update dots photoDots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); // Show selected photo (if not the main one) if (index > 0) { additionalPhotos[index - 1].classList.add('active'); } currentPhoto = index; } document.querySelector('.next-photo').addEventListener('click', () => { const nextIndex = (currentPhoto + 1) % 3; showPhoto(nextIndex); }); document.querySelector('.prev-photo').addEventListener('click', () => { const prevIndex = (currentPhoto - 1 + 3) % 3; showPhoto(prevIndex); }); // Swipe functionality card.addEventListener('mousedown', startDrag); card.addEventListener('touchstart', startDrag, { passive: true }); document.addEventListener('mousemove', drag); document.addEventListener('touchmove', drag, { passive: true }); document.addEventListener('mouseup', endDrag); document.addEventListener('touchend', endDrag); function startDrag(e) { if (isDragging) return; isDragging = true; card.classList.add('dragging'); // Get starting position startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX; currentX = 0; } function drag(e) { if (!isDragging) return; // Calculate distance dragged const x = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX; currentX = x - startX; // Move card with drag card.style.transform = `translateX(${currentX}px) rotate(${currentX * 0.03}deg)`; // Change opacity based on swipe direction if (currentX > 0) { card.style.backgroundColor = `rgba(46, 213, 115, ${Math.min(currentX / 100, 0.1)})`; } else if (currentX < 0) { card.style.backgroundColor = `rgba(255, 71, 87, ${Math.min(Math.abs(currentX) / 100, 0.1)})`; } } function endDrag() { if (!isDragging) return; isDragging = false; card.classList.remove('dragging'); // Determine if swipe threshold was met if (currentX > 100) { swipeRight(); } else if (currentX < -100) { swipeLeft(); } else { // Reset position if not swiped enough card.style.transform = ''; card.style.backgroundColor = ''; } } // Button actions document.querySelector('.swipe-left').addEventListener('click', swipeLeft); document.querySelector('.swipe-right').addEventListener('click', swipeRight); function swipeLeft() { card.classList.add('swiped-left'); setTimeout(resetCard, 1000); } function swipeRight() { card.classList.add('swiped-right'); // Show match screen after swipe right with a delay setTimeout(() => { matchScreen.classList.add('visible'); }, 500); setTimeout(resetCard, 1000); } function resetCard() { // Reset card position & state card.style.transform = ''; card.style.backgroundColor = ''; card.classList.remove('swiped-left', 'swiped-right'); // Simulate loading new profile card.style.opacity = '0'; // Reset to first photo showPhoto(0); setTimeout(() => { // Change profile data randomly const names = ['Emma', 'Olivia', 'Sophia', 'Ava', 'Mia']; const ages = [24, 26, 27, 25, 29]; const distances = [1, 3, 5, 2, 'Less than 1']; const randomIndex = Math.floor(Math.random() * names.length); document.querySelector('.profile-name').innerHTML = `${names[randomIndex]} <span class="profile-age">${ages[randomIndex]}</span> <i class="fas fa-check-circle verified-badge"></i>`; document.querySelector('.profile-location').innerHTML = `<i class="fas fa-map-marker-alt location-icon"></i> ${distances[randomIndex]} miles away`; card.style.opacity = '1'; }, 500); } // Close match screen document.querySelector('.match-btn').addEventListener('click', () => { matchScreen.classList.remove('visible'); }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap'); body { display: flex; justify-content: center; align-items: center; min-height: 700px; background: #f0f0f0; overflow: hidden; padding: 20px; } .portfolio-card { position: relative; width: 100%; max-width: 660px; height: 660px; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .portfolio-card:hover { transform: translateY(-10px); } .gradient-bg { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899); opacity: 0.9; z-index: 1; mix-blend-mode: multiply; transition: all 0.8s ease; } .texture-overlay { position: absolute; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: 2; opacity: 0.6; } .content-container { position: relative; z-index: 3; padding: 2.5rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: white; } .profile-header { display: flex; align-items: flex-start; justify-content: space-between; } .profile-photo { width: 120px; height: 120px; border-radius: 20px; border: 4px solid rgba(255, 255, 255, 0.5); object-fit: cover; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); } .profile-photo:hover { transform: scale(1.05); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4); } .name-title { flex: 1; padding-left: 1.5rem; } .artist-name { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.5px; background: linear-gradient(90deg, #ffffff, #e0e7ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 2s infinite; background-size: 200% 100%; } @keyframes shimmer { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } .artist-title { font-size: 1rem; font-weight: 500; opacity: 0.9; text-transform: uppercase; letter-spacing: 3px; } .bio { margin: 2rem 0; font-size: 1.1rem; line-height: 1.6; font-weight: 400; max-width: 580px; } .skills-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .skill-tag { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); border-radius: 50px; padding: 0.4rem 1rem; font-size: 0.8rem; font-weight: 500; transition: all 0.3s ease; } .skill-tag:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 1rem; } .portfolio-item { position: relative; height: 140px; overflow: hidden; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, 0.1); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease; } .portfolio-item:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.4); z-index: 10; } .portfolio-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } .portfolio-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); padding: 1rem; transform: translateY(100%); transition: transform 0.35s ease; } .portfolio-item:hover .portfolio-overlay { transform: translateY(0); } .portfolio-item:hover .portfolio-img { opacity: 0.8; } .portfolio-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; } .portfolio-category { font-size: 0.75rem; opacity: 0.8; } .contact-section { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; } .social-links { display: flex; gap: 1rem; } .social-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); transition: all 0.3s ease; font-size: 1.2rem; color: white; text-decoration: none; } .social-icon:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-3px) scale(1.1); } .contact-btn { background: white; color: #6366f1; border: none; border-radius: 50px; padding: 0.8rem 1.5rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); display: flex; align-items: center; gap: 0.5rem; } .contact-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 20px -3px rgba(0, 0, 0, 0.3); } .mouse-tracker { position: absolute; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .shape { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.03); pointer-events: none; transition: transform 0.3s ease-out; } .shape-1 { width: 300px; height: 300px; top: -50px; left: -50px; } .shape-2 { width: 200px; height: 200px; bottom: 100px; right: -50px; } @media (max-width: 640px) { .portfolio-card { height: auto; min-height: 650px; } .profile-header { flex-direction: column; align-items: center; text-align: center; } .name-title { padding-left: 0; margin-top: 1rem; } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .artist-name { font-size: 2rem; } .bio { font-size: 1rem; } .content-container { padding: 1.5rem; } } @media (max-width: 480px) { .portfolio-grid { grid-template-columns: 1fr; } .skills-container { justify-content: center; } } </style> </head> <body> <div class="portfolio-card"> <div class="gradient-bg"></div> <div class="texture-overlay"></div> <div class="mouse-tracker"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> </div> <div class="content-container"> <div class="profile-header"> <img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=MnwxfDB8MXxyYW5kb218MHx8YXJ0aXN0LHdvbWFufHx8fHx8MTY5MDUwMjQ1OQ&ixlib=rb-4.0.3&q=80&w=300" alt="Portrait of Eliza Santos" class="profile-photo"> <div class="name-title"> <h1 class="artist-name">Eliza Santos</h1> <p class="artist-title">Mixed Media Artist & Illustrator</p> </div> </div> <div class="bio"> Blending traditional illustration with digital manipulation to create immersive visual narratives that explore the boundaries between reality and imagination. My work has been exhibited in galleries across Montreal, Berlin, and Tokyo. </div> <div class="skills-container"> <span class="skill-tag">Digital Illustration</span> <span class="skill-tag">Collage Art</span> <span class="skill-tag">Watercolor</span> <span class="skill-tag">Motion Graphics</span> <span class="skill-tag">Concept Art</span> </div> <div class="portfolio-section"> <div class="portfolio-grid"> <div class="portfolio-item"> <img src="https://images.unsplash.com/photo-1513542789411-b6a5d4f31634?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8YXJ0LHBhaW50aW5nfHx8fHx8MTY5MDUwMjUyMQ&ixlib=rb-4.0.3&q=80&w=400" alt="Urban Dreams Series" class="portfolio-img"> <div class="portfolio-overlay"> <h3 class="portfolio-title">Urban Dreams</h3> <p class="portfolio-category">Mixed Media Series</p> </div> </div> <div class="portfolio-item"> <img src="https://images.unsplash.com/photo-1548094891-c4ba474efd16?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8YXJ0LGRpZ2l0YWx8fHx8fHwxNjkwNTAyNTQ5&ixlib=rb-4.0.3&q=80&w=400" alt="Dystopian Futures" class="portfolio-img"> <div class="portfolio-overlay"> <h3 class="portfolio-title">Dystopian Futures</h3> <p class="portfolio-category">Digital Illustration</p> </div> </div> <div class="portfolio-item"> <img src="https://images.unsplash.com/photo-1579541592825-583789c9d0af?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8YXJ0LGNvbGxhZ2V8fHx8fHwxNjkwNTAyNTcz&ixlib=rb-4.0.3&q=80&w=400" alt="Fractured Memories" class="portfolio-img"> <div class="portfolio-overlay"> <h3 class="portfolio-title">Fractured Memories</h3> <p class="portfolio-category">Collage & Gouache</p> </div> </div> </div> </div> <div class="contact-section"> <div class="social-links"> <a href="#" class="social-icon"> <i>✦</i> </a> <a href="#" class="social-icon"> <i>✧</i> </a> <a href="#" class="social-icon"> <i>★</i> </a> </div> <button class="contact-btn"> <span>Commission Artwork</span> <span>→</span> </button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Interactive gradient background on mouse movement const card = document.querySelector('.portfolio-card'); const gradientBg = document.querySelector('.gradient-bg'); const shapes = document.querySelectorAll('.shape'); card.addEventListener('mousemove', (e) => { // Get position relative to card const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Calculate percentages const xPercent = Math.floor((x / rect.width) * 100); const yPercent = Math.floor((y / rect.height) * 100); // Update gradient position gradientBg.style.background = `radial-gradient(circle at ${xPercent}% ${yPercent}%, #8b5cf6, #6366f1, #ec4899)`; // Move shapes based on cursor position shapes.forEach((shape, index) => { const speed = index === 0 ? 30 : 20; const xMove = (xPercent - 50) / speed; const yMove = (yPercent - 50) / speed; shape.style.transform = `translate(${xMove}px, ${yMove}px)`; }); }); // Reset on mouse leave card.addEventListener('mouseleave', () => { gradientBg.style.background = 'linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899)'; shapes.forEach(shape => { shape.style.transform = 'translate(0px, 0px)'; }); }); // Portfolio items fading effect const portfolioItems = document.querySelectorAll('.portfolio-item'); portfolioItems.forEach(item => { item.addEventListener('mouseenter', () => { portfolioItems.forEach(otherItem => { if (otherItem !== item) { otherItem.style.opacity = '0.6'; otherItem.style.transform = 'scale(0.95)'; } }); }); item.addEventListener('mouseleave', () => { portfolioItems.forEach(otherItem => { otherItem.style.opacity = '1'; otherItem.style.transform = ''; }); }); }); // Animation for photo when hovered const profilePhoto = document.querySelector('.profile-photo'); profilePhoto.addEventListener('mouseenter', () => { profilePhoto.style.borderColor = 'rgba(255, 255, 255, 0.8)'; }); profilePhoto.addEventListener('mouseleave', () => { profilePhoto.style.borderColor = 'rgba(255, 255, 255, 0.5)'; }); // Prevent default form submission const contactBtn = document.querySelector('.contact-btn'); contactBtn.addEventListener('click', (e) => { e.preventDefault(); contactBtn.innerHTML = '<span>Thanks for your interest!</span>'; setTimeout(() => { contactBtn.innerHTML = '<span>Commission Artwork</span><span>→</span>'; }, 2000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pixel Legends Gaming Profile</title> <style> @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap'); :root { --bg-color: #0a0e1a; --primary: #ff3864; --secondary: #4deeea; --tertiary: #74ee15; --accent: #ffe700; --dark: #18192b; --light: #f8f8f8; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Silkscreen', sans-serif; background-color: var(--bg-color); color: var(--light); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background-image: radial-gradient(var(--secondary) 1px, transparent 1px), radial-gradient(var(--primary) 1px, transparent 1px); background-size: 40px 40px; background-position: 0 0, 20px 20px; background-repeat: repeat; background-attachment: fixed; animation: bg-scroll 20s linear infinite; } @keyframes bg-scroll { 0% { background-position: 0 0, 20px 20px; } 100% { background-position: 40px 40px, 60px 60px; } } .container { width: 100%; max-width: 650px; padding: 25px; position: relative; } .profile-card { background-color: var(--dark); border-radius: 10px; padding: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(77, 238, 234, 0.2), 0 0 60px rgba(255, 56, 100, 0.1); position: relative; overflow: hidden; border: 3px solid var(--secondary); } .profile-card::before { content: ""; position: absolute; width: 150%; height: 25px; background: linear-gradient(90deg, var(--primary), var(--secondary), var(--tertiary), var(--accent)); top: 0; left: -25%; z-index: 1; animation: rainbow-border 5s linear infinite; } @keyframes rainbow-border { 0% { transform: translateX(0%); } 100% { transform: translateX(66.6%); } } .profile-header { display: flex; align-items: center; margin-top: 20px; padding-bottom: 20px; border-bottom: 2px dashed var(--secondary); position: relative; } .avatar-container { position: relative; width: 100px; height: 100px; margin-right: 20px; transform-style: preserve-3d; perspective: 1000px; } .avatar { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; border: 3px solid var(--primary); transition: all 0.5s ease; transform-style: preserve-3d; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); image-rendering: pixelated; } .avatar-container:hover .avatar { transform: rotateY(180deg); } .avatar-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background-color: var(--primary); transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; display: flex; justify-content: center; align-items: center; font-size: 12px; text-align: center; padding: 5px; color: var(--light); image-rendering: pixelated; } .profile-name { font-family: 'Press Start 2P', cursive; font-size: 20px; color: var(--light); margin-bottom: 5px; text-shadow: 3px 3px 0px var(--primary); letter-spacing: 1px; } .profile-status { display: inline-block; padding: 5px 10px; background-color: var(--tertiary); border-radius: 20px; font-size: 12px; color: var(--dark); font-weight: bold; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .level-badge { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; background: var(--accent); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-family: 'Press Start 2P', cursive; font-size: 14px; color: var(--dark); border: 3px solid var(--light); box-shadow: 0 0 10px rgba(255, 231, 0, 0.5); } .stats-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 20px 0; } .stat-box { background-color: rgba(24, 25, 43, 0.7); border: 2px solid var(--primary); padding: 10px; border-radius: 8px; text-align: center; transition: all 0.3s ease; } .stat-box:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(255, 56, 100, 0.3); border-color: var(--secondary); } .stat-title { font-size: 12px; color: var(--accent); margin-bottom: 5px; } .stat-value { font-size: 18px; font-weight: bold; color: var(--light); } .progress-section { margin: 20px 0; } .progress-title { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 14px; } .progress-bar { height: 15px; background-color: rgba(24, 25, 43, 0.7); border-radius: 20px; overflow: hidden; border: 2px solid var(--secondary); position: relative; } .progress-fill { height: 100%; background: linear-gradient(to right, var(--primary), var(--secondary)); border-radius: 20px; transition: width 1s ease-in-out; position: relative; overflow: hidden; } .progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 45deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); animation: shine 2s infinite linear; } @keyframes shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .achievements { margin: 20px 0; } .achievements-title { font-family: 'Press Start 2P', cursive; font-size: 16px; margin-bottom: 15px; color: var(--accent); text-shadow: 2px 2px 0px var(--dark); } .badges-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .badge { width: 60px; height: 60px; position: relative; cursor: pointer; transition: transform 0.3s ease; } .badge img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(0.3) brightness(0.8); transition: all 0.3s ease; } .badge.unlocked img { filter: none; transform: scale(1.05); } .badge:hover { transform: scale(1.1); z-index: 10; } .badge:hover .badge-tooltip { opacity: 1; transform: translateY(0); visibility: visible; } .badge-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background-color: var(--dark); color: var(--light); padding: 5px 10px; border-radius: 5px; font-size: 10px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; z-index: 100; border: 1px solid var(--primary); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .badge-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: var(--primary) transparent transparent transparent; } .recent-games { margin-top: 20px; } .recent-title { font-family: 'Press Start 2P', cursive; font-size: 16px; margin-bottom: 15px; color: var(--accent); text-shadow: 2px 2px 0px var(--dark); } .game-item { display: flex; align-items: center; padding: 10px; border-radius: 8px; margin-bottom: 10px; background-color: rgba(24, 25, 43, 0.7); transition: all 0.3s ease; border-left: 4px solid var(--primary); } .game-item:hover { transform: translateX(5px); background-color: rgba(24, 25, 43, 0.9); border-left: 4px solid var(--secondary); } .game-icon { width: 40px; height: 40px; border-radius: 8px; margin-right: 10px; border: 2px solid var(--primary); object-fit: cover; image-rendering: pixelated; } .game-details { flex: 1; } .game-name { font-size: 14px; font-weight: bold; color: var(--light); } .game-time { font-size: 10px; color: var(--secondary); } .game-result { font-size: 12px; font-weight: bold; padding: 3px 8px; border-radius: 5px; } .win { background-color: var(--tertiary); color: var(--dark); } .loss { background-color: var(--primary); color: var(--light); } .pixel-button { display: block; margin: 20px auto 10px; padding: 10px 20px; background-color: var(--primary); color: var(--light); border: none; border-radius: 5px; font-family: 'Press Start 2P', cursive; font-size: 12px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 0 rgba(128, 0, 32, 1); text-align: center; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; position: relative; overflow: hidden; } .pixel-button:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(128, 0, 32, 1); background-color: var(--secondary); color: var(--dark); } .pixel-button:active { transform: translateY(4px); box-shadow: none; } .pixel-button::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background-image: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); transition: all 0.6s; } .pixel-button:hover::before { left: 100%; } .social-links { display: flex; justify-content: center; gap: 15px; margin-top: 15px; } .social-icon { font-size: 20px; color: var(--light); transition: all 0.3s ease; } .social-icon:hover { color: var(--accent); transform: scale(1.2); } @media (max-width: 600px) { .profile-header { flex-direction: column; align-items: center; text-align: center; } .avatar-container { margin-right: 0; margin-bottom: 15px; } .stats-container { grid-template-columns: repeat(2, 1fr); } .level-badge { position: static; margin: 10px auto; } } /* Glowing cursor */ .cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: transparent; pointer-events: none; box-shadow: 0 0 20px 5px var(--accent); z-index: 999; opacity: 0; transition: opacity 0.3s ease; mix-blend-mode: screen; } </style> </head> <body> <div class="cursor"></div> <div class="container"> <div class="profile-card"> <div class="profile-header"> <div class="avatar-container"> <img src="https://i.pinimg.com/originals/78/a9/20/78a920e2fed32b2b0f78f58fa984d07d.png" alt="Avatar" class="avatar"> <div class="avatar-back">+99 CHARISMA</div> </div> <div class="profile-info"> <h1 class="profile-name">Cyber_Wraith</h1> <span class="profile-status">ONLINE • SLAYING NOOBS</span> </div> <div class="level-badge">87</div> </div> <div class="stats-container"> <div class="stat-box"> <div class="stat-title">K/D RATIO</div> <div class="stat-value">3.85</div> </div> <div class="stat-box"> <div class="stat-title">MATCHES</div> <div class="stat-value">2,047</div> </div> <div class="stat-box"> <div class="stat-title">WIN RATE</div> <div class="stat-value">68%</div> </div> </div> <div class="progress-section"> <div class="progress-title"> <span>XP PROGRESS</span> <span>876/1000</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 87.6%"></div> </div> </div> <div class="achievements"> <h2 class="achievements-title">ACHIEVEMENTS</h2> <div class="badges-container"> <div class="badge unlocked"> <img src="https://i.imgur.com/jnW0Jll.png" alt="First Blood Badge"> <div class="badge-tooltip">First Blood: First kill in 100 matches</div> </div> <div class="badge unlocked"> <img src="https://i.imgur.com/QZwn8v8.png" alt="Marksman Badge"> <div class="badge-tooltip">Marksman: 500 headshots</div> </div> <div class="badge"> <img src="https://i.imgur.com/xpJWxDw.png" alt="Team Player Badge"> <div class="badge-tooltip">Team Player: Unlock at 1000 assists</div> </div> <div class="badge unlocked"> <img src="https://i.imgur.com/dAFdT7I.png" alt="Survivor Badge"> <div class="badge-tooltip">Survivor: Win 50 matches with <20% health</div> </div> <div class="badge"> <img src="https://i.imgur.com/8MO8LeJ.png" alt="Legend Badge"> <div class="badge-tooltip">Legend: Reach level 100 (87/100)</div> </div> </div> </div> <div class="recent-games"> <h2 class="recent-title">RECENT BATTLES</h2> <div class="game-item"> <img src="https://i.imgur.com/oZYVrye.png" alt="Nova Drift" class="game-icon"> <div class="game-details"> <div class="game-name">PIXEL FORTRESS</div> <div class="game-time">Today, 2:34 PM</div> </div> <span class="game-result win">VICTORY</span> </div> <div class="game-item"> <img src="https://i.imgur.com/0sY3lk5.png" alt="Cyber Siege" class="game-icon"> <div class="game-details"> <div class="game-name">CYBER SIEGE</div> <div class="game-time">Today, 12:15 PM</div> </div> <span class="game-result win">VICTORY</span> </div> <div class="game-item"> <img src="https://i.imgur.com/3xD4j84.png" alt="Neon Arena" class="game-icon"> <div class="game-details"> <div class="game-name">NEON ARENA</div> <div class="game-time">Yesterday, 9:45 PM</div> </div> <span class="game-result loss">DEFEAT</span> </div> </div> <a href="#" class="pixel-button">EDIT LOADOUT</a> <div class="social-links"> <a href="#" class="social-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/> </svg> </a> <a href="#" class="social-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/> </svg> </a> <a href="#" class="social-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> </svg> </a> <a href="#" class="social-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"> <path d="M19.54 0c1.356 0 2.46 1.104 2.46 2.472v21.528l-2.58-2.28-1.452-1.344-1.536-1.428.636 2.22h-13.608c-1.356 0-2.46-1.104-2.46-2.472v-16.224c0-1.368 1.104-2.472 2.46-2.472h16.08zm-4.632 15.672c2.652-.084 3.672-1.824 3.672-1.824 0-3.864-1.728-6.996-1.728-6.996-1.728-1.296-3.372-1.26-3.372-1.26l-.168.192c2.04.624 2.988 1.524 2.988 1.524-1.248-.684-2.472-1.02-3.612-1.152-.864-.096-1.692-.072-2.424.024l-.204.024c-.42.036-1.44.192-2.724.756-.444.204-.708.348-.708.348s.996-.948 3.156-1.572l-.12-.144s-1.644-.036-3.372 1.26c0 0-1.728 3.132-1.728 6.996 0 0 1.008 1.74 3.66 1.824 0 0 .444-.54.804-.996-1.524-.456-2.1-1.416-2.1-1.416l.336.204.048.036.047.027.014.006.047.027c.3.168.6.3.876.408.492.192 1.08.384 1.764.516.9.168 1.956.228 3.108.012.564-.096 1.14-.264 1.74-.516.42-.156.888-.384 1.38-.708 0 0-.6.984-2.172 1.428.36.456.792.972.792.972zm-5.58-5.604c-.684 0-1.224.6-1.224 1.332 0 .732.552 1.332 1.224 1.332.684 0 1.224-.6 1.224-1.332.012-.732-.54-1.332-1.224-1.332zm4.38 0c-.684 0-1.224.6-1.224 1.332 0 .732.552 1.332 1.224 1.332.684 0 1.224-.6 1.224-1.332 0-.732-.54-1.332-1.224-1.332z"/> </svg> </a> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Animate XP progress bar on load setTimeout(() => { const progressFill = document.querySelector('.progress-fill'); progressFill.style.width = '87.6%'; }, 300); // Custom cursor effect const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; cursor.style.opacity = '1'; }); document.addEventListener('mouseout', () => { cursor.style.opacity = '0'; }); // Badge hover effects const badges = document.querySelectorAll('.badge'); badges.forEach(badge => { badge.addEventListener('mouseenter', () => { if (!badge.classList.contains('unlocked')) { // Play lock sound for locked badges const sound = new Audio(); sound.volume = 0.2; sound.play().catch(e => console.log("Audio play prevented: ", e)); } else { // Play unlock sound for unlocked badges const sound = new Audio(); sound.volume = 0.2; sound.play().catch(e => console.log("Audio play prevented: ", e)); } }); }); // Pixel button click effect const button = document.querySelector('.pixel-button'); button.addEventListener('click', function(e) { e.preventDefault(); // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; setTimeout(() => { ripple.remove(); }, 600); // Simulate button click with slight animation this.classList.add('clicked'); setTimeout(() => { this.classList.remove('clicked'); }, 200); }); // Game items hover animation const gameItems = document.querySelectorAll('.game-item'); gameItems.forEach(item => { item.addEventListener('mouseenter', () => { const gameIcon = item.querySelector('.game-icon'); gameIcon.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary'); }); item.addEventListener('mouseleave', () => { const gameIcon = item.querySelector('.game-icon'); gameIcon.style.borderColor = getComputedStyle(document.documentElement).getPropertyValue('--primary'); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Healthcare Professional Profile</title> <style> :root { --primary: #0055a4; --primary-light: #e0ebff; --primary-dark: #003a7a; --accent: #34c6f5; --success: #00b67a; --text: #2c3e50; --text-light: #6a7c8f; --white: #ffffff; --grey-light: #f8f9fa; --grey: #e0e6ed; --card-shadow: 0 12px 24px rgba(0, 85, 164, 0.08); --card-radius: 10px; --font-main: 'Nunito Sans', system-ui, -apple-system, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-main); background-color: var(--grey-light); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; transition: background-color 0.3s ease; } .container { max-width: 700px; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; padding: 15px; } .profile-card { background-color: var(--white); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; cursor: pointer; } .profile-card:hover { transform: translateY(-5px); box-shadow: 0 18px 28px rgba(0, 85, 164, 0.15); } .profile-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); } .card-header { padding: 20px; display: flex; align-items: center; position: relative; } .availability-badge { position: absolute; top: 15px; right: 15px; padding: 4px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--white); background-color: var(--success); box-shadow: 0 2px 5px rgba(0, 182, 122, 0.3); display: flex; align-items: center; gap: 4px; } .availability-badge::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--white); animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } .availability-badge.unavailable { background-color: #e74c3c; box-shadow: 0 2px 5px rgba(231, 76, 60, 0.3); } .profile-image { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--primary-light); transition: transform 0.3s ease; } .profile-card:hover .profile-image { transform: scale(1.05); } .profile-info { margin-left: 20px; } .profile-name { font-size: 20px; font-weight: 700; color: var(--primary-dark); margin-bottom: 5px; position: relative; display: inline-flex; align-items: center; } .verified-badge { display: inline-flex; margin-left: 8px; color: var(--primary); font-size: 18px; } .profile-title { font-size: 14px; font-weight: 600; color: var(--text-light); margin-bottom: 6px; } .profile-department { display: inline-block; padding: 3px 8px; background-color: var(--primary-light); color: var(--primary); border-radius: 4px; font-size: 12px; font-weight: 600; } .card-body { padding: 0 20px 20px; } .profile-meta { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; } .meta-item { display: flex; align-items: center; font-size: 14px; color: var(--text-light); } .meta-icon { color: var(--primary); margin-right: 5px; font-size: 16px; } .profile-stats { display: flex; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--grey); } .stat-item { text-align: center; } .stat-value { font-size: 18px; font-weight: 700; color: var(--primary); } .stat-label { font-size: 12px; color: var(--text-light); margin-top: 2px; } .card-actions { padding: 15px 20px; background-color: var(--grey-light); display: flex; justify-content: space-between; gap: 10px; } .action-button { padding: 8px 15px; border-radius: 5px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s ease; flex: 1; display: flex; justify-content: center; align-items: center; gap: 5px; } .primary-button { background-color: var(--primary); color: var(--white); } .primary-button:hover { background-color: var(--primary-dark); } .secondary-button { background-color: var(--white); color: var(--primary); border: 1px solid var(--primary); } .secondary-button:hover { background-color: var(--primary-light); } /* Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1000; } .modal-overlay.active { opacity: 1; visibility: visible; } .modal-content { background-color: var(--white); border-radius: var(--card-radius); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); max-width: 90%; width: 500px; padding: 0; overflow: hidden; transform: translateY(20px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; } .modal-overlay.active .modal-content { transform: translateY(0); opacity: 1; } .modal-header { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--white); padding: 20px; display: flex; justify-content: space-between; align-items: center; } .modal-title { font-size: 20px; font-weight: 700; } .close-modal { background: none; border: none; color: var(--white); font-size: 24px; cursor: pointer; opacity: 0.8; transition: opacity 0.2s ease; } .close-modal:hover { opacity: 1; } .modal-body { padding: 25px; } .credentials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .credential-item { margin-bottom: 20px; } .credential-item h4 { font-size: 16px; color: var(--primary); margin-bottom: 5px; display: flex; align-items: center; } .credential-item h4 i { margin-right: 8px; } .credential-item p { font-size: 14px; color: var(--text); margin-bottom: 5px; } .credential-item .credential-date { font-size: 12px; color: var(--text-light); } .education-timeline { position: relative; margin-top: 30px; } .education-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 18px; width: 2px; background-color: var(--primary-light); } .timeline-item { padding-left: 45px; position: relative; margin-bottom: 25px; } .timeline-item:last-child { margin-bottom: 0; } .timeline-dot { position: absolute; left: 10px; top: 0; width: 16px; height: 16px; border-radius: 50%; background-color: var(--primary); border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--primary-light); z-index: 2; } .timeline-content h4 { font-size: 16px; color: var(--text); margin-bottom: 5px; } .timeline-content p { font-size: 14px; color: var(--text-light); margin-bottom: 3px; } .timeline-date { font-size: 12px; font-weight: 600; color: var(--primary); } .specialties-section { margin-top: 30px; } .specialties-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } .specialty-tag { padding: 6px 12px; background-color: var(--primary-light); color: var(--primary); border-radius: 20px; font-size: 13px; font-weight: 600; transition: all 0.2s ease; } .specialty-tag:hover { background-color: var(--primary); color: var(--white); transform: translateY(-2px); } .modal-footer { background-color: var(--grey-light); padding: 15px 25px; text-align: right; } /* Animations */ @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0); } } /* Responsive styles */ @media (max-width: 600px) { .card-header { flex-direction: column; text-align: center; } .profile-info { margin-left: 0; margin-top: 15px; } .profile-meta { justify-content: center; } .credentials-grid { grid-template-columns: 1fr; } .profile-card { max-width: 100%; } } /* Loading state */ .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.9); display: flex; justify-content: center; align-items: center; z-index: 2000; transition: opacity 0.3s ease, visibility 0.3s ease; } .loading-spinner { width: 50px; height: 50px; border: 5px solid var(--primary-light); border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-overlay.hidden { opacity: 0; visibility: hidden; } /* Feedback tooltip */ .tooltip { position: absolute; background-color: var(--primary-dark); color: var(--white); padding: 5px 10px; border-radius: 4px; font-size: 12px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 100; top: -40px; left: 50%; transform: translateX(-50%); white-space: nowrap; } .tooltip:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--primary-dark) transparent transparent transparent; } .action-button:hover .tooltip { opacity: 1; visibility: visible; } .action-button { position: relative; } /* Skill bars for modal */ .skill-container { margin-top: 25px; } .skill-bar { margin-bottom: 15px; } .skill-name { display: flex; justify-content: space-between; margin-bottom: 5px; } .skill-name span { font-size: 14px; color: var(--text); } .skill-level { font-weight: 600; color: var(--primary); } .skill-progress { height: 8px; background-color: var(--grey); border-radius: 4px; overflow: hidden; } .skill-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); border-radius: 4px; transition: width 1s ease-in-out; } /* Additional styles for card hover effects */ .card-hover-info { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0, 55, 104, 0.9), transparent); padding: 20px; color: white; transform: translateY(100%); transition: transform 0.3s ease; border-bottom-left-radius: var(--card-radius); border-bottom-right-radius: var(--card-radius); } .profile-card:hover .card-hover-info { transform: translateY(0); } </style> </head> <body> <!-- Loading overlay --> <div class="loading-overlay"> <div class="loading-spinner"></div> </div> <div class="container"> <!-- Doctor Profile Card --> <div class="profile-card" data-profile="doctor"> <div class="card-header"> <div class="availability-badge">Available Today</div> <img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&h=150&q=80" alt="Dr. Sarah Chen" class="profile-image"> <div class="profile-info"> <h3 class="profile-name">Dr. Sarah Chen <span class="verified-badge">✓</span></h3> <div class="profile-title">Cardiology Specialist, MD</div> <div class="profile-department">Cardiovascular Medicine</div> </div> </div> <div class="card-body"> <div class="profile-meta"> <div class="meta-item"> <span class="meta-icon">📍</span> <span>Mercy Hospital</span> </div> <div class="meta-item"> <span class="meta-icon">🏆</span> <span>15+ Years Experience</span> </div> </div> <div class="profile-stats"> <div class="stat-item"> <div class="stat-value">350+</div> <div class="stat-label">Patients</div> </div> <div class="stat-item"> <div class="stat-value">4.9</div> <div class="stat-label">Rating</div> </div> <div class="stat-item"> <div class="stat-value">98%</div> <div class="stat-label">Success Rate</div> </div> </div> </div> <div class="card-actions"> <button class="action-button primary-button view-credentials"> <span>View Credentials</span> <div class="tooltip">See full background & education</div> </button> <button class="action-button secondary-button"> <span>Schedule</span> <div class="tooltip">Book an appointment</div> </button> </div> </div> <!-- Nurse Profile Card --> <div class="profile-card" data-profile="nurse"> <div class="card-header"> <div class="availability-badge unavailable">On Shift</div> <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=150&h=150&q=80" alt="Michael Robinson" class="profile-image"> <div class="profile-info"> <h3 class="profile-name">Michael Robinson <span class="verified-badge">✓</span></h3> <div class="profile-title">Head Nurse, BSN, RN</div> <div class="profile-department">Emergency Care</div> </div> </div> <div class="card-body"> <div class="profile-meta"> <div class="meta-item"> <span class="meta-icon">📍</span> <span>Mercy Hospital</span> </div> <div class="meta-item"> <span class="meta-icon">⏱️</span> <span>8+ Years Experience</span> </div> </div> <div class="profile-stats"> <div class="stat-item"> <div class="stat-value">200+</div> <div class="stat-label">Patients</div> </div> <div class="stat-item"> <div class="stat-value">4.8</div> <div class="stat-label">Rating</div> </div> <div class="stat-item"> <div class="stat-value">24h</div> <div class="stat-label">Response</div> </div> </div> </div> <div class="card-actions"> <button class="action-button primary-button view-credentials"> <span>View Credentials</span> <div class="tooltip">See full background & education</div> </button> <button class="action-button secondary-button"> <span>Contact</span> <div class="tooltip">Send a message</div> </button> </div> </div> <!-- Modal for credentials --> <div class="modal-overlay"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">Professional Credentials</h3> <button class="close-modal">×</button> </div> <div class="modal-body"> <div id="doctor-credentials" style="display: none;"> <div class="credentials-grid"> <div class="credential-item"> <h4><i>🏥</i> Primary Specialty</h4> <p>Interventional Cardiology</p> <span class="credential-date">Board Certified Since 2010</span> </div> <div class="credential-item"> <h4><i>🔬</i> Secondary Specialty</h4> <p>Internal Medicine</p> <span class="credential-date">Board Certified Since 2008</span> </div> </div> <div class="education-timeline"> <h4 style="margin-bottom: 15px; color: var(--primary);">Education & Training</h4> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <h4>Cardiology Fellowship</h4> <p>Stanford University Medical Center</p> <span class="timeline-date">2007 - 2010</span> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <h4>Internal Medicine Residency</h4> <p>Johns Hopkins Hospital</p> <span class="timeline-date">2004 - 2007</span> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <h4>Doctor of Medicine (MD)</h4> <p>Harvard Medical School</p> <span class="timeline-date">2000 - 2004</span> </div> </div> </div> <div class="specialties-section"> <h4 style="color: var(--primary);">Clinical Focus Areas</h4> <div class="specialties-list"> <span class="specialty-tag">Coronary Artery Disease</span> <span class="specialty-tag">Heart Failure</span> <span class="specialty-tag">Cardiac Catheterization</span> <span class="specialty-tag">Preventative Cardiology</span> <span class="specialty-tag">Arrhythmia Management</span> <span class="specialty-tag">Structural Heart Disease</span> </div> </div> <div class="skill-container"> <h4 style="color: var(--primary); margin-bottom: 15px;">Expertise Level</h4> <div class="skill-bar"> <div class="skill-name"> <span>Cardiac Imaging Interpretation</span> <span class="skill-level">98%</span> </div> <div class="skill-progress"> <div class="skill-progress-fill" style="width: 98%"></div> </div> </div> <div class="skill-bar"> <div class="skill-name"> <span>Interventional Procedures</span> <span class="skill-level">95%</span> </div> <div class="skill-progress"> <div class="skill-progress-fill" style="width: 95%"></div> </div> </div> <div class="skill-bar"> <div class="skill-name"> <span>Patient Care Management</span> <span class="skill-level">97%</span> </div> <div class="skill-progress"> <div class="skill-progress-fill" style="width: 97%"></div> </div> </div> </div> </div> <div id="nurse-credentials" style="display: none;"> <div class="credentials-grid"> <div class="credential-item"> <h4><i>🏥</i> Nursing Certification</h4> <p>Registered Nurse (RN)</p> <span class="credential-date">Licensed Since 2015</span> </div> <div class="credential-item"> <h4><i>🛡️</i> Advanced Certification</h4> <p>Emergency Nursing (CEN)</p> <span class="credential-date">Certified Since 2017</span> </div> </div> <div class="education-timeline"> <h4 style="margin-bottom: 15px; color: var(--primary);">Education & Training</h4> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <h4>Master of Science in Nursing (MSN)</h4> <p>University of Pennsylvania</p> <span class="timeline-date">2019 - 2021</span> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <h4>Bachelor of Science in Nursing (BSN)</h4> <p>NYU Rory Meyers College of Nursing</p> <span class="timeline-date">2011 - 2015</span> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <h4>Emergency Trauma Nursing Course</h4> <p>American Trauma Society</p> <span class="timeline-date">2016</span> </div> </div> </div> <div class="specialties-section"> <h4 style="color: var(--primary);">Clinical Specialties</h4> <div class="specialties-list"> <span class="specialty-tag">Emergency Response</span> <span class="specialty-tag">Critical Care</span> <span class="specialty-tag">Trauma Management</span> <span class="specialty-tag">Pediatric Emergency</span> <span class="specialty-tag">Cardiac Monitoring</span> <span class="specialty-tag">Triage Coordination</span> </div> </div> <div class="skill-container"> <h4 style="color: var(--primary); margin-bottom: 15px;">Expertise Level</h4> <div class="skill-bar"> <div class="skill-name"> <span>Emergency Response</span> <span class="skill-level">96%</span> </div> <div class="skill-progress"> <div class="skill-progress-fill" style="width: 96%"></div> </div> </div> <div class="skill-bar"> <div class="skill-name"> <span>Patient Assessment</span> <span class="skill-level">94%</span> </div> <div class="skill-progress"> <div class="skill-progress-fill" style="width: 94%"></div> </div> </div> <div class="skill-bar"> <div class="skill-name"> <span>Team Coordination</span> <span class="skill-level">98%</span> </div> <div class="skill-progress"> <div class="skill-progress-fill" style="width: 98%"></div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button class="action-button primary-button close-modal-btn">Close</button> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Hide loading overlay after a short delay setTimeout(() => { document.querySelector('.loading-overlay').classList.add('hidden'); }, 800); // Elements const modal = document.querySelector('.modal-overlay'); const modalContent = document.querySelector('.modal-content'); const closeButtons = document.querySelectorAll('.close-modal, .close-modal-btn'); const viewCredentialsButtons = document.querySelectorAll('.view-credentials'); const doctorCredentials = document.getElementById('doctor-credentials'); const nurseCredentials = document.getElementById('nurse-credentials'); // Event handlers viewCredentialsButtons.forEach(button => { button.addEventListener('click', function(e) { const card = this.closest('.profile-card'); const profileType = card.dataset.profile; // Reset credentials views doctorCredentials.style.display = 'none'; nurseCredentials.style.display = 'none'; // Show appropriate credentials if (profileType === 'doctor') { doctorCredentials.style.display = 'block'; document.querySelector('.modal-title').textContent = 'Dr. Sarah Chen - Credentials'; } else if (profileType === 'nurse') { nurseCredentials.style.display = 'block'; document.querySelector('.modal-title').textContent = 'Michael Robinson - Credentials'; } modal.classList.add('active'); // Animate skill bars setTimeout(() => { const skillBars = document.querySelectorAll('.skill-progress-fill'); skillBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 100); }); }, 300); e.stopPropagation(); }); }); closeButtons.forEach(button => { button.addEventListener('click', function() { modal.classList.remove('active'); }); }); // Close modal when clicking outside of content modal.addEventListener('click', function(e) { if (e.target === modal) { modal.classList.remove('active'); } }); // Prevent clicks on modal content from closing the modal modalContent.addEventListener('click', function(e) { e.stopPropagation(); }); // Accessibility: Close modal on Escape key press document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && modal.classList.contains('active')) { modal.classList.remove('active'); } }); // Interactive elements for better engagement document.querySelectorAll('.profile-card').forEach(card => { card.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Subtle 3D effect const xRotation = (y / rect.height - 0.5) * -5; const yRotation = (x / rect.width - 0.5) * 5; this.style.transform = `perspective(1000px) rotateX(${xRotation}deg) rotateY(${yRotation}deg) scale(1.02)`; }); card.addEventListener('mouseleave', function() { this.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)'; }); }); // Add the skill bars animation on page load as well const skillBars = document.querySelectorAll('.skill-progress-fill'); skillBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 1000); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #3E3D53; --secondary: #F5F5F5; --accent: #6E64C3; --text: #333; --light-text: #777; --white: #fff; --shadow: rgba(0, 0, 0, 0.08); --badge-1: #E5F7FF; --badge-2: #F0EBFF; --badge-3: #FFEDE0; --hover-transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: var(--secondary); color: var(--text); padding: 20px; } .card-container { width: 100%; max-width: 650px; height: auto; perspective: 1000px; position: relative; } .profile-card { width: 100%; background-color: var(--white); border-radius: 16px; box-shadow: 0 10px 25px var(--shadow); padding: 32px; position: relative; overflow: hidden; transition: transform var(--hover-transition), box-shadow var(--hover-transition); transform-style: preserve-3d; } .profile-card:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); transform: translateY(-5px); } .header { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; position: relative; } .profile-image { width: 95px; height: 95px; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); box-shadow: 0 4px 10px var(--shadow); transition: transform 0.4s ease; } .profile-card:hover .profile-image { transform: scale(1.05); } .header-details { flex: 1; } .name { font-size: 24px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.5px; color: var(--primary); } .title { font-size: 16px; font-weight: 500; color: var(--accent); margin-bottom: 8px; } .location { font-size: 14px; color: var(--light-text); display: flex; align-items: center; gap: 4px; } .location svg { width: 14px; height: 14px; } .status { position: absolute; top: 0; right: 0; background-color: rgba(110, 100, 195, 0.1); color: var(--accent); padding: 5px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; } .status-dot { width: 8px; height: 8px; background-color: #6E64C3; border-radius: 50%; animation: pulse 2s infinite; } .about { margin-bottom: 28px; line-height: 1.6; color: var(--text); font-size: 15px; position: relative; max-height: 70px; overflow: hidden; } .about.expanded { max-height: 1000px; transition: max-height 0.5s ease; } .read-more { position: absolute; bottom: 0; right: 0; font-size: 12px; font-weight: 600; color: var(--accent); background-color: var(--white); cursor: pointer; padding-left: 8px; } .skills-section { margin-bottom: 20px; } .section-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--primary); letter-spacing: -0.3px; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 2px; background-color: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .profile-card:hover .section-title::after { transform: scaleX(1); } .badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .badge { padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; background-color: var(--badge-1); cursor: pointer; transition: all 0.2s ease; position: relative; } .badge:nth-child(3n+2) { background-color: var(--badge-2); } .badge:nth-child(3n+3) { background-color: var(--badge-3); } .badge:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .badge::before { content: attr(data-level); position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%) scale(0); background-color: var(--primary); color: var(--white); padding: 4px 8px; border-radius: 4px; font-size: 11px; opacity: 0; transition: all 0.2s ease; white-space: nowrap; pointer-events: none; } .badge:hover::before { opacity: 1; transform: translateX(-50%) scale(1); } .badge::after { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg) scale(0); width: 8px; height: 8px; background-color: var(--primary); opacity: 0; transition: all 0.2s ease; } .badge:hover::after { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1); } .testimonials-slider { margin-bottom: 25px; overflow: hidden; position: relative; } .testimonials { display: flex; transition: transform 0.5s ease; } .testimonial { flex: 0 0 100%; padding: 16px; background-color: var(--secondary); border-radius: 10px; margin-right: 10px; } .testimonial-content { font-size: 14px; font-style: italic; margin-bottom: 8px; line-height: 1.6; } .testimonial-author { font-size: 13px; font-weight: 600; color: var(--accent); } .testimonial-company { font-size: 12px; color: var(--light-text); } .slider-controls { display: flex; justify-content: center; gap: 5px; margin-top: 10px; } .slider-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .slider-dot.active { background-color: var(--accent); width: 20px; border-radius: 10px; } .footer { display: flex; justify-content: space-between; align-items: center; position: relative; } .stats { display: flex; gap: 15px; } .stat { display: flex; flex-direction: column; align-items: center; } .stat-value { font-size: 20px; font-weight: 700; color: var(--primary); } .stat-label { font-size: 12px; color: var(--light-text); text-transform: uppercase; letter-spacing: 0.5px; } .actions { display: flex; gap: 12px; } .btn { padding: 10px 20px; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; } .btn-primary { background-color: var(--accent); color: var(--white); } .btn-primary:hover { background-color: #5a52a3; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(110, 100, 195, 0.3); } .btn-secondary { background-color: var(--white); color: var(--primary); border: 1px solid var(--primary); } .btn-secondary:hover { background-color: var(--primary); color: var(--white); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(62, 61, 83, 0.2); } .wave { position: absolute; bottom: -50px; left: 0; width: 100%; height: 60px; background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%236E64C3" fill-opacity="0.05" d="M0,192L48,202.7C96,213,192,235,288,224C384,213,480,171,576,165.3C672,160,768,192,864,213.3C960,235,1056,245,1152,234.7C1248,224,1344,192,1392,176L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'); background-size: cover; z-index: -1; } .endorsement-badge { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background-color: #FFF3DC; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .endorsement-badge:hover { transform: scale(1.1); background-color: #FFDC91; } .endorsement-badge svg { width: 16px; height: 16px; color: #F6B93B; } @keyframes pulse { 0% { transform: scale(0.95); opacity: 0.8; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.8; } } /* Responsive styles */ @media screen and (max-width: 600px) { .profile-card { padding: 20px; } .header { flex-direction: column; text-align: center; gap: 15px; } .profile-image { margin: 0 auto; } .status { position: relative; margin-top: 10px; align-self: center; } .footer { flex-direction: column; gap: 20px; } .actions { width: 100%; justify-content: center; } .stats { width: 100%; justify-content: space-around; } } </style> </head> <body> <div class="card-container"> <div class="profile-card"> <div class="header"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Profile Image" class="profile-image"> <div class="header-details"> <h1 class="name">Alexandra Chen</h1> <p class="title">Senior UX/UI Designer</p> <p class="location"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/> </svg> San Francisco, CA </p> <div class="status"> <span class="status-dot"></span> Open to work </div> </div> </div> <div class="about"> Design leader with 8+ years crafting memorable experiences for startups and Fortune 500 companies. Specializing in user-centered design processes that transform business challenges into intuitive digital solutions. Known for mentoring design teams and collaborating closely with product and engineering to deliver cohesive user experiences that drive measurable impact. </div> <span class="read-more">Read more</span> <div class="skills-section"> <h3 class="section-title">Core Skills</h3> <div class="badges"> <span class="badge" data-level="Expert • 8+ years">UX Design</span> <span class="badge" data-level="Expert • 7+ years">Interaction Design</span> <span class="badge" data-level="Advanced • 6 years">Design Systems</span> <span class="badge" data-level="Advanced • 5 years">Product Strategy</span> <span class="badge" data-level="Advanced • 5 years">User Research</span> <span class="badge" data-level="Intermediate • 4 years">Design Leadership</span> </div> </div> <div class="skills-section"> <h3 class="section-title">Tools & Technologies</h3> <div class="badges"> <span class="badge" data-level="Expert">Figma</span> <span class="badge" data-level="Expert">Sketch</span> <span class="badge" data-level="Advanced">Adobe XD</span> <span class="badge" data-level="Advanced">Protopie</span> <span class="badge" data-level="Intermediate">HTML/CSS</span> <span class="badge" data-level="Basic">React</span> </div> </div> <div class="testimonials-section"> <h3 class="section-title">Endorsements</h3> <div class="testimonials-slider"> <div class="testimonials"> <div class="testimonial"> <div class="endorsement-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/> </svg> </div> <p class="testimonial-content">"Alexandra fundamentally transformed our product's UX. Her ability to balance business needs with user-centric design principles led to a 43% increase in user engagement within three months."</p> <p class="testimonial-author">Michael Torres</p> <p class="testimonial-company">VP of Product, TechFlow</p> </div> <div class="testimonial"> <div class="endorsement-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/> </svg> </div> <p class="testimonial-content">"Working with Alex was a revelation. She doesn't just create beautiful interfaces—she solves real user problems with elegant solutions that engineers actually enjoy implementing."</p> <p class="testimonial-author">Priya Sharma</p> <p class="testimonial-company">Engineering Director, InnovateCorp</p> </div> <div class="testimonial"> <div class="endorsement-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/> </svg> </div> <p class="testimonial-content">"Alex's design leadership completely transformed our team's workflow. Her design system implementation reduced our design debt while speeding up our product development cycle by 30%."</p> <p class="testimonial-author">David Kim</p> <p class="testimonial-company">CPO, FinTech Solutions</p> </div> </div> <div class="slider-controls"> <div class="slider-dot active"></div> <div class="slider-dot"></div> <div class="slider-dot"></div> </div> </div> </div> <div class="footer"> <div class="stats"> <div class="stat"> <span class="stat-value">94%</span> <span class="stat-label">Interview Rate</span> </div> <div class="stat"> <span class="stat-value">8+</span> <span class="stat-label">Years Exp</span> </div> <div class="stat"> <span class="stat-value">24</span> <span class="stat-label">Endorsements</span> </div> </div> <div class="actions"> <button class="btn btn-secondary"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21.4356 6.73998L15.5656 0.869981C15.4056 0.709981 15.1856 0.619981 14.9556 0.619981H4.55562C3.59562 0.619981 2.81562 1.39998 2.81562 2.35998V21.65C2.81562 22.6 3.59562 23.38 4.55562 23.38H18.7556C19.7156 23.38 20.4956 22.6 20.4956 21.65V7.34998C20.4956 7.11998 20.4056 6.89998 20.2456 6.73998H21.4356ZM15.2156 3.01998L18.0956 5.89998H15.2156V3.01998ZM18.7556 21.65H4.55562V2.35998H13.4756V5.89998C13.4756 6.85998 14.2556 7.63998 15.2156 7.63998H18.7556V21.65Z" fill="currentColor"/> <path d="M11.4756 15.22H6.73563V16.96H11.4756V15.22Z" fill="currentColor"/> <path d="M16.2156 10H6.73563V11.74H16.2156V10Z" fill="currentColor"/> </svg> View Portfolio </button> <button class="btn btn-primary"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.7156 7.65C20.3456 7.21 19.7256 7.15 19.2856 7.5L17.1456 9.29V4.9C17.1456 4.4 16.7456 4 16.2456 4H3.64562C3.14562 4 2.74562 4.4 2.74562 4.9V19.1C2.74562 19.6 3.14562 20 3.64562 20H16.2456C16.7456 20 17.1456 19.6 17.1456 19.1V14.71L19.2856 16.5C19.4456 16.64 19.6456 16.7 19.8456 16.7C20.0956 16.7 20.3456 16.6 20.5156 16.4C20.8856 15.96 20.8256 15.34 20.3856 14.97L16.9856 12L20.3856 9.03C20.8256 8.66 20.8856 8.04 20.5156 7.6L20.7156 7.65ZM15.3456 18.2H4.54562V5.8H15.3456V10.47L11.5456 13.77C11.1756 14.1 11.1156 14.72 11.4456 15.09C11.6156 15.29 11.8656 15.4 12.1156 15.4C12.3156 15.4 12.5156 15.34 12.6756 15.2L15.3456 12.93V18.2Z" fill="currentColor"/> </svg> Contact </button> </div> </div> <div class="wave"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // About section toggle const aboutSection = document.querySelector('.about'); const readMoreBtn = document.querySelector('.read-more'); readMoreBtn.addEventListener('click', function() { aboutSection.classList.toggle('expanded'); readMoreBtn.textContent = aboutSection.classList.contains('expanded') ? 'Read less' : 'Read more'; }); // Testimonial slider const testimonialsContainer = document.querySelector('.testimonials'); const sliderDots = document.querySelectorAll('.slider-dot'); let currentSlide = 0; const slideWidth = 100; // Percentage function goToSlide(index) { currentSlide = index; testimonialsContainer.style.transform = `translateX(-${slideWidth * index}%)`; // Update active dot sliderDots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); } // Initialize slider controls sliderDots.forEach((dot, index) => { dot.addEventListener('click', () => goToSlide(index)); }); // Auto slide let slideInterval = setInterval(() => { currentSlide = (currentSlide + 1) % sliderDots.length; goToSlide(currentSlide); }, 5000); // Pause auto-slide on hover testimonialsContainer.addEventListener('mouseenter', () => { clearInterval(slideInterval); }); testimonialsContainer.addEventListener('mouseleave', () => { slideInterval = setInterval(() => { currentSlide = (currentSlide + 1) % sliderDots.length; goToSlide(currentSlide); }, 5000); }); // Badge interactions const badges = document.querySelectorAll('.badge'); badges.forEach(badge => { badge.addEventListener('click', function() { this.style.transform = 'scale(1.1)'; setTimeout(() => { this.style.transform = ''; }, 300); }); }); // Endorsement badges const endorsementBadges = document.querySelectorAll('.endorsement-badge'); endorsementBadges.forEach(badge => { badge.addEventListener('click', function() { this.style.transform = 'scale(1.3)'; this.style.backgroundColor = '#FFDC91'; setTimeout(() => { this.style.transform = 'scale(1.1)'; }, 300); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Freelancer Profile Card</title> <style> :root { --primary-color: #4361ee; --secondary-color: #3a0ca3; --accent-color: #f72585; --light-color: #f8f9fa; --dark-color: #212529; --success-color: #4cc9f0; --border-radius: 12px; --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f7fa; background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 20px; } .profile-card { width: 100%; max-width: 650px; height: auto; background: var(--light-color); border-radius: var(--border-radius); box-shadow: var(--box-shadow); overflow: hidden; position: relative; transition: var(--transition); } .profile-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } .profile-header { position: relative; height: 200px; overflow: hidden; background: linear-gradient(120deg, var(--primary-color), var(--secondary-color)); } .profile-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,192L48,176C96,160,192,128,288,122.7C384,117,480,139,576,160C672,181,768,203,864,186.7C960,171,1056,117,1152,96C1248,75,1344,85,1392,90.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom center; background-size: cover; } .profile-avatar-container { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; border-radius: 50%; overflow: hidden; border: 5px solid var(--light-color); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 1; background: #fff; } .profile-avatar { width: 100%; height: 100%; object-fit: cover; } .availability-badge { position: absolute; bottom: 5px; right: 5px; width: 18px; height: 18px; background: #2ecc71; border-radius: 50%; border: 2px solid white; z-index: 2; } .profile-body { padding: 70px 30px 30px; text-align: center; } .profile-name { font-size: 1.5rem; font-weight: 700; color: var(--dark-color); margin-bottom: 5px; } .profile-title { color: var(--accent-color); font-weight: 600; margin-bottom: 15px; display: inline-block; position: relative; } .profile-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--accent-color); transform: scaleX(0.2); transform-origin: center; transition: transform 0.3s ease; } .profile-card:hover .profile-title::after { transform: scaleX(1); } .profile-bio { font-size: 0.95rem; color: #666; line-height: 1.5; margin-bottom: 25px; } .stats-container { display: flex; justify-content: space-around; margin-bottom: 25px; flex-wrap: wrap; } .stat-item { flex: 1; min-width: 80px; padding: 10px; transition: var(--transition); } .stat-item:hover { transform: translateY(-5px); } .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; position: relative; display: inline-block; } .stat-value::before { content: attr(data-target); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .stat-label { font-size: 0.8rem; color: #777; text-transform: uppercase; letter-spacing: 0.5px; } .skills-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 25px; } .skill-tag { padding: 6px 15px; background: #f0f0f0; border-radius: 20px; font-size: 0.85rem; color: var(--dark-color); font-weight: 500; transition: var(--transition); cursor: pointer; position: relative; overflow: hidden; display: flex; align-items: center; gap: 5px; } .skill-tag:hover { background: var(--primary-color); color: white; transform: translateY(-3px); } .skill-icon { width: 16px; height: 16px; opacity: 0.7; transition: var(--transition); } .skill-tag:hover .skill-icon { opacity: 1; animation: pulse 1s infinite; } .endorsement-count { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: rgba(0, 0, 0, 0.1); border-radius: 50%; font-size: 0.7rem; margin-left: 5px; transition: var(--transition); } .skill-tag:hover .endorsement-count { background: rgba(255, 255, 255, 0.2); } .reviews-section { margin-top: 20px; position: relative; overflow: hidden; } .reviews-title { font-size: 1rem; font-weight: 600; color: var(--dark-color); margin-bottom: 15px; text-align: left; display: flex; align-items: center; gap: 10px; } .reviews-container { position: relative; overflow: hidden; border-radius: var(--border-radius); padding-bottom: 10px; } .reviews-scroll { display: flex; transition: transform 0.5s ease; } .review-card { flex: 0 0 100%; padding: 15px; background: #f5f6fa; border-radius: 8px; margin-right: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); position: relative; } .review-header { display: flex; align-items: center; margin-bottom: 10px; } .review-avatar { width: 35px; height: 35px; border-radius: 50%; margin-right: 10px; object-fit: cover; } .review-author { font-weight: 600; font-size: 0.9rem; color: var(--dark-color); } .review-project { font-size: 0.75rem; color: #777; } .review-rating { display: flex; margin-left: auto; } .star { color: #ffd700; margin-left: 2px; } .review-text { font-size: 0.85rem; line-height: 1.5; color: #555; text-align: left; margin-bottom: 5px; } .review-date { font-size: 0.75rem; color: #999; text-align: right; } .nav-dots { display: flex; justify-content: center; margin-top: 15px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; margin: 0 4px; cursor: pointer; transition: var(--transition); } .dot.active { background: var(--primary-color); transform: scale(1.3); } .profile-actions { display: flex; justify-content: center; gap: 15px; margin-top: 25px; } .action-btn { padding: 10px 25px; border: none; border-radius: 30px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 8px; position: relative; overflow: hidden; } .primary-btn { background: var(--primary-color); color: white; } .primary-btn:hover { background: var(--secondary-color); transform: translateY(-2px); } .secondary-btn { background: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); } .secondary-btn:hover { background: rgba(67, 97, 238, 0.1); transform: translateY(-2px); } .action-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 0.5s, opacity 0.3s; } .action-btn:active::after { transform: translate(-50%, -50%) scale(1); opacity: 1; transition: 0s; } .btn-icon { opacity: 0.8; transition: var(--transition); } .action-btn:hover .btn-icon { opacity: 1; transform: translateX(3px); } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .profile-body { padding: 70px 20px 25px; } .stats-container { flex-wrap: wrap; } .stat-item { flex: 1 0 33%; margin-bottom: 15px; } .profile-actions { flex-direction: column; gap: 10px; } .action-btn { width: 100%; justify-content: center; } } @media (max-width: 400px) { .stat-item { flex: 1 0 50%; } } </style> </head> <body> <div class="profile-card"> <div class="profile-header"> <div class="profile-avatar-container"> <img class="profile-avatar" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Sophia Chen"> <div class="availability-badge" title="Available for work"></div> </div> </div> <div class="profile-body"> <h2 class="profile-name">Sophia Chen</h2> <span class="profile-title">UX/UI Designer & Developer</span> <p class="profile-bio">Award-winning designer specializing in interactive experiences and design systems. 7+ years transforming complex problems into intuitive solutions for startups and Fortune 500 clients.</p> <div class="stats-container"> <div class="stat-item"> <div class="stat-value" data-value="98" data-target="98%">98%</div> <div class="stat-label">Job Success</div> </div> <div class="stat-item"> <div class="stat-value" data-value="127" data-target="127">127</div> <div class="stat-label">Projects</div> </div> <div class="stat-item"> <div class="stat-value" data-value="4.9" data-target="4.9">4.9</div> <div class="stat-label">Rating</div> </div> <div class="stat-item"> <div class="stat-value" data-value="6" data-target="6">6</div> <div class="stat-label">Years</div> </div> </div> <div class="skills-container"> <div class="skill-tag"> <svg class="skill-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A9,9 0 0,0 21,12A9,9 0 0,0 12,3Z"></path></svg> UI Design <span class="endorsement-count">47</span> </div> <div class="skill-tag"> <svg class="skill-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg> UX Research <span class="endorsement-count">32</span> </div> <div class="skill-tag"> <svg class="skill-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14.6,16.6L19.2,12L14.6,7.4L16,6L22,12L16,18L14.6,16.6M9.4,16.6L4.8,12L9.4,7.4L8,6L2,12L8,18L9.4,16.6Z"></path></svg> React.js <span class="endorsement-count">29</span> </div> <div class="skill-tag"> <svg class="skill-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"></path></svg> JavaScript <span class="endorsement-count">25</span> </div> <div class="skill-tag"> <svg class="skill-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2,2H8V4H16V2H22V8H20V16H22V22H16V20H8V22H2V16H4V8H2V2M16,8V6H8V8H6V16H8V18H16V16H18V8H16M4,4V6H6V4H4M18,4V6H20V4H18M4,18V20H6V18H4M18,18V20H20V18H18Z"></path></svg> Figma <span class="endorsement-count">38</span> </div> <div class="skill-tag"> <svg class="skill-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M7.5,15A1.5,1.5 0 0,0 6,16.5A1.5,1.5 0 0,0 7.5,18A1.5,1.5 0 0,0 9,16.5A1.5,1.5 0 0,0 7.5,15M6,10V12A6,6 0 0,1 12,18H14A8,8 0 0,0 6,10M6,6V8A10,10 0 0,1 16,18H18A12,12 0 0,0 6,6Z"></path></svg> Design Systems <span class="endorsement-count">22</span> </div> </div> <div class="reviews-section"> <h3 class="reviews-title"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"></path></svg> Client Reviews </h3> <div class="reviews-container"> <div class="reviews-scroll"> <div class="review-card"> <div class="review-header"> <img class="review-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client"> <div> <div class="review-author">Michael Barton</div> <div class="review-project">E-commerce Redesign</div> </div> <div class="review-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> </div> <p class="review-text">"Sophia transformed our outdated platform into a conversion machine. Her deep understanding of UX patterns and ability to bring meaningful data-driven insights resulted in a 34% increase in conversions within the first month."</p> <div class="review-date">April 12, 2023</div> </div> <div class="review-card"> <div class="review-header"> <img class="review-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client"> <div> <div class="review-author">Emma Lawson</div> <div class="review-project">SaaS Dashboard</div> </div> <div class="review-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> </div> <p class="review-text">"We hired Sophia to reimagine our complex analytics dashboard. She simplified everything without sacrificing functionality and delivered a system that reduced our customer support tickets by 67%. Best investment we've made this year!"</p> <div class="review-date">January 3, 2023</div> </div> <div class="review-card"> <div class="review-header"> <img class="review-avatar" src="https://randomuser.me/api/portraits/men/67.jpg" alt="Client"> <div> <div class="review-author">David Kim</div> <div class="review-project">Mobile App Design</div> </div> <div class="review-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> </div> <p class="review-text">"Sophia's expertise in both design and frontend development was crucial to our project's success. She crafted an elegant solution that works flawlessly across devices and has received overwhelmingly positive user feedback."</p> <div class="review-date">March 17, 2023</div> </div> </div> </div> <div class="nav-dots"> <div class="dot active" data-index="0"></div> <div class="dot" data-index="1"></div> <div class="dot" data-index="2"></div> </div> </div> <div class="profile-actions"> <button class="action-btn primary-btn"> Contact Me <svg class="btn-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path></svg> </button> <button class="action-btn secondary-btn"> View Portfolio </button> </div> </div> </div> <script> // Animate stats counter const statValues = document.querySelectorAll('.stat-value'); const animateStats = () => { statValues.forEach(stat => { const targetValue = parseFloat(stat.getAttribute('data-value')); const isPercentage = stat.getAttribute('data-target').includes('%'); const duration = 1500; // milliseconds const stepTime = 20; const steps = duration / stepTime; const increment = targetValue / steps; let currentValue = 0; const counter = setInterval(() => { currentValue += increment; if (currentValue >= targetValue) { clearInterval(counter); currentValue = targetValue; } const displayValue = isPercentage ? Math.round(currentValue) + '%' : Number.isInteger(targetValue) ? Math.round(currentValue) : currentValue.toFixed(1); stat.textContent = displayValue; }, stepTime); }); }; // Delay to ensure visibility setTimeout(animateStats, 300); // Reviews slider const reviewsScroll = document.querySelector('.reviews-scroll'); const dots = document.querySelectorAll('.dot'); let currentReview = 0; const reviewCount = dots.length; const showReview = (index) => { const reviewWidth = document.querySelector('.review-card').offsetWidth + 15; // width + margin reviewsScroll.style.transform = `translateX(-${index * reviewWidth}px)`; // Update active dot dots.forEach(dot => dot.classList.remove('active')); dots[index].classList.add('active'); currentReview = index; }; // Set up dot click handlers dots.forEach(dot => { dot.addEventListener('click', () => { const index = parseInt(dot.getAttribute('data-index')); showReview(index); }); }); // Auto-rotate reviews every 5 seconds setInterval(() => { currentReview = (currentReview + 1) % reviewCount; showReview(currentReview); }, 5000); // Skill tag animation interaction const skillTags = document.querySelectorAll('.skill-tag'); skillTags.forEach(tag => { tag.addEventListener('click', () => { const count = tag.querySelector('.endorsement-count'); const currentValue = parseInt(count.textContent); count.textContent = currentValue + 1; // Add pulse animation count.style.animation = 'pulse 0.5s'; setTimeout(() => { count.style.animation = ''; }, 500); }); }); // Initial fade-in animations for various elements document.addEventListener('DOMContentLoaded', () => { const elements = [ '.profile-name', '.profile-title', '.profile-bio', '.stats-container', '.skills-container', '.reviews-section', '.profile-actions' ]; elements.forEach((selector, index) => { const element = document.querySelector(selector); element.style.opacity = '0'; element.style.animation = `fadeIn 0.5s ease forwards ${0.2 + index * 0.1}s`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Soccer Player Profile Card</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } :root { --primary: #0e62fe; --secondary: #ff6b00; --background: #111827; --card-bg: #1f2937; --text: #ffffff; --text-secondary: #9ca3af; --excellent: #22c55e; --good: #eab308; --average: #f97316; --poor: #ef4444; } body { background-color: var(--background); color: var(--text); display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } .container { width: 100%; max-width: 680px; height: 680px; padding: 15px; position: relative; overflow: hidden; } .profile-card { width: 100%; height: 100%; background-color: var(--card-bg); border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } .profile-header { position: relative; height: 200px; overflow: hidden; } .profile-header img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; filter: brightness(0.7); } .profile-info { position: relative; padding: 20px; margin-top: -80px; display: flex; flex-direction: column; gap: 15px; flex-grow: 1; } .player-photo { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--primary); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); object-fit: cover; margin-bottom: 8px; position: relative; z-index: 2; background-color: var(--card-bg); } .player-badge { position: absolute; top: -10px; right: -10px; background-color: var(--secondary); color: white; border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 20px; border: 3px solid var(--card-bg); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); z-index: 3; } .player-info { display: flex; flex-direction: column; gap: 5px; } .player-name { font-size: 28px; font-weight: 800; background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; letter-spacing: 0.5px; } .player-position { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; } .player-team { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .team-logo { width: 24px; height: 24px; object-fit: contain; } .team-name { font-weight: 600; font-size: 14px; } .player-stats-summary { display: flex; justify-content: space-between; margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 10px 0; } .stat-item { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; } .stat-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 10%; height: 80%; width: 1px; background-color: rgba(255, 255, 255, 0.1); } .stat-value { font-size: 24px; font-weight: 700; color: var(--primary); } .stat-label { font-size: 12px; color: var(--text-secondary); } .skills-section { margin-top: 15px; } .section-title { font-size: 18px; font-weight: 700; margin-bottom: 15px; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 2px; } .skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .skill-item { margin-bottom: 10px; } .skill-header { display: flex; justify-content: space-between; margin-bottom: 5px; } .skill-name { font-weight: 600; font-size: 14px; } .skill-value { font-weight: 700; font-size: 14px; } .progress-bar { height: 8px; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; position: relative; } .progress-fill { height: 100%; border-radius: 4px; transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); width: 0; position: relative; overflow: hidden; } .progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-100%); animation: shimmer 2s infinite; } @keyframes shimmer { 100% { transform: translateX(100%); } } .excellent .progress-fill { background-color: var(--excellent); } .good .progress-fill { background-color: var(--good); } .average .progress-fill { background-color: var(--average); } .poor .progress-fill { background-color: var(--poor); } .highlights-section { margin-top: 15px; } .highlights-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .highlight-item { background-color: rgba(14, 98, 254, 0.1); padding: 10px; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(14, 98, 254, 0.2); position: relative; } .highlight-item:hover { transform: translateY(-3px); background-color: rgba(14, 98, 254, 0.2); box-shadow: 0 8px 15px rgba(14, 98, 254, 0.2); } .highlight-title { font-weight: 600; font-size: 14px; margin-bottom: 5px; color: var(--primary); } .highlight-content { font-size: 12px; color: var(--text-secondary); } .highlight-popup { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) scale(0.9); background-color: var(--card-bg); border: 1px solid var(--primary); padding: 15px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); width: 220px; z-index: 10; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; } .highlight-popup::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: var(--primary) transparent transparent transparent; } .highlight-item:hover .highlight-popup { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); } .popup-title { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: var(--primary); } .popup-content { font-size: 12px; line-height: 1.4; } .glow-effect { position: absolute; width: 200px; height: 200px; background: radial-gradient(circle, rgba(14, 98, 254, 0.3) 0%, rgba(14, 98, 254, 0) 70%); border-radius: 50%; pointer-events: none; z-index: 1; top: 0; left: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; } .player-achv { display: flex; margin-top: auto; justify-content: space-between; padding-top: 10px; position: relative; } .achievement-pill { padding: 5px 10px; background-color: rgba(255, 107, 0, 0.15); border-radius: 20px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; color: var(--secondary); margin-right: 8px; transition: all 0.3s ease; border: 1px solid rgba(255, 107, 0, 0.3); } .achievement-pill:hover { background-color: rgba(255, 107, 0, 0.3); transform: translateY(-2px); } .pill-icon { font-size: 14px; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } } .floating { animation: float 5s ease-in-out infinite; } .corner-accent { position: absolute; width: 150px; height: 150px; background: radial-gradient(circle, rgba(255, 107, 0, 0.3) 0%, rgba(255, 107, 0, 0) 70%); bottom: -50px; right: -50px; border-radius: 50%; z-index: 0; } .form-indicator { display: flex; gap: 5px; margin-top: 10px; } .form-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--text-secondary); } .form-dot.win { background-color: var(--excellent); } .form-dot.draw { background-color: var(--good); } .form-dot.loss { background-color: var(--poor); } @media (max-width: 600px) { .skills-grid { grid-template-columns: 1fr; } .highlights-list { grid-template-columns: 1fr 1fr; } .player-name { font-size: 24px; } .stat-value { font-size: 20px; } } @media (max-width: 400px) { .highlights-list { grid-template-columns: 1fr; } .player-photo { width: 100px; height: 100px; } } </style> </head> <body> <div class="container"> <div class="profile-card"> <div class="profile-header"> <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Stadium Background"> </div> <div class="profile-info"> <div class="player-photo floating"> <img src="https://images.unsplash.com/photo-1557053506-a2c415c89d21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=240&q=80" alt="Marcus Torres" class="player-photo"> <div class="player-badge">9</div> </div> <div class="player-info"> <h1 class="player-name">Marcus Torres</h1> <div class="player-position">Forward / Striker</div> <div class="player-team"> <img src="https://upload.wikimedia.org/wikipedia/en/thumb/7/7a/Manchester_United_FC_crest.svg/1200px-Manchester_United_FC_crest.svg.png" alt="Manchester United" class="team-logo"> <span class="team-name">Manchester United</span> </div> <div class="form-indicator"> <span class="form-dot win" title="Win vs. Arsenal"></span> <span class="form-dot win" title="Win vs. Newcastle"></span> <span class="form-dot draw" title="Draw vs. Liverpool"></span> <span class="form-dot loss" title="Loss vs. Man City"></span> <span class="form-dot win" title="Win vs. Tottenham"></span> </div> </div> <div class="player-stats-summary"> <div class="stat-item"> <div class="stat-value">24</div> <div class="stat-label">Goals</div> </div> <div class="stat-item"> <div class="stat-value">11</div> <div class="stat-label">Assists</div> </div> <div class="stat-item"> <div class="stat-value">36</div> <div class="stat-label">Matches</div> </div> </div> <div class="skills-section"> <h3 class="section-title">Performance Metrics</h3> <div class="skills-grid"> <div class="skill-item excellent"> <div class="skill-header"> <div class="skill-name">Finishing</div> <div class="skill-value">92</div> </div> <div class="progress-bar"> <div class="progress-fill" data-percentage="92"></div> </div> </div> <div class="skill-item good"> <div class="skill-header"> <div class="skill-name">Ball Control</div> <div class="skill-value">84</div> </div> <div class="progress-bar"> <div class="progress-fill" data-percentage="84"></div> </div> </div> <div class="skill-item excellent"> <div class="skill-header"> <div class="skill-name">Speed</div> <div class="skill-value">89</div> </div> <div class="progress-bar"> <div class="progress-fill" data-percentage="89"></div> </div> </div> <div class="skill-item average"> <div class="skill-header"> <div class="skill-name">Stamina</div> <div class="skill-value">78</div> </div> <div class="progress-bar"> <div class="progress-fill" data-percentage="78"></div> </div> </div> <div class="skill-item good"> <div class="skill-header"> <div class="skill-name">Passing</div> <div class="skill-value">85</div> </div> <div class="progress-bar"> <div class="progress-fill" data-percentage="85"></div> </div> </div> <div class="skill-item poor"> <div class="skill-header"> <div class="skill-name">Defending</div> <div class="skill-value">65</div> </div> <div class="progress-bar"> <div class="progress-fill" data-percentage="65"></div> </div> </div> </div> </div> <div class="highlights-section"> <h3 class="section-title">Season Highlights</h3> <div class="highlights-list"> <div class="highlight-item"> <div class="highlight-title">Hat-trick Hero</div> <div class="highlight-content">3 goals vs. Arsenal</div> <div class="highlight-popup"> <div class="popup-title">Hat-trick Hero</div> <div class="popup-content"> Scored 3 stunning goals against Arsenal in the 4-2 victory at Emirates Stadium. Goals came at 23', 56', and 89' minutes. </div> </div> </div> <div class="highlight-item"> <div class="highlight-title">Assist King</div> <div class="highlight-content">4 assists in 1 match</div> <div class="highlight-popup"> <div class="popup-title">Assist King</div> <div class="popup-content"> Set up 4 goals in the 5-0 demolition of Newcastle, breaking the club record for most assists in a single match. </div> </div> </div> <div class="highlight-item"> <div class="highlight-title">Goal of the Season</div> <div class="highlight-content">Bicycle kick vs. City</div> <div class="highlight-popup"> <div class="popup-title">Goal of the Season</div> <div class="popup-content"> Scored a spectacular bicycle kick from 18 yards out in the Manchester derby, later voted as Premier League Goal of the Season. </div> </div> </div> </div> </div> <div class="player-achv"> <div> <span class="achievement-pill"> <span class="pill-icon">🏆</span> Golden Boot </span> <span class="achievement-pill"> <span class="pill-icon">🌟</span> POTY Nominee </span> </div> </div> <div class="corner-accent"></div> </div> </div> <div class="glow-effect"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize progress bars const progressBars = document.querySelectorAll('.progress-fill'); setTimeout(() => { progressBars.forEach(bar => { const percentage = bar.getAttribute('data-percentage'); bar.style.width = percentage + '%'; }); }, 500); // Add glow effect on mouse move const container = document.querySelector('.container'); const glowEffect = document.querySelector('.glow-effect'); container.addEventListener('mousemove', (e) => { const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; glowEffect.style.opacity = '1'; glowEffect.style.left = x + 'px'; glowEffect.style.top = y + 'px'; }); container.addEventListener('mouseleave', () => { glowEffect.style.opacity = '0'; }); // Add hover effects to achievement pills const achievementPills = document.querySelectorAll('.achievement-pill'); achievementPills.forEach(pill => { pill.addEventListener('mouseenter', () => { pill.style.transform = 'translateY(-5px)'; }); pill.addEventListener('mouseleave', () => { pill.style.transform = 'translateY(0)'; }); }); // Add click effect to highlight items const highlightItems = document.querySelectorAll('.highlight-item'); highlightItems.forEach(item => { item.addEventListener('click', () => { item.style.transform = 'scale(0.95)'; setTimeout(() => { item.style.transform = ''; }, 200); }); }); }); </script> </body> </html>
