13 |
14 | @thesimpsons
15 |
19 |
20 |
--------------------------------------------------------------------------------
/Templates/GoGreen/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 | @thesimpsons
15 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/Templates/Sixties/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
13 |
14 | @thesimpsons
15 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/Templates/Nightmare/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
15 |
16 | @thesimpsons
17 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/Templates/Gridthetic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 | Gridthetic by Farell Faiz
12 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/Templates/Pink/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
15 | @thesimpsons
16 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/Templates/DarkMode/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
15 | @thesimpsons
16 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/Templates/Standard/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
15 | @thesimpsons
16 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/Templates/Pastel Dreams/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
15 | @thestateofvie
16 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Templates/Pride/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
15 | @thesimpsons
16 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/Templates/draculaTheme/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 
14 |
15 | @Dracula
16 |
14 |
15 | @thesimpsons
16 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/Templates/Neon/README.md:
--------------------------------------------------------------------------------
1 | # Neon Themed
2 |
3 | > LinkTree Clone
4 |
5 | ### To Use
6 |
7 | - Fork and Clone the repo
8 | - Add your profile image and background image to the images folder
9 | - profile image should be named "profile-image.jpg"
10 | - background image should be named "background-image.jpg"
11 | - GoTo index.html
12 | - Change title to your name
13 | ```
14 | 
15 |
16 | @thesimpsons
17 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/Templates/mnmlsm/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 
17 |
18 |
22 | @thesimpsons
23 |
16 | 
14 |
15 | @612bc
16 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/Templates/Music/style.css:
--------------------------------------------------------------------------------
1 | /* Style Settings */
2 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;800&display=swap');
3 | :root {
4 | --bgColor:#000;
5 | --accentColor: #E6E6E6;
6 | --font: 'Montserrat', sans-serif;
7 | }
8 |
9 | body{
10 | background-color: var(--bgColor);
11 | }
12 |
13 | #userPhoto{
14 | width: 110px;
15 | height: 110px;
16 | display: block;
17 | margin: 35px auto 20px;
18 | border-radius: 50%;
19 | }
20 |
21 | #userName{
22 | color: #bbb;
23 | font-size: 1rem;
24 | font-weight: 800;
25 | line-height: 1.25;
26 | display: block;
27 | font-family: var(--font);
28 | width: 100%;
29 | text-align: center;
30 | text-decoration: none;
31 | }
32 |
33 | #links{
34 | max-width: 600px;
35 | width: auto;
36 | display: block;
37 | margin: 27px auto;
38 | }
39 | .link{
40 | display: block;
41 | background-color: var(--accentColor);
42 | color: var(--bgColor);
43 | font-family: var(--font);
44 | text-align: center;
45 | margin-bottom: 20px;
46 | padding: 17px;
47 | text-decoration: none;
48 | font-size: 1rem;
49 | transition: all .25s cubic-bezier(.08,.59,.29,.99);
50 | border: solid var(--accentColor) 2px;
51 | }
52 |
53 | .link:hover{
54 | background-color: var(--bgColor);
55 | color: var(--accentColor);
56 | }
57 |
--------------------------------------------------------------------------------
/Templates/mnmlsm/README.MD:
--------------------------------------------------------------------------------
1 | # MNMLSM
2 |
3 | MNMLSM is a simple theme inspired by the command line. It has a darkmode and no javascript. In other words: it is future proof.
4 |
5 | Preview Light | Preview Dark
6 | :-------------------------:|:-------------------------:
7 |  | 
8 |
9 | The theme was created by [Ungeschneuer](https://github.com/ungeschneuer). A preview can be found [here](https://michaelbarney.github.io/LinkFree/Templates/mnmlsm/).
10 |
11 | ## Getting Started
12 |
13 | You should probably change the following things:
14 | - lang attribute for the html tag
15 | - title in head tag
16 | - favicon in asset folder
17 | - userPhoto in asset folder
18 | - userName
19 | - links (duh!)
20 | - footer content
21 |
22 | ## Add a new link
23 |
24 | To add a new link, just duplicate an existing line between the links div or add a new one like this
25 |
26 | ```
27 | #
28 | ```
29 |
30 |
31 | ## Add Emojis
32 |
33 | If you want to add emojis to your links, you can Copy/Paste them via [GetEmoji](https://getemoji.com/). For current Mac and Windows versions, there is also a system shortcut.
34 |
35 | Mac:
36 | ```
37 | Ctrl + Cmd + Space
38 | ```
39 |
40 | Windows
41 | ```
42 | Windows + ; (semi-colon)
43 | ```
44 | or
45 | ```
46 | Windows + . (period)
47 | ```
48 |
49 |
50 | ## Sources
51 |
52 | The Avatar in the preview is by [unDraw](https://undraw.co/).
--------------------------------------------------------------------------------
/Templates/DeepSea/style.css:
--------------------------------------------------------------------------------
1 | /* Style Settings */
2 |
3 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
4 | :root {
5 | --bgColor: rgb(0, 0, 0);
6 | --accentColor: #E6E6E6;
7 | --font: 'Karla', sans-serif;
8 | }
9 |
10 | body {
11 | background-color: var(--bgColor);
12 | background-image: url("./assets/deepSea.png");
13 | background-size: 120%;
14 | }
15 |
16 | #userPhoto {
17 | width: 110px;
18 | height: 110px;
19 | display: block;
20 | margin: 35px auto 20px;
21 | border-radius: 50%;
22 | }
23 |
24 | #userName {
25 | color: rgb(255, 255, 255);
26 | font-size: 1rem;
27 | font-weight: 600;
28 | line-height: 1.25;
29 | display: block;
30 | font-family: var(--font);
31 | width: 100%;
32 | text-align: center;
33 | text-decoration: none;
34 | }
35 |
36 | #links {
37 | max-width: 675px;
38 | width: auto;
39 | display: block;
40 | margin: 27px auto;
41 | }
42 |
43 | .link {
44 | display: block;
45 | background-color: var(--accentColor);
46 | color: var(--bgColor);
47 | font-family: var(--font);
48 | text-align: center;
49 | margin-bottom: 20px;
50 | padding: 17px;
51 | text-decoration: none;
52 | font-size: 1rem;
53 | transition: all .25s cubic-bezier(.08, .59, .29, .99);
54 | border: solid var(--accentColor) 2px;
55 | }
56 |
57 | .link:hover {
58 | background-color: var(--bgColor);
59 | color: var(--accentColor);
60 | }
--------------------------------------------------------------------------------
/Templates/Sixties/style.css:
--------------------------------------------------------------------------------
1 | /* Style Settings */
2 | @import url('https://fonts.googleapis.com/css?family=Modak&display=swap');
3 | :root {
4 | --bgColor: beige;
5 | --accentColor: #ff0000;
6 | --font: 'Modak', cursive;
7 | }
8 |
9 | body{
10 | background-color: var(--bgColor);
11 | }
12 |
13 | #userPhoto{
14 | width: 96px;
15 | height: 96px;
16 | display: block;
17 | margin: 35px auto 20px;
18 | border-radius: 15px;
19 | }
20 |
21 | #userName{
22 | color: #ffe600;
23 | font-size: 2rem;
24 | font-weight: 400;
25 | line-height: 1.25;
26 | display: block;
27 | font-family: var(--font);
28 | width: 100%;
29 | text-align: center;
30 | text-decoration: none;
31 | text-shadow: 3px 3px 0 var(--accentColor), 1px 1px 0 var(--accentColor), 2px 2px 0 var(--accentColor);
32 | }
33 |
34 | #links{
35 | max-width: 675px;
36 | width: auto;
37 | display: block;
38 | margin: 27px auto;
39 | }
40 | .link{
41 | display: block;
42 | background-color: var(--accentColor);
43 | color: var(--bgColor);
44 | font-family: var(--font);
45 | text-align: center;
46 | margin-bottom: 20px;
47 | padding: 17px;
48 | text-decoration: none;
49 | font-size: 1.5rem;
50 | transition: all .25s cubic-bezier(.08,.59,.29,.99);
51 | border: solid var(--accentColor) 2px;
52 | border-radius: 15px;
53 | }
54 |
55 | .link:hover{
56 | background-color: var(--bgColor);
57 | color: var(--accentColor);
58 | }
59 |
--------------------------------------------------------------------------------
/Templates/GoGreen/style.css:
--------------------------------------------------------------------------------
1 | /* Style Settings */
2 | @import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
3 | :root {
4 | --bgColor: rgb(255, 230, 184);
5 | --accentColor: #2fc24f;
6 | --font: 'Permanent Marker', cursive;
7 | }
8 |
9 | body{
10 | background: center bottom url(grass-dark-green-silhouette.svg) no-repeat;
11 | background-color: var(--bgColor);
12 | background-size: cover;
13 | min-height: 100vh;
14 | }
15 |
16 | #userPhoto{
17 | width: 96px;
18 | height: 96px;
19 | display: block;
20 | margin: 35px auto 20px;
21 | border-radius: 50%;
22 | }
23 |
24 | #userName{
25 | color: #999;
26 | font-size: 1.5rem;
27 | font-weight: 600;
28 | line-height: 1.25;
29 | display: block;
30 | font-family: var(--font);
31 | width: 100%;
32 | text-align: center;
33 | text-decoration: none;
34 | }
35 |
36 | #links{
37 | max-width: 675px;
38 | width: auto;
39 | display: block;
40 | margin: 27px auto;
41 | }
42 | .link{
43 | display: block;
44 | background-color: var(--accentColor);
45 | color: var(--bgColor);
46 | font-family: var(--font);
47 | text-align: center;
48 | margin-bottom: 20px;
49 | padding: 17px;
50 | text-decoration: none;
51 | font-size: 1.5rem;
52 | transition: all .25s cubic-bezier(.08,.59,.29,.99);
53 | border: solid var(--accentColor) 2px;
54 | }
55 | .link:hover{
56 | background-color: var(--bgColor);
57 | color: var(--accentColor);
58 | }
59 |
--------------------------------------------------------------------------------
/Templates/Galaxy/assets/css/style.css:
--------------------------------------------------------------------------------
1 | /* Style Settings */
2 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap');
3 |
4 | body {
5 | background: url('../images/bg.jpg');
6 | font-family: 'Open Sans', sans-serif;
7 | font-weight: 600;
8 | }
9 |
10 | #userPhoto {
11 | width: 100px;
12 | height: 100px;
13 | display: block;
14 | margin: 10px auto;
15 | border-radius: 20%;
16 | }
17 |
18 | #userName {
19 | color: #fff;
20 | display: block;
21 | width: 100%;
22 | text-align: center;
23 | text-decoration: none;
24 | }
25 |
26 | #userName h1 {
27 | font-size: 2rem;
28 | font-weight: 300;
29 | letter-spacing: 0.2rem;
30 | margin: 0 auto;
31 | }
32 |
33 | #userName p {
34 | font-weight: 300;
35 | margin-top: 5px;
36 | text-transform: none;
37 | }
38 |
39 | i.fa {
40 | margin-right: 0.3rem;
41 | }
42 |
43 | #links {
44 | max-width: 500px;
45 | width: auto;
46 | display: block;
47 | margin: 20px auto;
48 | }
49 |
50 | .link {
51 | display: block;
52 | background-color: rgba(66, 110, 255, 0.2);
53 | color: #fff;
54 | text-align: center;
55 | margin-bottom: 20px;
56 | padding: 17px;
57 | text-decoration: none;
58 | font-size: 1.2rem;
59 | font-weight: 300;
60 | transition: all .25s cubic-bezier(.08, .59, .29, .99);
61 | border-radius: 10px;
62 |
63 | }
64 |
65 | .link:hover {
66 | background-color: rgba(255, 255, 255, 0.3);
67 | color: #000000;
68 | border: none;
69 | }
--------------------------------------------------------------------------------
/Templates/Pink/style.css:
--------------------------------------------------------------------------------
1 | /* Style Settings */
2 | @import url('http://fonts.googleapis.com/css?family=Roboto');
3 | :root {
4 | --bgColor:#FFDFDC;
5 | --accentColor: #FF7272;
6 | --complementColor: #FFFFFF;
7 | --font: 'Roboto', sans-serif;
8 | }
9 |
10 | body{
11 | background-color: var(--bgColor);
12 | }
13 |
14 | #userPhoto{
15 | width: 110px;
16 | height: 110px;
17 | display: block;
18 | margin: 35px auto 20px;
19 | border: 1px;
20 | border-radius: 30%;
21 | border-style: dotted;
22 | border-color: var(--accentColor)
23 | }
24 |
25 | #userName{
26 | color: var(--accentColor);
27 | font-size: 1rem;
28 | font-weight: 600;
29 | line-height: 1.25;
30 | display: block;
31 | font-family: var(--font);
32 | width: 100%;
33 | text-align: center;
34 | text-transform: uppercase;;
35 | }
36 |
37 | #links{
38 | max-width: 500px;
39 | width: auto;
40 | display: block;
41 | margin: 27px auto;
42 | }
43 | .link{
44 | display: block;
45 | background-color: var(--accentColor);
46 | color: var(--bgColor);
47 | font-family: var(--font);
48 | text-align: center;
49 | margin-bottom: 20px;
50 | padding: 17px;
51 | text-decoration: none;
52 | font-size: 1rem;
53 | transition: all .25s cubic-bezier(.08,.59,.29,.99);
54 | border-color: var(--complementColor);
55 | border: 1px;
56 | border-style: dotted;
57 | border-radius: 30px;
58 | }
59 |
60 | .link:hover{
61 | background-color: var(--bgColor);
62 | color: var(--accentColor);
63 | }
64 |
--------------------------------------------------------------------------------
/Templates/Journal/style.css:
--------------------------------------------------------------------------------
1 | /* Style Settings */
2 | @import url('https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap');
3 | :root {
4 | --bgColor: #ffffe6;
5 | --accentColor: #c71212;
6 | --font: 'Roboto Slab', serif;
7 | }
8 |
9 | body{
10 | display: flex;
11 | align-items: center;
12 | flex-direction: column;
13 | justify-content: center;
14 | min-height: 100vh;
15 | background-color: var(--bgColor);
16 | }
17 |
18 | #userPhoto{
19 | width: 96px;
20 | height: 96px;
21 | border-radius: 50%;
22 | border: 5px solid var(--accentColor);
23 | }
24 |
25 | #userName{
26 | color: #333;
27 | font-size: 1.5rem;
28 | line-height: 1.25;
29 | font-family: var(--font);
30 | width: 100%;
31 | margin: 30px 0;
32 | text-align: center;
33 | text-decoration: none;
34 | font-style: italic;
35 | }
36 |
37 | #links{
38 | max-width: 675px;
39 | width: 100%;
40 | }
41 | .link{
42 | display: block;
43 | background-color: var(--accentColor);
44 | color: var(--bgColor);
45 | font-family: var(--font);
46 | text-align: center;
47 | margin-bottom: 30px;
48 | padding: 13px;
49 | text-decoration: none;
50 | text-transform: lowercase;
51 | font-size: 1rem;
52 | transition: all .25s cubic-bezier(.08,.59,.29,.99);
53 | border: solid var(--accentColor) 2px;
54 | border-radius: 50px;
55 | }
56 |
57 | .link:hover{
58 | background-color: var(--bgColor);
59 | color: var(--accentColor);
60 | font-style: italic;
61 | }
62 |
63 | .footer {
64 | color: #333;
65 | font-size: 1.3rem;
66 | }
--------------------------------------------------------------------------------
/Templates/Galaxy/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 
17 | Software Engineer
20 |
17 | Software Engineer
20 |
6 |
7 | ## How to Use
8 | ### index.html
9 | 1. **Title**
10 | This is the name that is given to the page.
11 | ```
12 |
20 | ```
21 | 4. **Links**
22 | To add your clickable links just substitute, delete or copy the "a" tags inside the "links" div with your desired hyperlinks.
23 | ```
24 |
31 | ```
32 | ### style.css
33 | 5. **Colors**
34 | Substitute the background and accent colors with your desired pallete.
35 | ```
36 | --bgColor: white;
37 | --accentColor: #39e09b;
38 | ```
39 | 6. **Fonts**
40 | You can import the font from a website like [Google Fonts](https://fonts.google.com/) and substitute the "--font" variable with its implementation.
41 | ```
42 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
43 |
44 | --font: 'Karla', sans-serif;
45 | ```
46 |
--------------------------------------------------------------------------------
/Templates/Neon/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
2 |
3 | * {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | body {
10 | background-color: #fe59d7;
11 | background: -webkit-linear-gradient(
12 | rgba(29, 38, 113, 0.8),
13 | rgba(195, 55, 100, 0.8)
14 | ),
15 | url("images/background-image.jpg");
16 | background-repeat: no-repeat;
17 | background-size: cover;
18 | font-family: "Poppins", sans-serif;
19 | min-height: 100vh;
20 | display: flex;
21 | flex-direction: column;
22 | justify-content: center;
23 | }
24 |
25 | main {
26 | text-align: center;
27 | margin: 30px 50px 20px 50px;
28 | }
29 |
30 | .user-img {
31 | border-radius: 50px;
32 | max-width: 100px;
33 | box-shadow: 0 0 10px 3px #22e4f0;
34 | }
35 |
36 | main h1 {
37 | color: #12cad6;
38 | font-size: 1.2rem;
39 | text-shadow: 2px 2px 5px #22e4f0;
40 | margin: 0.5em 0 1.5em 0;
41 | }
42 |
43 | .link {
44 | height: 50px;
45 | width: 100%;
46 | background-color: #12cad6;
47 | box-shadow: 0 0 10px 3px #fe59d7;
48 | margin-top: 1.3rem;
49 | transform: skewX(-45deg);
50 | display: flex;
51 | justify-content: center;
52 | align-items: center;
53 | cursor: pointer;
54 | }
55 |
56 | .link span {
57 | transform: skewX(45deg);
58 | }
59 |
60 | a {
61 | color: white;
62 | text-decoration: none;
63 | }
64 |
65 | @media screen and (min-width: 500px) {
66 | body {
67 | padding: 20px 50px;
68 | }
69 | }
70 |
71 | @media screen and (min-width: 800px) {
72 | body {
73 | display: flex;
74 | justify-content: center;
75 | align-items: center;
76 | padding: 0;
77 | }
78 |
79 | main {
80 | min-width: 800px;
81 | padding: 20px 50px;
82 | }
83 | }
84 |
--------------------------------------------------------------------------------
/Templates/Neon/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
15 | 
8 |
9 | ## What is LinkFree?
10 |
11 | Ever wanted to add more links to your Instagram bio? LinkFree does just that! It gathers all of your links into one page that is easy to navigate.
12 |
13 | ## What are the benefits?
14 |
15 | Compared to other solutions, LinkFree is fully customizable and open source!
16 |
17 | - No more pesky third party logos
18 | - Add your custom colors, images and fonts
19 | - Use full custom analytics and metrics platforms
20 | - Create your own template or use one made by the community!
21 |
22 | ## How to use?
23 |
24 | To startoff, you can choose a template for your LinkFree in the "Templates" directory. Then you can clone or fork this repository to adapt it with your information.
25 |
26 | You can fork this repository to your own account and there configure your personal page using github pages. This will let you make edits much faster.
27 |
28 | ## How to see statistics?
29 |
30 | You can use any statiscs platform of your choosing that is based on client javascript. We recommend the following:
31 |
32 | - [Amplitude](https://amplitude.com/homepage)
33 | - [Hotjar](https://www.hotjar.com/)
34 |
35 | You can use any of the functions for load and click defined on the javascript file of the LinkFree template or add code snippets to the Head or Body of the HTML file.
36 |
37 | ## How to contribute?
38 |
39 | There are a three ways you can contribute. You can make changes to the core LinkFree project, create new LinkFree templates or just share your LinkFree.
40 |
41 | ### Creating Templates
42 |
43 | A new template is a general LinkFree that has a distinctive structure or style when compared to previous templates.
44 |
45 | To submit one, you just have to make a pull request with your addition in the "Templates" directory.
46 |
--------------------------------------------------------------------------------
/Templates/Journal/readme.md:
--------------------------------------------------------------------------------
1 | # Standard Template
2 |
3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
4 |
5 |
6 |
7 | ## How to Use
8 | ### index.html
9 | 1. **Title**
10 | This is the name that is given to the page.
11 | ```
12 |
20 | ```
21 | 4. **Username**
22 | Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | ```
24 | @thesimpsons
25 | ```
26 | 5. **Links**
27 | To add your clickable links just substitute, delete or copy the "a" tags inside the "links" div with your desired hyperlinks.
28 | ```
29 |
36 | ```
37 | ### style.css
38 | 6. **Colors**
39 | Substitute the background and accent colors with your desired pallete.
40 | ```
41 | --bgColor: white;
42 | --accentColor: #39e09b;
43 | ```
44 | 7. **Fonts**
45 | You can import the font from a website like [Google Fonts](https://fonts.google.com/) and substitute the "--font" variable with its implementation.
46 | ```
47 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
48 |
49 | --font: 'Karla', sans-serif;
50 | ```
51 |
--------------------------------------------------------------------------------
/Templates/NyanCat/readme.md:
--------------------------------------------------------------------------------
1 | # Standard Template
2 |
3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
4 |
5 |
6 |
7 | ## How to Use
8 | ### index.html
9 | 1. **Title**
10 | This is the name that is given to the page.
11 | ```
12 |
20 | ```
21 | 4. **Username**
22 | Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | ```
24 | @thesimpsons
25 | ```
26 | 5. **Links**
27 | To add your clickable links just substitute, delete or copy the "a" tags inside the "links" div with your desired hyperlinks.
28 | ```
29 |
36 | ```
37 | ### style.css
38 | 6. **Colors**
39 | Substitute the background and accent colors with your desired pallete.
40 | ```
41 | --bgColor: white;
42 | --accentColor: #39e09b;
43 | ```
44 | 7. **Fonts**
45 | You can import the font from a website like [Google Fonts](https://fonts.google.com/) and substitute the "--font" variable with its implementation.
46 | ```
47 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
48 |
49 | --font: 'Karla', sans-serif;
50 | ```
51 |
--------------------------------------------------------------------------------
/Templates/Pride/readme.md:
--------------------------------------------------------------------------------
1 | # Standard Template
2 |
3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
4 |
5 |
6 |
7 | ## How to Use
8 | ### index.html
9 | 1. **Title**
10 | This is the name that is given to the page.
11 | ```
12 |
20 | ```
21 | 4. **Username**
22 | Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | ```
24 | @thesimpsons
25 | ```
26 | 5. **Links**
27 | To add your clickable links just substitute, delete or copy the "a" tags inside the "links" div with your desired hyperlinks.
28 | ```
29 |
36 | ```
37 | ### style.css
38 | 6. **Colors**
39 | Substitute the background and accent colors with your desired pallete.
40 | ```
41 | --bgColor: white;
42 | --accentColor: #39e09b;
43 | ```
44 | 7. **Fonts**
45 | You can import the font from a website like [Google Fonts](https://fonts.google.com/) and substitute the "--font" variable with its implementation.
46 | ```
47 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
48 |
49 | --font: 'Karla', sans-serif;
50 | ```
51 |
--------------------------------------------------------------------------------
/Templates/Standard/readme.md:
--------------------------------------------------------------------------------
1 | # Standard Template
2 |
3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
4 |
5 |
6 |
7 | ## How to Use
8 | ### index.html
9 | 1. **Title**
10 | This is the name that is given to the page.
11 | ```
12 |
20 | ```
21 | 4. **Username**
22 | Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | ```
24 | @thesimpsons
25 | ```
26 | 5. **Links**
27 | To add your clickable links just substitute, delete or copy the "a" tags inside the "links" div with your desired hyperlinks.
28 | ```
29 |
36 | ```
37 | ### style.css
38 | 6. **Colors**
39 | Substitute the background and accent colors with your desired pallete.
40 | ```
41 | --bgColor: white;
42 | --accentColor: #39e09b;
43 | ```
44 | 7. **Fonts**
45 | You can import the font from a website like [Google Fonts](https://fonts.google.com/) and substitute the "--font" variable with its implementation.
46 | ```
47 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
48 |
49 | --font: 'Karla', sans-serif;
50 | ```
51 |
--------------------------------------------------------------------------------
/Templates/SunMoon/assets/js/script.js:
--------------------------------------------------------------------------------
1 | function mostrar(e) {
2 | if (e.classList.contains("fa-moon-o")) { //se tem lua
3 | e.classList.remove("fa-moon-o"); //remove classe icone lua
4 | e.classList.add("fa-sun-o"); //coloca classedo sol
5 | e.style.color = "rgb(225, 225, 0)";
6 | document.body.style.background = 'rgb(10, 10, 10)';
7 | document.querySelector('#userName').style.color = '#fff';
8 |
9 | let links = document.querySelectorAll('.link');
10 | // Pega apenas o primeiro do array
11 | links[0].style.filter = 'grayscale(100%)';
12 | // pega todos
13 | for (let i = 0; i < links.length; i++) {
14 | links[i].style.filter = 'grayscale(100%)';
15 | }
16 |
17 | let circulos = document.querySelectorAll('.circulo');
18 | // Pega apenas o primeiro do array
19 | circulos[0].style.filter = 'grayscale(100%)';
20 | // pega todos
21 | for (let i = 0; i < circulos.length; i++) {
22 | circulos[i].style.filter = 'grayscale(100%)';
23 | }
24 |
25 | } else { //senão
26 | e.classList.remove("fa-sun-o"); //remove classe icone lua
27 | e.classList.add("fa-moon-o"); //coloca classedo sol
28 | e.style.color = "#585858";
29 | document.body.style.background = 'rgb(243, 242, 242)';
30 | document.querySelector('#userName').style.color = 'rgb(99, 99, 99)';
31 |
32 | let links = document.querySelectorAll('.link');
33 | // Pega apenas o primeiro do array
34 | links[0].style.filter = 'grayscale(0%)';
35 | // pega todos
36 | for (let i = 0; i < links.length; i++) {
37 | links[i].style.filter = 'grayscale(0%)';
38 | }
39 |
40 | let circulos = document.querySelectorAll('.circulo');
41 | // Pega apenas o primeiro do array
42 | circulos[0].style.filter = 'grayscale(0%)';
43 | // pega todos
44 | for (let i = 0; i < circulos.length; i++) {
45 | circulos[i].style.filter = 'grayscale(0%)';
46 | }
47 | }
48 |
49 | }
--------------------------------------------------------------------------------
/Templates/3D Theme/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 
13 | 
19 |
20 | 
17 |
18 |
19 |
20 |
21 |
22 | 
25 | 
30 | 🎂 dd/mm/yyyy 🎂
31 |
32 |
33 | Email
34 |
35 |
36 | Discord
37 |
38 |
39 |
40 | Amino
41 |
42 |
43 | instagram
44 |
45 |
46 | facebook
47 |
48 |
49 |
50 | reddit
51 |
52 |
53 |
54 |