wordpress右侧栏个人介绍代码 HTML

<div style="background: #ffffff; border-radius: 16px; padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); max-width: 400px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
<!-- 头像部分 -->
<div style="text-align: center; margin-bottom: 25px;">
<img src="https://via.placeholder.com/120" alt="个人头像" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #f0f0f0; transition: transform 0.3s ease;">
</div>

<!-- 个人信息 -->
<div style="text-align: center; margin-bottom: 20px;">
<h3 style="margin: 0 0 8px; font-size: 22px; font-weight: 600; color: #333;">Now Doing</h3>
<p style="margin: 0; color: #666; font-size: 14px;">专注创造，持续行动</p>
</div>

<!-- 标签 -->
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 25px;">
<span style="background: #f0f8ff; color: #4285f4; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">创作者</span>
<span style="background: #f0fff4; color: #34a853; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">开发者</span>
<span style="background: #fff8e1; color: #fbbc05; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;">设计师</span>
</div>

<!-- 社交图标 -->
<div style="display: flex; justify-content: center; gap: 15px;">
<!-- 邮箱 -->
<a href="#" title="邮箱" target="_blank" style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; transition: all 0.3s ease;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<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>
</a>

<!-- Telegram -->
<a href="#" title="Telegram" target="_blank" style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; transition: all 0.3s ease;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21.198 2.433a2.242 2.242 0 0 0-1.022.215l-8.609 3.33c-2.068.8-4.133 1.598-5.724 2.21a405.15 405.15 0 0 1-2.849 1.09c-.42.147-.99.332-1.473.901-.728.968.193 1.798.919 2.286 1.61.516 3.275 1.009 4.654 1.472.509 1.793.997 3.592 1.48 5.388.16.36.506.494.864.498l-.002.018s.281.028.555-.088a.5.5 0 0 0 .287-.315c.345-1.289.66-2.589.954-3.899l4.023 2.498c.472.293.891.438 1.249.438.478 0 .796-.209.955-.484a.595.595 0 0 0 .091-.593c-.05-.133-.12-.26-.23-.372L19.895 7.88s.695-.499 1.202-.778c.395-.217.675-.455.765-.714a.795.795 0 0 0 .081-.34c-.003-.215-.12-.405-.295-.508-.236-.144-.578-.243-.95-.243z"></path>
</svg>
</a>

<!-- ICQ -->
<a href="#" title="ICQ" target="_blank" style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; transition: all 0.3s ease;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c1.19 0 2.34-.21 3.41-.6.3-.11.49-.4.49-.72 0-.22-.1-.43-.27-.57-.63-.53-1.03-1.31-1.03-2.19 0-1.59 1.29-2.88 2.88-2.88.88 0 1.66.4 2.19 1.03.14.17.35.27.57.27.32 0 .61-.19.72-.49.39-1.07.6-2.22.6-3.41 0-5.52-4.48-10-10-10z"></path>
<circle cx="8.5" cy="10.5" r="1.5"></circle>
<circle cx="15.5" cy="10.5" r="1.5"></circle>
<path d="M8 16s1.5 2 4 2 4-2 4-2"></path>
</svg>
</a>

<!-- WhatsApp -->
<a href="#" title="WhatsApp" target="_blank" style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; transition: all 0.3s ease;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
<path d="M9 10a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5H9z"></path>
<path d="M13 10a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-2z"></path>
</svg>
</a>

<!-- Twitter -->
<a href="#" title="Twitter" target="_blank" style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; transition: all 0.3s ease;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<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>

<!-- GitHub -->
<a href="#" title="GitHub" target="_blank" style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f5f5f5; transition: all 0.3s ease;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<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>
</div>

<!-- 悬浮效果 -->
<style>
div[style*="max-width: 400px"] img:hover {
transform: scale(1.05);
}
div[style*="max-width: 400px"] a:hover {
background: #e8f4ff !important;
transform: translateY(-3px);
}
</style>
</div>