/LinkForest

An HTML template to gather all of your links in one place

Primary LanguageCSSApache License 2.0Apache-2.0

LinkForest

An HTML template to gather all of your links in one place

🌲What is LinkForest?

Well, as you all know, most social medias support only 1 link in the profile bio. So LinkForest is developed to expand the ability of that link. Also It is completely free, open source & customizable.

📥Download

👀Features

  • Dark theme support
  • Sharing ability
  • Custom icons, SVGs & pictures for a link
  • Custom colors for links
  • Small icons on the page bottom (good for those who have a lot of links and social media links might be lost among them)
  • Easter eggs!

⚙How to use?

The only thing you need, is a web hosting service (it doesn't matter to use a free or paid service). Then easily by customizing and uploading the customized template on the host, it will be usable for profile bio.

Some free web hosting services:

🎨How to Customize?

To customize, you need a little knowledge of Front-end developing. Then by following instructions below you can customize the template. If you are a little bit more skilled, you can easily edit CSS and JS files.

Also you need to change every text in index.html file starting with $. For example if I see $Username in index.html file, I will change it with @hamid0740.

  • All available colors: (use them as class of link element)

    #45d46e green paypal

    #0080ff blue

    #9d02e7 purple

    #ff63b4 pink

    #f20716 red

    #ff7d2d orange

    #fad223 yellow

    #f4d7af cream clubhouse

    #753422 brown

    #646464 gray github stack-overflow crowdin

    #128c7e whatsapp

    #4995be telegram

    #f43b86 instagram

    #7289da discord

    #1da1f2 twitter

    #4267b2 facebook

    #69c9d0 tiktok

    #ff4500 reddit

    #e60023 pinterest

    #ff0000 youtube

    #6441a5 twitch

    custom-color custom-color

    You can also use custom color. To do, read the instructions below.

  • New Custom section & link:

    You must change $SectionName, $Color, $Link, $FontAwsomeIcon & $LinkText. Also you can swap the place of icon to right, or use both sides for 2 icons.

<p class="section-name">$SectionName</p>
<a class="link $Color" href="$Link" target="_blank">
  <i class="$FontAwesomeIcon link-icon-l"></i> <!-- Example of Font Awesome icon: 'fab fa-github' -->
  <p class="link-text">$LinkText</p>
  <i class="link-icon-r"></i> <!-- To make text align center, keep both 'link-icon-l' and 'link-icon-r' elements. EVEN HAVING NO ICON OR IMAGE -->
</a>

  • Custom color for a link

    To have a custom color for a link, you must replace $CustomColor with your desirable color. Also for class of the link, you must use custom-color.

<a style="--custom-color: $CustomColor;" class="link custom-color" href="$Link" target="_blank">
  . . .
</a>
  • Custom icon-image (svg, png) as link icon: Screenshot Instead of link-icon-image-l class, you can use link-icon-image-r class to swap the side of icon-image to right. Also you need to change $IconImageLink with your icon-image link.
<i class="link-icon-image-l" style="background-image: url('$IconImageLink')"></i>
  • Set a picture for a link Screenshot Instead of link-image-l class, you can use link-image-r class to swap the side of image to right. Also you need to change $ImageLink with your image link.
<i class="link-image-l" style="background-image: url('$ImageLink')"></i>

👥How many...?

How many people have seen a LinkForest user's page?

📝How to contribute?

Every contribution is welcomed. Just open a Pull request and submit your codes there. Once accepted, your codes will be added. Also if you have any ideas that can make this template better, submit it in Discussions section. To report any bugs or problems, open an Issue describing the bug.

🧰Third party components

These are all 3rd party components used in LinkForest: