sunflower about page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--
sunflower about page by tomba2
feel free to heavy edit and add as many images as you want but i'd prefer you not use this as a base. and uhh...irt the credit, you can change the pixel (instructions below) but please don't remove it or i'll hunt you down for sport and eat your bones.

also if you use this, i'd love to see what you do with it so feel free to message me
-->

<!-- the shortcut icon refers to the favicon (the little icon in the top of your tab). if you find a pixel you want to use, you would copy the image location/URL and replace the URL after href-->

<link rel="shortcut icon" href="https://78.media.tumblr.com/65eec1a0a2429a4495fd0c3353466eb2/tumblr_inline_nokub9VzCZ1ry72eo_75sq.gif">

<!-- GENERAL NOTES

1. if you want to change the background, snatch a URL from a suitably sized image and replace the url after background-image:url in quotes. currently, the background is set to be fullsized (background-size:100%) but you can change that for tiles and stuff. (eg: repeat instead of 100% for grids) more info here: https://www.w3schools.com/cssref/css3_pr_background-size.asp

and if you don't want a background, just don't insert a link into background-image:url...and change the background-color to whatever you want. (r/n it's set to #f5e4ff)

2. to change the link color, find the sections that say a{ and a:hover{ and alter those colors (you'll need hex codes)

3. you can change the font and its size under body. if you change font-size, you'll want to alter the line-height to be approx. 2px larger. as for font-family, you'll have to use generic tumblr compatible fonts or add custom font.

4. to change the text color, go to #content and change the color to a diff. hex code

5. you can change the title (that shows up in the tab) under <title> (currently it's set to sample title)

6. to change the credit pixel, ctrl + f </body>, the credit will be right above that. get the link location for a pixel you like, and replace the URL. you can also change the position/size under #credit, but please make it at least....vaguely visible.........possibly........

7. if you don't want the corner images to blur/be clickable, just remove the <a href="/"> and </a> parts so it no longer has a link associated with it.

8. i think that's all 0_0

-->

<title>SAMPLE TITLE</title>

<link rel="alternate" type="application/rss+xml" href="{RSS}">

<script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>

<script type="text/javascript" src="http://static.tumblr.com/8oupd2j/BYTm7u5cn/tag_search.js"></script>

<style type="text/css">

iframe#tumblr_controls {-webkit-filter:invert(100%);-moz-filter:invert(100%);-filter:invert(100%);right:3px;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear; z-index:999999;}

iframe#tumblr_controls:hover{opacity:1;}

::-webkit-scrollbar {
width:0px;
}

body {
background-color:#f5e4ff;
background-image:url('');
background-size: 100%;
background-attachment: fixed;
font-family:courrier;
font-size:20px;
line-height:22px;
text-align:justify
}

#box {
margin: 110px auto;
width: 350px;
height: 250px;
text-align: center;
position:relative;
padding: 5px;
background-color:#fff;
border-radius:5px;
box-shadow: 0px 0px 20px 50px #fff;
}

#title{
margin-top:60px;
font-size:65px;
font-weight:bold;
text-align:center;
-webkit-filter: blur(.9px);
}


a{
text-decoration:none;
color:#832dce;
}

a:hover{
color:#d2a8ed;-webkit-filter: blur(.9px);
}

#header{
line-height:90%;
}

#content {
margin-left:10px;
color:#8c8c8c;
padding:6px;
position:absolute;
height:240px;
width:350px;
text-align:left;
overflow:auto;
border-radius:30px;
}

#corner img {
position:relative;
margin-top:-160px;
margin-left:350px;
max-height:600px;
}

#corner1 img {
position:relative;
margin-top:-850px;
margin-left:-550px;
max-height:510px;
}

#credit{
position:fixed;
bottom:10px;
left:10px;
}

</style>
 <script src="http://assets.tumblr.com/assets/scripts/tumblelog_post_message_queue.js?_v=cf140c0f1704d59bad98d3be7adddfde"></script>

<link rel="stylesheet" type="text/css" href="http://assets.tumblr.com/fonts/gibson/stylesheet.css?v=3">

</head>

<body><center>

<!--
if you're a douchebag and want to use autoplay (like me) you can grab the last part of a youtube video's URL (after /watch?v=) and replace the URL after /embed/

<iframe width="0" height="0" src="https://www.youtube.com/embed/TrUoGJfhMoE?autoplay=1&loop=1" frameborder="0" allowfullscreen> </iframe>

also you should watch this video regardless. here's a link just in case it is difficult: https://www.youtube.com/embed/TrUoGJfhMoE?autoplay=1&loop=1
-->

<style>figure{margin:0}.tmblr-iframe{position:absolute}.tmblr-iframe.hide{display:none}</style>


<div id="title"><a href="/" >title here </a></div>

<div id="box">

<div id="content">

<h2 style="text-align:center";>sample header</h2> <br>
you can also alter the sizing of the header by using any value from <h1> this</h1> to <h6>this</h6>

this is some text ! this is how you make a line<br>break<br><br>if you run out of space, a scrollbar will appear.
this is how you make a bulleted list. for more information about customizing that, <a href="https://www.w3schools.com/html/html_lists.asp"> here's </a> a webpage. (btw, that's how you insert a link)
 <ul style="list-style-type:disc">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>yowapeda's still good</li>
  <li>item 4</li>
</ul>

if you want to insert images/pixels throughout your bio, this is a pretty simple way i think. if you want it left oriented, remove the div styling. <br>

<div style="text-align: center;"><img src="https://78.media.tumblr.com/tumblr_ly35k9b4he1qce38f.gif"></div>

wooooo if you have more questions you can send them to my <a href="http://tomba2.tumblr.com/ask">main</a> blog (@tomba2)
<br>
</div>

<!-- find the url of a transparent image/render you want to use (if you can make one yourself, upload it somewhere and get the url that way) and then put it after img src. if you notice some wacky sizing, then ctrl + find "corner" and go up and alter the parameters-->

<div id="corner"><a href="/"><img src="https://img00.deviantart.net/324f/i/2013/170/e/8/lucky_star_by_nicepantsu-d69rlf2.png"></a></div>

<!-- corner1 is optional (duh) but it definitely complicates the code a lot. to manage both corner images, you'd have to scroll back up to corner and corner1 and alter the parameters to suit what you want it to look like. keep in mind that it will probably look different on the theme viewer vs on your actual blog -->

<!--
<div id="corner1"><a href="/"><img src="http://i.imgur.com/dlNsGcd.png"></div>
-->

<div id="credit"><a href="http://tomba2.tumblr.com/" title="sunflower page"><img src="https://static.tumblr.com/14cf6b11fabeb965cc641288afd57fc3/psp4fjh/W2Yp1puls/tumblr_static_8bs3j430vgo44w0k0o4o400c8.gif"></a></div>

</body>
</html>