├── .gitignore
├── LICENSE
├── README.md
└── Templates
    ├── 3D Theme
        ├── README.md
        ├── index.html
        ├── preview.png
        └── style.css
    ├── 90'sTheme
        ├── .DS_Store
        ├── favicon.ico
        ├── images
        │   ├── .DS_Store
        │   ├── corgi.jpg
        │   ├── favicon.png
        │   └── universe.gif
        ├── index.html
        ├── index.js
        └── style.css
    ├── A mocha, please! (Netlify Form)
        ├── README.md
        ├── index.html
        ├── profile-picture.jpg
        ├── screenshot.png
        └── style.css
    ├── Abstract
        ├── .DS_Store
        ├── Doubs.png
        ├── Profile.jpeg
        ├── README.md
        ├── index.html
        ├── preview.png
        └── style.css
    ├── Ancind Theme
        ├── README.md
        ├── index.html
        ├── media
        │   ├── Preview.png
        │   ├── art1.png
        │   ├── art2.png
        │   ├── favicon.ico
        │   ├── githubicon.png
        │   ├── linkedinicon.png
        │   ├── profilepic.png
        │   ├── showwcaseicon.png
        │   ├── twittericon.png
        │   └── websiteicon.png
        └── style.css
    ├── Arcade
        ├── background.png
        ├── favicon.ico
        ├── index.html
        ├── index.js
        ├── readme.md
        ├── style.css
        └── userPhoto.png
    ├── ArghMyEyes
        ├── index.html
        └── style.css
    ├── Art
        ├── ReadMe.md
        ├── index.html
        ├── rohit.jpeg
        └── style.css
    ├── BeldiTheme
        ├── img
        │   ├── pem.jpg
        │   └── profile.jpg
        ├── index.html
        └── style.css
    ├── Buisness Theme
        ├── Buisness.jpg
        ├── github.gif
        ├── index.html
        ├── instagram.gif
        ├── linkedin.gif
        ├── logo.jpg
        ├── logo.png
        └── style.css
    ├── CasualBlue
        ├── index.html
        ├── preview.png
        ├── readme.md
        └── style.css
    ├── Cherry-Bloosm
        ├── animation.css
        ├── ico.css
        ├── index.html
        └── style.css
    ├── Cubes
        ├── images
        │   └── cubes_background.jpeg
        ├── index.html
        └── style.css
    ├── DarkMode
        ├── index.html
        └── style.css
    ├── DeepSea
        ├── .DS_Store
        ├── assets
        │   ├── .DS_Store
        │   └── deepSea.png
        ├── index.html
        └── style.css
    ├── DevCode
        ├── devcode.jpeg
        └── index.html
    ├── Dynamic
        ├── ReadMe.md
        ├── index.html
        ├── rohit.jpeg
        └── style.css
    ├── Eduardosgs
        ├── index.html
        └── style.css
    ├── Emo
        ├── index.html
        ├── memento-media-9VJ0aNgJJT8-unsplash.jpg
        └── style.css
    ├── FavouriteTeacherTheme
        ├── favicon.ico
        ├── images
        │   ├── sunglasses.png
        │   ├── troels_bg_.png
        │   └── troels_profile.png
        ├── index.html
        ├── index.js
        ├── readme.md
        └── style.css
    ├── Friends
        ├── frame.png
        ├── index.html
        ├── rachel.jpg
        └── style.css
    ├── Galaxy
        ├── assets
        │   ├── css
        │   │   ├── font-awesome.css
        │   │   ├── font-awesome.min.css
        │   │   └── style.css
        │   ├── fonts
        │   │   ├── FontAwesome.otf
        │   │   ├── fontawesome-webfont.eot
        │   │   ├── fontawesome-webfont.svg
        │   │   ├── fontawesome-webfont.ttf
        │   │   ├── fontawesome-webfont.woff
        │   │   └── fontawesome-webfont.woff2
        │   └── images
        │   │   ├── bg.jpg
        │   │   ├── favicon.png
        │   │   └── profile.png
        └── index.html
    ├── GameOn
        ├── Readme.md
        ├── css
        │   ├── font-awesome.min.css
        │   └── style.css
        ├── images
        │   ├── bg.png
        │   └── profilepic.png
        ├── index.html
        └── preview.jpg
    ├── GoGreen
        ├── grass-dark-green-silhouette.svg
        ├── index.html
        └── style.css
    ├── Gridthetic
        ├── index.html
        ├── preview.png
        ├── readme.md
        └── style.css
    ├── Halloween
        ├── .DS_Store
        ├── assets
        │   ├── css
        │   │   └── style.css
        │   ├── images
        │   │   ├── bg.jpg
        │   │   ├── profile.jpg
        │   │   └── title.png
        │   └── js
        │   │   └── script.js
        └── index.html
    ├── Happy
        ├── Jordan-Avatar.png
        ├── index.html
        └── screenshot.png
    ├── Journal
        ├── favicon.ico
        ├── index.html
        ├── index.js
        ├── readme.md
        └── style.css
    ├── MagicalMysteryTheme
        ├── img
        │   ├── beatles-bus.svg
        │   └── beatles-mmt.svg
        ├── index.html
        └── style.css
    ├── Minimal Pastel
        ├── Minimal Pastel Preview.gif
        ├── README.md
        ├── css
        │   └── style.css
        └── index.html
    ├── Minimalist Black
        ├── favicon.ico
        ├── index.html
        ├── readme.md
        ├── screenshot.png
        └── style.css
    ├── Music
        ├── index.html
        ├── square-01.png
        ├── style.css
        └── title-01.png
    ├── Neon
        ├── README.md
        ├── images
        │   ├── background-image.jpg
        │   └── profile-image.jpg
        ├── index.html
        ├── screenshot.png
        └── style.css
    ├── Neumorphism
        ├── homer.jpg
        ├── index.html
        └── style.css
    ├── Nightmare
        ├── index.html
        ├── nmbc.jpg
        ├── pumpkin.png
        └── style.css
    ├── NyanCat
        ├── .DS_Store
        ├── cat.png
        ├── favicon.ico
        ├── index.html
        ├── index.js
        ├── nyanCatBackground.png
        ├── rainbowcat.gif
        ├── readme.md
        └── style.css
    ├── Outrun
        ├── index.html
        └── style.css
    ├── Pastel Dreams
        ├── index.html
        └── style.css
    ├── Pastel
        ├── background.jpg
        ├── index.html
        ├── linkfree.css
        └── profile.jpg
    ├── Pastel_purple
        └── index.html
    ├── PauloFilhoTheme
        ├── index.html
        └── style.css
    ├── Pink
        ├── index.html
        └── style.css
    ├── Pride
        ├── favicon.ico
        ├── index.html
        ├── index.js
        ├── readme.md
        └── style.css
    ├── PurpleSideOfTheForce
        ├── favicon.ico
        ├── index.html
        ├── index.js
        ├── lightsaber-ignition-0.mp3
        ├── lightsaber-ignition-1.mp3
        ├── lightsaber-ignition-2.mp3
        ├── readme.md
        └── style.css
    ├── README.md
    ├── RainCode
        ├── assets
        │   ├── css
        │   │   ├── reset.css
        │   │   └── styles.css
        │   └── img
        │   │   └── rain code.gif
        └── index.html
    ├── RedZone
        ├── index.html
        └── style.css
    ├── Retro Game
        ├── index.html
        └── style.css
    ├── Shades Of Purple
        ├── README.md
        ├── index.html
        ├── rohit.jpeg
        └── style.css
    ├── Sixties
        ├── index.html
        └── style.css
    ├── Sky
        ├── Blue_sky_with_white_clouds-1_generated.jpg
        ├── circle.png
        ├── index.html
        └── style.css
    ├── SmartGlow
        ├── assets
        │   ├── css
        │   │   ├── font-awesome.css
        │   │   ├── font-awesome.min.css
        │   │   └── style.css
        │   ├── fonts
        │   │   ├── FontAwesome.otf
        │   │   ├── fontawesome-webfont.eot
        │   │   ├── fontawesome-webfont.svg
        │   │   ├── fontawesome-webfont.ttf
        │   │   ├── fontawesome-webfont.woff
        │   │   └── fontawesome-webfont.woff2
        │   ├── images
        │   │   ├── bg.jpg
        │   │   ├── favicon.png
        │   │   └── profile.jpeg
        │   └── js
        │   │   └── animations.js
        └── index.html
    ├── Space Theme
        ├── .gitignore
        ├── download.jpg
        ├── index.html
        ├── package-lock.json
        ├── package.json
        ├── styles.css
        ├── tailwind.config.js
        └── thumb-1920-936378.jpg
    ├── SquidGame
        ├── assets
        │   └── img
        │   │   ├── bossSG.svg
        │   │   ├── circle-03.svg
        │   │   ├── cross-01.svg
        │   │   ├── square-04.svg
        │   │   └── triangle-02.svg
        ├── index.html
        ├── js
        │   └── script.js
        ├── readme.md
        └── style.css
    ├── Standard Classic Theme
        ├── README.md
        ├── Screenshot_20230101_190932.png
        ├── image
        │   ├── github.png
        │   ├── linkedin.png
        │   ├── share.png
        │   ├── twitter.png
        │   └── user.png
        ├── index.html
        ├── index.js
        └── style.css
    ├── Standard
        ├── favicon.ico
        ├── index.html
        ├── index.js
        ├── readme.md
        └── style.css
    ├── SunMoon
        ├── .DS_Store
        ├── assets
        │   ├── css
        │   │   ├── font-awesome.css
        │   │   ├── font-awesome.min.css
        │   │   └── style.css
        │   ├── fonts
        │   │   ├── FontAwesome.otf
        │   │   ├── fontawesome-webfont.eot
        │   │   ├── fontawesome-webfont.svg
        │   │   ├── fontawesome-webfont.ttf
        │   │   ├── fontawesome-webfont.woff
        │   │   └── fontawesome-webfont.woff2
        │   ├── imagens
        │   │   ├── favicon.png
        │   │   └── perfil.jpg
        │   └── js
        │   │   └── script.js
        └── index.html
    ├── Universe
        ├── assets
        │   ├── css
        │   │   ├── font-awesome.css
        │   │   ├── font-awesome.min.css
        │   │   └── style.css
        │   ├── fonts
        │   │   ├── FontAwesome.otf
        │   │   ├── fontawesome-webfont.eot
        │   │   ├── fontawesome-webfont.svg
        │   │   ├── fontawesome-webfont.ttf
        │   │   ├── fontawesome-webfont.woff
        │   │   └── fontawesome-webfont.woff2
        │   └── images
        │   │   ├── favicon.png
        │   │   └── universe.jpeg
        └── index.html
    ├── Windows95
        ├── bootstrap.min.css
        ├── bootstrap.min.js
        ├── fonts
        │   ├── ms-sans-serif.ttf
        │   ├── w-95-sans-serif.woff
        │   └── w-95-sans-serif.woff2
        ├── img
        │   └── favicon
        │   │   ├── android-chrome-48x48.png
        │   │   ├── apple-touch-icon.png
        │   │   ├── browserconfig.xml
        │   │   ├── favicon-16x16.png
        │   │   ├── favicon-32x32.png
        │   │   ├── favicon.ico
        │   │   ├── mstile-150x150.png
        │   │   ├── safari-pinned-tab.svg
        │   │   └── site.webmanifest
        ├── index.html
        ├── jquery.min.js
        ├── pixel.css
        └── pixel.js
    ├── animated
        ├── index.html
        ├── style.css
        └── user.png
    ├── blackCoffee
        ├── index.html
        └── preview.png
    ├── darkTemplate
        ├── .vscode
        │   └── settings.json
        ├── index.html
        ├── photo.jpeg
        └── style.css
    ├── draculaTheme
        ├── img
        │   └── 045-dracula.svg
        ├── index.html
        └── style.css
    └── mnmlsm
        ├── README.MD
        ├── img
            ├── avatar.svg
            └── favicon.ico
        ├── index.html
        ├── preview-dark.png
        ├── preview-light.png
        └── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # LinkFree
 2 | 
 3 | A free and open source alternative to LinkTree!
 4 | 
 5 | [Website](https://michaelbarney.github.io/LinkFree)
 6 | 
 7 | <img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">
 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 start off, 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 from 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 statistics 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 by the LinkFree template's JavaScript file, or you can add code snippets to the Head or Body of the HTML file.
36 | 
37 | ## How to contribute?
38 | 
39 | There are 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/3D Theme/README.md:
--------------------------------------------------------------------------------
1 | # 3D Theme
2 | This template was created by [Farell Faiz](http://github.com/farellfaiz/ "Farell Faiz").
3 | 
4 | ![Preview](https://raw.githubusercontent.com/farellfaiz/LinkFree/master/Templates/3D%20Theme/preview.png "Preview")
5 | 
6 | #### Demo
7 | https://michaelbarney.github.io/LinkFree/Templates/3D%20Theme/
8 | 


--------------------------------------------------------------------------------
/Templates/3D Theme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |    <head>
 5 |         <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
 6 |         <link href='https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css' rel='stylesheet'/>
 7 |         <link rel="stylesheet" href="style.css">
 8 |         <title>3D Theme</title>
 9 |    </head>
10 |    <body>
11 |         <div class='navbar no-items section' id='navbar'></div>
12 |         <img alt='User Photo' id='userPhoto' src='https://1.bp.blogspot.com/-v4Yi0oSR0-c/X1YRNalQZLI/AAAAAAAAA6U/xMnEQKBDgPgKFXQONoHthgMbQ91QURBlACLcBGAsYHQ/s0/technopreneur.jpg'/>
13 |         <span id='userName'>3D Theme by Farell Faiz</span>
14 |         <div id='links'>
15 |             <a class='link' href='#yourLink' target='_blank'><i aria-hidden='true' class='fa fa-camera'></i>&#160;&#160;Photography Submission</a>
16 |             <a class='link' href='#yourLink' target='_blank'><i aria-hidden='true' class='ri-discord-fill'></i>&#160;&#160;Discord Server</a>
17 |             <a class='link' href='#yourLink' target='_blank'><i aria-hidden='true' class='fa fa-video-camera'></i>&#160;&#160;Zoom Webinar Room</a>
18 |         </div>
19 |         <div class='footer'>
20 |             <a href='#yourLink' target='_blank'>
21 |                 <i aria-hidden='true' class='fa fa-globe media' style='line-height: 38px; font-size: 10px;'></i>
22 |             </a>
23 |             <a href='#yourLink' target='_blank'>
24 |                 <i aria-hidden='true' class='fa fa-envelope-o media' style='line-height: 38px; font-size: 10px;'></i>
25 |             </a>
26 |             <a href='#yourLink'>
27 |                 <i aria-hidden='true' class='fa fa-comments-o media' style='line-height: 38px; font-size: 10px;'></i>
28 |             </a>
29 |             <a href='#yourLink' target='_blank'>
30 |                 <i aria-hidden='true' class='fa fa-instagram media' style='line-height: 38px; font-size: 10px;'></i>
31 |             </a>
32 |         </div>
33 |     </body>
34 | </html>
35 | 
36 | 


--------------------------------------------------------------------------------
/Templates/3D Theme/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/3D Theme/preview.png


--------------------------------------------------------------------------------
/Templates/90'sTheme/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/90'sTheme/.DS_Store


--------------------------------------------------------------------------------
/Templates/90'sTheme/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/90'sTheme/favicon.ico


--------------------------------------------------------------------------------
/Templates/90'sTheme/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/90'sTheme/images/.DS_Store


--------------------------------------------------------------------------------
/Templates/90'sTheme/images/corgi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/90'sTheme/images/corgi.jpg


--------------------------------------------------------------------------------
/Templates/90'sTheme/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/90'sTheme/images/favicon.png


--------------------------------------------------------------------------------
/Templates/90'sTheme/images/universe.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/90'sTheme/images/universe.gif


--------------------------------------------------------------------------------
/Templates/90'sTheme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta charset="UTF-8">
 8 |     <title>I'm Totally Buggin'</title>
 9 |     <link rel="stylesheet" href="style.css">
10 |     <link rel="icon" href="favicon.ico" type="image/x-icon" />
11 | </head>
12 | 
13 | <body>
14 |     <div>
15 |         <img src="" alt="" srcset="https://emojis.slackmojis.com/emojis/images/1539890226/4845/rickroll.gif?1539890226">
16 |     </div>
17 |     <div class="instagram">
18 |         <a href="https://www.instagram.com/corgistagrams" id="userName">@corgistagrams</a>
19 |     </div>
20 |     <div class="links">
21 |         <button><a class="link" href="https://en.wikipedia.org/wiki/1990s" target="_blank">Wikipedia</a></button>
22 |         <button><a class="link" href="https://www.imdb.com/title/tt0108778/?ref_=nv_sr_srsg_0"
23 |                 target="_blank">IMDB</a></button>
24 |     </div>
25 | 
26 |     <!-- Javascript -->
27 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
28 |     <script src="index.js"></script>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/Templates/90'sTheme/index.js:
--------------------------------------------------------------------------------
1 | $( document ).ready(function() {
2 |      // Add here commands to run on page loaded
3 | });
4 | 
5 | $( ".link" ).click(function() {
6 |     // Add here commands to run on link click
7 | });


--------------------------------------------------------------------------------
/Templates/90'sTheme/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	box-sizing: border-box;
 3 | 	cursor: url(https://ani.cursors-4u.net/cursors/cur-12/cur1100.ani),
 4 | 		url(https://ani.cursors-4u.net/cursors/cur-12/cur1100.png), auto !important;
 5 | }
 6 | 
 7 | img,
 8 | video {
 9 | 	max-width: 100%;
10 | 	height: auto;
11 | 	display: block;
12 | 	border-radius: 500px;
13 | 	margin: 0 auto;
14 | 	padding: 2em;
15 | }
16 | 
17 | html,
18 | body {
19 | 	margin: 0;
20 | 	padding: 0;
21 | 	background-image: url(./images/universe.gif);
22 | 	background-repeat: repeat;
23 | 	font-family: "Comic Sans MS", "Comic Sans", cursive;
24 | }
25 | 
26 | .instagram {
27 | 	text-align: center;
28 | }
29 | 
30 | .instagram a {
31 | 	color: aquamarine;
32 | }
33 | 
34 | .links {
35 | 	display: flex;
36 | 	flex-direction: column;
37 | 	align-items: center;
38 | }
39 | 
40 | .links button {
41 | 	width: 20%;
42 | 	margin: 2em;
43 | 	padding: 1em;
44 | 	color: rgb(195, 195, 195);
45 | 	border-top: solid 6px rgb(252, 252, 252);
46 | 	border-left: solid 6px rgb(252, 252, 252);
47 | 	border-bottom: solid 6px rgb(136, 136, 136);
48 | 	border-right: solid 6px rgb(136, 136, 136);
49 | }
50 | 
51 | .links button:active {
52 | 	transform: translateY(4px);
53 | }
54 | 
55 | .links a {
56 | 	font-family: "Comic Sans MS", "Comic Sans", cursive;
57 | 	text-decoration: none;
58 | 	color: blueviolet;
59 | 	font-size: large;
60 | }
61 | 


--------------------------------------------------------------------------------
/Templates/A mocha, please! (Netlify Form)/README.md:
--------------------------------------------------------------------------------
 1 | # "A mocha, please!" ☕️
 2 | A simple template with everything you need:  
 3 | Upload-ready Netlify form, animated buttons and easy to customize CSS.
 4 | 
 5 | <img src="screenshot.png" alt="screenshot of template" width="200">
 6 | 
 7 | ## Netlify Form
 8 | There is no extra configuration needed. If you upload it to Netlify as it is, it will work with build in spam protection. You can set up getting the messages via email, too. Check out the [documentation](https://docs.netlify.com/forms/setup/) for this, or watch [this tutorial](https://youtu.be/6ElQ689HRcY) if you prefer a video.  
 9 | If you know what you're doing, you can set up submission [with AJAX/XHR](https://docs.netlify.com/forms/setup/#submit-html-forms-with-ajax) and configure [spam filtering](https://docs.netlify.com/forms/spam-filters/). 
10 | 
11 | ## Links
12 | Just change the `href`attribute of the `<a>`tags to the new link, and you'll be fine.
13 | 
14 | ## Customizing Color & Font
15 | To customize the color theme, just change the CSS variables in the declaration for `:root`.  
16 | To change the font, replace the three `<link>` tags linking to [Google Fonts](https://fonts.google.com/) and the associated `--font` declaration to the Name of the font. 
17 | 
18 | ## Icons
19 | The icons used are from [icons8](https://icons8.com/). On that page are a lot of different icons in SVG inline format, you probably find what you need there.  
20 | If you don't want to attribute the site, consider replacing them or buying a license on the site (pricing seems fair).


--------------------------------------------------------------------------------
/Templates/A mocha, please! (Netlify Form)/profile-picture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/A mocha, please! (Netlify Form)/profile-picture.jpg


--------------------------------------------------------------------------------
/Templates/A mocha, please! (Netlify Form)/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/A mocha, please! (Netlify Form)/screenshot.png


--------------------------------------------------------------------------------
/Templates/Abstract/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Abstract/.DS_Store


--------------------------------------------------------------------------------
/Templates/Abstract/Doubs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Abstract/Doubs.png


--------------------------------------------------------------------------------
/Templates/Abstract/Profile.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Abstract/Profile.jpeg


--------------------------------------------------------------------------------
/Templates/Abstract/README.md:
--------------------------------------------------------------------------------
1 | # Abstract Theme
2 | Made by [Rajnikant dash](http://github.com/Rajni2002/ "Rajni2002").
3 | 
4 | ![Preview](https://github.com/Rajni2002/LinkFree/blob/master/Templates/Abstract/preview.png "Preview")
5 | 
6 | #### Demo
7 | https://michaelbarney.github.io/LinkFree/Templates/Abstract/
8 | 


--------------------------------------------------------------------------------
/Templates/Abstract/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Abstract</title>
 9 |     <link rel="stylesheet" href="style.css">
10 | </head>
11 | 
12 | <body>
13 |     <main>
14 |         <div class="profile">
15 |             <img src="Profile.jpeg" alt="profile-image">
16 |             <h1>Hello Everybody!</h1>
17 |         </div>
18 |         <a href="https://github.com/Rajni2002" target="blank">
19 |             <div class="github">
20 |                 <img src="https://img.icons8.com/fluency/48/000000/github.png" alt="Github-icon" />
21 |                 <p>Collaborate <span>with me on Github</span></p>
22 |             </div>
23 |         </a>
24 |         <a href="https://twitter.com/rajni2k2" target="blank">
25 |             <div class="Twitter">
26 |                 <img src="https://img.icons8.com/fluency/48/000000/twitter.png" alt="Twitter-icon" />
27 |                 <p>Read <span>my threads Twitter</span></p>
28 |             </div>
29 |         </a>
30 |         <a href="https://www.linkedin.com/in/rajnikant-dash-2k2/" target="blank">
31 |             <div class="Linkedin">
32 |                 <img src="https://img.icons8.com/fluency/48/000000/linkedin.png" alt="Linked-icon" />
33 |                 <p>Connect <span>with me on Linkedin</span></p>
34 |             </div>
35 |         </a>
36 |     </main>
37 | </body>
38 | 
39 | </html>


--------------------------------------------------------------------------------
/Templates/Abstract/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Abstract/preview.png


--------------------------------------------------------------------------------
/Templates/Ancind Theme/README.md:
--------------------------------------------------------------------------------
 1 | # Ancient India (ANCIND) Theme
 2 | 
 3 | This is a very cool template which looks professional in design, color and typography. It has colors similar to the ancient artifacts which makes you feel a mixture of modern and ancient world.
 4 | 
 5 | [Visit the template demo site](https://michaelbarney.github.io/LinkFree/Templates/Ancind%Theme)
 6 | 
 7 | 
 8 | ### Preview
 9 | 
10 | ![Preview of the Website](media/Preview.png)
11 | 
12 | ## Features
13 | - The website looks elegant while being very clean and simple.
14 | - There are special hover effects for the elements.
15 | - There is smooth Transition touch for ease of use.


--------------------------------------------------------------------------------
/Templates/Ancind Theme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="shortcut icon" href="media/favicon.ico" type="image/x-icon">
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <title>My Castle</title>
10 | </head>
11 | <body>
12 | 
13 |     <div class="profile_card_div">
14 |         <div class="whoami_div">
15 |             <div class="profilepic_div">
16 |                 <img src="media/profilepic.png" alt="" class="profilepic">
17 |             </div>
18 |             <div class="textinfo">
19 |                 <h1 class="name">Prakhar Tiwari</h1>
20 |                 <h2 class="profession">Student | Web Developer</h2>
21 |             </div>
22 |         </div>
23 |             <div class="linkscard_div">
24 |                 <ul>
25 |                     <li class="list-item"><a href="https://prakhartiwari0.github.io/" target="_blank"><img src="media/websiteicon.png" alt="Website">Website</a></li>
26 |                     <li class="list-item"><a href="https://github.com/prakhartiwari0" target="_blank"><img src="media/githubicon.png" alt="GitHub">GitHub</a></li>
27 |                     <li class="list-item"><a href="https://twitter.com/Prakhartiwari0" target="_blank"><img src="media/twittericon.png" alt="Twitter">Twitter</a></li>
28 |                     <li class="list-item"><a href="https://www.linkedin.com/in/prakhar-tiwari0" target="_blank"><img src="media/linkedinicon.png" alt="Linkedin">Linkedin</a></li>
29 |                     <li class="list-item"><a href="https://www.showwcase.com/prakhartiwari0" target="_blank"><img src="media/showwcaseicon.png" alt="Showwcase">Showwcase</a></li>
30 |                 </ul>
31 |             </div>
32 |     </div>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/Preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/Preview.png


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/art1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/art1.png


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/art2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/art2.png


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/favicon.ico


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/githubicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/githubicon.png


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/linkedinicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/linkedinicon.png


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/profilepic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/profilepic.png


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/showwcaseicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/showwcaseicon.png


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/twittericon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/twittericon.png


--------------------------------------------------------------------------------
/Templates/Ancind Theme/media/websiteicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Ancind Theme/media/websiteicon.png


--------------------------------------------------------------------------------
/Templates/Arcade/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Arcade/background.png


--------------------------------------------------------------------------------
/Templates/Arcade/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Arcade/favicon.ico


--------------------------------------------------------------------------------
/Templates/Arcade/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Arcade Games</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="userPhoto.png" alt="User Photo">
14 |     
15 |     <a href="" id="userName">Arcade Games</a>
16 |     <div id="links">
17 |         <a class="link" href="https://en.wikipedia.org/wiki/Asteroids_(video_game)" target="_blank">Asteroids</a>
18 |         <a class="link" href="https://en.wikipedia.org/wiki/Donkey_Kong_(video_game)" target="_blank">Donkey Kong</a>
19 |         <a class="link" href="https://en.wikipedia.org/wiki/Frogger" target="_blank">Frogger</a>
20 |         <a class="link" href="https://en.wikipedia.org/wiki/Pac-Man" target="_blank">Pac-Man</a>
21 |     </div>
22 | 
23 |     <!-- Javascript -->
24 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
25 |     <script  src="index.js"></script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Templates/Arcade/index.js:
--------------------------------------------------------------------------------
1 | $( document ).ready(function() {
2 |      // Add here commands to run on page loaded
3 | });
4 | 
5 | $( ".link" ).click(function() {
6 |     // Add here commands to run on link click
7 | });


--------------------------------------------------------------------------------
/Templates/Arcade/readme.md:
--------------------------------------------------------------------------------
 1 | # Standard Template
 2 | 
 3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
 4 | 
 5 | <img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
20 | 	```
21 |  4. **Username**
22 | 	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | 	```
24 | 	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
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 | 	<div  id="links">
30 | 
31 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
32 | 
33 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
34 | 
35 | 	</div>
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/Arcade/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
 3 | 
 4 | body {
 5 |     font-family: 'Press Start 2P', cursive;
 6 |     background-color: #371853;
 7 |     background-image: url('background.png');
 8 | }
 9 | 
10 | a {cursor: crosshair;}
11 | 
12 | #userPhoto{
13 |     width: 96px;
14 |     height: 96px;
15 |     display: block;
16 |     margin: 35px auto 20px;
17 | }
18 | 
19 | #userName{
20 |     color: #fff;
21 |     font-size: 1.5em;
22 |     line-height: 1.25;
23 |     display: block;
24 |     width: 100%;
25 |     text-align: center;
26 |     text-decoration: none;
27 | }
28 | #userName:hover{animation: blinker 1s infinite;}
29 | 
30 | @keyframes blinker{
31 |     50%{
32 |         color: rgba(255,202,8,1);
33 |     }
34 | }
35 | 
36 | #links{
37 |     max-width: 675px;
38 |     width: auto;
39 |     display: block;
40 |     margin: 36px auto 27px auto;
41 | }
42 | .link{
43 |     cursor: crosshair;
44 |     position: relative;
45 |     display: block;
46 |     background: #fe0df1;
47 |     background: linear-gradient(180deg, rgba(255,202,8,1) 0%, rgba(254,13,241,1) 100%);
48 |     color: #fff;
49 |     text-align: center;
50 |     margin-bottom: 25px;
51 |     padding: 17px;
52 |     text-decoration: none;
53 |     font-size: 1rem;
54 |     text-transform: uppercase;
55 | }
56 | .link:before,
57 | .link:after{
58 |     background-color: #fcdf08;
59 |     content: '';
60 |     position: absolute;
61 |     z-index: -1;
62 | }
63 | .link:before{
64 |     top: -6px;
65 |     left: 0;
66 |     height: calc(100% + 12px);
67 |     width: 100%;
68 | }
69 | .link:after{
70 |     top: 0;
71 |     left: -6px;
72 |     height: 100%;
73 |     width: calc(100% + 12px);
74 | }
75 | 
76 | .link:hover{font-size: 1.2rem;}


--------------------------------------------------------------------------------
/Templates/Arcade/userPhoto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Arcade/userPhoto.png


--------------------------------------------------------------------------------
/Templates/ArghMyEyes/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |         <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
 8 |         <link rel="stylesheet" href="style.css" />
 9 |         <title>Argh My Eyes Theme | Eko Triono</title>
10 |     </head>
11 |     <body>
12 |         <div class="author">
13 |             <img src="https://avatars.githubusercontent.com/u/12593832?v=4" alt="Eko Triono" class="author__pic" />
14 |             <a href="https://github.com/ekotriono" class="author__username" target="_blank">@ekotriono</a>
15 |         </div>
16 |         <div class="links">
17 |             <a href="https://github.com/ekotriono" target="_blank" class="links__item">
18 |                 <span class="links__icon"><i class="bx bxl-github"></i></span>
19 |                 <span class="links__label">Github</span>
20 |             </a>
21 |             <a href="https://linkedin.com/in/ekotriono" target="_blank" class="links__item">
22 |                 <span class="links__icon"><i class="bx bxl-linkedin"></i></span>
23 |                 <span class="links__label">Linkedin</span>
24 |             </a>
25 |             <a href="https://instagram.com" target="_blank" class="links__item">
26 |                 <span class="links__icon"><i class="bx bxl-instagram"></i></span>
27 |                 <span class="links__label">Instagram</span>
28 |             </a>
29 |             <a href="https://facebook.com" target="_blank" class="links__item">
30 |                 <span class="links__icon"><i class="bx bxl-facebook"></i></span>
31 |                 <span class="links__label">Facebook</span>
32 |             </a>
33 |         </div>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Templates/Art/ReadMe.md:
--------------------------------------------------------------------------------
1 | # Art Theme by Rohit Purkait
2 | 
3 | > Here's the [demo](https://codeswithroh.github.io/Demo/)
4 | 
5 | ### This theme is for all the creative people out there. With its special gradient changing animations you will love to flaunt it to your friends and family.
6 | 


--------------------------------------------------------------------------------
/Templates/Art/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Art Theme | Rohit Purkait</title>
 9 |   </head>
10 |   <body>
11 |     <img src="./rohit.jpeg" class="profile-pic" alt="profile pic" />
12 |     <a
13 |       href="https://www.instagram.com/otaku_._sempai/"
14 |       target="_blank"
15 |       class="username"
16 |       >@Rohit Purkait</a
17 |     >
18 |     <div class="links">
19 |       <a
20 |         href="https://rohit-purkait.netlify.app/"
21 |         target="_blank"
22 |         class="link-items"
23 |       >
24 |         <i class="fas fa-globe"></i>
25 |         <div>Website</div>
26 |       </a>
27 |       <a
28 |         href="https://www.linkedin.com/in/codeswithroh/"
29 |         target="_blank"
30 |         class="link-items"
31 |       >
32 |         <i class="fab fa-linkedin"></i>
33 |         <div>LinkedIn</div>
34 |       </a>
35 |       <a
36 |         href="https://in.pinterest.com/rohitpurkait001/_saved/"
37 |         target="_blank"
38 |         class="link-items"
39 |       >
40 |         <i class="fab fa-pinterest-square"></i>
41 |         <div>Pinterest</div>
42 |       </a>
43 |       <a
44 |         href="https://github.com/codeswithroh"
45 |         target="_blank"
46 |         class="link-items"
47 |       >
48 |         <i class="fab fa-github-square"></i>
49 |         <div>GitHub</div>
50 |       </a>
51 |     </div>
52 |   </body>
53 |   <script
54 |     src="https://kit.fontawesome.com/3fd576ae50.js"
55 |     crossorigin="anonymous"
56 |   ></script>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/Templates/Art/rohit.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Art/rohit.jpeg


--------------------------------------------------------------------------------
/Templates/BeldiTheme/img/pem.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/BeldiTheme/img/pem.jpg


--------------------------------------------------------------------------------
/Templates/BeldiTheme/img/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/BeldiTheme/img/profile.jpg


--------------------------------------------------------------------------------
/Templates/BeldiTheme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Beldi music Theme</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="img/profile.jpg" alt="Beldi">
14 |     
15 |     <a href="" id="userName">@beldimusic</a>
16 |     <div id="links">
17 |         <a class="link" href="https://beathey.com/artists/1045/info" target="_blank">BeatHey</a>
18 |         <a class="link" href="https://open.spotify.com/artist/6WoIusXtJQySlAgoovjPsz?si=imncMAi_QyWSdVv2f4oUPg" target="_blank">Spotify</a>
19 |         <a class="link" href="https://www.youtube.com/channel/UCArYM9Wd1fg2OVT1YpzBbzg/featured" target="_blank">YouTube</a>
20 |     </div>
21 | 
22 |     <footer>
23 |         🎵 Artista <a href="https://www.instagram.com/beatheyok/">@beatheyok</a>
24 |     </footer>
25 | 
26 |     <!-- Javascript -->
27 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
28 |     <script  src="index.js"></script>
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/Templates/BeldiTheme/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap" rel="stylesheet');
 2 | 
 3 | :root {
 4 |     --font: 'Fira Sans', sans-serif;
 5 |     
 6 |     --background: #0b2c3b;
 7 |     --selection: #0b2c3b;
 8 |     --comment: #f3801d;
 9 |     --cream: #f8e6c4;
10 |     --green: #009e7d;
11 | }
12 | 
13 | body{
14 |     background: var(--background) url(img/pem.jpg) repeat center bottom;
15 |     background-size: contain;
16 |     color: var(--cream);
17 |     height: 100vh;
18 | }
19 | 
20 | footer{
21 |     text-align: center;
22 | 
23 |     color:var(--selection);
24 | 
25 |     font-family: var(--font);
26 |     font-size: 0.75rem;
27 |     font-weight: 400;
28 | }
29 | footer a {
30 |     color: var(--selection);
31 |     cursor: pointer;
32 | }
33 | footer a:hover {
34 |     color: var(--comment);
35 | }
36 | 
37 | #userPhoto{
38 |     width: 96px;
39 |     height: 96px;
40 | 
41 |     display: block;
42 | 
43 |     margin: 35px auto 20px;
44 | 
45 |     border-radius: 50%;
46 |     border: solid var(--cream) 2px;
47 | }
48 | 
49 | #userName{
50 |     width: 100%;
51 | 
52 |     color: var(--cream);
53 | 
54 |     font-family: var(--font);
55 |     font-size: 1rem;
56 |     font-weight: 400;
57 | 
58 |     text-align: center;
59 |     text-decoration: none;
60 | 
61 |     line-height: 1.25;
62 |     display: block;
63 | }
64 | 
65 | #links{
66 |     max-width: 675px;
67 |     width: auto;
68 | 
69 |     display: block;
70 | 
71 |     margin: 27px auto;
72 | }
73 | .link {
74 | 	background-color: var(--green);
75 | 	display: block;
76 | 	color: #fff;
77 |     cursor: pointer;
78 | 	font-family: var(--font);
79 | 	text-align: center;
80 |     text-shadow: 1px 1px var(--background);
81 | 	margin-bottom: 1.2rem;
82 | 	padding: 1rem;
83 | 	text-decoration: none;
84 | 	font-size: 1rem;
85 | 	font-weight: bold;
86 | 	transition: all 0.15s;
87 | 	box-shadow: 4px 4px #086a55;
88 | }
89 | 
90 | .link:hover, .link:focus {
91 | 	background: #09bf90;
92 | 	box-shadow: 2px 2px #086a55;
93 |     cursor: pointer;
94 | 	transform: translate(2px);
95 |     transition: all ease-in 0.3s;
96 | }


--------------------------------------------------------------------------------
/Templates/Buisness Theme/Buisness.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Buisness Theme/Buisness.jpg


--------------------------------------------------------------------------------
/Templates/Buisness Theme/github.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Buisness Theme/github.gif


--------------------------------------------------------------------------------
/Templates/Buisness Theme/instagram.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Buisness Theme/instagram.gif


--------------------------------------------------------------------------------
/Templates/Buisness Theme/linkedin.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Buisness Theme/linkedin.gif


--------------------------------------------------------------------------------
/Templates/Buisness Theme/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Buisness Theme/logo.jpg


--------------------------------------------------------------------------------
/Templates/Buisness Theme/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Buisness Theme/logo.png


--------------------------------------------------------------------------------
/Templates/Buisness Theme/style.css:
--------------------------------------------------------------------------------
 1 | .Lora{
 2 |     font-family: 'Lora', serif;
 3 | }
 4 | .Lexend{
 5 |     font-family: 'Lexend', sans-serif;
 6 | }
 7 | .box{
 8 | 
 9 |     border-radius: 100px;
10 |     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
11 | 
12 | }
13 | .box:hover{
14 |     box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
15 | }
16 | .github{
17 |     background-color: #2100c4 !important;
18 | }
19 | .instagram{
20 |     background-color: #f55376 !important;
21 | }
22 | .linkedin{
23 |     background-color: #0077b5 !important;
24 | }


--------------------------------------------------------------------------------
/Templates/CasualBlue/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |   <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta charset="UTF-8" />
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |     <link rel="stylesheet" href="font-awesome.css" />
10 |     <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
11 |     <link rel="icon" href="" type="image/x-icon" />
12 |   </head>
13 | 
14 |   <body>
15 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo"/>
16 |     <h1>Homer Simpson</h1>
17 |     <div id="description">
18 |       Homer Jay Simpson is a fictional character and the protagonist of the
19 |       American animated sitcom The Simpsons. LinkFree template created by
20 |       <a href="https://ryanloi.me/" target="_blank">Ryan Loi</a>.
21 |     </div>
22 |     <div id="links">
23 |        
24 |       <a
25 |         class="link"
26 |         href="https://pt.wikipedia.org/wiki/Homer_Simpson"
27 |         target="_blank"
28 |         >Wikipedia</a
29 |       >
30 |       <a class="link" href="https://foxplay.com/br/forme" target="_blank"
31 |         >IMDB</a
32 |       >
33 |     </div>
34 | 
35 |     <!-- Javascript -->
36 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Templates/CasualBlue/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/CasualBlue/preview.png


--------------------------------------------------------------------------------
/Templates/CasualBlue/readme.md:
--------------------------------------------------------------------------------
 1 | # Standard Template
 2 | 
 3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/CasualBlue/)
 4 | 
 5 | <img src="Templates/SimpleBlue/preview.png" alt="alt text" width="250px">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
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 | 	<div  id="links">
25 | 
26 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
27 | 
28 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
29 | 
30 | 	</div>
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/CasualBlue/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 3 | :root {
 4 |     --bgColor: #eeeeee;
 5 |     --accentColor: #204051;
 6 |     --font: 'Roboto', sans-serif;
 7 | }
 8 | 
 9 | body{
10 |     background-color: var(--bgColor);
11 | }
12 | 
13 | div.top{
14 |     background-color: #204051;
15 |     margin: 0;
16 | }
17 | 
18 | #userPhoto{
19 |     width: 96px;
20 |     height: 96px;
21 |     display: block;
22 |     margin: 35px auto;
23 |     border-radius: 25%;
24 |     border-style: solid;
25 | }
26 | 
27 | #userName{
28 |     color: #bbb;
29 |     font-size: 1rem;
30 |     font-weight: 600;
31 |     line-height: 1.25;
32 |     display: block;
33 |     font-family: var(--font);
34 |     width: 100%;
35 |     text-align: center;
36 |     text-decoration: none;
37 | }
38 | 
39 | #links{
40 |     max-width: 675px;
41 |     width: 100%;
42 |     display: block;
43 |     margin: 27px auto;
44 | }
45 | 
46 | h1{
47 |     text-align: center;
48 |     font-family: var(--font);
49 |     color: var(--accentColor);
50 | }
51 | 
52 | #description{
53 |     text-align: center;
54 |     font-family: var(--font)
55 | }
56 | 
57 | #social-media{
58 |     margin: auto;
59 | }
60 | 
61 | .link{
62 |     display: block;
63 |     background-color: var(--accentColor);
64 |     color: var(--bgColor);
65 |     font-family: var(--font);
66 |     text-align: center;
67 |     margin-bottom: 20px;
68 |     padding: 17px;
69 |     text-decoration: none;
70 |     font-size: 1rem;
71 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
72 |     border-radius: 25px;
73 | }
74 | 
75 | .link:hover{
76 |     background-color: #3b6978;
77 |     color: #ffffff;
78 | }
79 | 


--------------------------------------------------------------------------------
/Templates/Cubes/images/cubes_background.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Cubes/images/cubes_background.jpeg


--------------------------------------------------------------------------------
/Templates/Cubes/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Cube theme</title>
 9 | </head>
10 | <body>
11 | 
12 |     <div class="diamond">
13 |         <img class="diamond__img" src="https://avatars.githubusercontent.com/u/89015968?v=4" alt="logo">
14 |     </div>
15 | 
16 |     <h1>SebastianCCC</h1>
17 |     <div class="links__container">
18 |     <a href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">
19 |     <div class="links flex">
20 |         <i class="fas fa-atlas"></i>
21 |         <p>Wikipedia</p>
22 |     </div>
23 | </a>
24 | </div>
25 | 
26 | <div class="links__container">
27 |     <a href="https://foxplay.com/br/forme" target="_blank">
28 |     <div class="links flex">
29 |        <i class="fab fa-imdb"></i>
30 |         <p>IMDB</p>
31 |     </div>
32 | </a>
33 | </div>
34 |     
35 | </body>
36 | <script src="https://kit.fontawesome.com/3fd576ae50.js" crossorigin="anonymous"></script>
37 | </html>


--------------------------------------------------------------------------------
/Templates/Cubes/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
 2 | 
 3 | * {
 4 |     margin: 0;
 5 |     padding: 0;
 6 |     box-sizing: border-box;
 7 |     font-family: var(--poppins);
 8 | }
 9 | 
10 | img {
11 |     width: 100%;
12 |     height: auto;
13 |     display: block;
14 | }
15 | 
16 | body {
17 |     background-image: url(./images/cubes_background.jpeg);
18 |     background-size: cover;
19 | }
20 | 
21 | :root {
22 | 
23 |     --greenColor: #3fce8b;
24 |     --blueColor: #5190e2;
25 |     --lightpurple: rgb(133, 152, 217);
26 |     --whiteColor: #ffffff;
27 | 
28 |     --poppins: Poppins;
29 | 
30 |     --font_size_big: 30px;
31 |     --font_size_medium: 25;
32 | 
33 | 
34 | }
35 | 
36 | .diamond {
37 |     max-width: 100px;
38 |     margin: 0 auto;
39 |     margin-top: 5%;
40 |     background: linear-gradient(to right, var(--blueColor), var(--greenColor));
41 |     padding: 5px;
42 |     transform: rotate(45deg);
43 | }
44 | 
45 | .diamond__img {
46 |     background: linear-gradient(to right, var(--greenColor), var(--blueColor));
47 |     padding: 5px;
48 |     transform: rotate(-45deg);
49 | }
50 | 
51 | h1 {
52 |     font-size: var(--font_size_big);
53 |     text-align: center;
54 |     padding: 3%;
55 |     color: var(--whiteColor);
56 | }
57 | 
58 | .links {
59 |     padding: 5px;
60 |     background: linear-gradient(to right, var(--blueColor), var(--greenColor));
61 | }
62 | 
63 | .links:hover {
64 |     background: var(--whiteColor);
65 | }
66 | 
67 | .links:hover .fas, .links:hover .fab, .links:hover p{
68 |     color: var(--lightpurple);
69 | }
70 | 
71 | .links__container {
72 |     width: 35%;
73 |     padding: 2px;
74 |     margin: 0 auto;
75 |     margin-bottom: 35px;
76 |     background: linear-gradient(to right, var(--greenColor), var(--blueColor));
77 | }
78 | 
79 | .fas, .fab {
80 |     font-size: var(--font_size_big);
81 |     color: var(--whiteColor);
82 | }
83 | 
84 | .flex {
85 |     display: flex;
86 |     align-items: center;
87 |     justify-content: center;
88 | }
89 | 
90 | p {
91 |     color: var(--whiteColor);
92 |     font-size: var(--font_size_medium);
93 |     font-weight: bold;
94 |     padding: 0 10px 0 10px;
95 | }
96 | 
97 | a {
98 |     text-decoration: none;
99 | }


--------------------------------------------------------------------------------
/Templates/DarkMode/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
14 |     
15 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
16 |     <div id="links">
17 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
18 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
19 |     </div>
20 | 
21 |     <!-- Javascript -->
22 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
23 |     <script  src="index.js"></script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Templates/DarkMode/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
 3 | :root {
 4 |     --bgColor:#1C1C1C;
 5 |     --accentColor: #E6E6E6;
 6 |     --font: 'Karla', 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: 600;
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: 675px;
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/DeepSea/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/DeepSea/.DS_Store


--------------------------------------------------------------------------------
/Templates/DeepSea/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/DeepSea/assets/.DS_Store


--------------------------------------------------------------------------------
/Templates/DeepSea/assets/deepSea.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/DeepSea/assets/deepSea.png


--------------------------------------------------------------------------------
/Templates/DeepSea/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta charset="UTF-8">
 8 |     <title>Major Homer</title>
 9 |     <link rel="stylesheet" href="style.css">
10 |     <link rel="icon" href="favicon.ico" type="image/x-icon" />
11 | </head>
12 | 
13 | <body>
14 |     <img id="userPhoto" src="https://i.imgur.com/ogrNhWB.jpg" alt="User Photo">
15 | 
16 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
17 |     <div id="links">
18 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank" style="border-radius: 25px;">Wikipedia</a>
19 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank" style="border-radius: 25px;">IMDB</a>
20 |         <a class="link" href="https://www.rottentomatoes.com/tv/the_simpsons" target="_blank" style="border-radius: 25px;">Rotten Tomatoes</a>
21 |     </div>
22 | 
23 |     <!-- Javascript -->
24 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
25 |     <script src="index.js"></script>
26 | </body>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/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/DevCode/devcode.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/DevCode/devcode.jpeg


--------------------------------------------------------------------------------
/Templates/Dynamic/ReadMe.md:
--------------------------------------------------------------------------------
1 | # Dynamic Theme by Rohit Purkait
2 | 
3 | > Here's the [demo](https://codeswithroh.github.io/Dynamic/)
4 | 
5 | ### This theme is for all the creative people out there. With its amazing animated background and 3d buttons you will love to flaunt it to your friends and family.
6 | 


--------------------------------------------------------------------------------
/Templates/Dynamic/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <title>Dynamic Template | Rohit Purkait</title>
 9 |   </head>
10 |   <body>
11 |     <div class="bg"></div>
12 |     <div class="bg bg2"></div>
13 |     <div class="bg bg3"></div>
14 |     <div class="content">
15 |       <img src="./rohit.jpeg" class="profile-pic" alt="profile pic" />
16 |       <a
17 |         href="https://www.instagram.com/otaku_._sempai/"
18 |         target="_blank"
19 |         class="username"
20 |         >@Rohit Purkait</a
21 |       >
22 |       <div class="links">
23 |         <a
24 |           href="https://rohit-purkait.netlify.app/"
25 |           target="_blank"
26 |           class="link-items"
27 |         >
28 |           <i class="fas fa-globe"></i>
29 |           <div>Website</div>
30 |         </a>
31 |         <a
32 |           href="https://www.linkedin.com/in/codeswithroh/"
33 |           target="_blank"
34 |           class="link-items"
35 |         >
36 |           <i class="fab fa-linkedin"></i>
37 |           <div>LinkedIn</div>
38 |         </a>
39 |         <a
40 |           href="https://in.pinterest.com/rohitpurkait001/_saved/"
41 |           target="_blank"
42 |           class="link-items"
43 |         >
44 |           <i class="fab fa-pinterest-square"></i>
45 |           <div>Pinterest</div>
46 |         </a>
47 |         <a
48 |           href="https://github.com/codeswithroh"
49 |           target="_blank"
50 |           class="link-items"
51 |         >
52 |           <i class="fab fa-github-square"></i>
53 |           <div>GitHub</div>
54 |         </a>
55 |       </div>
56 |     </div>
57 |   </body>
58 |   <script
59 |     src="https://kit.fontawesome.com/3fd576ae50.js"
60 |     crossorigin="anonymous"
61 |   ></script>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/Templates/Dynamic/rohit.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Dynamic/rohit.jpeg


--------------------------------------------------------------------------------
/Templates/Eduardosgs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <link href="https://fonts.googleapis.com/css?family=Poppins:400,800&amp;display=swap" rel="stylesheet">
 8 |     <link rel="stylesheet" href="style.css">
 9 | 
10 |     <title>Eduardo Santos Dev</title>
11 | </head>
12 | <body>
13 |       <div class="container">
14 |         <h1>instagram</h1>
15 |         <h2><a href="https://www.instagram.com/edu.dev/">@edu.dev</a></h2>
16 |       </div>  
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Templates/Eduardosgs/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background:rgb(119, 76, 76);
 3 | }
 4 | .container{
 5 |     width: 400px;
 6 |     margin: 200px auto 0;
 7 | }
 8 | .container h2, .container h1{
 9 |     color: #32275f;
10 |     text-align: center;
11 |     margin-top: 40px;
12 |     font-family: Poppins,sans-serif;
13 |     text-transform: uppercase;
14 | }
15 | .container h2 a{
16 |     text-decoration: none;
17 |     color: #2f2949;
18 |     transition: all .6s ease-in-out;
19 | }
20 | .container h2 a:hover{
21 |     text-decoration: underline;
22 | }


--------------------------------------------------------------------------------
/Templates/Emo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Monochromatic theme</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <script src="https://kit.fontawesome.com/52431911f6.js" crossorigin="anonymous"></script>
10 | </head>
11 | <body>
12 |     <main class="main">
13 |         <div class="img-container">
14 |             <img src="./memento-media-9VJ0aNgJJT8-unsplash.jpg" alt="" class="img">
15 |         </div>
16 |         <a href="#" class="username">@Username</a>
17 |         
18 |         <section class="some-icons-container">
19 |             <a href="#" class="some-link facebook"><i class="fab fa-facebook-f"></i></a>
20 |             <a href="#" class="some-link instagram"><i class="fab fa-instagram"></i></a>
21 |             <a href="#" class="some-link linkedin"><i class="fab fa-linkedin"></i></a>
22 |             <a href="#" class="some-link twitter"><i class="fab fa-twitter"></i></a>
23 |             <a href="#" class="some-link youtube"><i class="fab fa-youtube"></i></a>
24 |             <a href="#" class="some-link github"><i class="fab fa-github"></i></a>
25 |             <a href="#" class="some-link tiktok"><i class="fab fa-tiktok"></i></a>
26 |             <a href="#" class="some-link blogger"><i class="fab fa-blogger"></i></a>
27 |             <a href="#" class="external-link">
28 |                 How to Pretend you are Actually a Programming Genius
29 |                 <h2 class="external-link__header">Article on ProgrammingGurus.com</h2>
30 |             </a>
31 |             <a href="#" class="external-link">
32 |                 How Programming Can Help You Make Your Dreams Come True
33 |                 <h2 class="external-link__header">Blogger</h2>
34 |             </a>
35 |             <a href="#" class="external-link">
36 |                 Get 20% Off Online Classes At ProgrammingGurusOnlineClasses.com
37 |                 <h2 class="external-link__header">Affiliate link</h2>
38 |             </a>
39 |         </section>
40 |     </main>
41 | </body>
42 | </html>


--------------------------------------------------------------------------------
/Templates/Emo/memento-media-9VJ0aNgJJT8-unsplash.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Emo/memento-media-9VJ0aNgJJT8-unsplash.jpg


--------------------------------------------------------------------------------
/Templates/FavouriteTeacherTheme/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/FavouriteTeacherTheme/favicon.ico


--------------------------------------------------------------------------------
/Templates/FavouriteTeacherTheme/images/sunglasses.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/FavouriteTeacherTheme/images/sunglasses.png


--------------------------------------------------------------------------------
/Templates/FavouriteTeacherTheme/images/troels_bg_.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/FavouriteTeacherTheme/images/troels_bg_.png


--------------------------------------------------------------------------------
/Templates/FavouriteTeacherTheme/images/troels_profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/FavouriteTeacherTheme/images/troels_profile.png


--------------------------------------------------------------------------------
/Templates/FavouriteTeacherTheme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
 9 |     
10 |     <title>My favourite teacher</title>
11 | </head>
12 | 
13 | <body>
14 |     <img id="userPhoto" src="images/troels_profile.png" alt="User Photo">
15 |     
16 |     <a href="https://www.instagram.com/yourfavouriteteacher/" id="userName" target="_blank">@yourfavouriteteacher</a>
17 |     <div id="links">
18 |         <a class="link" href="https://www.imdb.com/title/tt13453608/" target="_blank">IMDB</a>
19 |         <a class="link" href="https://en.wikipedia.org/wiki/Teacher" target="_blank">Wikipedia</a>
20 |     </div>
21 | 
22 |     <!-- Javascript -->
23 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
24 |     <script  src="index.js"></script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Templates/FavouriteTeacherTheme/index.js:
--------------------------------------------------------------------------------
1 | $( document ).ready(function() {
2 |      // Add here commands to run on page loaded
3 | });
4 | 
5 | $( ".link" ).click(function() {
6 |     // Add here commands to run on link click
7 | });


--------------------------------------------------------------------------------
/Templates/FavouriteTeacherTheme/readme.md:
--------------------------------------------------------------------------------
 1 | # Standard Template
 2 | 
 3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
 4 | 
 5 | <img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
20 | 	```
21 |  4. **Username**
22 | 	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | 	```
24 | 	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
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 | 	<div  id="links">
30 | 
31 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
32 | 
33 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
34 | 
35 | 	</div>
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/FavouriteTeacherTheme/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | 
 3 | @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
 4 | 
 5 | :root {
 6 |     --bgColor: white;
 7 |     --accentColor: magenta;
 8 |     --font: 'Fredoka One', cursive;
 9 | }
10 | 
11 | body{
12 |     background-image: url(images/troels_bg_.png);
13 | }
14 | 
15 | * {
16 |     cursor:url(images/sunglasses.png), auto;
17 | }
18 | 
19 | #userPhoto{
20 |     width: 96px;
21 |     height: 96px;
22 |     display: block;
23 |     margin: 35px auto 20px;
24 |     border-radius: 50%;
25 |     border: var(--accentColor) solid 2px;
26 | }
27 | 
28 | #userName{
29 |     color: var(--accentColor);
30 |     font-size: 1.5rem;
31 |     font-weight: 900;
32 |     line-height: 1.25;
33 |     display: block;
34 |     font-family: var(--font);
35 |     width: 100%;
36 |     text-align: center;
37 |     text-decoration: none;
38 | }
39 | 
40 | #links{
41 |     max-width: 675px;
42 |     width: auto;
43 |     display: block;
44 |     margin: 27px auto;
45 | }
46 | .link{
47 |     display: block;
48 |     background-color: var(--accentColor);
49 |     color: var(--bgColor);
50 |     font-family: var(--font);
51 |     text-align: center;
52 |     margin-bottom: 20px;
53 |     padding: 17px;
54 |     text-decoration: none;
55 |     font-size: 1rem;
56 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
57 |     border: solid var(--accentColor) 2px;
58 |     border-radius: 30px;
59 | }
60 | 
61 | .link:hover{
62 |     background-color: var(--bgColor);
63 |     color: var(--accentColor);
64 | }
65 | 
66 | cursor{
67 |     transform: rotate(45deg);
68 | }
69 | 


--------------------------------------------------------------------------------
/Templates/Friends/frame.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Friends/frame.png


--------------------------------------------------------------------------------
/Templates/Friends/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>linkfree  | Friends</title>
 8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 | <link href="https://fonts.googleapis.com/css2?family=Vujahday+Script&display=swap" rel="stylesheet">
11 |     <link rel="stylesheet" href="style.css">
12 | 
13 | </head>
14 | <body>
15 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
16 | 
17 | <div class="wrapper">
18 |     <div class="img-area">
19 |     <img src="frame.png" class="frame" alt="">
20 |     <img src="rachel.jpg" class="rounded" />
21 | </div>
22 |   <!-- <div class="image-cropper">
23 |     <img src="rachel.jpg" class="rounded" />
24 |   </div> -->  
25 |   <h2 class="user-name">
26 |     Rachel Green
27 |   </h2>  
28 |   <div class="links">
29 |     <a href="https://github.com/dduyguu" class="link">
30 |         G<span class="r">I</span><span class="b">T</span><span class="y">H</span><span class="r">U</span><span class="b">B</span>
31 |     </a>
32 |     <a href="https://www.linkedin.com/in/duyguisikk/" class="link">
33 |         L<span class="r">I</span><span class="b">N</span><span class="y">K</span><span class="r">E</span><span class="b">D</span><span class="y">I</span><span class="r">N</span>
34 |     </a>
35 |     </a>
36 |     
37 |   </div>
38 |   <!-- <img src="Friends-logo.png" class="logo"> -->
39 |   <div class="friends">
40 |     F<span class="r">R</span><span class="b">I</span><span class="y">E</span><span class="r">N</span><span class="b">D</span><span class="y">S</span>
41 |   </div>
42 | 
43 | </div>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/Templates/Friends/rachel.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Friends/rachel.jpg


--------------------------------------------------------------------------------
/Templates/Friends/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #9973B2;
 3 |     font-family: 'Vujahday Script', cursive;
 4 |     margin-top:55px;
 5 |   }
 6 |   .wrapper {
 7 |     letter-spacing: 0.075em;
 8 |     text-align: center;
 9 |     font-size: 17px;
10 |   }
11 |   .img-area{
12 |       position: relative;
13 |       width: 160px;
14 |       margin: 0 auto;
15 |   }
16 |   .frame{
17 |       height: 230px;
18 |   }
19 |   .rounded{
20 |     position: absolute;
21 |     left: 44px;
22 |     height: 122px;
23 |     top: 56px;
24 |     width: 91px;
25 |     border-radius: 9px;
26 |   }
27 |   h1,
28 |   h2,
29 |   h2 a {
30 |     color: rgb(20, 20, 20);
31 |     font-size: 2rem;
32 |     font-weight: 200;
33 |     border-color: transparent;
34 |     line-height: 1.25;
35 |     max-width: 100%;
36 |     display: block;
37 |     overflow: hidden;
38 |     text-decoration: none;
39 |     font-weight: bold;
40 |   }
41 |   
42 |   h2 {
43 |     margin-top: 0px;
44 |     margin-bottom: 40px;
45 |   }
46 |   
47 |   .links {
48 |     width: 100%;
49 |     max-width: 414px;
50 |     margin: 0 auto;
51 |     padding: 0 0;
52 |     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
53 |   }
54 |   
55 |   .links .link {
56 |     display: block;
57 |     width: 90%;
58 |     margin: 0 auto 10px;
59 |     color: rgb(253, 253, 253);
60 |     border: 2px solid rgb(53, 52, 52);
61 |     background-color: rgb(53, 52, 52);
62 |     text-align: center;
63 |     text-decoration: none;
64 |     padding: 15px 0;
65 |   }
66 |   
67 |   .links .link:hover {
68 |     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
69 |   
70 |   }
71 |   div span::before {
72 |     content: "\2022";
73 |     font-weight: bold;
74 |     display: inline-block; 
75 |     width: 1em;
76 |   }
77 |   .r::before{
78 |       color:red;
79 |   }
80 |   .b::before{
81 |       color:blue;
82 |   }
83 |   .y::before{
84 |       color:yellow;
85 |   }
86 | .friends{
87 |   font-size: 177%;
88 |   position: absolute;
89 |   bottom:0;
90 |   right: 8px;
91 |   left: 8px;
92 | }


--------------------------------------------------------------------------------
/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/Galaxy/assets/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Galaxy/assets/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/Templates/Galaxy/assets/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Galaxy/assets/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/Templates/Galaxy/assets/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Galaxy/assets/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/Templates/Galaxy/assets/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Galaxy/assets/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/Templates/Galaxy/assets/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Galaxy/assets/fonts/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/Templates/Galaxy/assets/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Galaxy/assets/images/bg.jpg


--------------------------------------------------------------------------------
/Templates/Galaxy/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Galaxy/assets/images/favicon.png


--------------------------------------------------------------------------------
/Templates/Galaxy/assets/images/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Galaxy/assets/images/profile.png


--------------------------------------------------------------------------------
/Templates/Galaxy/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta charset="UTF-8">
 8 |     <title>LinkFree | Luã Braga</title>
 9 |     <link rel="stylesheet" href="assets/css/style.css">
10 |     <link rel="stylesheet" href="assets/css/font-awesome.min.css">
11 |     <link rel="icon" href="assets/imagens/favicon.png" type="image/x-icon" />
12 | </head>
13 | 
14 | <body>
15 |     <div id="profile">
16 |         <img id="userPhoto" src="assets/images/profile.png" alt="Profile picture of Luã Braga">
17 |         <div id="userName">
18 |             <h1>Luã Braga</h1>
19 |             <p>Software Engineer</p>
20 |         </div>
21 |     </div>
22 |     <div id="links">
23 |         <a class="link" href="https://github.com/lmourabraga" target="_blank"><i class="fa fa-github"></i> Github</a>
24 |         <a class="link" href="https://www.linkedin.com/in/lmourabraga/" target="_blank"><i class="fa fa-linkedin"
25 |                 aria-hidden="true"></i> LinkedIn</a>
26 |         <a class="link" href="http://lmourabraga.com" target="_blank"><i class="fa fa-globe" aria-hidden="true"></i>
27 |             Website</a>
28 |         <a class="link" href="mailto:mail@lmourabraga.com" target="_blank"><i class="fa fa-envelope"
29 |                 aria-hidden="true"></i>
30 |             E-mail</a>
31 |         <a class="link" href="https://web.whatsapp.com/send?phone=5591981380045" target="_blank"><i
32 |                 class="fa fa-whatsapp" aria-hidden="true"></i>
33 |             WhatsApp</a>
34 |     </div>
35 | 
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/Templates/GameOn/Readme.md:
--------------------------------------------------------------------------------
1 | ## GameOn Theme
2 | Made by [@thearnabmondal](https://github.com/thearnabmondal)
3 | 
4 | ## Preview
5 | ![GameOn](./preview.jpg)
6 | 


--------------------------------------------------------------------------------
/Templates/GameOn/css/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
 3 | 
 4 | body {
 5 |     background: url('../images/bg.png');
 6 |     font-family: 'Press Start 2P', cursive;
 7 |     font-weight: 600;
 8 | }
 9 | 
10 | #profilepic {
11 |     width: 150px;
12 |     height: 150px;
13 |     display: block;
14 |     margin: 20px 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 | #links {
40 |     max-width: 500px;
41 |     width: auto;
42 |     display: block;
43 |     margin: 20px auto;
44 | }
45 | 
46 | .link {
47 |     display: block;
48 |     background-color: rgb(0 0 54);
49 |     color: #fff;
50 |     text-align: center;
51 |     margin-bottom: 20px;
52 |     padding: 17px;
53 |     text-decoration: none;
54 |     font-size: 1.2rem;
55 |     font-weight: 300;
56 |     transition: all .25s cubic-bezier(.08, .59, .29, .99);
57 |     border: 3px solid white;
58 |     border-radius: 5% 5% 37% 49% / 43% 52% 31% 48%;
59 | 
60 | }
61 | 
62 | .link:hover {
63 |     background-color: rgb(221 48 119);
64 |     color: #000000;
65 | }
66 | 


--------------------------------------------------------------------------------
/Templates/GameOn/images/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/GameOn/images/bg.png


--------------------------------------------------------------------------------
/Templates/GameOn/images/profilepic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/GameOn/images/profilepic.png


--------------------------------------------------------------------------------
/Templates/GameOn/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="./css/style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon" />
10 |     <title>GameOn</title>
11 | </head>
12 | 
13 | <body>
14 |     <div id="profile">
15 |         <img id="profilepic" src="./images/profilepic.png" alt="Profile Picture Of Arnab Mondal">
16 |         <div id="userName">
17 |             <h1>Arnab Mondal</h1>
18 |             <p>Professional Gamer</p>
19 |         </div>
20 |     </div>
21 |     <div id="links">
22 |         <a class="link" href="https://www.instagram.com/" target="_blank">INSTAGRAM</a>
23 |         <a class="link" href="https://www.twitch.tv/" target="_blank">TWITCH</a>
24 |         <a class="link" href="https://www.youtube.com/" target="_blank">YOUTUBE</a>
25 |     </div>
26 | </body>
27 | 
28 | </html>
29 | 


--------------------------------------------------------------------------------
/Templates/GameOn/preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/GameOn/preview.jpg


--------------------------------------------------------------------------------
/Templates/GoGreen/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
13 |     
14 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
15 |     <div id="links">
16 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
17 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
18 |     </div>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/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/Gridthetic/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html> 
 4 |   <head>
 5 |     <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
 6 |     <link rel="stylesheet" href="style.css">
 7 |     <title>Gridthetic LinkFree Template</title>
 8 |   </head>
 9 |   <body>
10 |     <img alt='User Photo' id='userPhoto' class="circle" src='https://i.imgur.com/t8ZX9um.jpg'/>
11 |     <a href='#' id='userName'>Gridthetic by Farell Faiz</a>
12 |     <div id='links'>
13 |         <a class='link' href='#yourLink' target='_blank'>Wikipedia</a>
14 |         <a class='link' href='#yourLink' target='_blank'>IMDB</a>
15 |     </div>
16 |     <!-- Javascript -->
17 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'/>
18 |   </body> 
19 | </html>


--------------------------------------------------------------------------------
/Templates/Gridthetic/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Gridthetic/preview.png


--------------------------------------------------------------------------------
/Templates/Gridthetic/readme.md:
--------------------------------------------------------------------------------
1 | # Gridthetic
2 | This template was created by [Farell Faiz](http://github.com/farellfaiz/ "Farell Faiz").
3 | 
4 | ![Gridthetic preview](https://raw.githubusercontent.com/farellfaiz/LinkFree/master/Templates/Gridthetic/preview.png)
5 | 
6 | [Demo](https://michaelbarney.github.io/LinkFree/Templates/Gridthetic/)
7 | 


--------------------------------------------------------------------------------
/Templates/Gridthetic/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css?family=Modak&display=swap');
 3 | :root {
 4 |     --bgColor: white;
 5 |     --accentColor: #363534;
 6 |     --font: 'Modak', cursive;
 7 | }
 8 | 
 9 | body {
10 |   background-image: url('https://mk-website-media.s3.amazonaws.com/wp-content/uploads/2018/10/19001752/Wallpaper-IngridMika-ContactGrid55-1-1100x1318.jpg');
11 |   background-size: 20%;
12 | }
13 | 
14 | @media only screen and (max-width: 600px) {
15 |     body {
16 |         background-size: 70%;
17 |     }
18 | }
19 | 
20 | #userPhoto {
21 |     width: 96px;
22 |     height: 96px;
23 |     display: block;
24 |     margin: 35px auto 20px;
25 |     border: 5px solid black;
26 | }
27 | 
28 | .circle {
29 |     border-radius: 100px;
30 | }
31 | 
32 | .roundsquare {
33 |     border-radius: 15px;
34 | }
35 | 
36 | #userName {
37 |     color: #2577C1;
38 |     font-size: 2rem;
39 |     font-weight: 400;
40 |     line-height: 1.25;
41 |     display: block;
42 |     font-family: var(--font);
43 |     width: 100%;
44 |     text-align: center;
45 |     text-decoration: none;
46 |     text-shadow: 3px 3px 0 var(--accentColor), 1px 1px 0 var(--accentColor), 2px 2px 0 var(--accentColor);
47 | }
48 | 
49 | #links {
50 |     max-width: 675px;
51 |     width: auto;
52 |     display: block;
53 |     margin: 27px auto;
54 | }
55 | .link {
56 |     display: block;
57 |     background-color: var(--accentColor);
58 |     color: var(--bgColor);
59 |     font-family: var(--font);
60 |     text-align: center;
61 |     margin-bottom: 20px;
62 | 	margin-left:3%;
63 | 	margin-right:3%;
64 |     padding: 17px;
65 |     text-decoration: none;
66 |     font-size: 1.5rem;
67 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
68 |     border: solid var(--accentColor) 2px;
69 |     border-radius: 15px;
70 | }
71 | 
72 | .link:hover {
73 |     background-color: var(--bgColor);
74 |     color: var(--accentColor);
75 | }


--------------------------------------------------------------------------------
/Templates/Halloween/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Halloween/.DS_Store


--------------------------------------------------------------------------------
/Templates/Halloween/assets/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Halloween/assets/images/bg.jpg


--------------------------------------------------------------------------------
/Templates/Halloween/assets/images/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Halloween/assets/images/profile.jpg


--------------------------------------------------------------------------------
/Templates/Halloween/assets/images/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Halloween/assets/images/title.png


--------------------------------------------------------------------------------
/Templates/Halloween/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/Halloween/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta name="keywords" content="halloween linkfree linktree template spooky minimalist">
 8 |     <meta name="author" content="Darshan K S">
 9 |     <title>LinkFree | Minimilist Halloween</title>
10 |     <link rel="icon" href="./assets/images/title.png" type="image/x-icon" />
11 |     <link rel="stylesheet" href="assets/css/style.css">
12 |     <script src="https://kit.fontawesome.com/1c591452af.js" crossorigin="anonymous"></script>
13 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
14 | </head>
15 | <body>
16 |     <img id="userPhoto" src="./assets/images/profile.jpg" alt="User Photo">
17 |     <h1 id="userName"><span style="font-family: Arial;">@</span>DarshanKS</h1>
18 | 
19 |     <div id="links">
20 |         <a class="link" href="https://darshan-k-s.github.io/" target="_blank">My portfolio</a>
21 |         <a class="link" href="https://github.com/darshan-k-s" target="_blank">Github</a>
22 |         <a class="link" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">YouTube channel</a>
23 |         <a class="link" href="https://www.imdb.com/title/tt1442437/" target="_blank">Favourite show</a>
24 |     </div>
25 | 
26 |     <div class="footer">
27 |         <a href="https://www.instagram.com/darshan_k_5/" target="_blank">
28 |             <i style="line-height: 38px;" class="fa fa-instagram circulo" aria-hidden="true"></i>
29 |         </a>
30 |         <a href="https://www.facebook.com/" target="_blank">
31 |             <i style="line-height: 38px;" class="fa fa-facebook-f circulo" aria-hidden="true"></i>
32 |         </a>
33 |         <a href="https://www.linkedin.com/in/darshan-k-s/" target="_blank">
34 |             <i style="line-height: 38px;" class="fa fa-linkedin circulo" aria-hidden="true"></i>
35 |         </a>
36 |         <a href="https://whatsapp.com/" target="_blank">
37 |             <i style="line-height: 38px;" class="fa fa-whatsapp circulo" aria-hidden="true"></i>
38 |         </a>
39 |     </div>
40 | 
41 |     <script src="./assets/js/script.js"></script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/Templates/Happy/Jordan-Avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Happy/Jordan-Avatar.png


--------------------------------------------------------------------------------
/Templates/Happy/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Happy/screenshot.png


--------------------------------------------------------------------------------
/Templates/Journal/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Journal/favicon.ico


--------------------------------------------------------------------------------
/Templates/Journal/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
14 |     
15 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
16 |     <div id="links">
17 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
18 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
19 |     </div>
20 | 
21 |     <div class="footer">
22 |         ❤
23 |     </div>
24 | 
25 |     <!-- Javascript -->
26 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
27 |     <script  src="index.js"></script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/Templates/Journal/index.js:
--------------------------------------------------------------------------------
1 | $( document ).ready(function() {
2 |      // Add here commands to run on page loaded
3 | });
4 | 
5 | $( ".link" ).click(function() {
6 |     // Add here commands to run on link click
7 | });


--------------------------------------------------------------------------------
/Templates/Journal/readme.md:
--------------------------------------------------------------------------------
 1 | # Standard Template
 2 | 
 3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
 4 | 
 5 | <img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
20 | 	```
21 |  4. **Username**
22 | 	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | 	```
24 | 	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
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 | 	<div  id="links">
30 | 
31 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
32 | 
33 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
34 | 
35 | 	</div>
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/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/MagicalMysteryTheme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Magical Mystery Theme LinkFree</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="img/beatles-bus.svg" alt="User Photo">
14 |     
15 |     <a href="" id="userName">@Beatles</a>
16 |     <div id="links">
17 |         <a class="link" href="https://en.wikipedia.org/wiki/Magical_Mystery_Tour" target="_blank">WIKIPEDIA</a>
18 |         <a class="link" href="https://www.youtube.com/watch?v=l8WMGBuNaus&ab_channel=TheBeatles-Topic" target="_blank">YOUTUBE</a>
19 |     </div>
20 | 
21 |     <footer>
22 |         🌟 Roll up to the Mystery Tour!
23 |     </footer>
24 | 
25 |     <!-- Javascript -->
26 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
27 |     <script  src="index.js"></script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/Templates/MagicalMysteryTheme/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap" rel="stylesheet');
 2 | 
 3 | :root {
 4 |     --font: 'Fira Sans', sans-serif;
 5 |     
 6 |     --background: #2b2b45;
 7 |     --selection: #ffc24b;
 8 |     --comment: #4d809b;
 9 |     --purple: #4d809b;
10 |     --white: #f8ddc6;
11 |     --pink: #f9468b;
12 | }
13 | 
14 | body{
15 |     background: var(--background) url(img/beatles-mmt.svg) no-repeat center bottom;
16 |     background-size: 80%;
17 |     color: var(--white);
18 |     height: 100vh;
19 | }
20 | 
21 | footer{
22 |     text-align: center;
23 | 
24 |     color:var(--selection);
25 | 
26 |     font-family: var(--font);
27 |     font-size: 0.75rem;
28 |     font-weight: 400;
29 | }
30 | 
31 | #userPhoto{
32 |     width: 96px;
33 |     height: 96px;
34 | 
35 |     display: block;
36 | 
37 |     margin: 35px auto 20px;
38 | 
39 |     border-radius: 50%;
40 |     border: solid var(--purple) 2px;
41 | }
42 | 
43 | #userName{
44 |     width: 100%;
45 | 
46 |     color: var(--pink);
47 | 
48 |     font-family: var(--font);
49 |     font-size: 1rem;
50 |     font-weight: 400;
51 | 
52 |     text-align: center;
53 |     text-decoration: none;
54 | 
55 |     line-height: 1.25;
56 |     display: block;
57 | }
58 | 
59 | #links{
60 |     max-width: 675px;
61 |     width: auto;
62 | 
63 |     display: block;
64 | 
65 |     margin: 27px auto;
66 | }
67 | .link{
68 |     display: block;
69 |     margin-bottom: 20px;
70 |     padding: 17px;
71 | 
72 |     background-color: var(--background);
73 |     color:var(--comment);
74 | 
75 |     font-family: var(--font);
76 |     font-size: 1rem;
77 |     font-weight: 500;
78 | 
79 |     border-radius: 5px;
80 |     border: solid var(--purple) 1px;
81 | 
82 |     text-align: center;
83 |     text-decoration: none;
84 |     
85 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
86 |     
87 | }
88 | 
89 | .link:hover{
90 |     border-color: var(--selection);
91 |     color: var(--selection);
92 | }


--------------------------------------------------------------------------------
/Templates/Minimal Pastel/Minimal Pastel Preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Minimal Pastel/Minimal Pastel Preview.gif


--------------------------------------------------------------------------------
/Templates/Minimal Pastel/README.md:
--------------------------------------------------------------------------------
1 | # Minimal Pastel
2 | 
3 | This template was created by [Oscar Martínez Valero (Valerock)](https://linktr.ee/oscarvalerock "Oscar Martínez Valero (Valerock)").
4 | 


--------------------------------------------------------------------------------
/Templates/Minimalist Black/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Minimalist Black/favicon.ico


--------------------------------------------------------------------------------
/Templates/Minimalist Black/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Minimalist Black</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
14 |     
15 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
16 |     <div id="links">
17 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
18 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
19 |     </div>
20 | 
21 |     <div class="footer">
22 |         Theme made with ❤ by <a href="https://github.com/half-real-SCRACX/" style="text-decoration: underline;">Robert Lupas</a>
23 |     </div>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Templates/Minimalist Black/readme.md:
--------------------------------------------------------------------------------
 1 | # Minimalist Black Template
 2 | 
 3 | Made by [Robert](https://github.com/half-real-SCRACX/)
 4 | 
 5 | <img src="screenshot.png" alt="alt text" width="auto">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
20 | 	```
21 |  4. **Username**
22 | 	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | 	```
24 | 	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
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 | 	<div  id="links">
30 | 
31 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
32 | 
33 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
34 | 
35 | 	</div>
36 | 	```


--------------------------------------------------------------------------------
/Templates/Minimalist Black/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Minimalist Black/screenshot.png


--------------------------------------------------------------------------------
/Templates/Minimalist Black/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap');
 2 | :root {
 3 |     --bgColor: #e4e4e4;
 4 |     --accentColor: #000000;
 5 |     --font: 'Roboto Slab', serif;
 6 | }
 7 | 
 8 | body{
 9 |     display: flex;
10 |     align-items: center;
11 |     flex-direction: column;
12 |     justify-content: center;
13 |     background-color: var(--bgColor);
14 |     color: var(--accentColor);
15 |     height: 80vh;
16 | }
17 | 
18 | a{
19 |     color: var(--accentColor);
20 |     text-decoration: none;
21 | }
22 | 
23 | #userPhoto{
24 |     width: 100px;
25 |     height: 100px;
26 |     border-radius: 50%;
27 |     border: 3px solid var(--accentColor);
28 | }
29 | 
30 | #userName{
31 |     font-size: 1.5rem;
32 |     line-height: 1.25;
33 |     font-family: var(--font);
34 |     width: 100%;
35 |     margin: 15px;
36 |     text-align: center;
37 |     font-style: italic;
38 | }
39 | 
40 | #links{
41 |     max-width: 675px;
42 |     width: 100%;
43 | }
44 | .link{
45 |     display: block;
46 |     background-color: var(--bgColor);
47 |     font-family: var(--font);
48 |     text-align: center;
49 |     margin-bottom: 30px;
50 |     padding: 13px;
51 |     text-transform: lowercase;
52 |     font-size: 1rem;
53 |     border: solid var(--accentColor) 2px;
54 |     border-radius: 5px;
55 |     transition: 0.3s;
56 | }
57 | 
58 | .link:hover{
59 |     color: var(--bgColor);
60 |     background-color: var(--accentColor);
61 |     font-style: italic;
62 | }
63 | 
64 | .footer{
65 |     position: fixed;
66 |     bottom: 10px;
67 |     font-size: 17px;
68 | }


--------------------------------------------------------------------------------
/Templates/Music/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>612bc</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="title-01.png" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img href="https://www.instagram.com/612bc" target="_blank"  id="userPhoto" src="square-01.png" alt="User Photo">
14 |     
15 |     <a href="https://www.instagram.com/612bc" target="_blank" id="userName">@612bc</a>
16 |     <div id="links">
17 |         <a class="link" href="https://www.youtube.com/channel/UCC51xiLG-qT8UFG9zi5nmKQ" target="_blank">YouTube</a>
18 |         <a class="link" href="https://www.youtube.com/channel/UCC51xiLG-qT8UFG9zi5nmKQ" target="_blank">SoundCloud</a>
19 |         <a class="link" href="https://www.youtube.com/channel/UCC51xiLG-qT8UFG9zi5nmKQ" target="_blank">Spotify</a>
20 |         <a class="link" href="https://www.youtube.com/channel/UCC51xiLG-qT8UFG9zi5nmKQ" target="_blank">Apple Music</a>
21 |         <a class="link" href="https://instagram.com/612bc/" target="_blank">Instagram</a>
22 |     </div>
23 | 
24 |     <!-- Javascript -->
25 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
26 |     <script  src="index.js"></script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/Templates/Music/square-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Music/square-01.png


--------------------------------------------------------------------------------
/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/Music/title-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Music/title-01.png


--------------------------------------------------------------------------------
/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 |     <title>Neon Theme | vi_c0de</title>
15 |     <!-- Change the title to your name -->
16 |   ```
17 |   - Change h1 to your name
18 |   ```
19 |     <h1>@vi_c0de</h1>
20 |     <!-- Change the text to your name -->
21 |   ```
22 | - Add/Replace your links by editing or adding
23 | 
24 | ```
25 | <!-- link starts here -->
26 | <div class="link">
27 |     <a href="https://www.instagram.com/vi_c0de/" target="_blank">Instagram</a>
28 | </div>
29 | <!-- link ends here -->
30 | ```
31 | 
32 | > Done, Now your Neon Themed Linktree clone is ready.
33 | > You can host the project to Github pages, Netlify or your provider of choice.
34 | 
35 | > Checkout Project on CodePen: https://codepen.io/vishnu_dileesh/pen/zYrEgXz
36 | 
37 | ![Neon UI Demo](screenshot.png)
38 | 


--------------------------------------------------------------------------------
/Templates/Neon/images/background-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Neon/images/background-image.jpg


--------------------------------------------------------------------------------
/Templates/Neon/images/profile-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Neon/images/profile-image.jpg


--------------------------------------------------------------------------------
/Templates/Neon/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Neon Theme | vi_c0de</title>
 7 |     <!-- Change the title to your name -->
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <main>
12 |       <!-- To change profile image -->
13 |       <!-- Go to images folder and replace your image with the file name "profile-image.jpg" -->
14 |       <img class="user-img" src="images/profile-image.jpg" alt="User Photo" />
15 |       <h1>@vi_c0de</h1>
16 |       <!-- Change the text to your name -->
17 | 
18 |       <!-- To change background image -->
19 |       <!-- Go to images folder and replace your background image
20 |          with the file name "background-image.jp"-->
21 | 
22 |       <!-- Links section begins here -->
23 |       <div class="links-sec">
24 |         <!-- link starts here -->
25 |         <a href="https://github.com/VishnuDileesh" target="_blank">
26 |           <div class="link">
27 |             <span>Github</span>
28 |           </div>
29 |         </a>
30 |         <!-- link ends here -->
31 | 
32 |         <!-- link starts here -->
33 |         <a href="https://codepen.io/vishnu_dileesh/" target="_blank">
34 |           <div class="link">
35 |             <span>CodePen</span>
36 |           </div>
37 |         </a>
38 |         <!-- link ends here -->
39 | 
40 |         <!-- link starts here -->
41 |         <a href="https://www.instagram.com/vi_c0de/" target="_blank">
42 |           <div class="link">
43 |             <span>Instagram</span>
44 |           </div>
45 |         </a>
46 |         <!-- link ends here -->
47 |       </div>
48 |       <!-- Links section ends here -->
49 |     </main>
50 |   </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/Templates/Neon/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Neon/screenshot.png


--------------------------------------------------------------------------------
/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/Neumorphism/homer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Neumorphism/homer.jpg


--------------------------------------------------------------------------------
/Templates/Neumorphism/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Neumorphism</title>
 8 |   <link rel="stylesheet" href="style.css">
 9 |   <!-- Open source icons from https://remixicon.com/ -->
10 |   <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
11 | </head>
12 | <body>
13 |   <div class="container">
14 |     <header>
15 |       <div class="picture"></div>
16 |       <h1>Homer Simpson</h1>
17 |     </header>
18 |     <main>
19 |       <a class="link" href="https://en.wikipedia.org/wiki/Homer_Simpson" target="_blank"><i class="ri-book-3-line"></i> Wikipedia</a>
20 |       <a class="link" href="https://www.imdb.com/title/tt0096697/" target="_blank"><i class="ri-movie-2-line"></i> IMDB</a>
21 |       <a class="link" href="https://www.instagram.com/thesimpsons/" target="_blank"><i class="ri-instagram-line"></i> Instagram</a>
22 |       <a class="link" href="https://www.facebook.com/TheSimpsons/" target="_blank"><i class="ri-facebook-line"></i> Facebook</a>
23 |     </main>
24 |   </div>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Templates/Neumorphism/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap");
  2 | 
  3 | :root {
  4 |   --shadow: 2px 2px 10px #999999, -2px -2px 10px #ffffff;
  5 |   --inner-shadow: inset 2px 2px 10px #999999, inset -2px -2px 10px #ffffff;
  6 | }
  7 | 
  8 | * {
  9 |   box-sizing: border-box;
 10 | }
 11 | 
 12 | body {
 13 |   align-items: center;
 14 |   background-color: #ffffff;
 15 |   display: flex;
 16 |   flex-direction: column;
 17 |   font-family: "Mulish", sans-serif;
 18 |   font-size: 112.5%;
 19 |   font-weight: 400;
 20 |   margin: 0;
 21 |   min-height: 100vh;
 22 |   padding-block: clamp(2rem, 10vw, 4rem);
 23 | }
 24 | 
 25 | .container {
 26 |   align-items: center;
 27 |   border-radius: 10px;
 28 |   box-shadow: var(--shadow);
 29 |   display: flex;
 30 |   flex-direction: column;
 31 |   gap: 2em;
 32 |   max-width: 672px;
 33 |   padding: clamp(1em, 5vw, 2em);
 34 |   width: 90%;
 35 | }
 36 | 
 37 | header {
 38 |   align-items: center;
 39 |   display: flex;
 40 |   flex-direction: column;
 41 |   gap: 1em;
 42 | }
 43 | 
 44 | h1 {
 45 |   font-size: clamp(1.9em, 7vw, 4em);
 46 |   font-weight: 700;
 47 |   margin: 0;
 48 |   text-align: center;
 49 | }
 50 | 
 51 | a {
 52 |   color: inherit;
 53 |   text-decoration: none;
 54 | }
 55 | 
 56 | .picture {
 57 |   border-radius: 50%;
 58 |   box-shadow: var(--inner-shadow);
 59 |   height: 8em;
 60 |   position: relative;
 61 |   width: 8em;
 62 | }
 63 | 
 64 | .picture:hover, .picture:focus {
 65 |   box-shadow: var(--shadow);
 66 |   outline: none;
 67 | }
 68 | 
 69 | .picture::before {
 70 |   content: "";
 71 |   background: url("homer.jpg");
 72 |   background-size: contain;
 73 |   border-radius: 50%;
 74 |   inset: 0;
 75 |   position: absolute;
 76 |   z-index: -1;
 77 | }
 78 | 
 79 | main {
 80 |   align-items: center;
 81 |   display: flex;
 82 |   flex-direction: column;
 83 |   gap: 1em;
 84 |   vertical-align: middle;
 85 | }
 86 | 
 87 | .link {
 88 |   border-radius: 5px;
 89 |   box-shadow: var(--shadow);
 90 |   min-width: 20ch;
 91 |   padding: 0.5em 1em;
 92 |   text-align: center;
 93 | }
 94 | 
 95 | .link:hover, .link:focus {
 96 |   box-shadow: var(--inner-shadow);
 97 |   outline: none;
 98 | }
 99 | 
100 | .link i {
101 |   vertical-align: -13%;
102 | }
103 | 


--------------------------------------------------------------------------------
/Templates/Nightmare/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |   <meta charset="UTF-8">
 8 |   <title>Homer Simpson</title>
 9 |   <link rel="icon" href="pumpkin.png" sizes="32x32">
10 |   <link rel="stylesheet" href="style.css">
11 | </head>
12 | 
13 | <body>
14 |   <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
15 | 
16 |   <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
17 |   <div id="links">
18 |     <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
19 |     <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
20 |   </div>
21 | </body>
22 | 
23 | </html>


--------------------------------------------------------------------------------
/Templates/Nightmare/nmbc.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Nightmare/nmbc.jpg


--------------------------------------------------------------------------------
/Templates/Nightmare/pumpkin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Nightmare/pumpkin.png


--------------------------------------------------------------------------------
/Templates/Nightmare/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css?family=Alice&display=swap');
 3 | :root {
 4 |     --bgColor:#130912;
 5 |     --accentColor: #3d1c33;
 6 |     --detailColor: #DEB314;
 7 |     --fontColor: #bbb;
 8 |     --font:   'Alice', serif;
 9 | }
10 | 
11 | body{
12 |     background-color: #2401206e;
13 |     background-image: url("nmbc.jpg");
14 |     background-position: center center;
15 |     background-size: cover;
16 |     background-attachment: fixed;
17 |     background-repeat: no-repeat;
18 | }
19 | 
20 | #userPhoto{
21 |     width: 110px;
22 |     height: 110px;
23 |     display: block;
24 |     margin: 35px auto 20px;
25 |     border-radius: 50%;
26 |     border: solid var(--fontColor) 4px;
27 |     box-shadow: 0 0 3px var(--accentColor), 2px 2px 5px var(--bgColor);
28 | }
29 | 
30 | #userName{
31 |     color: var(--accentColor);
32 |     font-size: 1rem;
33 |     font-weight: 600;
34 |     line-height: 1.25;
35 |     display: block;
36 |     font-family: var(--font);
37 |     width: 100%;
38 |     text-align: center;
39 |     text-decoration: none;
40 |     text-shadow: -2px -2px 7px var(--bgColor);
41 | }
42 | 
43 | #links{
44 |     max-width: 675px;
45 |     width: auto;
46 |     display: block;
47 |     margin: 27px auto;
48 | }
49 | .link{
50 |     display: block;
51 |     background-color: var(--accentColor);
52 |     color: var(--fontColor);
53 |     font-family: var(--font);
54 |     text-align: center;
55 |     margin-bottom: 20px;
56 |     padding: 17px;
57 |     text-decoration: none;
58 |     text-shadow:var(--detailColor) 2px 2px 8px;
59 |     font-size: 1rem;
60 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
61 |     border: solid var(--fontColor) 2px;
62 | }
63 | 
64 | .link:hover{
65 |     background-color: var(--bgColor);
66 |     color: var(--fontColor);
67 |     text-shadow:var(--fontColor) 2px 2px 8px;
68 | }


--------------------------------------------------------------------------------
/Templates/NyanCat/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/NyanCat/.DS_Store


--------------------------------------------------------------------------------
/Templates/NyanCat/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/NyanCat/cat.png


--------------------------------------------------------------------------------
/Templates/NyanCat/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/NyanCat/favicon.ico


--------------------------------------------------------------------------------
/Templates/NyanCat/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <div class="rainbowcat-left roll-in-left"></div>
14 |     <div class="rainbowcat-right roll-in-right"></div>
15 |     <div class="rainbowcat-top roll-in-top"></div>
16 |     <div class="rainbowcat-bottom roll-in-bottom"></div>
17 |     <div class="rainbowcat-right-bottom roll-in-right"></div>
18 |     <div class="rainbowcat-left-bottom roll-in-left"></div>
19 | 
20 | 
21 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
22 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
23 |     <div id="links">
24 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">😻 Wikipedia 😻</a>
25 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">😻 IMDB 😻</a>
26 |     </div>
27 | 
28 |     <!-- Javascript -->
29 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
30 |     <script  src="index.js"></script>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Templates/NyanCat/index.js:
--------------------------------------------------------------------------------
1 | $( document ).ready(function() {
2 |      // Add here commands to run on page loaded
3 | });
4 | 
5 | $( ".link" ).click(function() {
6 |     // Add here commands to run on link click
7 | });


--------------------------------------------------------------------------------
/Templates/NyanCat/nyanCatBackground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/NyanCat/nyanCatBackground.png


--------------------------------------------------------------------------------
/Templates/NyanCat/rainbowcat.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/NyanCat/rainbowcat.gif


--------------------------------------------------------------------------------
/Templates/NyanCat/readme.md:
--------------------------------------------------------------------------------
 1 | # Standard Template
 2 | 
 3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
 4 | 
 5 | <img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
20 | 	```
21 |  4. **Username**
22 | 	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | 	```
24 | 	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
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 | 	<div  id="links">
30 | 
31 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
32 | 
33 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
34 | 
35 | 	</div>
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/Outrun/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
13 |     
14 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
15 |     <div id="links">
16 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
17 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
18 |     </div>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Templates/Outrun/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css?family=Teko&display=swap');
 3 | :root {
 4 |     --bgColor: rgb(38, 35, 53);
 5 |     --accentColor: rgb(249, 42, 173);
 6 |     --font: 'Teko', sans-serif;
 7 |     --shaddow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;
 8 | }
 9 | 
10 | body{
11 |     background-color: var(--bgColor);
12 | }
13 | 
14 | #userPhoto{
15 |     width: 96px;
16 |     height: 96px;
17 |     display: block;
18 |     margin: 35px auto 20px;
19 |     border-radius: 50%;
20 |     border: 2px solid var(--accentColor);
21 | }
22 | 
23 | #userName{
24 |     font-size: 1.5rem;
25 |     font-weight: 600;
26 |     line-height: 1.25;
27 |     display: block;
28 |     font-family: var(--font);
29 |     width: 100%;
30 |     text-align: center;
31 |     text-decoration: none;
32 |     color: #fff5f6;
33 |     text-shadow: 0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;
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: linear-gradient(to bottom, #fff951 25%, #fc28a8);
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: 2px solid var(--accentColor);
54 |     border-radius: 50px;
55 | }
56 | 
57 | .link:hover{
58 |     background: var(--bgColor);
59 |     color: var(--accentColor);
60 | }
61 | 


--------------------------------------------------------------------------------
/Templates/Pastel Dreams/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Vienna Elric</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
14 | 
15 |     <a href="https://www.instagram.com/thestateofvie" id="userName">@thestateofvie</a>
16 |     <div id="links">
17 |         <a class="link" href="https://twitter.com/viennaelric" target="_blank">Twitter</a>
18 |         <a class="link" href="https://www.behance.net/viennaelriaa0b" target="_blank">Behance</a>
19 |     </div>
20 | 
21 |     <!-- Javascript -->
22 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
23 |     <script  src="index.js"></script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Templates/Pastel Dreams/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('http://fonts.googleapis.com/css?family=Roboto');
 3 | :root {
 4 |     --bgColor:#92a6f4;
 5 |     --accentColor: #f9e4ed;
 6 |     --complementColor: #FFFFFF;
 7 |     --font: 'Lucida Handwriting', monospace;
 8 |     --hoverColor: #92a6f4;
 9 | }
10 | 
11 | body{
12 |     background-color: var(--bgColor)
13 | }
14 | 
15 | #userPhoto{
16 |     width: 110px;
17 |     height: 110px;
18 |     display: block;
19 |     margin: 35px auto 20px;
20 |     border: 5px;
21 |     border-radius: 50%;
22 |     border-style: dotted;
23 |     border-color: var(--accentColor)
24 | }
25 | 
26 | #userName{
27 |     color: var(--accentColor);
28 |     font-size: 1rem;
29 |     font-weight: 600;
30 |     line-height: 1.25;
31 |     display: block;
32 |     font-family: var(--font);
33 |     width: 100%;
34 |     text-align: center;
35 |     text-transform: uppercase;;
36 | }
37 | 
38 | #links{
39 |     max-width: 500px;
40 |     width: auto;
41 |     display: block;
42 |     margin: 27px auto;
43 | }
44 | .link{
45 |     display: block;
46 |     background-color: var(--accentColor);
47 |     color: var(--bgColor);
48 |     font-family: var(--font);
49 |     text-align: center;
50 |     margin-bottom: 20px;
51 |     padding: 17px;
52 |     text-decoration: none;
53 |     font-size: 1rem;
54 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
55 |     border-color: var(--complementColor);
56 |     border: 5px;
57 |     border-style: dotted;
58 |     border-radius: 30px;
59 | }
60 | 
61 | .link:hover{
62 |     background-color: var(--bgColor);
63 |     color: var(--accentColor);
64 | }
65 | 


--------------------------------------------------------------------------------
/Templates/Pastel/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Pastel/background.jpg


--------------------------------------------------------------------------------
/Templates/Pastel/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>linkfree template</title>
 8 |     <link rel="stylesheet" href="linkfree.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10 | 
11 | </head>
12 | <body>
13 |     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
14 | 
15 | <div class="wrapper">
16 |   
17 |   <div class="image-cropper">
18 |     <img src="profile.jpg" class="rounded" />
19 |   </div>
20 |   
21 |   <h3>Hello<span class="wave">👋</span></h3>  
22 |   <h2 class="user-name">
23 |     <a href="https://github.com/anshika361"><i class="fa fa-github" style="font-size:36px"></i></a>
24 |   </h2>  
25 |   <div class="links">
26 |     <a href="https://en.wikipedia.org/wiki/Mental_health" class="link">wikipedia</a>
27 |     <a href="https://mental-health-affect.blogspot.com/2021/09/social-stigma-descrimination-and-mentalheath.html" class="link">Blogger</a>
28 |     <a href="https://www.imdb.com/title/tt0119217/" class="link">IMDB</a>
29 |     <a href="https://www.who.int/health-topics/mental-health" class="link">WHO</a>
30 |     
31 |   </div>
32 |   
33 |   
34 | </div>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/Templates/Pastel/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Pastel/profile.jpg


--------------------------------------------------------------------------------
/Templates/Pastel_purple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>My LinkFree</title>
 7 |     <style>
 8 |         body {
 9 |             background-color: #f0d8ff; /* Pastel background color */
10 |             font-family: Arial, sans-serif;
11 |             text-align: center;
12 |             margin: 0;
13 |             padding: 0;
14 |         }
15 | 
16 |         .container {
17 |             display: flex;
18 |             flex-direction: column;
19 |             align-items: center;
20 |             justify-content: center;
21 |             height: 100vh;
22 |         }
23 | 
24 |         .button {
25 |             display: inline-block;
26 |             padding: 10px 20px;
27 |             margin: 10px;
28 |             background-color: #FFB6C1; /* Pastel button color */
29 |             color: #fff;
30 |             font-size: 18px;
31 |             text-decoration: none;
32 |             border: none;
33 |             border-radius: 5px;
34 |             cursor: pointer;
35 |             transition: background-color 0.3s ease;
36 |         }
37 | 
38 |         .button:hover {
39 |             background-color: #FF69B4; /* Hover color */
40 |         }
41 |     </style>
42 | </head>
43 | <body>
44 |     <div class="container">
45 |         <h1>Welcome to My Linktree</h1>
46 |         <a href="https://github.com/pal404error/" class="button">Github</a>
47 |         <a href="https://pal404blog.github.io/" class="button">Blog</a>
48 |     </div>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/Templates/PauloFilhoTheme/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background:#fff;
 3 | }
 4 | .container{
 5 |     width: 400px;
 6 |     margin: 200px auto 0;
 7 | }
 8 | .container h2{
 9 |     color: #5d37f8;
10 |     text-align: center;
11 |     margin-top: 40px;
12 |     font-family: Poppins,sans-serif;
13 |     text-transform: uppercase;
14 | }
15 | .container h2 a{
16 |     text-decoration: none;
17 |     color: #5d37f8;
18 |     transition: all .6s ease-in-out;
19 | }
20 | .container h2 a:hover{
21 |     text-decoration: underline;
22 | }
23 | svg{
24 |     width: 320px;
25 | }


--------------------------------------------------------------------------------
/Templates/Pink/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
14 |     
15 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
16 |     <div id="links">
17 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
18 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
19 |     </div>
20 | 
21 |     <!-- Javascript -->
22 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
23 |     <script  src="index.js"></script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/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/Pride/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Pride/favicon.ico


--------------------------------------------------------------------------------
/Templates/Pride/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <div id="rainbow"></div>
14 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
15 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
16 |     <div id="links">
17 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
18 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
19 |     </div>
20 | 
21 |     <!-- Javascript -->
22 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
23 |     <script  src="index.js"></script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Templates/Pride/index.js:
--------------------------------------------------------------------------------
1 | $( document ).ready(function() {
2 |      // Add here commands to run on page loaded
3 | });
4 | 
5 | $( ".link" ).click(function() {
6 |     // Add here commands to run on link click
7 | });


--------------------------------------------------------------------------------
/Templates/Pride/readme.md:
--------------------------------------------------------------------------------
 1 | # Standard Template
 2 | 
 3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
 4 | 
 5 | <img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
20 | 	```
21 |  4. **Username**
22 | 	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | 	```
24 | 	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
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 | 	<div  id="links">
30 | 
31 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
32 | 
33 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
34 | 
35 | 	</div>
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/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
 3 | :root {
 4 |     --bgColor: #F4EED4;
 5 |     --accentColor: #E03A3E;
 6 |     --hoverColor: #963D96;
 7 |     --font: 'Karla', sans-serif;
 8 | }
 9 | 
10 | body{
11 |     background-color: var(--bgColor);
12 | }
13 | 
14 | #userPhoto{
15 |     width: 96px;
16 |     height: 96px;
17 |     display: block;
18 |     margin: 35px auto 20px;
19 |     border-radius: 50%;
20 |     border: solid var(--bgColor) 2px;
21 | }
22 | #rainbow {
23 |     transform: skewY(-15deg);
24 |     position: absolute;
25 |     width: 120%;
26 |     top: 25%;
27 |     z-index: -1;
28 |     box-shadow:
29 |     0 0 0 35px #E03A3E,
30 |     0 0 0 65px #FCB827,
31 |     0 0 0 95px #62BB47,
32 |     0 0 0 125px #F5831D,
33 |     0 0 0 155px #009DDC,
34 |     0 0 0 185px #963D96
35 | }
36 | 
37 | #userName{
38 |     color: var(--bgColor);
39 |     font-size: 1.2rem;
40 |     font-weight: 700;
41 |     line-height: 1.25;
42 |     display: block;
43 |     font-family: var(--font);
44 |     width: 100%;
45 |     text-align: center;
46 |     text-decoration: none;
47 |     text-shadow: 0 0 3px #FF0000, 0 0 5px #009DDC;
48 | }
49 | 
50 | #links{
51 |     max-width: 675px;
52 |     width: auto;
53 |     display: block;
54 |     margin: 27px auto;
55 | }
56 | .link{
57 |     display: block;
58 |     background-color: var(--bgColor);
59 |     color: var(--accentColor);
60 |     font-family: var(--font);
61 |     text-align: center;
62 |     margin-bottom: 20px;
63 |     padding: 17px;
64 |     text-decoration: none;
65 |     font-size: 1rem;
66 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
67 |     border: solid var(--hoverColor) 3px;
68 | }
69 | 
70 | .link:hover{
71 |     background-color: var(--hoverColor);
72 |     color: var(--bgColor);
73 | }
74 | 


--------------------------------------------------------------------------------
/Templates/PurpleSideOfTheForce/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/PurpleSideOfTheForce/favicon.ico


--------------------------------------------------------------------------------
/Templates/PurpleSideOfTheForce/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Mace Windu</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="https://i.imgur.com/d1QEScO.jpeg" alt="User Photo">
14 |     
15 |     <a href="https://www.instagram.com/starwars" id="userName">@starwars</a>
16 |     <div id="links">
17 |         <a class="link" href="https://en.wikipedia.org/wiki/Mace_Windu" target="_blank">Wikipedia</a>
18 |         <a class="link" href="https://www.imdb.com/title/tt0121766" target="_blank">IMDB</a>
19 |     </div>
20 | 
21 |     <!-- Javascript -->
22 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
23 |     <script  src="index.js"></script>
24 |     <audio id="lightsaber-ignition-0">
25 |         <source src="lightsaber-ignition-0.mp3">
26 |         </source>
27 |     </audio>
28 |     <audio id="lightsaber-ignition-1">
29 |         <source src="lightsaber-ignition-1.mp3">
30 |         </source>
31 |     </audio>
32 |     <audio id="lightsaber-ignition-2">
33 |         <source src="lightsaber-ignition-2.mp3">
34 |         </source>
35 |     </audio>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/Templates/PurpleSideOfTheForce/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | $(document).ready(function () {
 3 |      // Add here commands to run on page loaded
 4 | });
 5 | 
 6 | $( ".link" ).click(function() {
 7 |     $('#lightsaber-ignition-2')[0].play();
 8 | });
 9 | 
10 | $( ".link" ).mouseenter(function () {
11 |     $( "#lightsaber-ignition-0" )[0].volume = 0.4
12 |     $( "#lightsaber-ignition-0" )[0].play();
13 | });
14 | 
15 | $( ".link" ).mouseleave(function () {
16 |     $( "#lightsaber-ignition-1" )[0].volume = 0.4
17 |     $( "#lightsaber-ignition-1" )[0].play();
18 | });


--------------------------------------------------------------------------------
/Templates/PurpleSideOfTheForce/lightsaber-ignition-0.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/PurpleSideOfTheForce/lightsaber-ignition-0.mp3


--------------------------------------------------------------------------------
/Templates/PurpleSideOfTheForce/lightsaber-ignition-1.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/PurpleSideOfTheForce/lightsaber-ignition-1.mp3


--------------------------------------------------------------------------------
/Templates/PurpleSideOfTheForce/lightsaber-ignition-2.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/PurpleSideOfTheForce/lightsaber-ignition-2.mp3


--------------------------------------------------------------------------------
/Templates/PurpleSideOfTheForce/readme.md:
--------------------------------------------------------------------------------
 1 | # Standard Template
 2 | 
 3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
 4 | 
 5 | <img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
20 | 	```
21 |  4. **Username**
22 | 	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | 	```
24 | 	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
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 | 	<div  id="links">
30 | 
31 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
32 | 
33 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
34 | 
35 | 	</div>
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/PurpleSideOfTheForce/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css2?family=Bakbak+One&display=swap');
 3 | :root {
 4 |     --brandStrongColor: #51278d;
 5 |     --accentColor: #ead6f2;
 6 |     --brandMainColor: #ce95ca;
 7 |     --font: 'Bakbak One', cursive;
 8 | }
 9 | 
10 | body{
11 |     background-image: linear-gradient(
12 |         165.59deg,
13 |         var(--accentColor) -2.09%,
14 |         var(--brandStrongColor) 74.49%
15 |     );
16 |     background-repeat: no-repeat;
17 |     min-height: 100vh;
18 | }
19 | 
20 | #userPhoto{
21 |     width: 96px;
22 |     height: 96px;
23 |     display: block;
24 |     margin: 35px auto 20px;
25 |     border-radius: 50%;
26 | }
27 | 
28 | #userName{
29 |     color: var(--brandStrongColor);
30 |     font-size: 1rem;
31 |     font-weight: 600;
32 |     line-height: 1.25;
33 |     display: block;
34 |     font-family: var(--font);
35 |     width: 100%;
36 |     text-align: center;
37 |     text-decoration: none;
38 | }
39 | 
40 | #links{
41 |     max-width: 675px;
42 |     width: auto;
43 |     display: block;
44 |     margin: 27px auto;
45 | }
46 | .link{
47 |     display: block;
48 |     background-color: var(--brandMainColor);
49 |     color: var(--brandStrongColor);
50 |     font-family: var(--font);
51 |     text-align: center;
52 |     margin-bottom: 20px;
53 |     padding: 17px;
54 |     text-decoration: none;
55 |     font-size: 1rem;
56 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
57 |     border: solid var(--accentColor) 2px;
58 |     border-radius: 4px;
59 | }
60 | 
61 | .link:hover{
62 |     background-color: var(--accentColor);
63 |     color: var(--brandStrongColor);
64 |     border-color: var(--accentColor);
65 |     box-shadow: 4px 4px 2px var(--brandMainColor);
66 | }
67 | 


--------------------------------------------------------------------------------
/Templates/RainCode/assets/css/reset.css:
--------------------------------------------------------------------------------
 1 | /* http://meyerweb.com/eric/tools/css/reset/ 
 2 |    v2.0 | 20110126
 3 |    License: none (public domain)
 4 | */
 5 | 
 6 | html, body, div, span, applet, object, iframe,
 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 8 | a, abbr, acronym, address, big, cite, code,
 9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed, 
16 | figure, figcaption, footer, header, hgroup, 
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | 	margin: 0;
20 | 	padding: 0;
21 | 	border: 0;
22 | 	font-size: 100%;
23 | 	font: inherit;
24 | 	vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure, 
28 | footer, header, hgroup, menu, nav, section {
29 | 	display: block;
30 | }
31 | body {
32 | 	line-height: 1;
33 | }
34 | ol, ul {
35 | 	list-style: none;
36 | }
37 | blockquote, q {
38 | 	quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | 	content: '';
43 | 	content: none;
44 | }
45 | table {
46 | 	border-collapse: collapse;
47 | 	border-spacing: 0;
48 | }


--------------------------------------------------------------------------------
/Templates/RainCode/assets/css/styles.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   width: 100vw;
 3 |   height: 100vh;
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   align-items: center;
 7 |   justify-content: flex-start;
 8 |   background-image: url(../img/rain\ code.gif);
 9 |   background-color: rgba(185, 174, 174, 0.1);
10 |   background-blend-mode: color;
11 | }
12 | 
13 | .profile {
14 |   width: 100px;
15 |   height: 100px;
16 |   background-image: url(https://avatars.githubusercontent.com/u/84210050?v=4);
17 |   background-position: center;
18 |   background-size: cover;
19 |   border-radius: 50%;
20 |   margin: 2rem;
21 | }
22 | 
23 | .media {
24 |   display: flex;
25 |   flex-direction: column;
26 | }
27 | 
28 | .link {
29 |   margin: 2rem;
30 |   text-decoration: none;
31 |   color: white;
32 |   background-color: rgb(15, 31, 20);
33 |   width: 15rem;
34 |   height: 3rem;
35 |   display: flex;
36 |   justify-content: center;
37 |   align-items: center;
38 |   border-radius: 1rem;
39 |   font-family: sans-serif;
40 | }
41 | 
42 | .link:hover {
43 | 
44 |     cursor: pointer;
45 |     box-shadow: 0 0 15px white;
46 |     background-color: black;
47 | }


--------------------------------------------------------------------------------
/Templates/RainCode/assets/img/rain code.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/RainCode/assets/img/rain code.gif


--------------------------------------------------------------------------------
/Templates/RainCode/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="./assets//css/reset.css">
 8 |     <link rel="stylesheet" href="./assets/css/styles.css">
 9 |     <title>LinkFree - Marincor</title>
10 | </head>
11 | 
12 | <body>
13 |  
14 | 
15 | 
16 |         <main class="container">
17 |             <div class="profile"></div>
18 |             <div class="media">
19 |                 <a href="https://github.com/marincor" class="link"><p>github</p></a>
20 |                 <a href="https://www.linkedin.com/in/gabriel-claudino-marinho-b88823179/" class="link"><p>linkedin</p></a>
21 |                 <a href="https://marincor-portfolio.vercel.app/" class="link"><p>portfolio</p></a>
22 |             </div>
23 |             
24 |         </main>
25 | 
26 |         
27 |       
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/Templates/RedZone/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('http://fonts.googleapis.com/css?family=Roboto');
 3 | :root {
 4 |     --bgColor:#d46156;
 5 |     --accentColor: #bda1a1;
 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 | }


--------------------------------------------------------------------------------
/Templates/Retro Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Retro Game</title>
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1"><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'><link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <!-- by Soman Yadav -->
11 | <div class="wrap">
12 |   <div class="profile">
13 |     <img src="https://media0.giphy.com/avatars/danielfigueirdo/mR5uHXLuePGT.gif" class="photo" style="height:80px; width:80px;">
14 |     <span class="profile_name">Soman Yadav</span>
15 |     <span class="at">@beingsoman</span>
16 |   </div>
17 |   <div class="links">
18 |     <ul>
19 |       <li><a href="#" class="link"><i class="fab fa-youtube"></i> See the latest video</a></li>
20 |       <li><a href="#" class="link"><i class="fab fa-youtube"></i> Subscribe on YouTube channel</a></li>
21 |       <li><a href="#" class="link"><i class="fab fa-github"></i> Github</a></li>
22 |       <li><a href="#" class="link"><i class="fab fa-linkedin-in"></i> LinkedIn</a></li>
23 |       <li><a href="#" class="link"><i class="fab fa-codepen"></i> Codepen</a></li>
24 |       <li><a href="#" class="link"><i class="fas fa-mobile-alt"></i> My website</a></li>
25 |     </ul>
26 |     
27 |   </div>
28 | </div>
29 | <!-- SYLDD -->
30 |   
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/Templates/Retro Game/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: sans-serif;
 3 |   margin: 0;
 4 |   padding: 15px;
 5 |   background-image: url('https://cdnb.artstation.com/p/assets/images/images/024/538/827/original/pixel-jeff-clipa-s.gif');
 6 | }
 7 | .wrap {
 8 |   width: 100%;
 9 |   max-width: 320px;
10 |   margin: 0 auto;
11 | }
12 | .profile {
13 |   text-align: center;
14 |   color: #FFF;
15 | }
16 | .photo {
17 |   border-radius: 50%;
18 | }
19 | .profile_name {
20 |   font-weight: bold;
21 |   display: block;
22 | }
23 | .at {
24 |   font-size: 13px;
25 | }
26 | .links ul {
27 |   list-style: none;
28 |   padding: 0;
29 |   margin: 0;
30 | }
31 | .links ul li {
32 |   margin: 14px 0;
33 | }
34 | .link {
35 |   padding: 14px;
36 |   display: block;
37 |   background-color: #9466FF;
38 |   text-align: center;
39 |   text-decoration: none;
40 |   border-radius: 4px;
41 |   transition: ease all 0.3s;
42 |   color: #FFF;
43 | }
44 | .link:hover {
45 |   opacity: 0.9;
46 |   background-color: #170fff;
47 | }
48 | .card {
49 |   padding: 10px;
50 |   background-color: #FFF;
51 |   border-radius: 4px;
52 | }
53 | .card h3 {
54 |   margin: 0;
55 |   color: #202024;
56 | }
57 | .card p {
58 |   margin: 5px 0;
59 |   font-size: 13px;
60 |   color: #202024;
61 | }


--------------------------------------------------------------------------------
/Templates/Shades Of Purple/README.md:
--------------------------------------------------------------------------------
1 | # Shades Of Purple Theme by Rohit Purkait
2 | 
3 | > Here's the [demo](https://codeswithroh.github.io/shades-of-purple/)
4 | 
5 | ### This theme is for all the ARMY.
6 | 


--------------------------------------------------------------------------------
/Templates/Shades Of Purple/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="stylesheet" href="./style.css">
 9 |     <title>Shades Of Purple | Rohit Purkait</title>
10 | </head>
11 | 
12 | <body>
13 |     <div class="background">
14 |         <div class="main-content">
15 |             <div class="profile-pic-container">
16 |                 <img class="profile-pic" src="./rohit.jpeg" alt="">
17 |             </div>
18 |             <div class="username">
19 |                 <a
20 |                 href="https://www.instagram.com/otaku_._sempai/"
21 |                 target="_blank"
22 |                 class="username"
23 |                 >@Rohit Purkait</a
24 |               >
25 |             </div>
26 |             <div class="profile-links-container">
27 |                 <a href="https://rohit-purkait.netlify.app/" target="_blank" class="profile-link">
28 |                     <i class="fas fa-globe"></i>
29 |                     <div>Website</div>
30 |                 </a>
31 |                 <a href="https://www.linkedin.com/in/codeswithroh/" target="_blank" class="profile-link">
32 |                     <i class="fab fa-linkedin"></i>
33 |                     <div>LinkedIn</div>
34 |                 </a>
35 |                 <a href="https://in.pinterest.com/rohitpurkait001/_saved/" target="_blank" class="profile-link">
36 |                     <i class="fab fa-pinterest-square"></i>
37 |                     <div>Pinterest</div>
38 |                 </a>
39 | 
40 |                 <a href="https://github.com/codeswithroh" target="_blank" class="profile-link">
41 |                     <i class="fab fa-github-square"></i>
42 |                     <div>GitHub</div>
43 |                 </a>
44 | 
45 |             </div>
46 |         </div>
47 | </body>
48 | <script src="https://kit.fontawesome.com/3fd576ae50.js" crossorigin="anonymous"></script>
49 | 
50 | </html>


--------------------------------------------------------------------------------
/Templates/Shades Of Purple/rohit.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Shades Of Purple/rohit.jpeg


--------------------------------------------------------------------------------
/Templates/Shades Of Purple/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 | }
 5 | 
 6 | .background {
 7 |   background: linear-gradient(99.79deg, #0d0941 0.24%, #642a85 100.04%);
 8 |   min-height: 100vh;
 9 |   display: grid;
10 |   place-items: center;
11 | }
12 | 
13 | .main-content {
14 |   display: flex;
15 |   flex-direction: column;
16 |   gap: 2em;
17 |   align-items: center;
18 |   justify-content: center;
19 |   background: rgba(255, 255, 255, 0.4);
20 |   backdrop-filter: blur(10px);
21 |   padding: 1.5em 4em;
22 |   border-radius: 20px;
23 | }
24 | 
25 | .username {
26 |   font-size: 2rem;
27 |   color: white;
28 |   text-decoration: none;
29 |   font-weight: bold;
30 |   text-shadow: 0px 0px 10px purple;
31 |   transition: all 0.5s;
32 | }
33 | 
34 | .username:hover {
35 |   color: rgb(46, 3, 46);
36 |   text-shadow: 0px 0px 10px white;
37 | }
38 | 
39 | .profile-pic {
40 |   width: 7em;
41 |   height: 7em;
42 |   object-fit: cover;
43 |   border-radius: 50%;
44 | }
45 | 
46 | .profile-links-container {
47 |   display: flex;
48 |   justify-content: center;
49 |   align-items: center;
50 |   flex-direction: column;
51 |   gap: 2em;
52 | }
53 | 
54 | a::before {
55 |   content: "";
56 |   position: absolute;
57 |   z-index: -1;
58 |   inset: 0;
59 | }
60 | 
61 | .profile-link {
62 |   display: flex;
63 |   gap: 0.2em;
64 |   align-items: center;
65 |   justify-content: center;
66 |   font-size: 1.8rem;
67 |   text-decoration: none;
68 |   padding: 0.5em 3em;
69 |   border-radius: 30px;
70 |   background: linear-gradient(180deg, #520a80 0%, #160c31 100%);
71 |   font-weight: bold;
72 |   transform: perspective(1px) translateZ(0);
73 |   color: white;
74 |   text-shadow: 0 1px 0 #ff0e7e;
75 |   transition: all 0.4s;
76 | }
77 | 
78 | .profile-link::before {
79 |   background: #0d0941;
80 |   clip-path: inset(0 0 0 100%);
81 |   opacity: 1;
82 |   transition: 0.4s;
83 |   border-radius: 30px;
84 | }
85 | 
86 | .profile-link:hover::before {
87 |   clip-path: inset(0 0 0 0);
88 | }
89 | 
90 | @media screen and (max-width: 700px) {
91 |   .main-content {
92 |     padding: 2em 2em;
93 |   }
94 |   .profile-link {
95 |     font-size: 1.4rem;
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/Templates/Sixties/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | 
11 | <body>
12 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
13 |     
14 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
15 |     <div id="links">
16 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
17 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
18 |     </div>
19 | 
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/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/Sky/Blue_sky_with_white_clouds-1_generated.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Sky/Blue_sky_with_white_clouds-1_generated.jpg


--------------------------------------------------------------------------------
/Templates/Sky/circle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Sky/circle.png


--------------------------------------------------------------------------------
/Templates/Sky/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 5 |     <meta charset="UTF-8">
 6 |     <title>Homer Simpson</title>
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <link rel="icon" href="circle.png" >
 9 | </head>
10 | <body>
11 |     <img id="userPhoto" src="https://images.immediate.co.uk/production/volatile/sites/3/2018/08/Simpsons_SO28_Gallery_11-fb0b632.jpg?quality=90&resize=620,413" alt="User Photo">
12 |     
13 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
14 |     <div id="links">
15 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
16 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
17 |     </div>
18 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
19 |     <script  src="index.js"></script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/Templates/Sky/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
 3 | :root {
 4 |     --bgColor:#1C1C1C;
 5 |     --accentColor: #c5d0d3;
 6 |     --font: 'Karla', sans-serif;
 7 | }
 8 | 
 9 | body{
10 |     background:url('Blue_sky_with_white_clouds-1_generated.jpg');
11 |     background-size: cover;
12 | }
13 | 
14 | #userPhoto{
15 |     width: 140px;
16 |     height: 120px;
17 |     display: block;
18 |     margin: 35px auto 20px;
19 |     border-radius: 25px;
20 | }
21 | 
22 | #userName{
23 |     color: #1c1c1c;
24 |     font-size: 1rem;
25 |     font-weight: 600;
26 |     line-height: 1.25;
27 |     display: block;
28 |     font-family: var(--font);
29 |     width: 100%;
30 |     text-align: center;
31 |     text-decoration: none;
32 | }
33 | 
34 | #links{
35 |     max-width: 675px;
36 |     width: auto;
37 |     display: block;
38 |     margin: 27px auto;
39 | }
40 | .link{
41 |     border-radius: 15px;
42 |     display: block;
43 |     background-color: var(--accentColor);
44 |     color: #1c1c1c;
45 |     font-family: var(--font);
46 |     text-align: center;
47 |     margin-bottom: 20px;
48 |     padding: 17px;
49 |     text-decoration: none;
50 |     font-size: 1rem;
51 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
52 |     border: solid var(--accentColor) 2px;
53 | }
54 | 
55 | .link:hover{
56 |     background-color: #5986e7;
57 |     color: var(--accentColor);
58 | }


--------------------------------------------------------------------------------
/Templates/SmartGlow/assets/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SmartGlow/assets/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/Templates/SmartGlow/assets/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SmartGlow/assets/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/Templates/SmartGlow/assets/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SmartGlow/assets/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/Templates/SmartGlow/assets/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SmartGlow/assets/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/Templates/SmartGlow/assets/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SmartGlow/assets/fonts/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/Templates/SmartGlow/assets/images/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SmartGlow/assets/images/bg.jpg


--------------------------------------------------------------------------------
/Templates/SmartGlow/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SmartGlow/assets/images/favicon.png


--------------------------------------------------------------------------------
/Templates/SmartGlow/assets/images/profile.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SmartGlow/assets/images/profile.jpeg


--------------------------------------------------------------------------------
/Templates/SmartGlow/assets/js/animations.js:
--------------------------------------------------------------------------------
 1 | const transition = (element) => {
 2 |   const link = element;
 3 |   const time = (Math.random() + 0.5)*5;
 4 |   const color = `rgba(
 5 |       ${Math.floor(Math.random() * 255)},
 6 |       ${Math.floor(Math.random() * 255)},
 7 |       ${Math.floor(Math.random() * 255)},
 8 |       1
 9 |     );`;
10 | 
11 |   link.style.setProperty("--transition-time", time + "s");
12 |   setTimeout(transition, time * 1000);
13 | };
14 | 
15 | const setTransitions = () => {
16 |   const links = document.getElementsByClassName("link");
17 |   for (let link of links) {
18 |     const time = Math.random() * 4 + 0.5;
19 |     const color = `rgba(
20 |       ${Math.floor(Math.random() * 255)},
21 |       ${Math.floor(Math.random() * 255)},
22 |       ${Math.floor(Math.random() * 255)},
23 |       1
24 |     );`;
25 | 
26 |     link.style.setProperty("--transition-time", time + "s");
27 |     setTimeout(transition, time * 1000);
28 |   }
29 | };
30 | // setInterval(setTransitions, 1000);
31 | setTransitions();
32 | 


--------------------------------------------------------------------------------
/Templates/SmartGlow/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta charset="UTF-8">
 8 |     <title>LinkFree | Caio Gomes</title>
 9 |     <link rel="stylesheet" href="assets/css/style.css">
10 |     <link rel="stylesheet" href="assets/css/font-awesome.min.css">
11 |     <link rel="icon" href="assets/imagens/favicon.png" type="image/x-icon" />
12 | </head>
13 | 
14 | <body>
15 |     <div id="profile">
16 |         <img id="userPhoto" src="assets/images/profile.jpeg" alt="Profile picture of Caio Gomes">
17 |         <div id="userName">
18 |             <h1>Caio Gomes</h1>
19 |             <p>Software Engineer</p>
20 |         </div>
21 |     </div>
22 |     <div id="links">
23 |         <a class="link" href="https://github.com/minimarvin" target="_blank"><i class="fa fa-github"></i> Github</a>
24 |         <a class="link" href="https://www.linkedin.com/in/caiogomes001/" target="_blank"><i class="fa fa-linkedin"
25 |                 aria-hidden="true"></i> LinkedIn</a>
26 |         <a class="link" href="http://caiogomes.dev" target="_blank"><i class="fa fa-globe" aria-hidden="true"></i>
27 |             Website</a>
28 |         <a class="link" href="mailto:contato@caiogomes.dev" target="_blank"><i class="fa fa-envelope"
29 |                 aria-hidden="true"></i>
30 |             E-mail</a>
31 |         <a class="link" href="https://web.whatsapp.com/send?phone=558192558512" target="_blank"><i
32 |                 class="fa fa-whatsapp" aria-hidden="true"></i>
33 |             WhatsApp</a>
34 |     </div>
35 |     <script type="text/javascript" src="assets/js/animations.js"></script>
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/Templates/Space Theme/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | node_modules


--------------------------------------------------------------------------------
/Templates/Space Theme/download.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Space Theme/download.jpg


--------------------------------------------------------------------------------
/Templates/Space Theme/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "devDependencies": {
3 |     "tailwindcss": "^3.1.8"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/Templates/Space Theme/styles.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color:black;
 3 | 
 4 | }
 5 | .moon-animation{
 6 |     background-color:black;
 7 | }
 8 | .items{
 9 |     width: 10em;
10 | }
11 | .container{
12 |     height: 31.25em;
13 |     width: 31.25em;
14 |     position: absolute;
15 |     transform: translate(-50%,-50%);
16 |     top: 50%;
17 |     left: 50%;
18 |     color: #ffffff;
19 | }
20 | p.letter{
21 |     font-size: 3.5em;
22 |     position: absolute;
23 |     transform: translateY(-50%);
24 |     top: 50%;
25 | }
26 | .letter-M{
27 |     left: 0.2em;
28 | }
29 | .letter-N{
30 |     right: 0.2em;
31 | }
32 | .moon{
33 |     background-color: #f5f5f5;
34 |     height: 8em;
35 |     width: 8em;
36 |     border-radius: 50%;
37 |     position: absolute;
38 |     margin: auto;
39 |     left: 0;
40 |     right: 0;
41 |     top: 0;
42 |     bottom: 0;
43 |     box-shadow: 0 0 0 0.6em
44 |     rgba(255, 255, 255, 0.05),
45 |     0 0 0 1.2em rgba(255, 255, 255, 0.05),
46 |     0 0 0 1.8em rgba(255, 255, 255, 0.05);
47 | }
48 | .moon:after{
49 | position: absolute;
50 | content: "";
51 | background-color: #e6e6e6;
52 | height: 0.9em;
53 | width: 0.9em;
54 | border-radius: 50%;
55 | top: 3.75em;
56 | left: 1.25em;
57 | box-shadow: 0.9em -2.1em 0 0.2em #e6e6e6,
58 | 1.5em -0.3em 0 -0.06em #e6e6e6;
59 | }
60 | .orbit{
61 |     height: 18.75em;
62 |     width: 18.75em;
63 |     border-radius: 50%;
64 |     position: absolute;
65 |     left: -5.2em;
66 |     bottom: -5.2em;
67 |     animation: spin 8s infinite linear;
68 | }
69 | @keyframes spin {
70 |     100%{
71 |         transform: rotate(360deg);
72 |     }   
73 | }
74 | .orbit p{
75 |     position: absolute;
76 |     font-size: 3.5em;
77 |     top: 0.25em;
78 |     left: 0.25em;
79 | }
80 | @media screen and (min-width: 700px) {
81 |     .container{
82 |         font-size: 20px;
83 |     }
84 | }


--------------------------------------------------------------------------------
/Templates/Space Theme/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ["*"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | }
9 | 


--------------------------------------------------------------------------------
/Templates/Space Theme/thumb-1920-936378.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Space Theme/thumb-1920-936378.jpg


--------------------------------------------------------------------------------
/Templates/SquidGame/assets/img/circle-03.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
 7 | </style>
 8 | <g>
 9 | 	<path class="st0" d="M25,4.3c11.4,0,20.7,9.3,20.7,20.7S36.4,45.7,25,45.7S4.3,36.4,4.3,25S13.6,4.3,25,4.3 M25,3.3
10 | 		C13,3.3,3.3,13,3.3,25S13,46.7,25,46.7S46.7,37,46.7,25S37,3.3,25,3.3L25,3.3z"/>
11 | </g>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/Templates/SquidGame/assets/img/cross-01.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
 7 | </style>
 8 | <g>
 9 | 	<g>
10 | 		<line class="st0" x1="3.3" y1="46.7" x2="46.7" y2="3.3"/>
11 | 	</g>
12 | 	<g>
13 | 		<line class="st0" x1="46.7" y1="46.7" x2="3.3" y2="3.3"/>
14 | 	</g>
15 | </g>
16 | </svg>
17 | 


--------------------------------------------------------------------------------
/Templates/SquidGame/assets/img/square-04.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
 7 | </style>
 8 | <rect x="4" y="4" class="st0" width="42" height="42"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/Templates/SquidGame/assets/img/triangle-02.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
 5 | <style type="text/css">
 6 | 	.st0{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
 7 | </style>
 8 | <polygon class="st0" points="3.2,46.8 25,3.4 46.7,46.7 "/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/Templates/SquidGame/readme.md:
--------------------------------------------------------------------------------
 1 | # Standard Template
 2 | 
 3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
 4 | 
 5 | <img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
20 | 	```
21 |  4. **Username**
22 | 	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | 	```
24 | 	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
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 | 	<div  id="links">
30 | 
31 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
32 | 
33 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
34 | 
35 | 	</div>
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 Classic Theme/README.md:
--------------------------------------------------------------------------------
1 | Deploy Link: https://user-all-links.netlify.app/
2 | 
3 | ![Screenshot_20230101_190932](https://user-images.githubusercontent.com/93247057/210172980-4955d37b-7c08-49e9-b20a-5d802257748e.png)
4 | 
5 | 


--------------------------------------------------------------------------------
/Templates/Standard Classic Theme/Screenshot_20230101_190932.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Standard Classic Theme/Screenshot_20230101_190932.png


--------------------------------------------------------------------------------
/Templates/Standard Classic Theme/image/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Standard Classic Theme/image/github.png


--------------------------------------------------------------------------------
/Templates/Standard Classic Theme/image/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Standard Classic Theme/image/linkedin.png


--------------------------------------------------------------------------------
/Templates/Standard Classic Theme/image/share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Standard Classic Theme/image/share.png


--------------------------------------------------------------------------------
/Templates/Standard Classic Theme/image/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Standard Classic Theme/image/twitter.png


--------------------------------------------------------------------------------
/Templates/Standard Classic Theme/image/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Standard Classic Theme/image/user.png


--------------------------------------------------------------------------------
/Templates/Standard Classic Theme/index.js:
--------------------------------------------------------------------------------
 1 | const shareButton = document.querySelector('.share-button');
 2 | const shareDialog = document.querySelector('.share-dialog');
 3 | const closeButton = document.querySelector('.close-button');
 4 | 
 5 | shareButton.addEventListener('click', event => {
 6 |   if (navigator.share) { 
 7 |    navigator.share({
 8 |       title: 'Suman Paik',
 9 |       url: 'https://github.com/sumanpaikdev'
10 |     }).then(() => {
11 |       console.log('Thanks for sharing!');
12 |     })
13 |     .catch(console.error);
14 |     } else {
15 |         shareDialog.classList.add('is-open');
16 |     }
17 | });
18 | 
19 | closeButton.addEventListener('click', event => {
20 |   shareDialog.classList.remove('is-open');
21 | });


--------------------------------------------------------------------------------
/Templates/Standard/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Standard/favicon.ico


--------------------------------------------------------------------------------
/Templates/Standard/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Homer Simpson</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="https://i.imgur.com/t8ZX9um.jpg" alt="User Photo">
14 |     
15 |     <a href="https://www.instagram.com/thesimpsons" id="userName">@thesimpsons</a>
16 |     <div id="links">
17 |         <a class="link" href="https://pt.wikipedia.org/wiki/Homer_Simpson" target="_blank">Wikipedia</a>
18 |         <a class="link" href="https://foxplay.com/br/forme" target="_blank">IMDB</a>
19 |     </div>
20 | 
21 |     <!-- Javascript -->
22 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
23 |     <script  src="index.js"></script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Templates/Standard/index.js:
--------------------------------------------------------------------------------
1 | $( document ).ready(function() {
2 |      // Add here commands to run on page loaded
3 | });
4 | 
5 | $( ".link" ).click(function() {
6 |     // Add here commands to run on link click
7 | });


--------------------------------------------------------------------------------
/Templates/Standard/readme.md:
--------------------------------------------------------------------------------
 1 | # Standard Template
 2 | 
 3 | [Website](https://michaelbarney.github.io/LinkFree/Templates/Standard/)
 4 | 
 5 | <img src="https://i.imgur.com/B4LX0kY.png" alt="alt text" width="250px">
 6 | 
 7 | ## How to Use
 8 | ### index.html
 9 |  1. **Title**
10 |     This is the name that is given to the page.
11 | 	   ```
12 | 	   <title>Your Title Here</title>
13 | 	   ```
14 |  2. **(Optional) Favicon** 
15 | 	To change the favicon, just replace the "favicon.ico" file. You can generate the .ico file in a website like [favicon.io](https://favicon.io/).
16 |  3. **Image**
17 | 	 This is the user image that is shown. Make sure it is square and substitute the "src" property with its url. You can generate the url in a website like [imgur](https://imgur.com/).
18 | 	```
19 | 	<img  id="userPhoto"  src="https://i.imgur.com/t8ZX9um.jpg"  alt="User Photo">
20 | 	```
21 |  4. **Username**
22 | 	Your Instagram username. Change the "href" property with its url and add substitute the text with your @.
23 | 	```
24 | 	<a  href="https://www.instagram.com/thesimpsons"  id="userName"></h3>@thesimpsons</a>
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 | 	<div  id="links">
30 | 
31 | 		<a  href="https://pt.wikipedia.org/wiki/Homer_Simpson"  target="_blank">Wikipedia</a>
32 | 
33 | 		<a  href="https://foxplay.com/br/forme"  target="_blank">IMDB</a>
34 | 
35 | 	</div>
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/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
 3 | :root {
 4 |     --bgColor: white;
 5 |     --accentColor: #39e09b;
 6 |     --font: 'Karla', sans-serif;
 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: 50%;
19 | }
20 | 
21 | #userName{
22 |     color: #bbb;
23 |     font-size: 1rem;
24 |     font-weight: 600;
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: 675px;
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/SunMoon/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SunMoon/.DS_Store


--------------------------------------------------------------------------------
/Templates/SunMoon/assets/css/style.css:
--------------------------------------------------------------------------------
 1 | /* Style Settings */
 2 | 
 3 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
 4 | :root {
 5 |     --font: 'Karla', 'Karla', sans-serif;
 6 | }
 7 | 
 8 | body {
 9 |     background-color: rgb(243, 242, 242);
10 | }
11 | 
12 | #userPhoto {
13 |     width: 100px;
14 |     height: 100px;
15 |     display: block;
16 |     margin: 35px auto 20px;
17 |     border-radius: 50%;
18 | }
19 | 
20 | #userName {
21 |     color: rgb(99, 99, 99);
22 |     font-size: 1rem;
23 |     font-weight: 600;
24 |     line-height: 1.25;
25 |     display: block;
26 |     font-family: var(--font);
27 |     width: 100%;
28 |     text-align: center;
29 |     text-decoration: none;
30 | }
31 | 
32 | #links {
33 |     max-width: 675px;
34 |     width: auto;
35 |     display: block;
36 |     margin: 27px auto;
37 | }
38 | 
39 | .link {
40 |     display: block;
41 |     background-color: rgb(66, 110, 255);
42 |     color: #fff;
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 |     font-weight: bold;
50 |     transition: all .25s cubic-bezier(.08, .59, .29, .99);
51 |     border: solid var(--accentColor) 2px;
52 | }
53 | 
54 | .link:hover {
55 |     background-color: #fff;
56 |     color: rgb(66, 110, 255);
57 |     border: solid rgb(66, 110, 255) 2px;
58 | }
59 | 
60 | .footer {
61 |     text-align: center;
62 |     font-size: 1.3rem;
63 | }
64 | 
65 | .footer a {
66 |     text-decoration:none;
67 | }
68 | 
69 | .circulo {
70 |     background: rgb(221, 221, 221);
71 |     border-radius: 52px;
72 |     width: 38px;
73 |     height: 38px;
74 |     text-align: center;
75 |     font-size: 10px;
76 |     color: rgb(32, 32, 32);
77 | }
78 | 
79 | .circulo:hover {
80 |     background: rgb(66, 110, 255);
81 |     color: rgb(255, 255, 255);
82 |     -webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.77);
83 |     -moz-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.77);
84 |     box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.77);
85 | }
86 | 
87 | .night_mode {
88 |     position: fixed;
89 |     top: 25px;
90 |     right: 30px;
91 |     z-index: 10000000;
92 |     color: #585858;
93 | }
94 | 
95 | .night_mode:hover {
96 |     cursor: pointer;
97 | }
98 | 


--------------------------------------------------------------------------------
/Templates/SunMoon/assets/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SunMoon/assets/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/Templates/SunMoon/assets/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SunMoon/assets/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/Templates/SunMoon/assets/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SunMoon/assets/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/Templates/SunMoon/assets/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SunMoon/assets/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/Templates/SunMoon/assets/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SunMoon/assets/fonts/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/Templates/SunMoon/assets/imagens/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SunMoon/assets/imagens/favicon.png


--------------------------------------------------------------------------------
/Templates/SunMoon/assets/imagens/perfil.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/SunMoon/assets/imagens/perfil.jpg


--------------------------------------------------------------------------------
/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/Universe/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/universe.jpeg');
 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/Universe/assets/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Universe/assets/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/Templates/Universe/assets/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Universe/assets/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/Templates/Universe/assets/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Universe/assets/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/Templates/Universe/assets/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Universe/assets/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/Templates/Universe/assets/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Universe/assets/fonts/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/Templates/Universe/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Universe/assets/images/favicon.png


--------------------------------------------------------------------------------
/Templates/Universe/assets/images/universe.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Universe/assets/images/universe.jpeg


--------------------------------------------------------------------------------
/Templates/Universe/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta charset="UTF-8">
 8 |     <title>LinkFree | Luã Braga</title>
 9 |     <link rel="stylesheet" href="assets/css/style.css">
10 |     <link rel="stylesheet" href="assets/css/font-awesome.min.css">
11 |     <link rel="icon" href="assets/imagens/favicon.png" type="image/x-icon" />
12 | </head>
13 | 
14 | <body>
15 |     <div id="profile">
16 |         <img id="userPhoto" src="" alt="your profile picture">
17 |         <div id="userName">
18 |             <h1>Your name</h1>
19 |             <p>Software Engineer</p>
20 |         </div>
21 |     </div>
22 |     <div id="links">
23 |         <a class="link" href="" target="_blank"><i class="fa fa-github"></i> Github</a>
24 |         <a class="link" href="" target="_blank"><i class="fa fa-linkedin"
25 |                 aria-hidden="true"></i> LinkedIn</a>
26 |         <a class="link" href="" target="_blank"><i class="fa fa-globe" aria-hidden="true"></i>
27 |             Website</a>
28 |         <a class="link" href="" target="_blank"><i class="fa fa-envelope"
29 |                 aria-hidden="true"></i>
30 |             E-mail</a>
31 |         <a class="link" href="" target="_blank"><i
32 |                 class="fa fa-whatsapp" aria-hidden="true"></i>
33 |             WhatsApp</a>
34 |     </div>
35 | 
36 | </body>
37 | 
38 | </html>


--------------------------------------------------------------------------------
/Templates/Windows95/fonts/ms-sans-serif.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Windows95/fonts/ms-sans-serif.ttf


--------------------------------------------------------------------------------
/Templates/Windows95/fonts/w-95-sans-serif.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Windows95/fonts/w-95-sans-serif.woff


--------------------------------------------------------------------------------
/Templates/Windows95/fonts/w-95-sans-serif.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Windows95/fonts/w-95-sans-serif.woff2


--------------------------------------------------------------------------------
/Templates/Windows95/img/favicon/android-chrome-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Windows95/img/favicon/android-chrome-48x48.png


--------------------------------------------------------------------------------
/Templates/Windows95/img/favicon/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Windows95/img/favicon/apple-touch-icon.png


--------------------------------------------------------------------------------
/Templates/Windows95/img/favicon/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/mstile-150x150.png"/>
 6 |             <TileColor>#2d89ef</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/Templates/Windows95/img/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Windows95/img/favicon/favicon-16x16.png


--------------------------------------------------------------------------------
/Templates/Windows95/img/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Windows95/img/favicon/favicon-32x32.png


--------------------------------------------------------------------------------
/Templates/Windows95/img/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Windows95/img/favicon/favicon.ico


--------------------------------------------------------------------------------
/Templates/Windows95/img/favicon/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/Windows95/img/favicon/mstile-150x150.png


--------------------------------------------------------------------------------
/Templates/Windows95/img/favicon/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "W95 UI Kit",
 3 |     "short_name": "W95 UI Kit",
 4 |     "icons": [
 5 |         {
 6 |             "src": "/android-chrome-48x48.png",
 7 |             "sizes": "48x48",
 8 |             "type": "image/png"
 9 |         }
10 |     ],
11 |     "theme_color": "#ffffff",
12 |     "background_color": "#ffffff",
13 |     "display": "standalone"
14 | }
15 | 


--------------------------------------------------------------------------------
/Templates/animated/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 |    <head>
 5 |     <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
 6 |         <link rel="stylesheet" href="style.css">
 7 |         <title>Animated</title>
 8 |    </head>
 9 |    <body>
10 |     <div class="bg">
11 |         <div class="bg-shapes"></div>
12 |         <img alt='User Photo' class='user animated zoomIn' src='user.png'/>
13 |         <div class='userName animated fadeIn'>Animated Theme by Mayank Jha</div>
14 |         <div class="linkss">
15 |             <a  class='link animated fadeInRight' href='https://github.com/mkjha482' target='_blank'><i class="fa fa-github"></i>&nbsp; &nbsp; GitHub</a>
16 |             <a class='link animated fadeInLeft' href='https://www.linkedin.com/in/mayank-jha-9181341b0/' target='_blank'><i class="fa fa-linkedin"></i> &nbsp; &nbsp; LinkedIn</a>
17 |         </div>
18 |     </div>
19 |     </body>
20 | </html>
21 | 
22 | 


--------------------------------------------------------------------------------
/Templates/animated/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/animated/user.png


--------------------------------------------------------------------------------
/Templates/blackCoffee/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/blackCoffee/preview.png


--------------------------------------------------------------------------------
/Templates/darkTemplate/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 3001
3 | }
4 | 


--------------------------------------------------------------------------------
/Templates/darkTemplate/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Dark-Web</title>
 8 |   <link rel="stylesheet" href="style.css">
 9 |   <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
10 | </head>
11 | <body>
12 |   <div class="container">
13 |     <header>
14 |       <div class="picture"></div>
15 |       <h1>Nikhil Kumar</h1>
16 |     </header>
17 |     <main>
18 |       <a class="link" href="https://linkedin.com/in/0nikhilkumar" target="_blank"><i class="ri-linkedin-fill"></i> Linkedln</a>
19 |       <a class="link" href="https://github.com/0nikhilkumar" target="_blank"><i class="ri-github-fill"></i> Github</a>
20 |       <a class="link" href="https://www.instagram.com/0nikhilkumar.ig/" target="_blank"><i class="ri-instagram-line"></i> Instagram</a>
21 |       <a class="link" href="https://twitter.com/0nikhilkumar_" target="_blank"><i class="ri-twitter-fill"></i> X (Twitter)</a>
22 |     </main>
23 |   </div>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/Templates/darkTemplate/photo.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/darkTemplate/photo.jpeg


--------------------------------------------------------------------------------
/Templates/draculaTheme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta charset="UTF-8">
 7 |     <title>Dracula Theme LinkFree</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="icon" href="favicon.ico" type="image/x-icon"/>
10 | </head>
11 | 
12 | <body>
13 |     <img id="userPhoto" src="img/045-dracula.svg" alt="User Photo">
14 |     
15 |     <a href="" id="userName">@Dracula</a>
16 |     <div id="links">
17 |         <a class="link" href="https://draculatheme.com/" target="_blank">SITE</a>
18 |         <a class="link" href="https://github.com/dracula/dracula-theme" target="_blank">REPOSITORY</a>
19 |     </div>
20 | 
21 |     <footer>
22 |         🧛🏻‍♂️ Dark theme for all the things!
23 |     </footer>
24 | 
25 |     <!-- Javascript -->
26 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
27 |     <script  src="index.js"></script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/Templates/draculaTheme/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap" rel="stylesheet');
 2 | 
 3 | :root {
 4 |     --font: 'Fira Sans', sans-serif;
 5 |     
 6 |     --background: #282a36;
 7 |     --selection:#44475a;
 8 |     --comment:#6272a4;
 9 |     --purple:#bd93f9;
10 |     --white:#f8f8f2;
11 |     --pink:#ff79c6;
12 | }
13 | 
14 | body{
15 |     background-color: var(--background);
16 |     color: var(--white);
17 | }
18 | 
19 | footer{
20 |     text-align: center;
21 | 
22 |     color:var(--comment);
23 | 
24 |     font-family: var(--font);
25 |     font-size: 0.75rem;
26 |     font-weight: 400;
27 | }
28 | 
29 | #userPhoto{
30 |     width: 96px;
31 |     height: 96px;
32 | 
33 |     display: block;
34 | 
35 |     margin: 35px auto 20px;
36 | 
37 |     border-radius: 50%;
38 |     border: solid var(--purple) 2px;
39 | }
40 | 
41 | #userName{
42 |     width: 100%;
43 | 
44 |     color: var(--pink);
45 | 
46 |     font-family: var(--font);
47 |     font-size: 1rem;
48 |     font-weight: 400;
49 | 
50 |     text-align: center;
51 |     text-decoration: none;
52 | 
53 |     line-height: 1.25;
54 |     display: block;
55 | }
56 | 
57 | #links{
58 |     max-width: 675px;
59 |     width: auto;
60 | 
61 |     display: block;
62 | 
63 |     margin: 27px auto;
64 | }
65 | .link{
66 |     display: block;
67 |     margin-bottom: 20px;
68 |     padding: 17px;
69 | 
70 |     background-color: var(--background);
71 |     color:var(--comment);
72 | 
73 |     font-family: var(--font);
74 |     font-size: 1rem;
75 |     font-weight: 500;
76 | 
77 |     border-radius: 5px;
78 |     border: solid var(--purple) 1px;
79 | 
80 |     text-align: center;
81 |     text-decoration: none;
82 |     
83 |     transition: all .25s cubic-bezier(.08,.59,.29,.99);
84 |     
85 | }
86 | 
87 | .link:hover{
88 |     background-color: var(--selection);
89 |     color: var(--purple);
90 | }


--------------------------------------------------------------------------------
/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 | ![Preview Light](preview-light.png) |   ![Preview Dark](preview-dark.png)
 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 | <a class="link" href="#" target="_blank">#</a>
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/mnmlsm/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/mnmlsm/img/favicon.ico


--------------------------------------------------------------------------------
/Templates/mnmlsm/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | 
 5 | <head>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta charset="UTF-8">
 8 |     <meta name="robots" content="noindex,nofollow" />    <title>MNMLSM Theme LinkFree</title>
 9 |     <link rel="stylesheet" href="style.css">
10 |     <link rel="icon" href="img/favicon.ico" type="image/x-icon" />
11 | </head>
12 | 
13 | <body>
14 |     <div class="container">
15 |     <div class="content">
16 |         <img id="userPhoto" src="img/avatar.svg" alt="User Photo">
17 | 
18 |         <h1><a href="#" id="userName" rel="noopener">@MNML</a></h1>
19 |         <div id="links">
20 |             <a class="link" href="https://www.netflix.com/de/title/80114460"  rel="noopener">🍿 Netflix Documentary</a>
21 |             <a class="link" href="https://en.wikipedia.org/wiki/Minimalism" rel="noopener">📚 Wikipedia Article</a>
22 |             <a class="link" href="https://siiimple.com/" rel="noopener">🖥 Minimalist Website Gallery</a>
23 |         </div>
24 | 
25 |         <footer>
26 |             We like it minimal. </footer>
27 |     </div>
28 | </div>
29 | 
30 | 
31 | </body>
32 | 
33 | </html>


--------------------------------------------------------------------------------
/Templates/mnmlsm/preview-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/mnmlsm/preview-dark.png


--------------------------------------------------------------------------------
/Templates/mnmlsm/preview-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MichaelBarney/LinkFree/235a9674ed689421ed4108adac143ee483a85c4d/Templates/mnmlsm/preview-light.png


--------------------------------------------------------------------------------
/Templates/mnmlsm/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 2 | 
 3 | :root {
 4 |     --font: 'Roboto Mono', monospace;
 5 |     --background: white;
 6 |     --color: #232333;
 7 | }
 8 | 
 9 | body{
10 |     background-color: var(--background);
11 |     color: var(--color);
12 |     font-family: var(--font);
13 |     margin: 0;
14 |     padding: 0;
15 |     text-rendering: optimizeLegibility;
16 |     -webkit-font-smoothing: antialiased;
17 |     display: flex;
18 |     min-height: 100vh;
19 |     min-width: 100vw;
20 |     flex-direction: column;
21 | 
22 | }
23 | 
24 | .container {
25 |     flex: 1 auto;
26 |     display: flex;
27 |     flex-direction: column;
28 |     justify-content: center;
29 |     text-align: center;
30 | }
31 | 
32 | .content{
33 |     display: flex;
34 |     flex-direction: column;
35 |     flex: 1 auto;
36 |     align-items: center;
37 |     justify-content: center;
38 |     margin: 0;
39 | }
40 | 
41 | footer{
42 |     text-align: center;
43 |     font-size: 0.75rem;
44 |     font-weight: 400;
45 |     padding-bottom: 20px;
46 | }
47 | 
48 | #userPhoto{
49 |     width: 96px;
50 |     height: 96px;
51 |     display: block;
52 |     margin: 35px auto 20px;
53 |     border-radius: 50%;
54 |     border: solid var(--color) 2px;
55 | }
56 | 
57 | #userName{
58 |     width: 100%;
59 |     font-size: 1.5rem;
60 |     font-weight: 400;
61 |     text-align: center;
62 |     text-decoration: none;
63 |     line-height: 1.25;
64 |     display: block;
65 |     color: var(--color);
66 | }
67 | 
68 | #links{
69 |     max-width: 90%;
70 |     width: auto;
71 |     display: block;
72 |     margin: 27px auto;
73 | }
74 | 
75 | .link{
76 |     display: block;
77 |     margin-bottom: 20px;
78 |     padding: 17px;
79 |     font-size: 1rem;
80 |     font-weight: 500;
81 |     border-radius: 5px;
82 |     border: dashed var(--color) 2px;
83 |     text-align: center;
84 |     text-decoration: none;  
85 |     color: var(--color);  
86 |     word-wrap: break-word;
87 | 
88 | }
89 | 
90 | 
91 | 
92 | @media (prefers-color-scheme: dark) {
93 | 
94 |     :root {        
95 |         --background: #202124;
96 |         --color: white;
97 |     }
98 |   }
99 |   


--------------------------------------------------------------------------------