Social Link Hub
Professional link-in-bio template with dark mode. Perfect Linktree alternative for creators, influencers, and businesses
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
- Download the template files
- Replace the profile picture in
assets/images/
- Edit
index.html
with your information - Customize colors in
assets/css/styles.css
- 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:
- Copy any
<li>
block - Update the
href
with your URL - Change the title and description
- 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:
- Choose a font from Google Fonts
- 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