bantam.hostbantam.host
Social Link Hub screenshot 1

Tech Stack

HTML5CSS3JavaScriptCSS GridFlexbox

Key Features

  • Dark/Light Mode Toggle
  • Mobile-First Design
  • Smooth Animations
Categorysocial

Social Link Hub

Professional link-in-bio template with dark mode. Perfect Linktree alternative for creators, influencers, and businesses

NEW

A modern link-in-bio solution that helps you share all your important links in one beautiful page. Perfect alternative to Linktree with more customization options, automatic dark mode, and a professional design that represents your brand perfectly.

What's Included

  • Animated profile picture with morphing blob effect
  • Quick contact buttons for phone, email, and sharing
  • Unlimited link cards with custom icons and descriptions
  • Dark/light mode with automatic system detection
  • Smooth entrance animations for visual appeal
  • Mobile-optimized responsive design
  • Beginner-friendly commented code

Good For

  • Content creators and influencers
  • Freelancers and consultants
  • Musicians and artists
  • Small business owners
  • Social media managers
  • Anyone needing a professional link hub

Technical Details

Built with pure HTML, CSS, and JavaScript - no frameworks or dependencies required. Features modern CSS with custom properties for easy theming, responsive Grid and Flexbox layouts, and smooth animations throughout.

Includes self-hosted Nunito fonts and SVG icons for perfect consistency across all devices. Every line of code includes helpful comments, making customization simple even for beginners.

Documentation

Social Link Hub Template

A modern link-in-bio template inspired by Linktree. Perfect for creators, influencers, and professionals who want to share all their important links in one beautiful page.

šŸš€ Quick Start

  1. Download the template files
  2. Replace the profile picture in assets/images/
  3. Edit index.html with your information
  4. Customize colors in assets/css/styles.css
  5. Upload to bantam.host

šŸ“ File Structure

social-link-hub/
ā”œā”€ā”€ index.html                   # Main page
ā”œā”€ā”€ assets/
│   ā”œā”€ā”€ css/
│   │   └── styles.css           # All styling
│   └── images/
│       ā”œā”€ā”€ profile-picture.webp # Your photo (replace this)
│       ā”œā”€ā”€ preview.jpg          # Social media preview
│       ā”œā”€ā”€ favicon/             # Browser tab icons
│       └── icon/                # Button icons
ā”œā”€ā”€ js/
│   └── script.js                # Dark mode & interactions
ā”œā”€ā”€ libraries/
│   ā”œā”€ā”€ animate.css              # Animations
│   └── google-font/             # Nunito font files
└── README.md                    # This file

āœļø Customization Guide

1. Personal Information

Open index.html and update:

  • Your name (line 134) - Replace "John Doe"
  • Your bio (line 151) - Write 1-2 sentences about yourself
  • Phone number (line 140) - Update the href and display text
  • Email address (line 145) - Change to your email

2. Profile Picture

Replace assets/images/profile-picture.webp with your photo:

  • Square images work best (1:1 ratio)
  • Recommended size: 400x400px or larger
  • Supported formats: WebP, JPG, PNG

3. Social Links

Each link follows this pattern in index.html:

<li class="animate__animated animate__bounceIn" style="animation-delay:0.2s;">
  <a href="YOUR-LINK-HERE" target="_blank" rel="noopener">
    <img src="assets/images/icon/website.svg" alt="Icon" class="icon icon-large">
    <div>
      <h3>Link Title</h3>
      <small>Link description</small>
    </div>
  </a>
</li>

To add a new link:

  1. Copy any <li> block
  2. Update the href with your URL
  3. Change the title and description
  4. Increase animation delay (0.2s, 0.4s, 0.6s, etc.)

4. Color Scheme

Edit assets/css/styles.css to customize colors:

Dark Mode Colors (lines 22-24):

--bg-dark: #000;        /* Background (black) */
--text-dark: #fff;      /* Text (white) */

Light Mode Colors (lines 27-29):

--bg-light: #fff;       /* Background (white) */
--text-light: #000;     /* Text (black) */

Button Colors (lines 32-35):

--btn-bg: #111;         /* Button background */
--btn-bg-hover: #222;   /* Button hover state */
--btn-text: #fff;       /* Button text */

5. Fonts

The template uses Nunito font. To change it:

  1. Choose a font from Google Fonts
  2. Update the font-family in style.css (line 100)

šŸŽØ Features

  • Dark/Light Mode - Automatic theme detection + manual toggle
  • Mobile First - Looks great on all devices
  • Smooth Animations - Eye-catching entrance effects
  • Share Button - Native sharing on mobile devices
  • Accessibility - Screen reader friendly
  • Fast Loading - Optimized assets and critical CSS

šŸ’” Tips

Adding Custom Icons

  • Place new SVG icons in assets/images/icon/
  • Keep icons monochrome for theme compatibility
  • Size: 24x24px recommended

SEO Optimization

Update these meta tags in index.html:

  • Title tag (line 54)
  • Description (line 57-58)
  • Keywords (line 61)
  • Social media preview image (lines 75 & 82)

Performance Tips

  • Compress your profile picture
  • Use WebP format for better compression
  • Keep the total page size under 1MB

šŸ›  Technologies Used

  • HTML5 with semantic markup
  • CSS3 (Grid, Flexbox, Animations)
  • Vanilla JavaScript (no dependencies)
  • Nunito Font (self-hosted)
  • SVG icons for crisp display

šŸ“± Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Mobile browsers (iOS/Android)

šŸŽÆ Perfect For

  • Content creators
  • Social media influencers
  • Freelancers & consultants
  • Musicians & artists
  • Small business owners
  • Anyone with multiple online presences

šŸ†˜ Troubleshooting

Profile picture not showing?

  • Check the file path and extension
  • Ensure the image is in assets/images/

Dark mode not working?

  • Clear browser cache
  • Check JavaScript console for errors

Links not clickable?

  • Verify URLs include https://
  • Check for typos in the href attribute

šŸ“„ License

Free to use for personal and commercial projects. No attribution required. Credit to anuswarrrao for the template.


Made with ā¤ļø for the creative community