Linktree ✨

This is a free (and easy to use) alternative to linktree

---

Demo

My Linktree Page

Example by @ho0ber

https://links.sam.codes
He also build Lazylinks: A simple python package that makes it easy to write content and generate static HTML to be deployed and you can read more about it in his blog

---

How to customize the template (which lines you should change)

index.html file

1. line 7 - website title
2. line 10 - website icon image
3. line 14 - profile image
4. line 16 - user name
5. line 17 - description
6. lines 20-49 - your social media links

style.css file

1. line 4 - text color
2. line 5 - font
3. line 16 - your backround image/color

If you want to change the username and description colors:

Let's say to 'red' for the example

• username - add 'color: red;' after line 40
• description - add 'color: red;' after line 44
• both - change line 11 from 'color: var(--textColor);' to 'color: red;'

---

Where to host your website (for free)?

Netlify (easy to navigate): https://netlify.app
Github Pages (better for begginers): https://pages.github.com
Vercel: https://vercel.com/
Heroku: https://www.heroku.com

---

Analytics

I personally recommend using Google Tag Manager and connect it to Microsoft Clarity

Google Tag Menger: https://tagmanager.google.com/
Microsoft Clarity: https://clarity.microsoft.com/
Netlify Analytics (9$ per month): https://docs.netlify.com/monitor-sites/analytics/
Google Analytics: https://analytics.google.com

---

Social Media Icons

Here you can choose your wanted icons for each link:
https://fontawesome.com/search?o=r&m=free

Before using:

• Make sure that you choose only from the "free" section.
• Copy the code for HTML/CSS.

How to use (Example)

Let's say you want to use book icon instead of the Twitter icon

The line under your wanted link contains this line: "fab fa-twitter"

Then, after founding the icon that you want and its code, paste the code in the same place where was your previous one

The final code shoud look like this: "fa-solid fa-book"

---

Backround image

You can change backround to color instead of using an image.

Backround Color

background-color: #7E65F5;
You can find your wanted color code here: https://www.color-hex.com

Gradient Backround Color

background-image: linear-gradient (#E8E0FF, #7E65F5);
CSS Gradient Generator: https://www.css-gradient.com/

---

Other Free Resources

Coolors (colors palettes): https://coolors.co
ColorsWall (colors palette): https://colorswall.com
CSS color picker from photos: https://imagecolorpicker.com/
CSS color keyword: https://www.w3.org/wiki/CSS/Properties/color/keywords#Basic_Colors
Google Fonts: https://fonts.google.com/
Favicon (icons): https://favicon.io/
BGJar (free svg backgrounds): https://bgjar.com
Box Icons (free icons): https://boxicons.com