About page 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--
It's an about page, hope you like it!
-->

<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

<!-- this is the tooltip, which basically changes what it looks like when you lover the links -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:500,
tip_fade_speed:150,
attribute:"title"
});
});
})(jQuery);
</script>

<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=ABeeZee&display=swap" rel="stylesheet">

<style type="text/css">
/* to change colors, simply replace the hex codes I have with ones of your desire. You can edit the font-size and font-family if you want */

#s-m-t-tooltip {
    margin:20px;
    padding:10px;
    background:#000;
    border-radius:2px;
    font-family: 'ABeeZee', sans-serif;
    font-size:12px;
    color:#ce235d;
    letter-spacing:1px;
    text-transform:uppercase;
    z-index:99;
    max-width:100px;
}

body {
    background-color:#0d090a;
    font-size:11px;
    font-family: 'ABeeZee', sans-serif;
    color:#ed3273;
    margin:0px;
}

a {
    text-decoration:none;
    color:#2d1d26;
}

/* this just holds everything in the center */
#bigthing {
    margin:0px auto;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    position:fixed;
    width:900px;
    height:400px;
    background:transparent;
}

/* what it says on the box, where the text is, the gradient doesn't have to have a transparency, find what xolors work and change it up! */
#textspace {
    margin-left:300px;
    margin-top:300px;
    height:190px;
    width:460px;
    font-size:11px;
    letter-spacing:1px;
    text-align:right;
    line-height:150%;
    padding:20px;
    font-family: 'ABeeZee', sans-serif;
    text-transform:none;
    background-image:linear-gradient(to right, transparent 0%, #150e11 100%);
    position:absolute;
    border-right:2px dashed #ce235d;
    border-bottom:2px dashed #ce235d;
}

/* this is the title, if you want it longer I'd suggest editing the font size, you can edit the stroke too */
#title {
    font-family: 'Rubik', sans-serif;
    font-size:50px;
    text-transform:uppercase;
    -webkit-text-stroke: 2px #9f295d;
    color:#2d1d26;
    position:absolute;
    margin-top:240px;
    margin-left:415px;
    z-index:-2;
}

#links {
    position:absolute;
    margin-top:530px;
    margin-left:590px;
    width:500px;
}

/* these are the links at the bottom and they don't have to be this big, change this css any way you wanf! */
#links a {
    font-family: 'Rubik', sans-serif;
    font-size:50px;
    text-transform:uppercase;
    -webkit-text-stroke: 2px #9f295d;
    color:#2d1d26;
    display:inline-block;
    width:70px;
}

#corn {
    position:absolute;
    margin-top:-10px;
    margin-left:-150px;
    z-index:-1;
}

</style>

</head>

<body>

<div id="bigthing">
<div id="corn"><img src="https://i.imgur.com/AlDc9UV.png"></div><!--change the image here, simply replace the URL -->
<div id="title">dragon's lair</div> <!--The same with the title but don't make it very long unless you change the font size -->
<div id="links">
<a href="/" title="home">01</a> <!-- Type in different urls for links you want -->
<a href="/ask" title="ask">02</a>
<a href="/archive" title="archive">03</a>
</div>
<div id="textspace">Here is where you can type in your text. A couple of paragraphs at the most. </div>
</div>

</body>
</html>