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