A super-simple free web template to store and share your links like Linktree or Link-in-bio.
- π No installation or fancy setup; just replace links/icons!
- πΈ Add links to Instagram posts similar to Later's link-in-bio!
- β‘ Uses a modified version of the lightweight CSS framework chota; the entire size of the site is around 250kb with minimum assets!
- π Switch between dark and light modes; automatically choose the mode based on your system preference!
- π Icons powered by iconify; find tons of free icons for almost any purpose!
- π Categorize links; store your links under various categories!
The first step is to click the Use this template button above the file list to create a new repository.
Go to index.html file. Social media links are under,
<nav class="nav">
Just replace the existing links with yours and you're done!
<a class="brand" href="https://www.instagram.com/example/" target="_blank" aria-label="Instagram">
Go to iconify icon sets and search for the icon you want. E.g., if you want to replace the existing Instagram icon with another from a different set, copy the unique icon name and paste it into the data-icon
attribute. You can also change the icon colour right there to match your branding or specific needs.
<span class="iconify-inline" data-icon="iconoir:instagram" style="color: #0054ff"></span>
Add your custom svg
icon inside <span class="custom-icon">
. You can use SVGOMG to optimize SVG.
<a class="button outline secondary" href="https://productraid.com/" target="_blank">
<span class="custom-icon">
<svg xmlns="http:https://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 3 3"><path d="M.652.2h1.446l-.238.886h.975l-.352 1.313H1.292l.114-.428h.749l.122-.457h-.374c-.684 0-1.283.46-1.46 1.12H0L.652.201ZM.98.63l-.122.457h.56L1.54.629H.98Z"/></svg>
</span>Product Raid
</a>
Just add/remove that entire <a>
tag!
<a class="brand" href="https://www.instagram.com/example/" target="_blank" aria-label="Instagram">
<span class="iconify-inline" data-icon="ri:instagram-fill" style="color: #0054ff"></span>
</a>
If you'd like to completely remove the Insta link-in-bio, remove the entire <section>
.
<section>
<details>
<summary class="text-center text-error">Insta Link-in-Bio</summary>
<div class="insta-gallery">
<div class="insta-item">
<a href="https://radio.digitalmalayali.in/" target="_blank" aria-label="Insta link-in-bio">
<img class="insta-img text-center" src="https://i.ibb.co/KykYQC8/radio.webp" width="100%"
height="100%" alt="Insta post"></a>
</div>
</div>
</details>
</section>
Also, make sure to remove these CSS classes from style.css
as well:
section,
summary {
margin: .8em 0 .5em
}
.insta-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.insta-item {
aspect-ratio: 1;
margin: .2em;
overflow: hidden
}
.insta-img {
object-fit: cover;
object-position: center
}
Adding a new link-in-bio is super easy. Make sure to add it at the start.
<div class="insta-item">
<a href="https://radio.digitalmalayali.in/" target="_blank" aria-label="Insta link-in-bio">
<img class="insta-img text-center" src="https://i.ibb.co/KykYQC8/radio.webp" width="100%"
height="100%" alt="Insta post"></a>
</div>
Link buttons are in the <main>
tag. You can replace the existing links and icons just like you did for social media links.
<a class="button outline secondary" href="https://www.example.com/" target="_blank">
<span class="iconify-inline" data-icon="ri:ball-pen-fill"></span>Example
</a>
Add/remove the entire class named row
.
<div class="row">
<div class="col is-center">
<a class="button outline secondary" href="https://www.example.com" target="_blank">
<span class="iconify-inline" data-icon="ri:ball-pen-fill"></span>Example
</a>
</div>
</div>
Add/remove the <h5>
tag.
<h5 class="text-center">Blogs</h5>
Add/remove the <span class="tag">
. Also, make sure to use/remove <div class="col link">
instead of <div class="col">
.
<div class="row">
<div class="col link is-center">
<a class="button outline secondary" href="https://radio.digitalmalayali.in/" target="_blank"><span
class="iconify-inline" data-icon="ri:radio-fill"></span>24/7
Radio <span class="tag is-small bd-success text-success">New</span>
</a>
</div>
</div>