This page was left intentionally unstyled for ease of use as a template for a Link-In-Bio type of web page and so that it would not be percieved as a malicious file. The default styling is made to emulate Linktree as exactly as possible, but you should customize it to your needs and maybe even spend some time on W3Schools.org learning a little code! But for now, feel free to follow this template. The following should be copied and pasted as a replacement for ALL TEXT in your index.html file. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap" rel="stylesheet">
    <title>My Links</title> <!-- The Title of Your Web Page -->

    <link href="style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
  <div class="center">
  <div class="icon"> </div>
    <h3>Your Name Here</h3> <!-- Your Name -->
    <h4>Your Title Here</h4> <!-- Your Title, such as "Artist" or "Illustrator" -->

<!-- All link buttons should follow this format. The class assignments tell the CSS stylesheet to apply different appearances.
In order to change the appearance of any element, please do so on the CSS Stylesheet. For any link you'd like to add a new icon to,
you will need to assign a new class and designate its features, demonstrated in the stylesheet, and upload the image. -->
<a class="list" href="#YOUR URL HERE#">Portfolio Website</a>
<a class="twitch list" href="#YOUR URL HERE#">Twitch</a>
<a class="list" href="#YOUR URL HERE#">Patreon</a>
<a class="list youtube" href="#YOUR URL HERE#">Youtube</a>
<a class="list" href="#YOUR URL HERE#">BlueSky</a>
<a class="list" href="#YOUR URL HERE#">Tip Jar</a>
</div>
  </body>
</html>
This code should be copied and pasted as a replacement for ALL TEXT in your style.css file. 

 /* Link-In-Bio template by ixellent aka Kathryn DiMartino - I have created a Dark Themed version by default 
but please replace all colors and images as desired and redistribute it as I am doing, under CC BY-SA 4.0. */

body {
  background-color: black;
  color: white;
  font-family: "Google Sans", sans-serif;
  font-weight: 500;
  padding: 50px 15px;
}

a {color: white; text-decoration: none;}

.center {
  text-align:center; margin: 0 auto;}
  
  /* Your Name Appearance*/
  h3 {font-weight: bold; font-size: 25px; margin-bottom: -15px;}
  /* Your Title Appearance*/
  h4 {}

p { text-align:center;}
p a {text-decoration: underline;}

/* Don't forget to use your own logos and images! This one is square so you might need to adjust for other ratios! */
.icon {border-radius: 50%; width: 100px; height: 100px; margin: 0 auto; background: url("yourlogo.png") no-repeat center/100%;}

/*Link Appearance*/
a.list { 
max-width: 500px; 
background-color: #222; 
border-radius: 10px; 
display:block; 
margin: 0 auto 14px; 
padding-top: 22px;
padding-bottom: 22px;
}

a.list:hover {background-color: #333}


/* The following are examples for how you would add an icon or image to the left of your link entries*/
.twitch {background: url("twitchlogo.png") no-repeat #222;
background-size: 60px;
background-position: 2px 1px;}

.youtube {background: url("youtubelogo.png") no-repeat #222;
background-size: 70px;
background-position: 0 -4px;}
The following images may be downloaded for the purposes of this tutorial. Simply right click them (or long press on mobile devices) and "Save Image As...". You must then upload them to your Neocities root folder (aka the Home folder.)