About Page [01] Tsunkei

<!DOCTYPE html>
<html>
<head>

<!--

About Page 01 Tsunkei
by yukoki/s-ekki

1. Light/Heavy CSS editting is allowed.
2. Do not use as base code.
3. Do not remove credit.
4. Do not claim theme as your own.

----------------------------------------------------------------------
              Please look out for notes throughout the code
                 to help you in customizing the page!!
-----------------------------------------------------------------------

-->

<title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css'>

<style type="text/css">

body {
    background-color: #ffffff; /** background colour **/
    background-image: url(https://31.media.tumblr.com/d5f6e38dc9751a48f095b169ce7a29a9/tumblr_inline_n4umqth1RT1rshr70.png);
    /** background image to be placed between the brackets! **/
    background-attachment: fixed;
    margin: 0;
    word-wrap: break-word;
}
a { text-decoration:none; }

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track-piece { background-color: #ffffff; } /** scroll bar background **/
::-webkit-scrollbar-thumb:vertical {
    width: 1px;
    border: 3px solid #ffffff; /** scroll bar background **/
    background-color: #f9ded7; /** scroll bar **/
}

#main {
    width: 500px;
    margin-top: 110px;
}

.pgtitle {
    width: 480px;
    padding: 10px;
    background-color: rgba(255,255,255,0.5);
    /**

    if you want a black transparent background, replace this line with

    background-color: rgba(0,0,0,0.5);

    To change it to another colour, you have to find a colour picker, but instead of simply getting the 6 digit hexadecimal code, you've got to find the rgb value instead. The fourth value, is the opacity, which you can set to any value between 0.0 and 1.0. Use 1.0 if you want it to be completely solid.

    If you do decide to change it, you have to remember to change all of them throughout the rest of the code.

    **/
    font-family: yanone kaffeesatz; /** google web font; you can change it to whatever web-safe font family you can think of. **/
    color: #727272; /** colour of 'ABOUT ME' **/
    text-shadow: 1px 0 0 #ffffff; /** shadow of 'ABOUT ME' **/
    font-size: 24px;
    letter-spacing: 7px;
    text-transform: uppercase;
}

.infobox {
    width: 130px;
    height: 130px;
    margin-top: 10px;
    float: left;
}

.infoboxicon {
    background-color: rgba(255,255,255,0.5);
    padding: 20px;
    width: 130px;
    height: 130px;
    display: block;
}

.infoline {
    background-color: rgba(255,255,255,0.5);
    margin-top: 5px;
    padding: 4px 10px;
    width: 140px;
    font-family: yanone kaffeesatz;
    font-size: 14px;
    text-transform: uppercase;
    text-align: left;
    color: #555555; /** info lines' text colour **/
    border-left: 10px solid #f8c796; /** info lines' left borders **/
}

.biobox {
    float: right;
    background-color: rgba(255,255,255,0.5);
    margin-top: 10px;
    padding: 20px;
    width: 280px;
    height: 216px;
    font-family: calibri;
    overflow: auto;
    font-size: 10px;
    text-align: justify;
    color: #888888; /** bio box text colour **/
}

.biobox b, strong {color: #ddbd9e;} /** bio box bold text **/
.biobox i,em {color: #ffc99e;} /**bio box italic text **/
.biobox a {
    color: #bebebe; /** bio box links **/
    text-decoration: underline;
    transition: 0.6s;
    -moz-transition: 0.6s;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
}
.biobox a:hover { color: #777777; } /** bio box links hover **/

#linkbox {
    background-color: rgba(255,255,255,0.5);
    width: 500px;
    margin-top: 10px;
    height: 52px;
    float: right;
    line-height: 52px;
}

#linkbox a {
    background-color: #ffffff; /** bottom links background **/
    color: #c8ab8d; /** bottom links text **/
    font-family: calibri;
    font-size: 10px;
    margin: 0 2px;
    padding: 2px 7px;
    text-transform: uppercase;
    transition: 0.6s;
    -moz-transition: 0.6s;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
}
#linkbox a:hover {text-decoration: line-through;}

{CustomCSS}

</style>
</head>
<body>

<center>

<div id="main">

<div class="pgtitle">about me</div>

<div class="infobox">

<!-- the below line is where you key in the link to your icon. The actual image size is 130 px by 130px, but it auto-resizes as long as you have a square image. Remember to place it in between the quotation marks! -->

<img class="infoboxicon" src="https://31.media.tumblr.com/e2cdac38fef047eb433388018e6f338f/tumblr_inline_n4uqulCRh21rshr70.png">

<!-- the below section is where you key in your basic info below the image! You can change it to whatever you want tbh, just as long as you follow the basic example below:

<div class="infoline">name: harry potter</div>
<div class="infoline">age: 15</div>
<div class="infoline">country: britain</div>

-->

<div class="infoline">name: </div>
<div class="infoline">age: </div>
<div class="infoline">country: </div>

</div><!--infobox-->

<div class="biobox">

Here goes your biography!

<!------------------------------------------------------------------------
PLEASE WRITE YOUR BIO ABOVE!! (DO NOT WRITE IT IN BETWEEN THE ARROWS; MAKE SURE IT'S NOT FADED OUT AND GREYISH LIKE THE TEXT HERE!
IF YOU WANT TO LEARN HOW TO MAKE PARAGRAPHS, LINK SITES, BOLD TEXT, ITALIZE TEXT, UNDERLINE TEXT, ETC, GO HERE:

http://theme-hunter.tumblr.com/post/36665898985/cheat-sheet
------------------------------------------------------------------------->

</div><!--biobox-->

<div id="linkbox">

<a href="/">return</a>
<a href="/ask">message</a>
<a href="/archive">archive</a>
<a href="http://tumblr.com/dashboard">dashboard</a>
<a href="/">link 01</a>
<a href="/">link 02</a>
<a href="http://yukoki.tumblr.com">credit</a>

</div><!--linkbox-->

</div><!--main-->

</center>

</body>
</html>