Adding a “Linkfree vs Linktree” comparison chart to website

Open CBID2 opened this issue 1 year ago • 11 comments

Description

Hey everyone! 😊 If we want people to use Linkfree as opposed to Linktree, I think it’d be beneficial to add a “Linkfree vs Linktree” section on the website. It can outline the differences between the two products (e.g., features). What do you think?

Screenshots

No response

Additional information

No response

Dec 18 '22 18:12 CBID2

It's great having you contribute to this project

Welcome to the community :nerd_face:

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

Dec 18 '22 18:12 github-actions[bot]

Could I be assigned to this?

Dec 19 '22 09:12 orbitalmartian8

Could I be assigned to this

Dec 19 '22 13:12 Ajiboso-Adeola

Could I be assigned to this?

Would you be up to working on this with me and @Ajiboso-Adeola? I’ve been wanting to do more collaborative coding projects, and this is a great way to start! 😄

Dec 20 '22 06:12 CBID2

Yeah

Dec 20 '22 11:12 Ajiboso-Adeola

Yeah

Thanks

Dec 20 '22 19:12 CBID2

Hi @Ajiboso-Adeola and @LinuxGamer! :) I hope you are enjoying your holiday! :) I created a rough draft of the comparison chart. Outside of customization and one being free and the other being a paid tool, I'm not quite sure what other differing features these two sites have, so I'm going to need you two to add this information to the chart. If you don't have a Replit account, click here to create one(I personally recommend logging in with GitHub to speed up the process). If you already do have an account, here's my invitation link to the chart. Thanks for your help! :)

Dec 26 '22 02:12 CBID2

Feature LinkTree LinkFree

Sign-up process Sign up through website Follow instructions in GitHub repository and submit pull request

Customization options Customizable background image and color scheme Customizable background image and color scheme

Link organization Organize links with categories Organize links with categories

Analytics Available Not available

Cost Free or paid plans available Free

Feature	LinkTree	LinkFree
Sign-up process	Sign up through website	Follow instructions in GitHub repository and submit pull request
Customization options	Customizable background image and color scheme	Customizable background image and color scheme
Link organization	Organize links with categories	Organize links with categories
Analytics	Available	Not available
Cost	Free or paid plans available	Free

How's this?

Dec 29 '22 14:12 loftwah

Here is a HTML example of what it could look like.

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 50%;
      border-collapse: collapse;
    }

    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Feature</th>
      <th>LinkTree</th>
      <th>LinkFree</th>
    </tr>
    <tr>
      <td>Sign-up process</td>
      <td>Sign up through website</td>
      <td>Follow instructions in GitHub repository and submit pull request</td>
    </tr>
    <tr>
      <td>Customization options</td>
      <td>Customizable background image and color scheme</td>
      <td>Customizable background image and color scheme</td>
    </tr>
    <tr>
      <td>Link organization</td>
      <td>Organize links with categories</td>
      <td>Organize links with categories</td>
    </tr>
    <tr>
      <td>Analytics</td>
      <td>Available</td>
      <td>Not available</td>
    </tr>
    <tr>
      <td>Cost</td>
      <td>Free or paid plans available</td>
      <td>Free</td>
    </tr>
  </table>
</body>
</html>

Dec 29 '22 14:12 loftwah

Here is the one with the styling you used.

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Linkfree vs. Linktree</title>
  <link href="styles.css" rel="stylesheet"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <table>
    <tr>
      <th class="category"> Feature</th>
      <th>Linkfree</th>
      <th> Linktree</th>
    </tr>
    <tr>
      <td>Sign-up process</td>
      <td>Follow instructions in GitHub repository and submit pull request</td>
      <td>Sign up through website</td>
    </tr>
    <tr>
      <td>Customization options</td>
      <td><i class="fa fa-check"></i> Customizable background image and color scheme</td>
      <td><i class="fa fa-check"></i> Customizable background image and color scheme</td>
    </tr>
    <tr>
      <td>Link organization</td>
      <td><i class="fa fa-check"></i> Organize links with categories</td>
      <td><i class="fa fa-check"></i> Organize links with categories</td>
    </tr>
    <tr>
      <td>Analytics</td>
      <td><i class="fa fa-remove"></i> Not available</td>
      <td><i class="fa fa-check"></i> Available</td>
    </tr>
    <tr>
      <td>Cost</td>
      <td><i class="fa fa-check"></i> Free</td>
      <td><i class="fa fa-check"></i> Free or paid plans available</td>
    </tr>
  </table>
</body>
</html>

Dec 29 '22 15:12 loftwah

Here are some styles you could try with it.

To create a new stylesheet and attach it to your HTML file, you can follow these steps:

Create a new file in the same directory as your HTML file, and name it styles.css. This will be your stylesheet file.
Open the styles.css file and copy one of the styles I provided into it.
In your HTML file, you will need to link to the stylesheet file using the link element. This element should go in the head section of your HTML file. The link element should have an href attribute that specifies the location of the stylesheet file, and a rel attribute that defines the relationship between the HTML file and the stylesheet file. Here's an example of how you might link to the stylesheet file:

<link href="styles.css" rel="stylesheet"/>

Save your HTML and CSS files and open the HTML file in a web browser to see the styles applied to your table.

Style 1: Using a color scheme and rounded corners

table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
}

th {
  background-color: #4caf50;
  color: white;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}

Style 2: Using a gradient background and box shadow

table {
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

th {
  background: linear-gradient(to bottom, #4caf50, #43a047);
  color: white;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: white;
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}

Style 3: Using a striped pattern and hover effect

table {
  border-collapse: collapse;
  width: 100%;
  overflow: hidden;
}

th {
  background-color: #4caf50;
  color: white;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background: linear-gradient(to right, #f2f2f2, #ffffff);
  background-size: 200% auto;
  background-position: -100% 0;
  transition: all .5s ease-in;
}

tr:nth-child(even):hover {
  background-position: 0 0;
}

.fa-check {
  color: green;
}

.fa-remove {
  color: red;
}

I'm unsure where everyone is at, so please ignore if I'm overly verbose.

Dec 30 '22 14:12 loftwah

Hi y'all! I have added some things to the chart. Check it out

Jan 29 '23 04:01 CBID2

Great collaboration 💪 . We use tailwind, so we don't need to use custom styles. I also paid for their prebuilt components, so we can use one of those https://tailwindui.com/components

Feb 03 '23 02:02 eddiejaoude

Anyone working on this issue ?

Feb 05 '23 04:02 Vishrut19

Anyone working on this issue ?

I am @Vishrut19. You want to help?

Feb 05 '23 04:02 CBID2

Definitely i think we can collab and do it together if it is possible @CBID2

Feb 05 '23 04:02 Vishrut19

Definitely i think we can collab and do it together if it is possible @CBID2

Absolutely @Vishrut19. I already did a rough draft of the chart here. I just need to find a way to implement Tailwind CSS. I've never used it before. I'm also not sure which file to put it in when PR'ing it Linkfree's main repo.

Feb 05 '23 04:02 CBID2

saw it let me see the way through which I can implement it using Tailwind CSS

Feb 13 '23 16:02 Vishrut19

saw it let me see the way through which I can implement it using Tailwind CSS

Thanks @Vishrut19!

Feb 13 '23 17:02 CBID2

saw it let me see the way through which I can implement it using Tailwind CSS

Thanks @Vishrut19!

How are things going @Vishrut19?

Feb 20 '23 12:02 CBID2

Sorry! @CBID2 actually I was a bit busy for some days will work in it either by today or by tomorrow.

Feb 21 '23 05:02 Vishrut19

Sorry! @CBID2 actually I was a bit busy for some days will work in it either by today or by tomorrow.

Ok keep me posted @Vishrut19

Feb 21 '23 05:02 CBID2

Sorry! @CBID2 actually I was a bit busy for some days will work in it either by today or by tomorrow.

How's it going @Vishrut19?

Feb 21 '23 18:02 CBID2

Whilst our most obvious competitor is Linktree, we have started branching away from this and will continue to do so with the planned future features. Therefore I think it is best to avoid always being compared to them - so I will be closing this issue.

Feb 27 '23 11:02 SaraJaoude

Whilst our most obvious competitor is Linktree, we have started branching away from this and will continue to do so with the planned future features. Therefore I think it is best to avoid always being compared to them - so I will be closing this issue.

Feb 27 '23 19:02 CBID2

BioDrop BioDrop copied to clipboard

Adding a “Linkfree vs Linktree” comparison chart to website

Description

Screenshots

Additional information

It's great having you contribute to this project

BioDrop
BioDrop copied to clipboard