Documentation

LinkForest

Welcome to my LinkForest — a curated pathway to all Link . Navigate effortlessly through my world, unlocking a spectrum of resources, insights, and connections in a single click. Explore and discover, for here lies a hub tailored just for you. Let's journey through this digital realm together!


  • Created: 26 September, 2023
  • Update: 26 September, 2023

If you have any questions that are beyond the scope of this help file, Please feel free to create a issues on github.


Installation

Follow the steps below to setup your site template:

  1. Go to GitHub GitHub ( link ). and click on the star (⭐) at top right.
  2. Download the zip.
  3. Unzip the downloaded package and open the /LinkForest folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
  4. If you don't know how to host an HTML page, you can learn how to host these files for free. click here to directly jump.

  5. Below is the folder structure and all important files:
    • LinkForest/index.html - Contains all of the html code
      • LinkForest/assets/css - Stylesheet files
      • LinkForest/assets/images - Images files
      • LinkForest/assets - Javacript files
  6. You can change files as per your need.
  7. You are good to go, now you can use the website as a link tree.

LinkForest Structure

LinkRoom is a simple and useful Linktree design that allows you to organize all your links in one place. The best part of this project is that you'll have complete control over it, and it doesn't require you to pay a single penny to remove watermarks or anything
The template is based on Bootstrap Framework

Basic structure of the page:

<!DOCTYPE html>
            <html lang="en">
            <head>
              <!-- Meta tags, stylesheets, and favicon (if any) -->
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <link rel="stylesheet" href="styles.css">
              <link rel="icon" href="images/favicon.ico" type="image/x-icon">
              <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
            
              <title>Your Page Title</title>
            </head>
            <body>
            
              <!-- Splash screen -->
              <div id="splash-screen">
                <img src="assets/images/icons/splash.png" alt="Startup Logo" />
              </div>
            
              <div id="main-content" style="display: none">
                <div class="profile">
                  <img
                    src="assets/images/profile.png"
                    alt="profile"
                    class="rounded-circle mx-auto d-block profile-img"
                    width="250"
                    height="auto"
                  />
                </div>
                <div class="head">
                  <fieldset>
                    <legend>
                      <h1 class="text-center">Hello, world!</h1>
                    </legend>
                    <legend>
                      <h3 class="text-center">You can call me Rex</h3>
                    </legend>
                    <h3
                      href=""
                      class="typewrite text-center"
                      data-period="1000"
                      data-type='["I am Creative.", "I Love Design.", "I Love to Develop." ]'
                    >
                      <span class="wrap"></span>
                    </h3>
                  </fieldset>
                </div>
            
                <div class="container">
                  <center>
                    <div class="row justify-content-center">
                      <div class="col-lg-3 col-sm-6">
                        <a href="#web-media" style="text-decoration: none">
                          <div class="card-box bg-websites jumper">
                            <div class="inner">
                              <h3>Websites</h3>
                              <p style="float: left">portfolio | shop | etc.</p>
                            </div>
                            <div class="icon">
                              <img
                                src="assets/images/icons/websites.png"
                                alt="websites"
                              />
                            </div>
                          </div>
                        </a>
                      </div>
                      <div class="col-lg-3 col-sm-6">
                        <a href="#social-media" style="text-decoration: none">
                          <div class="card-box bg-social jumper">
                            <div class="inner">
                              <h3>Social Media</h3>
                              <p style="float: left">Instagram | Facebook | etc.</p>
                            </div>
                            <div class="icon">
                              <img src="assets/images/icons/social.png" alt="social" />
                            </div>
                          </div>
                        </a>
                      </div>
                      <div class="col-lg-3 col-sm-6">
                        <a href="#extras" style="text-decoration: none">
                          <div class="card-box bg-extra jumper">
                            <div class="inner">
                              <h3>Extra</h3>
                              <p style="float: left">All Additionals</p>
                            </div>
                            <div class="icon">
                              <img src="assets/images/icons/extra.png" alt="extra" />
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>
                  </center>
                </div>
            
                <center>
                  <div class="banner-img">
                    <img
                      src="assets/images/banner.png"
                      alt="banner"
                      class="img-fluid"
                      height="auto"
                      width="600px"
                    />
                  </div>
                </center>

                <!-- Websites (Personal, Shop, Portfolio, etc.) -->
                <hr class="lines mx-auto d-block" />
                <div class="container" id="web-media">
                  <div class="row justify-content-center">
                    <div class="col-lg-3 col-sm-6">
                      <div class="card-box bg-website">
                        <div class="inner">
                          <h3>BlogsHot</h3>
                          <p>Read Latest Blogs</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/web.png" alt="website" />
                        </div>
                        <a href="Docs/index-2.html" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class="card-box bg-portfolio">
                        <div class="inner">
                          <h3>PortFolio</h3>
                          <p>My Porfolio</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/portfolio.png" alt="website" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class="card-box bg-shop">
                        <div class="inner">
                          <h3>Shop</h3>
                          <p>Buy Tech. Products</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/shop.png" alt="website" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <br /><br />

                <!-- Social Media (Instagram, Facebook, Youtube, etc.) -->
                <hr class="lines mx-auto d-block" />
                <div class="container" id="social-media">
                  <div class="row justify-content-center">
                    <div class="col-lg-3 col-sm-6">
                      <div class="card-box bg-insta">
                        <div class="inner">
                          <h3>@rekkusuPlayer</h3>
                          <p>Instagram Profile</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/insta.png" alt="Insta" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class="card-box bg-facebook">
                        <div class="inner">
                          <h3>Alex Stephen</h3>
                          <p>Facebook</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/facebook.png" alt="facebook" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class="card-box bg-twitter">
                        <div class="inner">
                          <h3>Alex</h3>
                          <p>Twitter</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/twitter.png" alt="twitter" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class;"card-box bg-youtube">
                        <div class="inner">
                          <h3>AlexAtWork</h3>
                          <p>Youtube</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/youtube.png" alt="youtube" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class;"card-box bg-tiktok">
                        <div class="inner">
                          <h3>Alex_At_Work</h3>
                          <p>Tiktok</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/tiktok.png" alt="tiktok" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class;"card-box bg-discord">
                        <div class="inner">
                          <h3>Alex_Arts</h3>
                          <p>Discord Chat</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/discord.png" alt="discord" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
                <br /><br />

                <!-- cards (Github, Dribbble, Spotify, etc.) -->
                <hr class="lines mx-auto d-block" />
                <div class="container" id="extras">
                  <div class="row justify-content-center">
                    <div class="col-lg-3 col-sm-6">
                      <div class;"card-box bg-github">
                        <div class="inner">
                          <h3>AlphaDarkmoon</h3>
                          <p>Github</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/github.png" alt="github" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class;"card-box bg-dribbble">
                        <div class="inner">
                          <h3>rekkusuPlayer</h3>
                          <p>Dribbble Account</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/dribbble.png" alt="dribble" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class;"card-box bg-behance">
                        <div class="inner">
                          <h3>Alex Stephen</h3>
                          <p>Behance Profile</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/behance.png" alt="behance" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class;"card-box bg-twitter">
                        <div class="inner">
                          <h3>JohnDoeOff</h3>
                          <p>Spotify</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/spotify.png" alt="spotify" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                      <div class;"card-box bg-medium">
                        <div class="inner">
                          <h3>Medium Blog</h3>
                          <p>Read My Articles</p>
                        </div>
                        <div class="icon">
                          <img src="assets/images/icons/medium.png" alt="medium" />
                        </div>
                        <a href="#" class="card-box-footer">
                          View More <i class="fa fa-arrow-circle-right"></i>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
            
              <!-- Scripts (jQuery, Bootstrap, custom scripts) -->
              <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
              <script src="scripts.js"></script>
            </body>
            </html>
            

If you need more information, please visit bootstrap site: https://getbootstrap.com


Logo/favicon Customization

A favicon, short for "favorite icon," is a small, typically 16x16 or 32x32 pixel square icon associated with a website or webpage. It is displayed in the browser's address bar, tabs, bookmarks, and other areas to visually represent the website.


You can change it if you desire your own logo or design as favicon -

<!--  favicon link  -->
            <link
              rel="icon"
              href="assets/images/icons/favicon.png"
              type="image/x-icon"
            />
            <link
              rel="shortcut icon"
              href="assets/images/icons/favicon.png"
              type="image/x-icon"
            />            

Replace your favicon / logo with LinkForest/assets/images/icons/favicon.png with same name. i.e:- favicon.png


Photo / Profile Customization

you can change your profile image by replacing original.

<div class="profile">
        <img
          src="assets/images/profile.png"
          alt="profile"
          class="rounded-circle mx-auto d-block profile-img"
          width="250"
          height="auto"
        />
      </div>      

Replace your Profile / photo with LinkForest/assets/images/profile.png with same name. i.e:- profile.png


Cards Customization

There are cards in this page that you can costomize as per your need.

you can change names, descriptions, icons and links of the cards.


For example -

<div class="col-lg-3 col-sm-6">
        <div class="card-box bg-insta">
          <div class="inner">
            <h3>@rekkusuPlayer</h3>
            <p>Instagram Profile</p>
          </div>
          <div class="icon">
            <img src="assets/images/icons/insta.png" alt="Insta" />
          </div>
          <a href="#" class="card-box-footer">
            View More <i class="fa fa-arrow-circle-right"></i>
          </a>
        </div>
      </div>
              

Replace content within h3 tag with your name social media name or account usernames
<h3>@rekkusuPlayer</h3> --> <h3>@samstephen</h3>

Similerly, change icons

<img src="assets/images/icons/insta.png" alt="Insta" /> --> <img src="assets/images/icons/youricon.png" alt="Insta" />

It is recommended that the assets you want to replace with the original should retain the same name in every location. Simply overwrite the files.


Host Your Website for Free on GitHub

Here, we are going to discuss the step-by-step process of hosting a website on GitHub for free. So, you can also host your portfolio or your college project online with GitHub.

Step 1: Create a GitHub account

The first step is to create a GitHub account if you don’t have one already. You can create an account for free on the GitHub website.


If you already have one then do github login to your account.


Step 2: Create a new repository

Next, you need to create a new repository to host your website. To create a new repository, click on the Create repository button on your left section after the new registration. You can also do it by clicking on the new button on your GitHub Dashboard. Give your repository a name that corresponds to your username. For example, if your website is called username, name your repository username.github.io.



Give the description of the website you are creating and then click on create repository button.



Step 3: Upload the files

To create a website, you need an HTML file that contains the content of your website, LinkForest.
So, just click on Upload an existing file option and a file manager will open,select the entire folder of the project, click Submit.

  • If you don't want to add a 'Docs' folder that includes documentation files, then only select the 'HTML' folder.


after few seconds, all of the files will be uplaoded successfully.

img0
Step 4: Enable GitHub Pages

After pushing your code to your repository, you need to enable GitHub Pages for your repository.
To do this, navigate to your repository on GitHub and click on the Settings tab. Scroll down to the Pages section from the left section.


Step 5: Visit your website

Once GitHub Pages are enabled for your repository, your website is now live! You can visit your website by navigating to https://your-username.github.io/ in your web browser. It might take a few moments for the changes to propagate and for your website to be accessible.

That's all, Now you have a free running website.

FAQ

LinkForest is a linktree tool.
Linktree is a tool that allows you to create a simple landing page containing multiple links to various web pages or social media profiles, all accessible through a single link.
Yes! You can customize your Linktree page by adding, rearranging, or removing links to suit your preferences. You can also change the order of the links and choose different icons for each link.
If you have programming knowledge, you can definitely tinker with the source code; otherwise, follow the instructions.
Absolutely! LinkForest uses Bootstrap5 which makes it mobile-friendly, ensuring a seamless and user-friendly experience for visitors accessing your links on smartphones and tablets.
Linktree is completely free to download, modify, and use. It is registered under an MIT license.

" Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software. "
All available option for communication are in Support block of this Documentation.

Source & Credits

Images:

Fonts:

Scripts:


Support

If this documentation doesn't answer your questions, So, Please contact us via

  • email: omnishots.alpha@gmail.com
  • Reddit: u/RekkusuYash
  • Instagram: @alphadarkmoon.github

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Don’t forget to give the star on this template on Github


Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0 (8 October, 2023)

Initial Release

Downlaod Options