Description
.tpl-section{background:#0f0f0f;border:1px solid #c9a84c;border-radius:10px;padding:28px 32px;margin:28px 0;font-family:’Segoe UI’,system-ui,sans-serif;color:#e8e8e8}
.tpl-section h3{color:#c9a84c;font-size:1.05rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #2a2a2a}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tpl-grid li{background:#181818;border:1px solid #2a2a2a;border-radius:7px;padding:14px 16px;font-size:.9rem;line-height:1.5}
.tpl-grid li strong{display:block;color:#c9a84c;margin-bottom:4px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.tpl-included{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.tpl-included li{display:flex;align-items:flex-start;gap:9px;background:#181818;border-radius:7px;padding:10px 13px;font-size:.88rem;line-height:1.45}
.tpl-included li::before{content:”✓”;color:#c9a84c;font-weight:700;flex-shrink:0;margin-top:1px}
.tpl-stack{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-stack li{background:#1a1a1a;border:1px solid #c9a84c33;border-radius:20px;padding:5px 14px;font-size:.8rem;color:#d4b96a;font-weight:600}
.tpl-for{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-for li{background:#1a1a1a;border:1px solid #3a3a3a;border-radius:6px;padding:7px 14px;font-size:.85rem;color:#ccc}
.tpl-for li::before{content:”→ “;color:#c9a84c}
Link-in-Bio Page HTML Template — Stand Out on Every Platform
Replace generic link-in-bio tools with a fully custom page you own. This single-file HTML template gives influencers, creators, and personal brands a visually striking hub that loads instantly and converts followers into fans.
Feature Highlights
- Animated Gradient BGCSS keyframe animation cycles through brand colors endlessly. Customizable in 2 variables.
- Glass-Morphism ButtonsFrosted-glass link cards with icon, label, optional badge (‘New’), and hover lift effect.
- Social Stats BarFollowers / Posts / Following counter strip with platform icons.
- Content Grid3×2 thumbnail grid with play-icon overlay for video content or product previews.
- Instagram Preview StripHorizontal scroll row of 6 images mimicking an IG feed — perfect for photographers.
- Dark Mode ToggleSystem-preference-aware with localStorage persistence. Smooth CSS transition.
- Social Links FooterIcon-only row for all major platforms: IG / TikTok / YT / X / Pinterest / Spotify.
- Profile SectionCircular photo with ring animation, display name, handle, and one-line bio.
What’s Included
- index.html — fully self-contained single file
- style.css — extended stylesheet for deep customization
- /assets/ — demo profile photo, platform SVG icons, content thumbnails
- README.md — replace 6 variables to fully rebrand in under 5 minutes
Tech Stack
- Pure CSS Animations
- Vanilla JS (minimal)
- Google Fonts — Poppins
- CSS Custom Properties
- Single HTML file
- No monthly fees
Perfect For
- Instagram and TikTok influencers replacing Linktree
- Content creators owning their bio link without subscriptions
- Photographers sharing a curated Instagram-style grid
- Musicians linking to Spotify, merch, and tour dates
- Personal brands consolidating all their social presence
Frequently Asked Questions
Can I add custom social media links?+
Yes. Each link button is an a tag — update the href and icon class to point to any platform or URL you like. No limit on the number of links.
Is the gradient background customizable?+
Completely. The gradient is a single CSS custom property. Change the two hex values to any colors that match your personal brand.
Does it work as a Linktree alternative?+
Yes. Host on GitHub Pages, Netlify, or any static host for free and point your Instagram or TikTok bio URL to it — same concept, full design control.
Can I embed a video or music player?+
Yes. Drop a YouTube, Spotify, or SoundCloud embed iframe into the card section and style it with the existing CSS classes.
Is analytics tracking included?+
The template has a placeholder for Google Analytics or Plausible. Add your tracking snippet before the closing head tag to measure link clicks.
Mason B. –
Clean minimalist style that lets the work speak for itself. The filterable project grid with category tags is a standout feature. The dark/light mode toggle is smooth but I noticed a brief flash on load — easily fixed with a localStorage preload snippet.
Ava P. –
Landed two new clients within a week of publishing my portfolio using this template. The contact section with social links and a simple form converts really well. Would recommend to any freelancer.
Aiden K. –
The project cards with live-preview overlay on hover set this apart from every other freelancer template I’ve tried. The timeline section for work experience is cleanly implemented and tells a great story. Ten out of ten.
Zoe R. –
As a designer, I was worried about modifying another designer’s template — but the component structure is so logical that I reskinned the whole thing in an afternoon. Skills progress bars and tool icons look great on my live site.