Custom embeddable (and quite fucking fat!) Gravatar card.

gravatar.html

<div class="gravatar-hovercard"><style></style>
			<div class="gravatar-hovercard__inner">
				<div class="gravatar-hovercard__header-image" style="background: url(&quot;https://2.gravatar.com/userimage/103156140/fdef1312eb4ebe35e38b25507c320840?size=1024&quot;) 50% 100% / 100% auto no-repeat;"></div>
				<div class="gravatar-hovercard__header">
					<a class="gravatar-hovercard__avatar-link" href="https://gravatar.com/asphaltapostle?utm_source=hovercard" target="_blank">
						<img class="gravatar-hovercard__avatar" src="https://2.gravatar.com/avatar/d7f26e6536bf9366a817f475f7cafa9d03d297cc4e3fb4d7974189cc9904fbea?s=256" width="104" height="104" alt="David Blue">
					</a>
					<a class="gravatar-hovercard__personal-info-link" href="https://gravatar.com/asphaltapostle?utm_source=hovercard" target="_blank">
						<h4 class="gravatar-hovercard__name">David Blue</h4>
						
						<p class="gravatar-hovercard__location">Columbia, MO</p>
					</a>
				</div>
				<div class="gravatar-hovercard__body">
								<p class="gravatar-hovercard__description">Self-Described Software Historian, consulting from the bilge and ALWAYS 
H e r e   2   H e l p</p>
							</div>
				<div class="gravatar-hovercard__social-links">
					<a class="gravatar-hovercard__social-link" href="https://gravatar.com/asphaltapostle?utm_source=hovercard" target="_blank" data-service-name="gravatar">
						<img class="gravatar-hovercard__social-icon" src="https://s.gravatar.com/icons/gravatar.svg" width="32" height="32" alt="Gravatar">
					</a>
					
					<a class="gravatar-hovercard__social-link" href="https://threads.net/asphaltapostle" target="_blank" data-service-name="threads">
						<img class="gravatar-hovercard__social-icon" src="https://s.gravatar.com/icons/threads.svg" width="32" height="32" alt="Threads">
					</a>
				
					<a class="gravatar-hovercard__social-link" href="https://x.com/NeoYokel" target="_blank" data-service-name="twitter">
						<img class="gravatar-hovercard__social-icon" src="https://s.gravatar.com/icons/x.svg" width="32" height="32" alt="X">
					</a>
				
					<a class="gravatar-hovercard__social-link" href="https://bsky.app/profile/extratone.bsky.social" target="_blank" data-service-name="bluesky">
						<img class="gravatar-hovercard__social-icon" src="https://s.gravatar.com/icons/bluesky.svg" width="32" height="32" alt="Bluesky">
					</a>
				
				</div>
				
				<div class="gravatar-hovercard__buttons">
					<button class="gravatar-hovercard__button" data-target-drawer="contact">Contact</button>
				</div>
			
				<div class="gravatar-hovercard__footer">
					<a class="gravatar-hovercard__profile-url" title="https://gravatar.com/asphaltapostle" href="https://gravatar.com/asphaltapostle?utm_source=profile-card" target="_blank">
						gravatar.com/asphaltapostle
					</a>
					<a class="gravatar-hovercard__profile-link" href="https://gravatar.com/asphaltapostle?utm_source=profile-card" target="_blank">
						View profile →
					</a>
				</div>
				
			<div class="gravatar-hovercard__drawer" data-drawer-name="contact">
				<div class="gravatar-hovercard__drawer-backdrop" data-target-drawer="contact"></div>
				<div class="gravatar-hovercard__drawer-card">
					<div class="gravatar-hovercard__drawer-header">
						<h2 class="gravatar-hovercard__drawer-title">Contact</h2>
						<button class="gravatar-hovercard__drawer-close" data-target-drawer="contact">
							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M12 13.0607L15.7123 16.773L16.773 15.7123L13.0607 12L16.773 8.28772L15.7123 7.22706L12 10.9394L8.28771 7.22705L7.22705 8.28771L10.9394 12L7.22706 15.7123L8.28772 16.773L12 13.0607Z" fill="#101517"></path>
							</svg>
						</button>
					</div>
					<ul class="gravatar-hovercard__drawer-items">
						
				<li class="gravatar-hovercard__drawer-item">
					<img class="gravatar-hovercard__drawer-item-icon" width="24" height="24" src="https://s.gravatar.com/icons/mail.svg" alt="">
					<div class="gravatar-hovercard__drawer-item-info">
						<span class="gravatar-hovercard__drawer-item-label">Email</span>
						<span class="gravatar-hovercard__drawer-item-text"><a class="gravatar-hovercard__drawer-item-link" href="mailto:[email protected]" target="_blank">[email protected]</a></span>
					</div>
				</li>
			
				<li class="gravatar-hovercard__drawer-item">
					<img class="gravatar-hovercard__drawer-item-icon" width="24" height="24" src="https://s.gravatar.com/icons/calendar.svg" alt="">
					<div class="gravatar-hovercard__drawer-item-info">
						<span class="gravatar-hovercard__drawer-item-label">Calendar</span>
						<span class="gravatar-hovercard__drawer-item-text"><a class="gravatar-hovercard__drawer-item-link" href="https://fantastical.app/davidblue" target="_blank">fantastical.app/davidblue</a></span>
					</div>
				</li>
			
				<li class="gravatar-hovercard__drawer-item">
					<img class="gravatar-hovercard__drawer-item-icon" width="24" height="24" src="https://s.gravatar.com/icons/mobile-phone.svg" alt="">
					<div class="gravatar-hovercard__drawer-item-info">
						<span class="gravatar-hovercard__drawer-item-label">Cell Phone</span>
						<span class="gravatar-hovercard__drawer-item-text">15738234380</span>
					</div>
				</li>
			
				<li class="gravatar-hovercard__drawer-item">
					<img class="gravatar-hovercard__drawer-item-icon" width="24" height="24" src="https://s.gravatar.com/icons/work-phone.svg" alt="">
					<div class="gravatar-hovercard__drawer-item-info">
						<span class="gravatar-hovercard__drawer-item-label">Work Phone</span>
						<span class="gravatar-hovercard__drawer-item-text">15738264160</span>
					</div>
				</li>
			
					</ul>
				</div>
			</div>
		
				
				<div class="gravatar-hovercard__profile-color" style="background: linear-gradient(135deg, rgb(0, 0, 107) 0%, rgb(32, 0, 35) 100%);"></div>
			</div>
		<script>
		const hovercardInner = document.querySelector('.gravatar-hovercard__inner');

		function openDrawer( target, container ) {
			const selector = '.gravatar-hovercard__drawer[data-drawer-name="' + target.dataset.targetDrawer + '"]';
			const drawer = container.querySelector( selector );
			drawer?.classList.add( 'gravatar-hovercard__drawer--open' );
		}

		function closeDrawer( target, container ) {
			const selector = '.gravatar-hovercard__drawer[data-drawer-name="' + target.dataset.targetDrawer + '"]';
			const drawer = container.querySelector( selector );
			drawer?.classList.add( 'gravatar-hovercard__drawer--closing' );
			drawer?.classList.remove( 'gravatar-hovercard__drawer--open' );

			setTimeout( () => {
				drawer?.classList.remove( 'gravatar-hovercard__drawer--closing' );
			}, 300 );
		}

		hovercardInner.querySelectorAll( '.gravatar-hovercard__button' ).forEach( ( el ) => {
			el.addEventListener( 'click', () => openDrawer( el, hovercardInner ) );
		} );
		hovercardInner.querySelectorAll( '.gravatar-hovercard__drawer-close' ).forEach( ( el ) => {
			el.addEventListener( 'click', () => closeDrawer( el, hovercardInner ) );
		} );
		hovercardInner.querySelectorAll( '.gravatar-hovercard__drawer-backdrop' ).forEach( ( el ) => {
			el.addEventListener( 'click', () => closeDrawer( el, hovercardInner ) );
		} );
	</script></div>