Advertisement
narruldthemes

about me theme

Jul 8th, 2013
1,365
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.62 KB | None | 0 0
  1.  
  2. <html>
  3. <head>
  4.  
  5. <!--THEME BY NARRULD do not copy or remove credit-->
  6.  
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  9. <head><title>{Title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  13. <link href='http://fonts.googleapis.com/css?family=Port+Lligat+Slab' rel='stylesheet' type='text/css'>
  14.  
  15. <!--Default Variables-->
  16. <!--Colors-->
  17.  
  18. <meta name="color:Background" content="#ffffff"/>
  19.  
  20. <!--Images-->
  21.  
  22. <meta name="image:Background" content=""/>
  23.  
  24. <link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
  25.  
  26. <link href='http://fonts.googleapis.com/css?family=Merienda:700' rel='stylesheet' type='text/css'>
  27.  
  28.  
  29. <style type="text/css">
  30.  
  31.  
  32. ::-webkit-scrollbar {height: auto;width: 13px;}
  33. ::-webkit-scrollbar-thumb {background-color:{color:scrollbar};}
  34. ::-webkit-scrollbar-track{background-color:{color:scrollbg};}
  35.  
  36.  
  37.  
  38. body {
  39. background-image: url('http://29.media.tumblr.com/tumblr_lxwynw0Pdg1r9g6hvo5_250.png');
  40. margin:0px;
  41. color:{color:text};
  42. font-family:calibri;
  43. font-size:10px;
  44. line-height:100%;
  45. }
  46.  
  47.  
  48. #description {
  49. position:fixed;
  50. background-color:#f1f1f1;
  51. color:#aaa;
  52. letter-spacing:1px;
  53. line-height: 120%;
  54. padding:15px;
  55. width:130px;
  56. margin-left:398px;
  57. margin-top:-40px;
  58. padding-bottom:50px;
  59. padding-top: 10px;
  60. height: 90px;
  61. overflow:auto;
  62. }
  63.  
  64. #sidebar #description {
  65. opacity:0;
  66. margin-left:398px;
  67. margin-top:-45px;
  68. -moz-transition-duration:0.5s;
  69. -webkit-transition-duration:0.5s;
  70. -o-transition-duration:0.5s;
  71. }
  72.  
  73. #sidebar:hover #description {
  74. opacity:1;
  75. margin-left: 585px;
  76. margin-top:-45px;
  77. -moz-transition-duration:0.5s;
  78. -webkit-transition-duration:0.5s;
  79. -o-transition-duration:0.5s;
  80. }
  81.  
  82. #description2 {
  83. position:fixed;
  84. background-color:#f1f1f1;
  85. color:#aaa;
  86. letter-spacing:1px;
  87. line-height: 120%;
  88. padding:15px;
  89. width:130px;
  90. margin-left:585px;
  91. margin-top:125px;
  92. padding-bottom:50px;
  93. padding-top: 10px;
  94. height: 90px;
  95. overflow:auto;
  96. }
  97.  
  98. #sidebar #description2 {
  99. opacity:0;
  100. margin-left:585px;
  101. margin-top:125px;
  102. -moz-transition-duration:0.5s;
  103. -webkit-transition-duration:0.5s;
  104. -o-transition-duration:0.5s;
  105. }
  106.  
  107. #sidebar:hover #description2 {
  108. opacity:1;
  109. margin-left: 585px;
  110. margin-top:310px;
  111. -moz-transition-duration:0.5s;
  112. -webkit-transition-duration:0.5s;
  113. -o-transition-duration:0.5s;
  114. }
  115.  
  116.  
  117. #description3 {
  118. position:fixed;
  119. background-color:#f1f1f1;
  120. color:#aaa;
  121. letter-spacing:1px;
  122. line-height: 120%;
  123. padding:15px;
  124. width:130px;
  125. margin-left:398px;
  126. margin-top:290px;
  127. padding-bottom:50px;
  128. padding-top: 10px;
  129. height: 90px;
  130. overflow:auto;
  131. }
  132.  
  133.  
  134. #sidebar #description3 {
  135. opacity:0;
  136. margin-left:398px;
  137. margin-top:300px;
  138. -moz-transition-duration:0.5s;
  139. -webkit-transition-duration:0.5s;
  140. -o-transition-duration:0.5s;
  141. }
  142.  
  143. #sidebar:hover #description3 {
  144. opacity:1;
  145. margin-left: 215px;
  146. margin-top:300px;
  147. -moz-transition-duration:0.5s;
  148. -webkit-transition-duration:0.5s;
  149. -o-transition-duration:0.5s;
  150. }
  151. #description4 {
  152. position:fixed;
  153. background-color:#f1f1f1;
  154. color:#aaa;
  155. letter-spacing:1px;
  156. line-height: 120%;
  157. padding:15px;
  158. width:130px;
  159. margin-left:215px;
  160. margin-top:105px;
  161. padding-bottom:50px;
  162. padding-top: 10px;
  163. height: 90px;
  164. overflow:auto;
  165. }
  166.  
  167.  
  168. #sidebar #description4 {
  169. opacity:0;
  170. margin-left:215px;
  171. margin-top:105px;
  172. -moz-transition-duration:0.5s;
  173. -webkit-transition-duration:0.5s;
  174. -o-transition-duration:0.5s;
  175. }
  176.  
  177. #sidebar:hover #description4 {
  178. opacity:1;
  179. margin-left: 215px;
  180. margin-top:-80px;
  181. -moz-transition-duration:0.5s;
  182. -webkit-transition-duration:0.5s;
  183. -o-transition-duration:0.5s;
  184. }
  185.  
  186. .sidebartitle {
  187. position:fixed;
  188. margin-top: -85px;
  189. margin-left: 445px;
  190. font-size: 15px;
  191. font-family: "Merienda";
  192. letter-spacing: 2px;
  193. color: #6d6d6d;
  194. text-align: center;
  195. }
  196.  
  197. .sidebartitle2 {
  198. position:fixed;
  199. margin-top: 205px;
  200. margin-left: 750px;
  201. font-size: 15px;
  202. font-family: "Merienda";;
  203. letter-spacing: 2px;
  204. color: #6d6d6d;
  205. text-align: center;
  206. -webkit-transform: rotate(90deg);
  207. -moz-transform: rotate(90deg);
  208. }
  209.  
  210. .sidebartitle3 {
  211. position:fixed;
  212. margin-top: 490px;
  213. margin-left:445px;
  214. font-size: 15px;
  215. font-family: "Merienda";
  216. letter-spacing: 2px;
  217. color: #6d6d6d;
  218. text-align: center;
  219. }
  220.  
  221. .sidebartitle4 {
  222. position:fixed;
  223. margin-top: 200px;
  224. margin-left: 160px;
  225. font-size: 15px;
  226. font-family: "Merienda";
  227. letter-spacing: 2px;
  228. color: #6d6d6d;
  229. text-align: center;
  230. -webkit-transform: rotate(-90deg);
  231. -moz-transform: rotate(-90deg);
  232. }
  233.  
  234. .sidebartitle5 {
  235. position:fixed;
  236. margin-top: 150px;
  237. margin-left:430px;
  238. font-size: 22px;
  239. font-family: "lily script one";
  240. letter-spacing: 2px;
  241. color: #6d6d6d;
  242. z-index: 99999;
  243. text-align: center;
  244. }
  245.  
  246.  
  247. #basiclinks {
  248. position:fixed;
  249. width:155px;
  250. height: 107px;
  251. font-size:12px;
  252. font-family:calibri;
  253. text-align:center;
  254. margin-top:280px;
  255. margin-left:662px;
  256. text-align:center;
  257. text-transform:uppercase;
  258. background-color: #f1f1f1;
  259. line-height: 150%;
  260. padding-top: 45px;
  261. }
  262.  
  263. #basiclinks a {
  264. display: block;
  265. padding: 6px;
  266. font-size: 12px;
  267. color: #aaa;
  268. }
  269.  
  270. #basiclinks a:hover {
  271. color:#6d6d6d;
  272. letter-spacing: 2px;
  273. }
  274.  
  275. #sidebar {
  276. width:100px;
  277. position:fixed;
  278. margin-left:260px;
  279. margin-top:150px;
  280. }
  281.  
  282. #sidebarimage {
  283. width 100px;
  284. }
  285.  
  286. #sidebarimage img {
  287. z-index: 9999;
  288. position: fixed;
  289. width:160px;
  290. height:160px;
  291. margin-left: 400px;
  292. margin-top: -55px;
  293. }
  294.  
  295.  
  296.  
  297. #sidebar #sidebarimage img {
  298. opacity:1;
  299. -moz-transition-duration:0.8s;
  300. -webkit-transition-duration:0.8s;
  301. -o-transition-duration:0.8s;
  302. }
  303.  
  304. #sidebar:hover #sidebarimage img {
  305. opacity:1;
  306. -moz-transition-duration:0.8s;
  307. -webkit-transition-duration:0.8s;
  308. -o-transition-duration:0.8s;
  309. -webkit-transform: rotate(360deg);
  310. -moz-transform: rotate(360deg);
  311. -o-transform: rotate(360deg);
  312. }
  313.  
  314.  
  315.  
  316.  
  317. #sidebar2 {
  318. width:100px;
  319. position:fixed;
  320. margin-left:260px;
  321. margin-top:400px;
  322. }
  323.  
  324. #sidebarimage2 {
  325. width 100px;
  326. }
  327.  
  328. #sidebarimage2 img {
  329. position: fixed;
  330. width:160px;
  331. height:160px;
  332. margin-left: 585px;
  333. margin-top:130px;
  334. }
  335.  
  336. #sidebar3 {
  337. width:100px;
  338. position:fixed;
  339. margin-left:260px;
  340. margin-top:400px;
  341.  
  342. }
  343.  
  344. #sidebarimage3 {
  345. width 100px;
  346. }
  347.  
  348. #sidebarimage3 img {
  349. position: fixed;
  350. width:160px;
  351. height:160px;
  352. margin-left: 400px;
  353. margin-top:310px;
  354. }
  355.  
  356. #sidebar4 {
  357. width:100px;
  358. position:fixed;
  359. margin-left:350px;
  360. margin-top:400px;
  361. }
  362.  
  363. #sidebarimage4 {
  364. width 100px;
  365. }
  366.  
  367. #sidebarimage4 img {
  368. position: fixed;
  369. width:160px;
  370. height:160px;
  371. margin-left:215px;
  372. margin-top:127px;
  373. }
  374.  
  375. #cred {
  376. position:fixed;
  377. font-size:10px;
  378. font-weight:normal;
  379. line-height:150%;
  380. letter-spacing:2px;
  381. right:10px;
  382. bottom:10px;
  383. text-transform:uppercase;
  384. text-align:center;
  385. font-family:calibri;
  386. }
  387.  
  388. #cred a {
  389. padding:2px;
  390. color:#575757;
  391. background-color:#fff;
  392. border:1px solid #ccc;
  393. padding:2px;
  394. -moz-transition-duration:0.5s;
  395. -webkit-transition-duration:0.5s;
  396. -o-transition-duration:0.5s;
  397. }
  398.  
  399.  
  400.  
  401. {CustomCSS}</style></head><body>
  402.  
  403. <div id="basiclinks">
  404. <a href="link">home</a>
  405. <a href="link">msg</a>
  406. <a href="link">face</a>
  407.  
  408.  
  409. <!-- to change your sidebar, copy the link of the image and put it where the sidebar urls are currently -->
  410.  
  411. </div>
  412. <div id="sidebar">
  413. <div id="sidebarimage"><img src="http://24.media.tumblr.com/644a19b3009ceb799a4b04fad92b121f/tumblr_mi2clbNtAa1rgunsqo2_250.jpg">
  414.  
  415. <div id="sidebarimage2"><img src="http://24.media.tumblr.com/780166b8792d04c9a59120ade5aab3bc/tumblr_mi2clbNtAa1rgunsqo9_250.jpg">
  416.  
  417. <div id="sidebarimage3"><img src="http://25.media.tumblr.com/4767cac3ffe060122fddaff02d54cdc3/tumblr_mi2clbNtAa1rgunsqo3_250.jpg">
  418.  
  419. <div id="sidebarimage4"><img src="http://25.media.tumblr.com/39fb11d9eb8d69dd59fa50a33c6eef6f/tumblr_mi2clbNtAa1rgunsqo6_250.jpg">
  420.  
  421. <!-- to change your section title for each sidebar, just replace one, two etc.. with what you want. make sure you dont remove anything -->
  422.  
  423. <div class="sidebartitle">one</div>
  424. <div class="sidebartitle2">two</div>
  425. <div class="sidebartitle3">three</div>
  426. <div class="sidebartitle4">four</div>
  427. <div class="sidebartitle5">about me</div>
  428.  
  429.  
  430. <!--to change your description, just replace what i wrote with your description. make sure that you dont accidently take away anything. for bullet points, put <li> at the beginning and end with </li>-->
  431.  
  432. <div id="description">this is your description.follow the instructions about how to type it in. theres four different sections for you to split up to talk about yourself. you can type in paragraphs or bullet points. you can make it as long as you want. keep typing and a scrollbar will appear. </div><br>
  433.  
  434. <div id="description2">this is your description.follow the instructions about how to type it in. theres four different sections for you to split up to talk about yourself. you can type in paragraphs or bullet points. you can make it as long as you want. keep typing and a scrollbar will appear. </div><br>
  435.  
  436. <div id="description3">this is your description.follow the instructions about how to type it in. theres four different sections for you to split up to talk about yourself. you can type in paragraphs or bullet points. you can make it as long as you want. keep typing and a scrollbar will appear. </div><br>
  437.  
  438. <div id="description4">this is your description.follow the instructions about how to type it in. theres four different sections for you to split up to talk about yourself. you can type in paragraphs or bullet points. you can make it as long as you want. keep typing and a scrollbar will appear. </div><br>
  439.  
  440.  
  441. </div>
  442. <div id="cred" style= "float: right; position: fixed; bottom: 8px; right:5px;"><a href="http://narruld.tumblr.com">CREDIT</a>
  443.  
  444. </body>
  445.  
  446. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement