HTML Bio Generator - Create Beautiful Bio Pages

A modern, intuitive tool for creating beautiful HTML bio pages with ease. Perfect for developers, freelancers, content creators, and anyone who wants to showcase their professional presence online.

Bio Information Form

Images provided by: Unsplash

Social Links (Optional)

Preview

HTML Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>John Doe - プロフィール</title>
  <style>
    .profile-container {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 2rem;
      background-color: #eff6ff;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .profile-header {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .profile-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #3b82f6;
    }
    .profile-name-title {
      flex: 1;
    }
    .profile-name {
      margin: 0;
      font-size: 1.8rem;
      color: #1e3a8a;
    }
    .profile-title {
      margin: 0.5rem 0 0;
      font-size: 1.1rem;
      color: #3b82f6;
    }
    .profile-bio {
      line-height: 1.6;
      margin-bottom: 1.5rem;
      color: #1e3a8a;
    }
    .profile-social {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .social-link {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      background-color: #3b82f6;
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-size: 0.9rem;
      transition: all 0.2s;
    }
    .social-link:hover {
      background-color: #93c5fd;
      color: #1e3a8a;
    }
    @media (max-width: 600px) {
      .profile-header {
        flex-direction: column;
        text-align: center;
      }
      .profile-social {
        justify-content: center;
      }
    }
  </style>
</head>
<body>
  <div class="profile-container">
    <div class="profile-header">
      <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="John Doe" class="profile-avatar">
      <div class="profile-name-title">
        <h1 class="profile-name">John Doe</h1>
        <p class="profile-title">Web Developer & Designer</p>
      </div>
    </div>
    <div class="profile-bio">
      <p>A freelance web developer based in San Francisco. I specialize in modern web application development using React, Next.js, and TypeScript. My hobbies include photography and traveling.</p>
    </div>
    <div class="profile-social">
      <a href="https://github.com/johndoe" class="social-link" target="_blank">GitHub</a>
      <a href="https://twitter.com/john_doe" class="social-link" target="_blank">Twitter</a>
      <a href="https://linkedin.com/in/johndoe" class="social-link" target="_blank">LinkedIn</a>
      <a href="https://instagram.com/john.doe" class="social-link" target="_blank">Instagram</a>
      <a href="https://johndoe.com" class="social-link" target="_blank">Website</a>
    </div>
  </div>
</body>
</html>

Copy this HTML code and paste it into your blog or website. You can adjust the CSS as needed.