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 lightweight CSS framework chota; the entire size of the site is around 140kb!
- 🌙 Switch between dark and light modes; automatically chooses 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>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>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>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 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>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://example.com/" target="_blank">
<span class="iconify-inline" data-icon="ri:radio-fill"></span>Example
</a>
<span class="tag is-small bd-success text-success">New</span>
</div>
</div>Refer chota documentation.