API tools faq
paste
Advertisement
mogimochi

About Page [03] Shizukana

mogimochi
Dec 11th, 2013
11,616
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. About Page 03 Shizukana
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14.  
  15. ---------------------------------------------------------------------------
  16. Please look out for notes throughout the code
  17. to help you in customizing the page!!
  18. ---------------------------------------------------------------------------
  19.  
  20. --------------------------------------------------- UPDATE VER 120914 -->
  21.  
  22. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24. <link rel="shortcut icon" href="{Favicon}" />
  25.  
  26. <style type="text/css">
  27.  
  28. @font-face { font-family: "bitxmap"; src: url('https://dl.dropboxusercontent.com/s/sq28ejp56rarabs/BitxMap%20Font%20tfb.ttf'); }
  29.  
  30.  
  31. /** -------------------- TEXT SELECTION CUSTOMIZATON ------------------ **/
  32. ::selection {
  33. background: #dddddd; /**background colour for when you select text!**/
  34. color: #888888; /**text colour for when you select text!**/
  35. text-shadow: 0 0 0 transparent;
  36. }
  37. ::-moz-selection {
  38. background: #dddddd; /**background colour for when you select text!**/
  39. color: #888888; /**text colour for when you select text!**/
  40. text-shadow: 0 0 0 transparent;
  41. }
  42.  
  43.  
  44. /** ------------------ WEBKIT SCROLLBAR CUSTOMIZATON ------------------ **/
  45. ::-webkit-scrollbar { width: 5px; }
  46. ::-webkit-scrollbar-track-piece { background-color:#fff;/**scrollbar bg**/}
  47. ::-webkit-scrollbar-thumb:vertical {
  48. width: 5px;
  49. background-color: #cccccc; /** colour of the /actual/ scrollbar **/
  50. }
  51.  
  52.  
  53. /** --------------------- BACKGROUND CUSTOMIZATON --------------------- **/
  54. body {
  55. background-color: #ffffff; /**background colour**/
  56. background-image: url(http://static.tumblr.com/b46ceb559a4e2b70dce7d4558c28343f/2icx37z/Roxmvf5x3/tumblr_static_tumblr_lsdjv9k5e21r2gm7fo4_250.jpg);
  57. /**background image url go between the brackets**/
  58. background-attachment: fixed;
  59. margin: 0;
  60. word-wrap: break-word;
  61. font-family: bitxmap;
  62. }
  63. a { text-decoration:none; }
  64.  
  65.  
  66. /** ----------------------- TOOLTIP CUSTOMIZATON ---------------------- **/
  67. #s-m-t-tooltip {
  68. padding: 2px 5px 2px 5px;
  69. margin: 20px 14px 7px 10px;
  70. font-family: courier new;
  71. text-transform: uppercase;
  72. font-size: 8px;
  73. line-height: 10px;
  74. letter-spacing: 1px;
  75. z-index: 999;
  76. text-align: center;
  77. background-color: #000000; /** background colour of tooltip **/
  78. color: #dddddd; /** text colour of tooltip **/
  79. }
  80.  
  81.  
  82. #main { width: 500px; }
  83. .mainpic { border-radius:0 0 20px 20px;width:500px;margin-top:16px; }
  84.  
  85.  
  86. /** --------------------- 'ABOUT ME' CUSTOMIZATION' ------------------- **/
  87. .titlee {
  88. font-family: courier new;
  89. font-size: 8px;
  90. text-transform: uppercase;
  91. letter-spacing: 2px;
  92. padding: 4px 0;
  93. position: fixed;
  94. width: 520px;
  95. margin-left: -10px;
  96. background-color: #000000; /** background of title **/
  97. color: #ffffff; /** text colour of title **/
  98. }
  99.  
  100.  
  101. /** ----------------------- LINKS CUSTOMIZATION' ---------------------- **/
  102.  
  103. .navigate {
  104. font-family: courier new;
  105. font-size: 8px;
  106. text-transform: uppercase;
  107. letter-spacing: 2px;
  108. margin-top: -20px;
  109. }
  110. .navigate a {
  111. padding: 2px 0 2px 3px;
  112. border-radius: 3px;
  113. opacity: 0.7;
  114. background-color: #ffffff; /** background colour of links **/
  115. color: #bbbbbb; /** text colour of links **/
  116. border: 1px solid #dddddd; /** border of links **/
  117. transition: 0.4s;
  118. -moz-transition: 0.4s;
  119. -webkit-transition: 0.4s;
  120. -o-transition: 0.4s;
  121. }
  122. .navigate a:hover { opacity: 1; }
  123.  
  124.  
  125. /** --------------------------- CONTENT --------------------------------**/
  126. #content { margin-top: 30px; width: 520px;height: 400px;overflow:auto;}
  127.  
  128.  
  129. /** ----------------------- BASIC INFO BOX -----------------------------**/
  130. #box { width: 500px; height: auto;}
  131. .box1 {
  132. font-size: 10px;
  133. text-align: left;
  134. width: 207px;
  135. float: left;
  136. padding: 10px 20px;
  137. color: #aaaaaa; /** text colour **/
  138. border-right: 1px solid #dddddd; /** colour of divider **/
  139. }
  140. .box1 i,em { color: #fc9783; } /** italic colour, for name: / age: / etc **/
  141.  
  142.  
  143. /** --------------------------- QUOTE BOX ------------------------------**/
  144. .box2 {
  145. font-family: courier new;
  146. font-size: 10px;
  147. text-transform: uppercase;
  148. text-align: justify;
  149. text-align: left;
  150. width: 187px;
  151. float: left;
  152. padding: 10px 0 10px 60px;
  153. margin-left: -1px;
  154. color: #aaaaaa; /** quote text**/
  155. border-left: 1px solid #dddddd; /** colour of divider **/
  156. }
  157. .box2 a {
  158. background-color: #ffffff; /** quote background **/
  159. color: #aaaaaa; /** quote text**/
  160. padding: 0 3px;
  161. }
  162. .quo {
  163. margin-left: -40px;
  164. font-size: 60px;
  165. font-family: georgia;
  166. color: #5fdfed; /** “ quotation mark colour **/
  167. text-shadow: 3px 3px 0 #eeeeee; /** “ quotation mark shadow **/
  168. }
  169. .quote { margin-top: -67px; }
  170.  
  171.  
  172. /** ------------------- BIOGRAPHY BOX CUSTOMIZATION --------------------**/
  173. #bio {
  174. width: 480px;
  175. float: left;
  176. margin-top: 10px;
  177. padding: 20px 10px;
  178. font-size: 10px;
  179. text-align: justify;
  180. border-bottom: 1px solid #dddddd; /** colour of divider **/
  181. border-top: 1px solid #dddddd; /** colour of divider **/
  182. color: #aaaaaa; /** colour of bio text **/
  183. text-shadow: 1px 1px #ffffff; /** colour of text shadow **/
  184. }
  185. #bio b,strong { color: #fc9783; font-weight: 400; } /** bold text **/
  186. #bio i,em { color: #c7a9ae; font-style: none;} /** italic text **/
  187. #bio a {color:#f5aa71;border-bottom:1px solid #f5aa71;} /** linked text **/
  188. #bio a:hover {color: #dddddd;border-bottom:1px solid #dddddd;} /** hover linked text **/
  189.  
  190. {CustomCSS}
  191.  
  192. </style>
  193. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  194. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  195. <script>
  196. (function($){
  197. $(document).ready(function(){
  198. $("a[title]").style_my_tooltips({
  199. tip_follows_cursor:true,
  200. tip_delay_time:0,
  201. tip_fade_speed:0,
  202. attribute:"title"
  203. });
  204. });
  205. })(jQuery);
  206. </script>
  207. </head>
  208. <body>
  209.  
  210. <center><div id="main">
  211.  
  212. <div class="titlee">about me</div><!-- the topbar title -->
  213.  
  214. <!--------- your image link to be placed in between -------------
  215. ----------- the quotation marks after src= ------------>
  216. <img class="mainpic" src="https://31.media.tumblr.com/f0ca6c06102b058a038f232253bbb81c/tumblr_inline_mxmtysDNzU1qdg13t.png">
  217. <!--img credit to http://glidingontherainbow.tumblr.com/post/68891558360-->
  218.  
  219. <div class="navigate"><!-------------- NAVIGATION LINKS ------------------>
  220. <!--
  221. TO HAVE TOOLTIP POP-UP:
  222. <a title="tooltip text" href="/link">link title</a>
  223.  
  224. WITHOUT TOOLTIP POP-UP:
  225. <a href="/link">link title</a>
  226. -->
  227. <a href="/">restart</a>
  228. <a href="/ask">message</a>
  229. <a href="/archive">archives</a>
  230. <a href="/">link 1</a>
  231. <a href="/">link 2</a>
  232. <a href="/">link 3</a>
  233. <a title="page by yukoki" href="http://yukoki.tumblr.com">©</a>
  234. <!----------- NEVER REMOVE THE CREDIT, PLEASE AND THANK YOU. ------------->
  235. </div><!--navigate-->
  236.  
  237.  
  238.  
  239. <div id="content">
  240.  
  241. <!------------------------- BASIC INFORMATION BOX ------------------------>
  242. <div id="box">
  243. <div class="box1">
  244. <!-- EXAMPLE:
  245. <i>name:</i> yuko<br>
  246. <i>birthday:</i> 24.06.99 (14)<br>
  247. <i>location:</i> singapore<br>
  248. <i>status:</i> active<br>
  249. -->
  250. <i>name:</i> name<br>
  251. <i>birthday:</i> xx/yy/zz<br>
  252. <i>location:</i> country<br>
  253. <i>status:</i> ???<br>
  254. </div><!--box1-->
  255.  
  256.  
  257. <!----------------------------- QUOTE BOX -------------------------------->
  258. <div class="box2">
  259. <div class="quo">“</div>
  260. <div class="quote">
  261. <a href="">your quote here.</a>
  262. </div><!--quote-->
  263. </div><!--box2-->
  264.  
  265. </div><!--box-->
  266.  
  267.  
  268. <!--------------------------- BIOGRAPHY BOX ------------------------------>
  269. <div id="bio">
  270. <!------------------------- YOU BIO GOES HERE! ---------------------------- cheat sheet to make italic/bold/linked text here:
  271. http://yukoki.tumblr.com/post/36810349024/cheat-sheet
  272. -------------------------------------------------------------------------->
  273. </div><!--end of bio-->
  274.  
  275. </div><!--content-->
  276.  
  277. </div><!--main--></center>
  278.  
  279. </body>
  280. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!