<div class="bio-container">
<img src="https://placehold.co/100x100/3b82f6/ffffff?text=U" alt="Profile" class="profile-pic">
<h1>@Username</h1>
<p>Digital Creator & Developer</p>
<div class="links-list">
<a href="#" class="bio-link">My Website</a>
<a href="#" class="bio-link">Latest YouTube Video</a>
<a href="#" class="bio-link">Buy me a Coffee</a>
<a href="#" class="bio-link">Twitter / X</a>
</div>
</div>
.bio-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
max-width: 400px;
margin: 0 auto;
padding: 40px 20px;
text-align: center;
}
.profile-pic {
width: 90px;
height: 90px;
border-radius: 50%;
margin-bottom: 15px;
border: 3px solid #e5e7eb;
}
h1 {
font-size: 1.25rem;
margin: 0 0 5px;
color: #1f2937;
}
p {
color: #6b7280;
margin: 0 0 30px;
}
.links-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.bio-link {
display: block;
padding: 14px;
background: #fff;
color: #1f2937;
text-decoration: none;
border: 1px solid #d1d5db;
border-radius: 50px;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.bio-link:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-color: #1f2937;
}
