1. <!--
  2.  
  3. PAGE THEME #001: ABOUT ME v.2
  4. by hellmouths.tumblr.com
  5.  
  6. · DON'T REDISTRIBUTE
  7. · DON'T USE AS BASE
  8. · DON'T REMOVE CREDIT
  9.  
  10. Contact me if there are any complications.
  11.  
  12. -->
  13.  
  14.  
  15. <html>
  16. <head>
  17.  
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  21.  
  22.  
  23. <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
  24.  
  25.  
  26. </head>
  27. <style type="text/css">
  28.  
  29.  
  30.  
  31. body {
  32. background-color:#242424;
  33. color:#919191;}
  34.  
  35. a { text-decoration:none; color:#789e99; }
  36. a:hover { text-decoration:underline; color:#94c9b8; }
  37.  
  38.  
  39.  
  40. #content {
  41. width:840px;
  42. font-family:Baskerville;
  43. font-size:11px;
  44. line-height:130%;
  45. margin:90px auto; }
  46.  
  47. #side {
  48. padding:30px;
  49. height:520px;
  50. overflow:hidden;
  51. width:280px;
  52. background-color:#272727;
  53. display:inline-block; }
  54.  
  55. #about {
  56. padding:30px;
  57. position:fixed;
  58. overflow:auto;
  59. height:500px;
  60. display:inline-block;
  61. width:440px;
  62. border-bottom:20px solid #2b2b2b;
  63. background-color:#2b2b2b;
  64. text-align:justify;}
  65.  
  66.  
  67. /* SCROLLBAR */
  68.  
  69. ::-webkit-scrollbar-thumb:vertical {
  70. background-color:#333333;
  71. border-top:2px solid #333333;
  72. border-bottom:2px solid #333333;
  73. height:auto;}
  74. ::-webkit-scrollbar-thumb:vertical:hover{
  75. background-color:#333333;}
  76. ::-webkit-scrollbar-thumb:horizontal{
  77. background-color:#333333;
  78. height:auto;}
  79. ::-webkit-scrollbar-thumb:horizontal:hover{
  80. background-color:#333333;}
  81. ::-webkit-scrollbar{
  82. height:10px;
  83. width:7px;
  84. }
  85.  
  86.  
  87. .top {
  88. letter-spacing:1px;
  89. text-transform:uppercase;
  90. font-weight:bold;
  91. text-align:center;
  92. font-size:10px;
  93. font-family:arial;
  94. padding-bottom:10px;
  95. margin-bottom:30px;
  96. border-bottom:3px double #333333;
  97. }
  98.  
  99. .head {
  100. font-size:10px;
  101. text-align:right;
  102. font-weight:bold;
  103. letter-spacing:1px;
  104. padding:2px 4px 1px 4px;
  105. color:#679187;
  106. text-transform:uppercase;
  107. font-family:arial;
  108. background-color: #313131; }
  109.  
  110. .blurb { 
  111. padding:10px 0px;
  112. margin:10px 0;
  113. line-height:170%; }
  114.  
  115. .back {
  116. letter-spacing:1px;
  117. font-family:arial;
  118. font-size:10px;
  119. text-transform:uppercase;
  120. font-weight:bold;
  121. }
  122.  
  123. #topimage { width:; }
  124. #topimage img { width:440px; height:120px; }
  125.  
  126.  
  127.  
  128. /* CREDIT */
  129.  
  130. .cred { font-family:calibri; letter-spacing:1px; font-size:10px; bottom:2px; right:4px; position:fixed; padding:10px; text-align:right; font-weight:bold; }
  131.  
  132. .cred:hover #name { margin-bottom:0;
  133. -webkit-transition: all 0.2s ease-out;
  134. -o-transition: all 0.2s ease-out;
  135. -webkit-transition: all 0.2s ease-out;
  136. -moz-transition: all 0.2s ease-out;}
  137.  
  138. .cred:hover #star { opacity:0;
  139. -webkit-transition: all 0.2s ease-out;
  140. -o-transition: all 0.2s ease-out;
  141. -webkit-transition: all 0.2s ease-out;
  142. -moz-transition: all 0.2s ease-out;}
  143.  
  144. #star { font-size:20px; padding-bottom:10px; }
  145. #name { margin-bottom:-36px;
  146. -webkit-transition: all 0.2s ease-out;
  147. -o-transition: all 0.2s ease-out;
  148. -webkit-transition: all 0.2s ease-out;
  149. -moz-transition: all 0.2s ease-out;}
  150. #name a { color:#94c9b8; }
  151. </style>
  152.  
  153.  
  154. <body>
  155. <div class="cred"><div id="star">★</div>
  156. <div id="name"><i>page theme by</i> <br /><a href="http://hellmouths.tumblr.com">HELLMOUTHS</a></div>
  157. </div>
  158.  
  159.  
  160.  
  161. <div id="content">
  162.  
  163.  
  164.  
  165.  
  166. <div id="side">
  167.  
  168.  
  169. <!-- SIDE BLURB ONE BEGINS HERE -->
  170.  
  171. <div class="head">HEADER</div>
  172. <div class="blurb">
  173.  
  174. This is where you place the text in your first side blurb.
  175. This could be a perfect spot for your basic "about me".
  176. Just delete this text and replace it with your own (in "Edit HTML").
  177.  
  178. </div><br><br>
  179.  
  180. <!-- SIDE BLURB ONE ENDS HERE -->
  181.  
  182.  
  183. <!-- SIDE BLURB TWO BEGINS HERE -->
  184.  
  185. <div class="head"> HEADER </div>
  186. <div class="blurb">
  187.  
  188. This is where you place the text in your second side blurb.
  189. Here you could type in testimonials you've gotten.
  190. Just delete this text and replace it with your own (in "Edit HTML").
  191.  
  192. </div><br><br>
  193.  
  194. <!-- SIDE BLURB TWO ENDS HERE -->
  195.  
  196.  
  197. <!-- SIDE BLURB THREE BEGINS HERE -->
  198.  
  199. <div class="head"> HEADER </div>
  200. <div class="blurb">
  201.  
  202. This is where you place the text in your third side blurb.<br>
  203. To add more blurbs into this sidebar, copy everything in "Edit HTML" between these two lines: <br /><br />
  204.  
  205. "&lt;!-- SIDE BLURB <b>ONE</b> BEGINS HERE --&gt;"<br>
  206. "&lt;!-- SIDE BLURB <b>ONE</b> ENDS HERE --&gt;"
  207.  
  208. <br><br>Find them in "Edit HTML", jump down in the code a few lines and paste it underneath: <br><br>"&lt;!-- SIDE BLURB <b>THREE</b> ENDS HERE --&gt;"
  209.  
  210. </div>
  211.  
  212. <!-- SIDE BLURB THREE ENDS HERE -->
  213.  
  214.  
  215. </div>
  216.  
  217.  
  218.  
  219.  
  220.  
  221.  
  222. <div id="about">
  223.  
  224. <div id="topimage">
  225. <img src="IMAGE URL">
  226. </div><br>
  227.  
  228.  
  229. <div class="top">
  230. <a href="/">LINK</a> &nbsp;·&nbsp;
  231. <a href="/">LINK</a> &nbsp;·&nbsp;
  232. <a href="/">LINK</a> &nbsp;·&nbsp;
  233. <a href="/">LINK</a>
  234. </center></div>
  235.  
  236.  
  237.  
  238.  
  239.  
  240.  
  241. <!-- BLURB ONE BEGINS HERE -->
  242.  
  243.  
  244. <div class="head"> HEADER </div>
  245. <div class="blurb">
  246.  
  247. This is where you place the text in your first blurb.
  248. For example, your favorite television shows or movies.
  249. Just delete this text and replace it with your own (in "Edit HTML").
  250.  
  251. </div>
  252. <br><br>
  253.  
  254. <!-- BLURB ONE ENDS HERE -->
  255.  
  256.  
  257.  
  258.  
  259.  
  260. <!-- BLURB TWO BEGINS HERE -->
  261.  
  262.  
  263. <div class="head"> HEADER </div>
  264. <div class="blurb">
  265.  
  266. This is where you place the text in your second blurb.
  267. For example, your favorite books and authors.
  268. Just delete this text and replace it with your own (in "Edit HTML").
  269.  
  270. </div>
  271. <br><br>
  272.  
  273.  
  274. <!-- BLURB TWO ENDS HERE -->
  275.  
  276.  
  277.  
  278.  
  279.  
  280. <!-- BLURB THREE BEGINS HERE -->
  281.  
  282.  
  283. <div class="head"> HEADER </div>
  284. <div class="blurb">
  285.  
  286. This is where you place the text in your second blurb.
  287. For example, links to your tags or other accounts.
  288. Just delete this text and replace it with your own (in "Edit HTML").
  289.  
  290. </div>
  291.  
  292.  
  293. <!-- BLURB THREE ENDS HERE -->
  294.  
  295.  
  296.  
  297. </div>
  298. </div>
  299. <center>
  300.  
  301. <div class="back">
  302. <a href="YOUR URL">BACK TO BLOG</a>
  303. </div></center>
  304.  
  305. </body>
  306. </html>