API tools faq
paste
glam0urkills

「花樣年華」ABOUT ME PAGE I

glam0urkills
May 19th, 2016
724
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.59 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. 「花樣年華」ABOUT ME PAGE I
  8. by @imjaebumx.tumblr.com
  9.  
  10. - don't claim this theme as your own
  11. - you can heavily edit it
  12. - but please keep all the credits~
  13. - thanks for using my theme .3.
  14.  
  15. -->
  16.  
  17. {block:Description}
  18. <meta name="description" content="{MetaDescription}" />
  19. {/block:Description}
  20. <meta charset="utf-8">
  21. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  22. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25.  
  26.  
  27. <!--------- SCRIPTS DO NOT REMOVE ---------->
  28.  
  29. <!----------- CUSTOM FONT ------------->
  30.  
  31. <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  32.  
  33.  
  34. <!------------ TOOLTIPS ---------------->
  35.  
  36. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  37. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  38. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  39. <script>
  40. (function($){
  41. $(document).ready(function(){
  42. $("[title]").style_my_tooltips({
  43. tip_follows_cursor:true,
  44. tip_delay_time:200,
  45. tip_fade_speed:300
  46. });
  47. });
  48. })(jQuery);
  49. </script>
  50.  
  51. <!------------ FONT AWESOME SCRIPT BY AZURETHEMES ------------->
  52. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  53.  
  54.  
  55.  
  56.  
  57. <style type="text/css">
  58.  
  59.  
  60.  
  61. /* ---------------------------- GENERAL ----------------------------- */
  62.  
  63. ::-moz-selection {
  64. background: #f8f8f8; /* CHANGE TEXT SELECTION BACKGROUND COLOR */
  65. color: #707070; /* CHANGE TEXT SELECTION COLOR */
  66. }
  67.  
  68. ::selection {
  69. background: #f8f8f8; /* CHANGE TEXT SELECTION BACKGROUND COLOR */
  70. color: #707070; /* CHANGE TEXT SELECTION COLOR */
  71. }
  72.  
  73. ::-webkit-scrollbar {width:11px;height:11px;background:#f8f8f8;} /* CHANGE THIS ACCORDING TO THE BODY BACKGROUND COLOR */
  74. ::-webkit-scrollbar-thumb {background:#707070;} /* CHANGE SCROLLBAR COLOR */
  75. ::-webkit-scrollbar,::-webkit-scrollbar-thumb {border:5px solid #f8f8f8; } /* CHANGE THIS ACCORDING TO THE BODY BACKGROUND COLOR */
  76.  
  77. #s-m-t-tooltip {
  78. max-width:300px;
  79. padding:5px;
  80. margin:20px 20px 20px 20px;
  81. text-transform:uppercase;
  82. font-family:'Lato';
  83. font-size:7px;
  84. font-style:none;
  85. letter-spacing:1px;
  86. color:#c6c6c6; /* CHANGE TOOLTIP TEXT COLOR */
  87. background-color:#ffffff; /* CHANGE TOOLTIP BACKGROUND COLOR */
  88. box-shadow:0px 0px 0px rgba(0,0,0,.0);
  89. border-radius:0%;
  90. z-index:999999999999999999999999999999999999;
  91. }
  92.  
  93.  
  94. body {
  95. background-color:#f8f8f8; /* CHANGE BACKGROUND COLOR */
  96. margin:0px;
  97. color:#c6c6c6; /* CHANGE TEXT COLOR */
  98. font-family: 'Lato';
  99. animation: fadein 2s;
  100. line-height:100%;
  101. }
  102.  
  103. @keyframes fadein {
  104. from {
  105. opacity:0;
  106. }
  107. to {
  108. opacity:1;
  109. }
  110. }
  111. @-webkit-keyframes fadein {
  112. from {
  113. opacity:0;
  114. }
  115. to {
  116. opacity:1;
  117. }
  118. }
  119.  
  120. b {
  121. font-weight:bold;
  122. font-style:bold;
  123. color: #93cfc4; /* CHANGE BOLD COLOR */
  124. }
  125.  
  126. u {
  127. text-decoration:underline;
  128. border-bottom:1px solid #93cfc4; /* CHANGE UNDERLINE COLOR */
  129. padding-bottom:1px;
  130. }
  131.  
  132. .content2 i {
  133. font-style:italic;
  134. color: #707070; /* CHANGE ITALIC COLOR */
  135. }
  136.  
  137. a {
  138. color:#707070;
  139. text-transform:uppercase;
  140. cursor:help;
  141. text-decoration:none;
  142. -webkit-transition: all 0.8s;
  143. -moz-transition: all 0.8s;
  144. transition: all 0.8s;
  145. }
  146.  
  147. a:hover {
  148. color:#707070;
  149. cursor:help;
  150. -webkit-transition: all 0.8s;
  151. -moz-transition: all 0.8s;
  152. transition: all 0.8s;
  153. }
  154.  
  155.  
  156.  
  157. #container{
  158. margin-left:auto;
  159. margin-right:auto;
  160. margin-top:40px;
  161. background:#ffffff; /*CHANGE BRACKGROUND COLOR */
  162. width:400px;
  163. margin-bottom:50px;
  164.  
  165.  
  166. }
  167.  
  168. .content {
  169. background:transparent;
  170. text-align:justify;
  171. margin-left:auto;
  172. font-size:9px;
  173. margin-right:auto;
  174. width:400px;
  175. text-align:center;
  176. letter-spacing:1px;
  177. }
  178.  
  179. .content img {
  180. width:24px;
  181. height:24px;
  182. padding:5px;
  183. border-radius:50px;
  184. border:1px solid #f8f8f8; /* CHANGE IMAGE BORDER COLOR */
  185. }
  186.  
  187. .content2{
  188. background:#ffffff;
  189. text-align:justify;
  190. margin-left:auto;
  191. font-size:9px;
  192. column-count: 2; /* IF YOU WANT A SINGLE COLUMN, DELETE THIS PROPERTY */
  193. column-gap:15px; /* AND THIS ONE TOO */
  194. margin-right:auto;
  195. width:350px;
  196. padding:20px;
  197. letter-spacing:1px;
  198. }
  199.  
  200. .content-title {
  201. font-size:10px;
  202. letter-spacing:2px;
  203. text-transform:uppercase;
  204. width:100px;
  205. text-align:center;
  206. column-count:1;
  207. border-top:1px solid #f8f8f8; /* CHANGE THE COLOR OF THE TITLE BORDER */
  208. border-bottom:1px solid #f8f8f8; /* CHANGE THE COLOR OF THE TITLE BORDER */
  209. padding:5px;
  210. }
  211.  
  212.  
  213. .header {
  214. width:400px;
  215. height:250px;
  216. background:url(http://static.tumblr.com/lpfcy4l/zwMo7g66g/about.png); /* CHANGE THE URL OF THE IMAGE. KEEP IT MIND THAT IT *MUST* BE 400PX BY 250PX OTHERWISE IT WILL NOT LOOK OK */
  217. margin-bottom:10px;
  218. }
  219.  
  220. .header-text {
  221. position: absolute;
  222. width: 400px;
  223. height: 250px;
  224. font-size:25px;
  225. font-style:bold;
  226. font-weight:bold;
  227. text-align:center;
  228. margin-top:115px; /* CHANGE THE VERTICAL POSITION OF THE TITLE AND THE LINKS BY INCREASING OR DECREASING THIS NUMBER, IF YOU WISH */
  229. line-height:20px;
  230. letter-spacing:5px;
  231. color:#ffffff; /* TITLE COLOR */
  232. text-align: center;
  233. vertical-align:middle;
  234. }
  235.  
  236. .header-text a {
  237. font-size:12px;
  238. text-transform:uppercase;
  239. letter-spacing:2px;
  240. display:inline;
  241. color:#ffffff; /* CHANGE LINK COLOR */
  242. border-bottom:0px;
  243. padding:2px;
  244. -webkit-transition: all 0.8s;
  245. -moz-transition: all 0.8s;
  246. transition: all 0.8s;
  247. }
  248.  
  249. .header-text a:hover {
  250. font-size:12px;
  251. text-transform:uppercase;
  252. letter-spacing:2px;
  253. display:inline;
  254. color:#ffffff; /* CHANGE LINK HOVER COLOR */
  255. border-bottom:0px;
  256. -webkit-transition: all 0.8s;
  257. -moz-transition: all 0.8s;
  258. transition: all 0.8s;
  259. }
  260.  
  261. .tmblr-iframe--desktop-loggedin-controls, .iframe-controls--desktop, .tmblr-iframe, #tumblr_controls{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:0.5; display:none;}
  262.  
  263. /* ------------------- CREDITS DO NOT REMOVE --------------------- */
  264.  
  265. #cred a {
  266. color:#707070;
  267. letter-spacing:1px;
  268. font-size:9px;
  269. border-bottom:0px;
  270. text-transform:uppercase;
  271. padding:4px;
  272. }
  273.  
  274. #cred a:hover {
  275. color:#707070;
  276. padding:4px;
  277. }
  278.  
  279. #cred {
  280. width:auto;
  281. height:auto;
  282. bottom:15px;
  283. right:15px;
  284. padding:4px;
  285. z-index:1000000;
  286. font-size:8px;
  287. letter-spacing:1px;
  288. position:fixed;
  289. background-color:#ffffff;
  290. padding:5px;
  291. text-align:center;
  292. text-transform:uppercase;
  293. -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;
  294. }
  295.  
  296. {CustomCSS}</style>
  297.  
  298.  
  299. </head>
  300. <body>
  301.  
  302. <!-------------- DO NOT REMOVE --------------->
  303. <div id="cred"><a title="theme @imjaebumx" href="http://imjaebumx.tumblr.com">IJX</a></div>
  304. <!-------------- DO NOT REMOVE --------------->
  305.  
  306. <div id="container">
  307.  
  308. <div class="header">
  309. <div class="header-text">花樣年華<br><a href="/" title="go back"><i class="fa fa-home"></i></a> <a href="/ask" title="askbox"><i class="fa fa-envelope"></i></a> <a href="http://tumblr.com/dashboard" title="dashboard"><i class="fa fa-cog"></i></a></div>
  310.  
  311. </div>
  312.  
  313.  
  314. <div class="content">
  315. <br>
  316. <!---- IF YOU DO NOT WISH IT TO SHOW YOUR ICON DELETE FROM HERE ---->
  317. <center><img src="{PortraitURL-24}"></center>
  318. <!---- TO HERE ---->
  319.  
  320. <center><div class="content-title">profile</div></center>
  321.  
  322. <div class="content2">
  323.  
  324. <!-------------- ADD YOUR ABOUT ME FROM HERE --------------->
  325.  
  326. <!------- USE <BR> TO SKIP LINES AND <B>, <U> AND <I>
  327. TO CUSTOMIZE YOUR TEXT :) ----------->
  328.  
  329. your<br>
  330. <b>profile</b><br>
  331. <i>goes</i><br>
  332. <u>here</u><br><br>
  333. this is a double column text, but you have the option to change it to a single column in the css :) follow the instructions!
  334.  
  335. <!-------------- TO HERE --------------->
  336.  
  337. </div>
  338.  
  339.  
  340.  
  341. </div>
  342.  
  343.  
  344. </div>
  345.  
  346.  
  347.  
  348.  
  349. </body>
  350. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!